@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://cdn.datatables.net/fixedheader/3.2.3/css/fixedHeader.dataTables.min.css"> 
  
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.css"/>
    <style>
  
        #tabelInsights.dataTable td:nth-child(1), #tabelInsights.dataTable th:nth-child(1){
            text-align:left;
        }
        #tabelInsights.dataTable td:nth-child(n+4):nth-child(-n+11), #tabelInsights.dataTable th:nth-child(n+4):nth-child(-n+11){
            text-align: center;text-wrap: nowrap;
        }
        div#tableCustomers_info{
            margin-left: 10px;
        }
        #tabelInsights.dataTable th:nth-child(2), #tabelInsights.dataTable td:nth-child(2){
            text-align: center;

        }
        .daterangepicker .calendar-table th, .daterangepicker .calendar-table td, .daterangepicker .ranges li,.daterangepicker .drp-selected, .daterangepicker .drp-buttons .btn {
            font-size: inherit !important;
        }
 

        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: 340px;
            min-width: fit-content;
        }
        input#dates {
            text-align: end;
        }




        div.dt-container div.dt-search input {
          /*  width: 440px;  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;
            width: 340px;
        }

        @media (min-width: 2400px) {
            
            div.dt-container div.dt-search input {
                width: 430px; /* Set your desired width */
            }
            .input-group.mb-0.me-0 {
                width: 430px;
            }
        }
    </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('insights.components.leftpanel')
        <div class="col-md-10 flex-grow-1 " id="rightPanel">
            <div class="  d-flex navbar-item">
                           
                @include('insights.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  justify-content-between">                                
                    <div class="d-flex mb-0 ms-auto mt-3 flex-row-reverse py-2">
                            <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="tabelInsights" 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="text-nowrap">{{ __('applabels.Insight') }}</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('insights.components.modalcreatesimple')
@include('components.modal-delete-confirm')
@push('scripts') 
  
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.2.0/js/dataTables.dateTime.min.js"></script> 
 


<script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>  
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.min.js"></script>  
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.dataTables.js"></script> 
<script type="text/javascript" src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.html5.min.js"></script>  
<script type="text/javascript" src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.colVis.min.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script> 
<script type="text/javascript" src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<script type="text/JavaScript" >

 
    const modalInsights = new bootstrap.Modal('#modalInsights')
    const modalConfirmDelete = new bootstrap.Modal('#modalConfirmDelete')

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

               // reset values in form
               $('#cname').val('');
               $('#cphone').val('');
               $('#cemail').val('');
                modalInsights.show();
           }
    };
    $(document).ready(function() {
        let insightsTable = $('#tabelInsights').DataTable({
                
            ajax: {
                    url: "{{ url('/insights/get') }}",
                    type: "post",
                    data:  function (d) {
                        d.dates = $('#dates').val() ,
                          
                        d.search = $('input[type="search"]').val()
                    }
                },
                serverSide: true,
                processing: true, 

                columnDefs: [{
                    targets: 4,
                    orderable: true,
                    searchable: true
                    },
                    { targets: [0, 1, 2, 3 ], orderable: false, searchable: true},
                ],  
                 
             
                order: [[2, '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("tabelInsights"));
                                    var rowCount = document.getElementById("tabelInsights").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: '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: 'title',   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: '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 ) { 
              
                }
                
            });
           
        $('[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')
        });
       
    
 
       

        
         
         insightsTable.on('click', 'td:nth-last-child(n+5)', function (event) { //EDIT 
                if(event.isPropagationStopped())
                    return; // propagation was stopped, so stop further execution
                var data = insightsTable.row(this).data();
                console.log(  data);
                
                id = data['id'];
                document.location.href =  "{{  LaravelLocalization::localizeUrl('/customers/edit/') }}" + '/'+id 
                   
            }); 
        insightsTable.on('click', 'td:nth-last-child(2)', function (event) { //EDIT 
                var data = insightsTable.row(this).data();
                console.log(  data);
                let id = data['id'];
                $.ajax({
                    type: 'GET',
                    url: `{{ url('/insights/get') }}/${id}` ,
                    success: function(response) {
                        console.log(response);
                        let client = response;
                        $('#iid').val(client['id']);
                        $('#ititle').val(client['title']);
                        
                        modalInsights.show();
                    },

                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log(textStatus);
                    } 
                })
                
            });
        
        
 
        $('#dates').on('apply.daterangepicker', function(ev, picker){
            insightsTable.draw(false);
        });

     
        $('#insightsForm').on('submit',function saveProduct (e) {
            e.preventDefault();

            var form = $("#insightsForm")


            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('/insights/new') }}`,
                        data: formData,
                        datatype: "json",
                        success: function(response) {
                            console.log(response, ' Resposta AJAX')
                            
                            modalInsights.hide()
                            insightsTable.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('/insights/destroy') }}/${id}`,
                    method: "post",
                    success: function(response) {
                        console.log('response', response);
                        //if (response.success) {
                        insightsTable.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')]
        },
        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 + ')');
    });

     

  
    $("#modalInsight").on("hidden.bs.modal", function () {  
        $("#modalInsight").trigger("reset");
        $("#insightsForm input[type='text'],input[type='number']").val('');  
        
        $("#insightsForm").removeClass('was-validated');
        $("#insightsForm 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');
                        
                        modalInsights.show();
                    },

                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log(textStatus);
                    } 
                })
                
        };
  
        $(document).ready(function() {
            $('#tabelInsights tbody').on( 'click', 'button', function (e) {
            e.stopPropagation();
            } );
        });

        </script>

 
    @endpush
@endsection