@extends('layouts.app')
@section('styles')
    <link href="{{ asset('assets/css/custom_style.css') }}" rel="stylesheet" />
@endsection

@section('content')

    <!-- PAGE-HEADER -->
    <div class="page-header">
        <h1 class="page-title">Manage Customers</h1>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:void(0)">Customers</a></li>
                <li class="breadcrumb-item active" aria-current="page">Add Customers</li>
            </ol>
        </div>
    </div>
    <!-- PAGE-HEADER END -->

    <!-- ROW-1 OPEN -->
    @canany(['customer-create', 'customer-edit'])
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Add Customer</h3>
                    </div>
                    <div class="card-body">
                        <form method="POST" id="createForm" class="myform" enctype="multipart/form-data">
                            <input id="csrf_token" type="hidden" value="{{ csrf_token() }}">
                            <input id="customer_id" name="customer_id" type="hidden" value="">

                            @csrf
                            <div class="form-row">
                                <div class="col-xl-4 mb-3">
                                    <label for="validationTooltip01">Name *</label>
                                    <input data-parsley-required-message="Name Required" type="text" class="form-control"
                                        name="name" id="name" value="" required>
                                </div>
                                <div class="col-xl-4 mb-3">
                                    <label for="validationTooltip01">Mobile *</label>
                                    <input data-parsley-required-message="Mobile Required" type="text" class="form-control"
                                        name="mobile" id="mobile" value="" required>
                                </div>
                                <div class="col-xl-4 mb-3">
                                    <label for="validationTooltip01">Email </label>
                                    <input type="text" class="form-control" name="email" id="email" value="">
                                </div>
                                <div class="col-xl-4 mb-3">
                                    <label for="validationTooltip01">Company</label>
                                    <input data-parsley-required-message="Company Required" type="text" class="form-control"
                                        name="company" id="company" value="" >
                                </div>
                                <div class="col-xl-4 mb-3">
                                    <label for="validationTooltip01">Address</label>
                                    <input data-parsley-required-message="Address Required" type="text" class="form-control"
                                        name="address" id="address" value="" >
                                </div>
                                <div class="col-xl-4 mb-3">
                                    <label for="validationTooltip01">City</label>
                                    <input data-parsley-required-message="City Required" type="text" class="form-control"
                                        name="city" id="city" value="" >
                                </div>
                                <div class="col-xl-4 mb-3">
                                    <label for="validationTooltip01">Country</label>
                                    <input data-parsley-required-message="Country Required" type="text" class="form-control"
                                        name="country" id="country" value="" >
                                </div>
                                <div class="col-xl-4 mb-3">
                                    <label for="validationTooltip01">Pincode</label>
                                    <input data-parsley-required-message="Pincode Required" type="text" class="form-control"
                                        name="pincode" id="pincode" value="" >
                                </div>
                                {{-- <div class="col-xl-4 mb-3">
                                    <label for="validationTooltip02">Profile Photo (150x150px)</label>
                                    <input type="file" data-parsley-required-message=""
                                        class="form-control custom-input-file" name="image" id="image" value="">
                                </div> --}}




                                {{-- <div class="form-group col-xl-4 mb-3">
                                    <label for="validationTooltip01">Select Roles *</label>

                                    <select data-parsley-required-message="Roles required" required multiple="multiple"
                                        class="filter-multi" name="roles[]" id="roles">
                                        @foreach ($roles as $role)
                                            <option value="{{ $role }}">{{ $role }}</option>
                                        @endforeach
                                    </select>
                                </div> --}}

                                {{-- <div class="col-xl-4 mb-3">
                                    <label for="validationTooltip01">customer Name * </label>
                                    <input type="text" data-parsley-required-message="customer ID Required" class="form-control"
                                        name="customername" id="customername" value="" required>
                                </div> --}}
                                <div class="col-xl-4 mb-3">
                                    <label for="validationTooltip01">Password * </label>
                                    <input type="text" data-parsley-required-message="Password Required" class="form-control"
                                        name="password" id="password" value="12345678" required>
                                </div>
                                <div class="col-xl-4 mb-3">
                                    <label for="validationTooltip01">Confirm Password * </label>
                                    <input type="text" data-parsley-required-message="Confirm Password Required"
                                        class="form-control" name="confirm_password" id="confirm_password" value="12345678"
                                        required>
                                </div>


                            </div>
                            @can('customer-create')
                                <a id="create_btn" href="#"
                                    onclick="createOrUpdate('{{ route('add_customer') }}', 'createForm', '', 'table_datatable','')"
                                    class="btn btn-primary"><i class="fa fa-save"></i> Save</a>
                            @endcan
                            @can('customer-edit')
                                <a id="update_btn" style="display: none" href="#"
                                    onclick="createOrUpdate('{{ route('update_customer') }}', 'createForm', '', 'table_datatable','')"
                                    class="btn btn-primary"><i class="fa fa-save"></i> Update</a>
                            @endcan
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endcanany
    <!-- /ROW-1 CLOSED -->
    <!-- Row -->
    @can('customer-list')
        <div class="row row-sm">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">View Roles</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered text-nowrap border-bottom " style="width: 100% !important;"
                                id="table_datatable">
                                <thead class="text-center">
                                    <tr>
                                        <th class="wd-15p border-bottom-0">#</th>
                                        {{-- <th class="wd-15p border-bottom-0">customer ID</th> --}}
                                        <th class="wd-15p border-bottom-0">Name</th>
                                        <th class="wd-15p border-bottom-0">Mobile </th>
                                        <th class="wd-15p border-bottom-0">Email </th>
                                        <th class="wd-15p border-bottom-0"> Actions </th>
                                    </tr>
                                </thead>

                            </table>
                            <div class="col-sm-12 col-md-12">
                            </div>
                        </div>
                    </div>


                </div>

            </div>
        </div>
    @endcan

    <!-- End Row -->
    <div class="modal  fade" id="smallmodal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete</h5>
                    <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Do you want to delete.. ?</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button onclick="delete_item()" class="btn btn-primary">Delete</button>
                </div>
            </div>
        </div>
    </div>
    {{-- ####################delete Model############################# --}}
    {{-- #########################View Modal################################### --}}
    <div class="modal fade" id="scrollingmodal" tabindex="-1" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="view_modal_title"></h5>
                    <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body" id="view_modal_body">

                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    {{-- #########################End Of View Modal############################ --}}




@endsection

@section('scripts')
    {{-- ################################Jquery Datatable########################### --}}
    <script src="{{ asset('assets/jquery-datatable/jquery.min.js') }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/jquery-datatable/jquery.dataTables.css') }}">
    <script src="{{ asset('assets/jquery-datatable/jquery.dataTables.js') }}"></script>
    {{-- ########################################################################## --}}
    <script>
        var token = $("meta[name=csrf-token]").attr("content");
        var datatable_name = "table_datatable";
        $('#table_datatable').DataTable({
            "responsive": true,
            "serverSide": true,
            "ordering": true,
            "searching": true,
            "bLengthChange": true,
            "info": false,
            "bSort": true,
            "order": [
                [0, 'desc']
            ],
            "columnDefs": [{
                    "targets": [0, 3],
                    "orderable": true
                },
                {
                    "className": "text-center",
                    "targets": [0, 4]
                },
                {
                    "className": "text-left",
                    "targets": [1,2, 3]
                }

            ],
            "displayLength": 10,
            "ajax": {
                "url": "{{ route('customer_datatable')}}",
                "type": "post",
                "data": function(data) {
                    data._token = token;

                    return data;

                }
            },
            "AutoWidth": true,
            "columns": [{
                    "data": "id",
                    "name": "id"
                },
                // {
                //     "data": "user_unique_id",
                //     "name": "user_unique_id"
                // },
                {
                    "data": "name",
                    "name": "name"
                },
                {
                    "data": "mobile",
                    "name": "mobile"
                },
                {
                    "data": "email",
                    "name": "email"
                },
                {
                    "data": "id",
                    "name": "id"
                },
            ],

            "fnCreatedRow": function(nRow, aData, iDataIndex) {
                var info = this.dataTable().api().page.info();
                var page = info.page;
                var length = info.length;
                var index = (page * length + (iDataIndex + 1));
                var action = "";
                //View action
                var action = action + '&nbsp;<button title="View" onclick=view(' + aData.id +
                    ') id="bEdit" type="button" class="btn btn-sm btn-primary"><span class="fe fe-eye"> </span></button>';
                //Edit Action
                @can('customer-edit')
                    var action = action + '&nbsp;<button title="Edit"  onclick=edit(' + aData.id +
                        ') id="bEdit" type="button" class="btn btn-sm btn-primary"><span class="fe fe-edit"> </span></button>';
                @endcan
                //Delete Action
                @can('customer-delete')
                    var action = action + '&nbsp;<button title="Delete" onclick="delete_modal(' + aData.id +
                        ')" id="bDel" type="button" class="btn  btn-sm btn-danger"><span class="fe fe-trash-2"> </span></button>';
                @endcan
                $('td:eq(0)', nRow).html(index);
                $('td:eq(4)', nRow).html(action);
            }
        });

        // #################### Edit Section ############################
        function edit(id) {
            $.ajax({
                type: 'POST',
                data: {
                    "_token": token,
                    "id": id
                },
                url: '{{ route ("edit_customer")}}',
                success: function(result) {
                    $('#customer_id').val(result.customer.id);
                    $('#name').val(result.customer.name);
                    $('#mobile').val(result.customer.mobile);
                    $('#email').val(result.customer.email);
                    $('#company').val(result.customer.company);
                    $('#address').val(result.customer.address);
                    $('#city').val(result.customer.city);
                    $('#country').val(result.customer.country);
                    $('#pincode').val(result.customer.pincode);
                    // $('#customername').val(result.customer.customername);
                    // $('#seller').val(result.customer.seller_id);
                    // var roles = result.customerRole;
                    // $select = $("#roles");
                    // $(function() {
                    //     var roles_array = [];
                    //     $.each(roles, function(index, roles) {
                    //         roles_array.push(roles);
                    //     });
                    //     $select.multipleSelect();
                    //     $select.multipleSelect("setSelects", roles_array);
                    // });
                    $('#password').attr('required', false).val('');
                    $('#confirm_password').attr('required', false).val('');
                    $('#create_btn').hide();
                    $('#update_btn').show();
                    $('#back-to-top').click();

                }
            })
        }
        // #################### End Of Edit Section ####################
        // #################### Delete Section ##########################
        function delete_modal(id) {
            $('#customer_id').val(id);
            $('#smallmodal').modal('show');
        }

        function delete_item() {
            var id = $('#customer_id').val();
            $.ajax({
                type: 'POST',
                data: {
                    "_token": token,
                    "id": id
                },
                url: '{{ route ("delete_customer")}}',
                success: function(result) {
                    $('#smallmodal').modal('hide');
                    toast(result, datatable_name);
                }
            })
        }
        // #################### End Of Delete Section ##################
        // #################### View Section #########################
        // function view(id) {
        //     $.ajax({
        //         type: 'POST',
        //         data: {
        //             "_token": token,
        //             "id": id
        //         },
        //         url: '{{ route ("customer_view")}}',
        //         success: function(result) {
        //             $('#view_modal_title').text('customer Details');
        //             $('#view_modal_body').html(result);
        //             $('#scrollingmodal').modal('show');
        //         }
        //     })
        // }
        function view(id){
            $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '{{ route ("customer_view")}}',
                        success: function (result) {    
                           $('#view_modal_body').html(result);
                           $('#scrollingmodal').modal('show');
                        }
                    })
        }
        //    #################### End Of View Section ##################
    </script>
@endsection