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

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.css"/>
    
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/3.0.2/css/responsive.bootstrap5.css"/> 
    <!-- <link href="https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.0.8/b-3.0.2/b-html5-3.0.2/datatables.min.css" rel="stylesheet">-->
      
   
     
    <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">
 

    <style>
  
        #tableProdutos.dataTable td:nth-child(n+2), #tableProdutos.dataTable th:nth-child(n+2){
            text-align:left;
        }
        #tableProdutos.dataTable td:nth-child(n+3), #tableProdutos.dataTable th:nth-child(n+3){ /*:nth-child(-n+10)*/
            text-align: center;
        }
        #tableProdutos.dataTable .col1{ /*:nth-child(-n+10)*/
            text-align: center;
           min-width: 100px;
            width: 100px !important;
        }
        /*div#tableProdutos_info{
            margin-left: 10px;
        }*/
        .daterangepicker .calendar-table th, .daterangepicker .calendar-table td, .daterangepicker .ranges li,.daterangepicker .drp-selected, .daterangepicker .drp-buttons .btn {
            font-size: inherit !important;
        }
        input#dt-search-0 {
           /* width: 100%;*/
        }
    

        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: 440px;*/
            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: 330px;
        }

        @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('product.components.leftpanel')
        <div class="col-md-10 flex-grow-1 " id="rightPanel">
            <div class="  d-flex navbar-item">
                           
                @include('product.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 {!! session('error') ? session('error') : 'd-none' !!} "> 
                        </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  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="  ">                               
                            <label class="checkbox-inline  " style="margin-left: 20px !important;">
                            <input type="checkbox" class="ms-0" checked name="livefilter" id="livefilter" data-toggle="toggle" data-on="{{ __('applabels.ProductLive') }}" data-off="{{ __('applabels.ProductNotLive') }}" 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="statusfilter" id="statusfilter" aria-label="Select ...">     
                                    <option value='' selected>{{ __('applabels.StockStatus') }}</option>
                                    <option value="1"  >{{ __('applabels.StatusInStock') }}</option>             
                                    <option value="0"  >{{ __('applabels.StatusOther') }}</option>
                            </select>        
                        </div>
                        
                        <div class=" ">
                            <select class="form-select form-control-sm  fs-6" name="maincategoryfilter" id="maincategoryfilter" aria-label="Select ...">     
                                    <option value=""   selected>{{ __('applabels.Category') }}</option>              
                            </select> 
                        </div>
                        <div class=" ">
                            <select class="form-select form-control-sm  fs-6" name="subcategoryfilter" id="subcategoryfilter" aria-label="Select ...">     
                                    <option value=""   selected>{{ __('applabels.SubCategory') }}</option>              
                            </select> 
                        </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="tableProdutos" 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-2 text-nowrap">{{ __('applabels.ProductTitle') }}</th>
                            <th class="col-4">{{ __('applabels.ProductDescription' ) }}</th>
                            <th class="col-1 col1" ><abbr title="Variations">{{ __('applabels.ProductVariations' ) }}</abbr></th>
                            <th class="col-1 col1" >{{ __('applabels.ProductPrice' ) }}</th>
                            <th class="col-1 col1"> {{ __('applabels.TableProductRef' ) }}</th>
                            <th class="col-1 col1">{{ __('applabels.ProductStock' ) }}</th>
                            <th class="col-1 col1">{{ __('applabels.ProductActive' ) }}</th>
                            <th class="col-1 col1">{{ __('applabels.ProductLive' ) }}</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('product.components.modalcreatesimple') 
@include('components.modal-delete-confirm')

@push('scripts') 
 

@include('includes.datatablesjs')

 
 

<script type="text/JavaScript" >

 
    const modalProduct = new bootstrap.Modal('#modalProduct')
    const modalConfirmDelete = new bootstrap.Modal('#modalConfirmDelete')
    //const modalAlert = new bootstrap.Modal('#modalAlert')

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

               modalProduct.show();
           }
    };
    DataTable.ext.buttons.newfullitem = {
           action: function (e, dt, node, config) {
              
                document.location.href =  "{{  LaravelLocalization::localizeUrl('/product/new/') }}"  
           }
    };
    $(document).ready(function() {
        let productsTable = $('#tableProdutos').DataTable({
                
            ajax: {
                    url: "{{ url('/products/datatable') }}",
                    type: "post",
                    data:  function (d) {
                        d.dates = $('#dates').val() ,
                        //d.dateMax= $('#dates').data('daterangepicker').endDate,
                        d.active = $('#activefilter').is(":checked");
                        d.live = $('#livefilter').is(":checked");
                        d.status = String($('#statusfilter').val());
                        d.category = $('#maincategoryfilter').val() ,
                        d.subcategory = $('#subcategoryfilter').val() ,
                        d.search = $('input[type="search"]').val()
                    }
                },
                serverSide: true,
                processing: true, 

                columnDefs: [{
                    targets: "_all",
                    orderable: true,
                    searchable: true
                }],  
                 
             
                order: [[8, 'desc']],
                layout: {
                    top: {
                    
                        buttons: [
                           /* {
                                extend: 'copy',
                                text: '<i class="fa-solid fa-copy"></i>',
                                className: 'btn btn-primary btn-sm',
                                
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                }
                            },
                            {
                                extend: 'csv',
                                text: '<i class="fa-solid fa-file"></i>',
                                className: 'btn btn-primary btn-sm',
                                
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                }
                            },*/
                            {
                                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, 3, 4, 5 ],
                                    orthogonal: null,
                                },

                               
                                customize: function (xlsx) {
                                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
                                
                                    // Set the alignment for all cells in the first column (column A)
                                    

                                     // add a new "cellXfs" cell formatter, which uses the next available format index (numFmt 176):
                                        var celXfsElement = xlsx.xl['styles.xml'].getElementsByTagName('cellXfs');


                                        var f1 = //bold and underlined font
                                            '<font>'+
                                                    '<sz val="11" />'+
                                                    '<name val="Calibri" />'+
                                                    '<b />'+
                                            '</font>'
                                        var cellStyle = '<xf numFmtId="176" fontId="2" fillId="0" borderId="0" xfId="0" applyAlignment="1"' 
                                            + ' applyFont="1"> <alignment horizontal="center"/></xf>';
                                        $( celXfsElement ).append( cellStyle );
                                        $( celXfsElement ).attr("count", "69"); // increment the count
                                    // Set the alignment for the first row (table title)
                                    // Set bold text for column headers
                                   
                                    //  // '51' is for center-aligned text
                                    $('row c[r^="C"]', celXfsElement).each(function() {
                                        $(this).attr('s', '59'); // '59' is for Euro
                                    });
                                    $('row c[r^="D"]', celXfsElement).each(function() {
                                        $(this).attr('s', '51'); // '52' is for right-aligned text
                                    });
                                    $('row c[r^="E"]', celXfsElement).each(function() {
                                        $(this).attr('s', '51'); // '52' is for right-aligned text
                                    });  
                                    
                                    $('row c[r^="C"]', sheet).attr('s', '51');
                                    $('row c[r^="D"]', sheet).attr('s', '59');
                                    $('row c[r^="E"]', sheet).attr('s', '51');
                                    $('row c[r^="F"]', sheet).attr('s', '51');
                                   // $('row:nth-child(1) c', celXfsElement).attr('s', '69'); // '2' is for bold text
                                   $('row:first c', sheet).attr('s', '2'); 
                                } 
                            },
                            {
                                extend: 'pdfHtml5',
                                text: '<i class="fa-solid fa-file-pdf"></i>',
                                className: 'btn btn-primary btn-sm',
                                titleAttr: 'PDF',
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                },
                                
                                title: '',

                                orientation: 'landscape', //portrait
                                pageSize: 'A4', //A3 , A5 , A6 , legal , letter
                                exportOptions: {
                                    columns: ':visible',
                                    search: 'applied',
                                    order: 'applied'
                                },
                                exportOptions: {
                                    columns: [ 0, 1, 2, 3, 4 , 5],
                                    orthogonal: "myExport"
                                },
                                customize: function (doc) {
                                     
                                    
                                    doc.content[0].table.widths = ['*', '*', 60, 60, 60, 60 ];
 
                                    doc.content[0].table.alignment = [ 'left', 'left','center',  'center', 'center', 'center' ];
                                    var rowCount = document.getElementById("tableProdutos").rows.length;
                                        for (i = 0; i < rowCount; i++) {
                                            doc.content[0].table.body[i][0].alignment = 'left';
                                            doc.content[0].table.body[i].vLineWidth = '1';
                                            doc.content[0].table.body[i][1].vLineColor = "#000";
                                            doc.content[0].table.body[i][1].alignment = 'left';
                                            doc.content[0].table.body[i][2].alignment = 'center';
                                            doc.content[0].table.body[i][3].alignment = 'center';
                                            doc.content[0].table.body[i][4].alignment = 'center';
                                            doc.content[0].table.body[i][5].alignment = 'center';
                  
                                            };
                                           

                                          

                                             
                           			// Create a footer object with 2 columns
                                    // Left side: report creation date
                                    // Right side: current page and total pages
                                    doc['footer']=(function(page, pages) {
                                        return {
                                            columns: [
                                                
                                                {
                                                    alignment: 'right',
                                                    text: ['page ', { text: page.toString() },	' of ',	{ text: pages.toString() }]
                                                }
                                            ],
                                            margin: 20
                                        }
						            });
                               

                                   /* var objLayout = {};
                                        objLayout['hLineWidth'] = function(i) { return .5; };
                                        objLayout['vLineWidth'] = function(i) { return .5; };
                                        objLayout['hLineColor'] = function(i) { return '#aaa'; };
                                        objLayout['vLineColor'] = function(i) { return '#aaa'; };
                                        objLayout['paddingLeft'] = function(i) { return 4; };
                                        objLayout['paddingRight'] = function(i) { return 4; };
                                        doc.content[0].layout = objLayout;   */
                                },
                            },
                            {
                                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, 3, 4, 5 ]
                                },
                                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:nth-child(n+3)').each(function (index) {
                                        $(this).css('width', '60px');
                                        $(this).css('text-align', 'center');
                                    });
                                    $(win.document.body).find('th:nth-child(n+3)').each(function (index) {
                                        $(this).css('width', '60px');
                                        $(this).css('text-align', 'center');
                                    });
                                    
                                }
                            }, 
                            
                            {
                                extend: 'newfullitem',
                                text: '<i class="fa-solid fa-box"></i>',
                                className: 'btn btn-danger btn-sm',
                                titleAttr: 'New Product Full',
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                }
                            },
                            {
                                extend: 'newitem',
                                text: '<i class="fa-solid fa-plus"></i>',
                                className: 'btn btn-danger btn-sm',
                                titleAttr: 'New Product Quick',
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                }
                            }
                        ],
                        /*info: {
                            text: 'Showing _START_ to _END_ of _TOTAL_ records'
                        },*/
                    },
                    topStart: { 
                        info: { 
                            text: 'Showing _START_ to _END_ of _TOTAL_ records'
                        },
                    },
                    topEnd:{
                            search: {
                                placeholder: 'Type search here'
                            }
                        },
                    bottomStart:  'pageLength', 
                    bottomEnd: { 
                        paging: { 
                            
                            firstLast: false
                             
                        }
                    }
                }, 
                initComplete: function () {
                                    $('.dt-info').addClass('small');
                                    $('.dt-info').parent().parent().removeClass('mt-2').addClass('mt-0');
                                    $('#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,
                
               // pagingType: "simple_numbers",
                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: 'pname',   render: function ( data, type ) { return    data;} },
                        {data: 'pdescription',  render: function ( data, type ) {  return   data;}},
                        {data: 'nvariations',   render: function ( data, type ) {  return   data;  }},
                        {data: 'avgprice',   render: function ( data, type ) {  
                            let format = new Intl.NumberFormat('pt-PT', {
                                style: 'currency',
                                currency: 'EUR',
                                minimumFractionDigits: 2,
                                 }); 
                                price = (data !== null) ? format.format(data) : '0 ';
                                return   "  "+ price;  
                            }
                        },
                        {data: 'reference',   render: function ( data, type ) {  return    "  " + data;  }},
                        {data: 'stock',   render: function ( data, type ) {  return    data;  }},                        
                        {data: 'active',  orderable: false ,  render: function ( data, type ) {  return (data == 1) ? '<i class="fa-solid fa-eye text-success"></i>' : '<i class="fa-solid fa-eye-slash text-danger"></i>'  ;  }},/*active*/
                        {data: 'live',  orderable: false ,  render: function ( data, type ) { return (data == 1) ? '<i class="fa-solid fa-plug-circle-check text-success"></i>' : '<i class="fa-solid fa-plug-circle-exclamation text-danger"></i>'  ;     }}, /*live'*/
                        {data: 'created_at',   render: function ( data, type ) {  return    '<span class="fs-6 text-nowrap">'+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") }}'+'"><i class="fa-solid fa-pencil"></i></button>';  }}, /* edit */
                       /* {data: 'variancia',   render: function ( data, type ) {
                            console.log("variancia: "+data);
                            html = '<table id="variations_table" class="variations"><tr><th>Size</th><th>Color</th><th>Desc</th><th>stock</th><th>orders</th></tr>';
                            data.forEach((val)   =>  
                                html += '<tr><td>'+val['size']+'</td><td>'+val['name']+'</td><td>'+val['cava']+'</td><td>'+val['stock']+'</td><td>'+val['orders']+'</td></tr>');
                                html += '</table>';
                            return    html;  
                            }
                        },*/
                        {  //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") }}'+'"><i class="fa-solid fa-trash-can"></i></button>';
                             }
                        } 
                    
                    ],
                "drawCallback": function(data,  settings ) {
                    console.log($('#maincategoryfilter option').length);
                    if ($('#maincategoryfilter option').length < 2){
                        $.ajax({
                            type: 'POST',
                            url: "/products/getCategories",
                            success: function(data) {
    
                                for(var i = 0; i< data.length;i++){
                                    firstCategory = data[i]['id']; 
                                    $('#maincategoryfilter').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')
        });
       
    
    
        /**  */
        productsTable.on('click', 'td:last-child', function (event) { // DELETE 
                var data = productsTable.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['pname'] )
                $('#deleteId').val(data['id']);
                modalConfirmDelete.show();
        } );
        productsTable.on('click', 'td:nth-last-child(5)', function (event) { // ACTIVE 
            var data = productsTable.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('/product/flagActive') }}/${id}/${active}`,
                method: "post",
                success: function(response) {
                    console.log('response', response);
                    productsTable.draw(false);
                    
                    
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    let error = jqXHR.responseJSON;
                        $("#info-message").removeClass('d-none');
                        $("#info-message").html("Erro: "+ errorThrown);
                        
                        
                }
            });
                
        } );
        productsTable.on('click', 'td:nth-last-child(4)', function (event) { // LIVE 
            var data = productsTable.row(this).data();
            console.log(data);
                //alert( 'You clicked on '+data['_id']+'\'s row' );
            let id = data['id'];
            let live = (data['live'] == 1) ? 0:1;

            $.ajax({
                url: `{{ url('/product/flagLive') }}/${id}/${live}`,
                method: "post",
                success: function(response) {
                    console.log('response', response);
                    productsTable.draw(false);
                    
                    
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    let error = jqXHR.responseJSON;
                    $("#info-message").removeClass('d-none');
                    $("#info-message").html("Erro: "+ errorThrown);
                        
                    
                }
            });
                
        } );
        productsTable.on('click', 'td:nth-last-child(n+6)', function (event) { //EDIT 
                var data = productsTable.row(this).data();
                console.log(  data);
                // populate modal 
                /*                
                $('#title').val(data['pname']);
                $('#description').val(data['pdescription']);
                $('#price').val(data['price']);
                $('#reference').val(data['reference']);
                $('#material').val(data['pmaterial']);
                $('#categoryId').val(data['categoryId']);
                $('#subCategoryId').val(data['subcategoryId']).change();
                $('#sizeTypeId').val(data['sizetypeId']);
                $('#brandId').val(data['brandId']);
                $('#genderId').val(data['genderId']);
                modalProduct.show();
                */
                id = data['id'];
                document.location.href =  "{{  LaravelLocalization::localizeUrl('/product/edit/') }}" + '/'+id 
                   
        });
        productsTable.on('click', 'td:nth-last-child(2)', function (event) { //EDIT SIMPLE
                var data = productsTable.row(this).data();
                console.log(  data);
                let id = data['id'];
                $.ajax({
                    type: 'GET',
                    url: `{{ url('/products/getProduct') }}/${id}` ,
                    success: function(response) {
                            console.log(response['product']);
                            let product = response['product'];
                            $('#pid').val(product['id']);
                            $('#ptitle').val(product['pname']);
                            $('#pprice').val(product['price']);
                            $('#pquantity').val(product['stock']);
                            console.log('disable stock' + response['nvariations']);
                            (response['nvariations'] > 0 ) ? $('#pquantity').prop('disabled', true) : $('#pquantity').prop('disabled', false); 
                                
                            $('#preference').val(product['reference']);
                             product['live'] ? 	$('#plive').bootstrapToggle('on') : 	$('#plive').bootstrapToggle('off')
                             product['active'] ? 	$('#pactive').bootstrapToggle('on') : 	$('#pactive').bootstrapToggle('off');
                             (product['nvariations']>0) ? 	$('#pvariation').bootstrapToggle('on') : 	$('#pvariation').bootstrapToggle('off');
                            //$('select[name^="pactive"] option:selected').attr("selected", product['active']);;
                            //$('select[name^="plive"]  option:selected').attr("selected",product['active']);;
                           // console.log('plive:' + $('#plive').prop('checked'));
                            modalProduct.show();
                        },

                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                console.log(textStatus);
                    } 
                })
                
            });
       
            $('#maincategoryfilter').on('change',function loadSubCateogries (e) {
            let data = {'categoryId' : $('#maincategoryfilter').val()};
            $.ajax({
                type: 'POST',
                url: "/products/getSubCategories",
                data: data,
                datatype: "json",
                success: function(data) {
                    $('#subcategoryfilter').empty();
                    $('#subcategoryfilter').append( '<option value=""   selected>SubCategory</option>');
                    for(var i = 0; i< data.length;i++){
                        $('#subcategoryfilter').append('<option value="'+data[i]['id']+'">'+data[i]['name']+'</option>');
                    } 
                },

                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
            //$categoryFilter = value.id;
            productsTable.draw(false);

        });
        $('#subcategoryfilter').on('change',function loadSubCateogries (e) {
            productsTable.draw(false);
        });
        $('#statusfilter').on('change',function loadSubCateogries (e) {
            productsTable.draw(false);
        });
        $('#activefilter').on('change',function loadSubCateogries (e) {             
             productsTable.draw(false); 
        });
        $('#livefilter').on('change',function loadSubCateogries (e) {             
             productsTable.draw(false); 
        });
        $('#dates').on('apply.daterangepicker', function(ev, picker){
            productsTable.draw(false);
        })


        $('#productForm').on('submit',function saveProduct (e) {
            e.preventDefault();
            $('#preference')[0].setCustomValidity('');
            var form = $("#productForm")


            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('/products/insertNewSimple') }}`,
                        data: formData,
                        datatype: "json",
                        success: function(response) {
                            console.log(response, ' Resposta AJAX')
                            modalProduct.hide()
                            if(openProductPage) {
                                document.location.href =  "{{  LaravelLocalization::localizeUrl('/product/edit/') }}" + '/'+response['id']
                            } else {                          
                                productsTable.draw(false); 
                            }
                        }, 
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            console.log(textStatus, XMLHttpRequest.responseJSON.message)
                            $('#preference')[0].setCustomValidity(XMLHttpRequest.responseJSON.message);
                            $('#preference')[0].reportValidity();
                            form.removeClass('was-validated');
                        }
                    }); 
            
            } else { 
                form[0].reportValidity();
                event.preventDefault()
                event.stopPropagation()
            }

        });
    
        $("#pvariation").on("change",  function() {  
            console.log('pvariation change');
            if  (this.checked) {
                $('#openpage').prop('checked', true);
                $('#qtyField').hide();
                $('#refField').removeClass('col-md-4').addClass('col-md-6')
                $('#currency').removeClass('col-md-4').addClass('col-md-6')
            }
            else {
                $('#openpage').prop('checked', false);
                $('#qtyField').show();
                $('#refField').removeClass('col-md-6').addClass('col-md-4')
                $('#currency').removeClass('col-md-6').addClass('col-md-4')
            }
        });

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

    });


/*    function loadCategories (){
         
            $.ajax({
                url: "{{ url('/products/getCategories') }}" ,
                type: 'POST',
                dataType: 'json',
                async: false,
                success: function(data) {
                    $.each( data, function( key, value ) {
                       splitarray.push( {
                           text: value.name,
                           action: function () {
                                alert(value.id);
                           }
                       })
                   }); 
                   return (splitarray) // Resolve promise and when success
                },
                error: function(err) {
                    reject(err) // Reject the promise and go to catch()
                }
                   
                   
            });

      

    } 
*/
    $('#addProduct').on('click', function populateDropdown() {
           
           //$('#myModal').modal('show');  //this load modal view
           $.ajax({
               type: 'POST',
               url: "/products/getSizeType",
               success: function(data) {

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

               error: function(XMLHttpRequest, textStatus, errorThrown) {
                   alert(textStatus);
               }
           }).always(function () {
               $.ajax({
                   type: 'POST',
                   url: "/products/getBrands",
                   success: function(data) {

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

                   error: function(XMLHttpRequest, textStatus, errorThrown) {
                       alert(textStatus);
                   }
                   });
           }).always(function () {
               $.ajax({
                   type: 'POST',
                   url: "/products/getCategories",
                   success: function(data) {

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

                   error: function(XMLHttpRequest, textStatus, errorThrown) {
                       alert(textStatus);
                   }
                   });
           }).always(function () {
               
               $.ajax({
                   type: 'POST',
                   url: "/products/getSubCategories",
                   data: {'categoryId' :$('#categoryId').val() },
                   success: function(data) {
                       $('#subCategoryId').empty();
                        
                       for(var i = 0; i< data.length;i++){
                           $('#subCategoryId').append('<option value="'+data[i]['id']+'"  >'+data[i]['name']+'</option>' );
                       } 
                   },

                   error: function(XMLHttpRequest, textStatus, errorThrown) {
                       alert(textStatus);
                   }
                   });
           }).always(function () {
               $.ajax({
                   type: 'POST',
                   url: "/products/getGenders",
                   success: function(data) {

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

                   error: function(XMLHttpRequest, textStatus, errorThrown) {
                       alert(textStatus);
                   }
                   });
           });
    });
  
    $('#categoryId').on('change',function loadSubCateogries (e) {
        let data = {'categoryId' : $('#categoryId').val()};
        $.ajax({
                    type: 'POST',
                    url: "/products/getSubCategories",
                    data: data,
                    datatype: "json",
                    success: function(data) {
                        $('#subCategoryId').empty();
                        for(var i = 0; i< data.length;i++){
                            $('#subCategoryId').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 + ')');
    });
    
    $("#modalProduct").on("hidden.bs.modal", function () {  
        $("#modalProduct").trigger("reset");
        $("#productForm input[type='text'],input[type='number'],input[type='hidden']").val('');  
        
        $("#productForm").removeClass('was-validated');
        $("#productForm 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()
        }





        </script>

 
    @endpush
@endsection