@extends('layouts.app')
@push('style')    



    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    
 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.dataTables.css" />
    <link rel="stylesheet" type="text/css" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css"/>
 

    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.3/css/fixedHeader.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.2.0/css/dataTables.dateTime.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
 
    <!-- link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css" -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.css"/>
    <style>
  
        #tableCustomers.dataTable td:nth-child(1), #tableCustomers.dataTable th:nth-child(1){
            text-align:left;
        }
        #tableCustomers.dataTable td:nth-child(n+4):nth-child(-n+11), #tableCustomers.dataTable th:nth-child(n+4):nth-child(-n+11){
            text-align: center;text-wrap: nowrap;
        }
 
        #tableCustomers.dataTable th:nth-child(2), #tableCustomers.dataTable td:nth-child(2){
            text-align: center;

        } 

        div.dt-container div.dt-layout-cell {
    
                vertical-align: top !important;
                
        }

        
        span#basic-addon1 {
            width: fit-content;
            min-width: 10%;
        }

        .input-group.mb-0.me-0 {
            width: 356px;
            min-width: fit-content;
        }
        input#dates {
            text-align: end;
        }



        div.dt-container div.dt-search input {
            width: 356px; /* Set your desired width */
            display: block;
            padding: .375rem .75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--bs-body-color);
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: var(--bs-body-bg);
            background-clip: padding-box;
            border: var(--bs-border-width) solid var(--bs-border-color);
            border-radius: var(--bs-border-radius);
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }

        @media (min-width: 2400px) {
            
            div.dt-container div.dt-search input {
                width: 440px; /* Set your desired width */
            }
            .input-group.mb-0.me-0 {
                width: 440px;
            }
            }
    </style>

@endpush

@section('content')
 
<div class="container-fluid my-1  bg-light border shadow-lg rounded-3">
       
  
    <div class="row flex-nowrap p-2" id="2nd-row">
        @include('customer.components.leftpanel')
        <div class="col-md-10 flex-grow-1 " id="rightPanel">
            <div class="  d-flex navbar-item">
                           
                @include('customer.components.navbar')
            </div>    
            <div class="row px-2 pb-0   rounded-3 border shadow-lg">
                <div class="text-dark px-0">
                        <div id="info-message" class="mr-4 alert alert-danger 
                            @if (session('error')) 
                                    " >{{session('error')}}  
                            @else  
                                    d-none"> 
                            @endif  
                        </div>
                </div>
                <div id="ProductPanel" class="flex-row px-2 pb-2 ">                                
                    <div class="d-flex mb-0 ms-auto mt-3   justify-content-between py-2">
                            <div class="  ">                               
                                <label class="checkbox-inline  " style="margin-left: 20px !important;">
                                <input type="checkbox" class="ms-0" checked name="activefilter" id="activefilter" data-toggle="toggle" data-on="{{ __('applabels.ProductActive') }}" data-off="{{ __('applabels.ProductInactive') }}" data-onstyle="success" data-offstyle="danger" data-size="small">                                
                                </label>
                            </div>
                            <div class=" ">
                                <select class="form-select form-control-sm fs-6" style="min-width:140px" name="genderfilter" id="genderfilter" aria-label="Select ...">     
                                        <option value='' selected>{{ __('applabels.CustomerGender') }}</option> 
                                </select>        
                            </div>
                            <div class=" ">
                                <div class="input-group mb-0 me-1">
                                    <span class="input-group-text" id="basic-addon1" title="{{ __('applabels.CustomerBirthdate') }}">   <i class="fa-solid fa-cake-candles"></i> </span> 
                                    <input class="form-control  px-2 py-1 me-0" type="text"  name="birthdates" id="birthdates"  aria-describedby="basic-addon1">
                                </div>
                                 
                             </div>   
                            <div class=" ">                            
                                <div class="input-group mb-0 me-0">
                                    <span class="input-group-text" id="basic-addon1">  <i class="fa fa-calendar"></i> </span> 
                                    <input class="form-control  px-2 py-1 me-0" type="text"  name="dates" id="dates"  aria-describedby="basic-addon1">
                                </div>
                        
                                    
                             </div>                                                  
                    </div><!-- filter section -->
                    <table id="tableCustomers" class="table table-bordered table-hover table-striped bg-white"  style="width:100%" data-show-custom-view="true" data-custom-view="customViewFormatter" data-show-custom-view-button="true" data-custom-view-default-view="true">
                        <thead style="border-top:1px">
                            <!-- th >{{ __('applabels.ID') }}</th -->
                            <th class="col-4 text-nowrap">{{ __('applabels.CustomerName') }}</th>
                            <th class="col-3 ">{{ __('applabels.CustomerPhone' ) }}</th>
                            <th class="col-5">{{ __('applabels.CustomerEmail' ) }}</th>
                            <th class="">{{ __('applabels.CustomerActive' ) }}</th> 
                            <th class=" text-nowrap">{{ __('applabels.Date' ) }}</th>
                            <th class="">{{ __('applabels.datatable Edit' ) }}</th>
                            <th class="">{{ __('applabels.datatable Delete' ) }}</th>
                        </thead>
                        <tbody></tbody>
                    </table>
            
                    <div class="card-footer bg-transparent">
                        <input type="hidden" name="afterID" id="afterID" value="" />
                        <input type="hidden" name="beforeID" id="beforeID" value="" />
                        <small class="px-4">
                            
                        </small>
                    </div>
                        
                </div>
            </div>
    </div>
</div>


@include('customer.components.modalcreatesimple')
@include('components.modal-delete-confirm')
@push('scripts') 
 
@include('includes.datatablesjs')


<script type="text/JavaScript" >

 
    const modalCustomer = new bootstrap.Modal('#modalCustomers')
    const modalConfirmDelete = new bootstrap.Modal('#modalConfirmDelete')

    let  splitarray = new Array();
    let $categoryFilter = null;
    
    DataTable.ext.buttons.newitem = {
           action: function (e, dt, node, config) {

               // reset values in form
               $('#cname').val('');
               $('#cphone').val('');
               $('#cemail').val('');
               modalCustomer.show();
           }
    };


    DataTable.ext.buttons.newfullitem = {
           action: function (e, dt, node, config) {
              
                document.location.href =  "{{  LaravelLocalization::localizeUrl('/customers/new/') }}"  
           }
    };


    $(document).ready(function() {
        let customersTable = $('#tableCustomers').DataTable({
                
            ajax: {
                    url: "{{ url('/customers/get') }}",
                    type: "post",
                    data:  function (d) {
                        d.dates = $('#dates').val() ,
                        d.birthdates = $('#birthdates').val() ,
                        //d.dateMax= $('#dates').data('daterangepicker').endDate,
                        d.gender = $('#genderfilter').val() ,
                        d.active = $('#activefilter').is(":checked");   
                        d.search = $('input[type="search"]').val()
                    }
                },
                serverSide: true,
                processing: true, 

                columnDefs: [{
                    targets: 4,
                    orderable: true,
                    searchable: true
                    },
                    { targets: [0, 1, 2, 3, 5, 6], orderable: false, searchable: true},
                ],  
                 
             
                order: [[4, 'desc']],
                layout: {
                    top2Start: {
                        buttons: [
                            {
                                extend: 'excelHtml5',
                                text: '<i class="fa-regular fa-file-excel"></i>',
                                className: 'btn btn-primary btn-sm',
                                titleAttr: 'Excel',
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                },
                                
                                title: '',
                                exportOptions: {
                                    columns: [ 0, 1, 2  ],
                                  //  orthogonal: null,
                                },
                                customize: function (xlsx) {
                                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
                                
                                    // Set the alignment for all cells in the first column (column A)
                                    // $('row c[r^="A"]', sheet).each(function() {
                                    //   $(this).attr('s', '52'); // '52' is for right-aligned text
                                    //});
                                    // Set the alignment for the first row (table title)
                                    // $('row:first c', sheet).attr('s', '51'); // '51' is for center-aligned text
                                    // $('row:first c', sheet).attr( 's', '42' );

                                    $('row c[r^="A"]', sheet).each(function() {
                                       // $(this).attr('s', '51'); // '50' is for right-aligned text
                                    });
                                    $('row c[r^="B"]', sheet).each(function() {
                                        //$(this).attr('s', '51'); // '52' is for right-aligned text
                                    });
                                    $('row c[r^="C"]', sheet).each(function() {
                                     //   $(this).attr('s', '50'); // '52' is for right-aligned text
                                    });
                                    $('row c[r^="D"]', sheet).each(function() {
                                        $(this).attr('s', '51'); // '52' is for right-aligned text
                                    });
                                    /*$('row c[r^="E"]', sheet).each(function() {
                                        $(this).attr('s', '51'); // '52' is for right-aligned text
                                    });*/
                                    // Set bold text for column headers
                                    $('row:nth-child(1) c', sheet).attr('s', '2'); // '2' is for bold text
                                     
                                    //$('row:nth-child(1) c', sheet).attr('s', '51');
                                }
                            },
                            {
                                extend: 'pdfHtml5',
                                text: '<i class="fa-solid fa-file-pdf"></i>',
                                className: 'btn btn-primary btn-sm',
                                titleAttr: 'PDF',
                                orientation: 'Landscape',
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                },
                                
                                title: '',
                                exportOptions: {
                                    columns: [   0, 1, 2 ],
                                    orthogonal: "myExport"
                                },
                                customize: function (doc) {
                                     
                                    
                                    doc.content[0].table.widths = [ '*', '*', '*' ];
                                    doc.content[0].table.alignment = [ 'left', 'center', 'left' ];
                                    console.log(document.getElementById("tableCustomers"));
                                    var rowCount = document.getElementById("tableCustomers").rows.length;
                                        for (i = 0; i < rowCount; i++) {
                                             
                                            doc.content[0].table.body[i][2].alignment = 'left';
                                            doc.content[0].table.body[i][1].alignment = 'left';
                                            doc.content[0].table.body[i][0].alignment = 'left';
                                        };
                                     
                                    
                                }
                            },
                            {
                                extend: 'print',
                                text: '<i class="fa-solid fa-print"></i>',
                                className: 'btn btn-primary btn-sm',
                                titleAttr: 'Print',
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                },
                                
                                title: '',
                                exportOptions: {
                                    columns: [ 0, 1, 2 ]
                                },
                                customize: function (win,conf,table) {
                                    $(win.document.body)
                                        .css('font-size', '12pt')
                                        /*.prepend(
                                            '<img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
                                        );*/
            
                                    $(win.document.body)
                                        .find('table')
                                        .addClass('compact')
                                        .css('font-size', 'inherit');
                                    $(win.document.body).find('td').each(function (index) {
                                      
                                        $(this).css('text-align', 'left');
                                    });
                                    $(win.document.body).find('th').each(function (index) {
                                       
                                        $(this).css('text-align', 'left');
                                    });
                                    
                                }
                                
                
                            }, 
                            {
                                extend: 'newfullitem',
                                text: '<i class="fa-solid fa-user-tie"></i>',
                                className: 'btn btn-danger btn-sm',
                                titleAttr: 'New Customer Full',
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                }
                            },
                            {
                                extend: 'newitem',
                                text: '<i class="fa-solid fa-square-plus"></i>',
                                className: 'btn btn-danger btn-sm',
                                
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                }
                            }
                        ],
                       
                    },
                    topStart: { 
                        info: { 
                            text: 'Showing _START_ to _END_ of _TOTAL_ records'
                        },
                    },
                    topEnd:{
                            search: {
                                placeholder: 'Type search here'
                            }
                        },
                    bottomStart:  'pageLength', 
                  
                    bottomEnd: { 
                        paging: { 
                            
                            firstLast: false
                             
                        }
                    }
                }, 
                initComplete: function () {
                                    $('#tableCustomers_info').addClass('small');
                                    $('#dt-search-0').removeClass('w-60');
                                    $('#dt-search-0').addClass('px-2');
                                    $('#dt-search-0').parent().parent().addClass('ps-0');                                    
                                    $("label[for='dt-search-0']").addClass('d-none');
                },
                language: { search: '', 
                            searchPlaceholder: "Search..." , 
                            paginate: {
                                previous: '<span class="prev-icon"></span> Previous',
                                next: 'Next <span class="next-icon"></span>' ,
                            }
                },
                pageLength: 10,
                
                scroller: false,
             
                
                //{"id":1,"pname":"Camisola","pdescription":"Descri\u00e7\u00e3o da Camisola","pmaterial":"Algod\u00e3o","price":20.5,"reference":"","active":1,"hidden":0,"sku":"123-BA-245","brandname":"HugoBoss","gender":"masculino","supplier":"Amazon","sizetype":"Pants"}*/
                columns: [
                        //{data: 'id',  render: function ( data, type ) {  return    data;},  orderable: false }, 
                        {data: 'name',   render: function ( data, type ,row, meta ) {  return   '<div  class="div-edit-client text-nowrap">'+data+'<button class="btn btn-sm btn-phone-copy" onclick="copyToClipBoard(\''+data+'\')"><i class="fa-solid fa-copy"></i></button></div>';}},
                        {data: 'phone1',  render: function ( data, type, row, meta ) {  return  ( data !== null ) ?   '<div  class="div-edit-client text-nowrap">'+data+'<button class="btn btn-sm btn-phone-copy" onclick="copyToClipBoard(\''+data+'\')"><i class="fa-solid fa-copy"></i></button></div>' : '' ;}},
                        {data: 'email',   render: function ( data, type, row, meta ) {  return   ( data !== null ) ? '<div  class="div-edit-client text-nowrap">'+data+'<button class="btn btn-sm btn-phone-copy" onclick="copyToClipBoard(\''+data+'\')"><i class="fa-solid fa-copy"></i></button></div>' : '';}},
                        {data: 'active',  orderable: false ,  render: function ( data, type, row, meta ) {  return (data == 1) ? '<i class="fa-solid fa-eye text-success"></i>' : '<i class="fa-solid fa-eye-slash text-danger"></i>'  ;  }},/*active*/
                        {data: 'created_at',   render: function ( data, type ) {  return    '<span class="fs-6">'+moment(data).format("YYYY-MM-DD");+'</span>'  }},
                        {data: 'id',  orderable: false ,  render: function ( data, type ) { return '<button class="btn btn-secondary btn-sm text-white" id="btn-edit'+data+'" data-bs-toggle="tooltip" data-bs-html="true" title="'+
                                '{{ __("applabels.datatable Edit") }}" onclick="editClient('+data+')"><i class="fa-solid fa-pencil"></i></button>';  }}, /* edit */
                        {  //DELETE COMMENTS
                        data: 'id',  orderable: false , render: function (data, type, row, meta) {
                                return '<button class="btn btn-danger btn-sm text-white" id="btn-delete'+data+'" data-bs-toggle="tooltip" data-bs-html="true" title="'+
                                '{{ __("applabels.datatable Delete") }}" onclick="deleteClient('+data+',`'+row['name']+'`)"><i class="fa-solid fa-trash-can"></i></button>';
                             }
                        } 
                    
                    ],
                "drawCallback": function(data,  settings ) {
 
                    console.log($('#genres option').length);
                    if ($('#genderfilter option').length < 2){
                        $.ajax({
                            type: 'POST',
                            url: "/customersGenders/get",
                            success: function(data) {
    
                                for(var i = 0; i< data.length;i++){
                                    firstCategory = data[i]['id']; 
                                    $('#genderfilter').append( '<option value="'+data[i]['id']+'"  >'+data[i]['name']+'</option>');
                                } 
                            },

                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                alert(textStatus);
                            }
                        });
                    
                 
                }
                    
                    
                }
                
            });
           
        $('[type=search]').each(function () {
            $(this).attr("placeholder", "{{__('applabels.datatable Search')}}");
            //  $(this).before('<span class="fa fa-search"></span>');
            $(this).removeClass('form-control form-control-sm').addClass('input w-60')
        });
       
    
    
        /** 
        customersTable.on('click', 'td:last-child', function (event) { // DELETE 
                var data = customersTable.row(this).data();
                console.log(data);
                alert( 'You clicked on '+data['_id']+'\'s row' );
                let id = data['id'];
                $('#modalConfirmTitle').html("{{__('applabels.DeleteItem')}}" );
                $('#modalHeaderMessage').html("");
                $('#confirmDeleteMessage').html("{{__('applabels.Confirm if you want to delete')}}"+data['name'] )
                $('#deleteId').val(data['id']);
                modalConfirmDelete.show();
        } );
 */
       

        customersTable.on('click', 'td:nth-last-child(4)', function (event) { // ACTIVE 
            var data = customersTable.row(this).data();
            console.log(data);
                //alert( 'ACTIVE You clicked on '+data['id']+'\'s row' );
            let id = data['id'];
            let active = (data['active'] == 1) ? 0:1;

            $.ajax({
                url: `{{ url('/customers/flagActive') }}/${id}/${active}`,
                method: "post",
                success: function(response) {
                    console.log('response', response);
                    customersTable.draw(false);
                    
                    
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    let error = jqXHR.responseJSON;
                        $("#info-message").removeClass('d-none');
                        $("#info-message").html("Erro: "+ errorThrown);
                        
                        
                }
            });
                
        } );
         
         customersTable.on('click', 'td:nth-last-child(n+5)', function (event) { //EDIT 
                if(event.isPropagationStopped())
                    return; // propagation was stopped, so stop further execution
                var data = customersTable.row(this).data();
                console.log(  data);
                
                id = data['id'];
                document.location.href =  "{{  LaravelLocalization::localizeUrl('/customers/edit/') }}" + '/'+id 
                   
            }); 
        customersTable.on('click', 'td:nth-last-child(2)', function (event) { //EDIT 
                var data = customersTable.row(this).data();
                console.log(  data);
                let id = data['id'];
                $.ajax({
                    type: 'GET',
                    url: `{{ url('/customers/get') }}/${id}` ,
                    success: function(response) {
                        console.log(response);
                        let client = response;
                        $('#cid').val(client['id']);
                        $('#cname').val(client['name']);
                        $('#cphone').val(client['phone1']);
                        $('#cemail').val(client['email']); 
                        
                        client['active'] ? 	$('#cactive').bootstrapToggle('on') : 	$('#cactive').bootstrapToggle('off');
                        
                        modalCustomer.show();
                    },

                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log(textStatus);
                    } 
                })
                
            });
        
        
        $('#genderfilter').on('change',function loadSubCateogries (e) {
            customersTable.draw(false);
        });
        $('#activefilter').on('change',function loadSubCateogries (e) {             
             customersTable.draw(false); 
        });
        $('#dates').on('apply.daterangepicker', function(ev, picker){
            customersTable.draw(false);
        });

        $('#birthdates').on('apply.daterangepicker', function(ev, picker){
            customersTable.draw(false);
        })
        $('#customerForm').on('submit',function saveProduct (e) {
            e.preventDefault();

            var form = $("#customerForm")


            if (form[0].checkValidity()) {
                form.addClass('was-validated');
            
                var formData  = form.serializeArray(); //serialize
                const openProductPage = $("#openpage").is(":checked");
                console.log('openPage: '+openProductPage);
                console.log(formData);
                 
                $.ajax({
                        type: 'POST',
                        url: `{{ url('/customers/new') }}`,
                        data: formData,
                        datatype: "json",
                        success: function(response) {
                            console.log(response, ' Resposta AJAX')
                            
                            modalCustomer.hide()
                            if(openProductPage) {
                                document.location.href =  "{{  LaravelLocalization::localizeUrl('/customers/edit/') }}" + '/'+response['id']
                            } else { 
                                //$('#customerForm').trigger("reset");
                            
                                customersTable.draw(false); 
                                
            
                            }
                        }, 
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            console.log (textStatus);
                        }
                    }); 
            
            } else { 
                form[0].reportValidity();
                event.preventDefault()
                event.stopPropagation()
            }

        });


            
        $('#modalBtnDelete').on('click', function  deleteProduct (){
            id = $('#deleteId').val();
            if (id != ''){
                $.ajax({
                    url: `{{ url('/customers/hide') }}/${id}`,
                    method: "post",
                    success: function(response) {
                        console.log('response', response);
                        //if (response.success) {
                        customersTable.draw(false);
                        //window.location.reload();
                        //}
                        
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        let error = jqXHR.responseJSON;
                            $("#info-message").removeClass('d-none');
                            $("#info-message").html("Erro: "+ errorThrown);
                            
                            
                    }
                });
            }
        });

    });

 
    $('#addCustomer').on('click', function populateDropdown() {
           
           //$('#myModal').modal('show');  //this load modal view
           $.ajax({
               type: 'POST',
               url: "/customersGenders/get",
               success: function(data) {

                   $('#gendersId').empty();
                   for(var i = 0; i< data.length;i++){
                       $('#gendersId').append('<option value="'+data[i]['id']+'">'+data[i]['name']+'</option>');
                   } 
               },

               error: function(XMLHttpRequest, textStatus, errorThrown) {
                   alert(textStatus);
               }
           }) 
    });
  
   

   
    $('#dates').daterangepicker({
        ranges: {
            'Today': [moment(), moment()],
        
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], 
            'This Year': [moment().startOf('year'), moment().endOf('year')],
            'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'month').endOf('month')]
        },
        opens: 'left',
        locale: {
                format: 'DD/MM/YYYY'
            },
        "alwaysShowCalendars": true,
        "startDate": moment().subtract(29, 'days'),
        "endDate":moment()
        
    }, function(start, end, label) {
        console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    });

    $('#birthdates').daterangepicker({
        ranges: {
            'Today': [moment(), moment()],
        
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], 
            'This Year': [moment().startOf('year'), moment().endOf('year')],
            'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'month').endOf('month')]
        },
        opens: 'right',
        locale: {
                format: 'DD/MM/YYYY'
            },
        "alwaysShowCalendars": true,
        "autoUpdateInput": false, 
        "startDate": moment().subtract(29, 'days'),
        "endDate":moment()
        
    }, (from_date, to_date) => {
  //console.log(from_date.toDate(), to_date.toDate());
  $('#birthdates').val(from_date.format('DD/MM/YYYY') + ' - ' + to_date.format('DD/MM/YYYY'));
})

/*function(start, end, label) {
        console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    });
*/
    //$('#birthdates').on('apply.daterangepicker', function (ev, picker) {
     //   $('#birthdates').daterangepicker({autoUpdateInput: false}, 

    $('#birthdates').on('cancel.daterangepicker', function (ev, picker) {
        $(this).val('');
    });
    
    $("#modalCustomers").on("hidden.bs.modal", function () {  
        $("#modalCustomers").trigger("reset");
        $("#customerForm input[type='text'],input[type='number']").val('');  
        
        $("#customerForm").removeClass('was-validated');
        $("#customerForm input[type='text'],input[type='password']").each(function () {  
            $(this).removeClass('form-control input-validation-error');  
            $(this).removeClass('form-control is-valid');
            $(this).removeClass('was-validated');
            $(this).removeClass('was-validated');
            $(this).addClass("form-control");  
        });  
        $(".field-validation-error").text('');  
        
    });  



        $.fn.isValid = function(){
        return this[0].checkValidity()
        }

   
      function copyToClipBoard(value){
         // event.preventDefault()
          
          navigator.clipboard.writeText(value);
         // e.stopPropagation();
         // return false;
        };

        function deleteClient (id, name) { // DELETE 
           
                console.log(id +  name);
               
                 
                $('#modalConfirmTitle').html("{{__('applabels.DeleteItem')}}" );
                $('#modalHeaderMessage').html("");
                $('#confirmDeleteMessage').html("{{__('applabels.Confirm if you want to delete')}} "+name );
                $('#deleteId').val(id);
                modalConfirmDelete.show();
        };

        function editClient (id) { //EDIT 
                 
                console.log(  id);
                 
                $.ajax({
                    type: 'GET',
                    url: `{{ url('/customers/get') }}/${id}` ,
                    success: function(response) {
                        console.log(response);
                        let client = response;
                        $('#cid').val(client['id']);
                        $('#cname').val(client['name']);
                        $('#cphone').val(client['phone1']);
                        $('#cemail').val(client['email']); 
                        
                        client['active'] ? 	$('#cactive').bootstrapToggle('on') : 	$('#cactive').bootstrapToggle('off');
                        
                        modalCustomer.show();
                    },

                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log(textStatus);
                    } 
                })
                
        };
       /* $('.div-edit-client').on('click',  function (event) { //EDIT 
                var data = customersTable.row(this).data();
                console.log(  data);
                
                id = data['id'];
                document.location.href =  "{{  LaravelLocalization::localizeUrl('/customers/edit/') }}" + '/'+id 
                   
            });*/
        $(document).ready(function() {
            $('#tableCustomers tbody').on( 'click', 'button', function (e) {
            e.stopPropagation();
            } );
        });

        </script>

 
    @endpush
@endsection