@extends('layouts.app')

@section('css')
    <!-- DataTables -->
  <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
  <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
  <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
    <!-- SweetAlert2 -->
  <link rel="stylesheet" href="{{ asset('assets/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css')}}">
  <!-- Toastr -->
  <link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css')}}">  
  <style>
      
        table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
            top: 47px;
        }
        .custom-control-label::before {
            position: absolute;
            top: .25rem;
            left: -1.5rem;
            display: block;
            width: 1.5rem;
            height: 1.5rem;
            pointer-events: none;
            content: "";
            background-color: #dee2e6;
            border: #adb5bd solid 1px;
            box-shadow: inset 0 0.25rem 0.25rem rgb(0 0 0 / 10%);
        }
        .custom-control-label::after {
            position: absolute;
            top: .05rem;
            left: -1.7rem;
            display: block;
            width: 2rem;
            height: 2rem;
            content: "";
            background: 50%/50% 50% no-repeat;
        }
  </style>
@endsection

@section('js')
<!-- DataTables  & Plugins -->
<script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{ asset('assets/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{ asset('assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{ asset('assets/plugins/jszip/jszip.min.js')}}"></script>
<script src="{{ asset('assets/plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{ asset('assets/plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<!-- bs-custom-file-input -->
<script src="{{ asset('assets/plugins/bs-custom-file-input/bs-custom-file-input.min.js')}}"></script>
<!-- SweetAlert2 -->
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js')}}"></script>
<!-- Toastr -->
<script src="{{ asset('assets/plugins/toastr/toastr.min.js')}}"></script>
<script src="{{ asset('assets\js\easy-editable-text.js')}}"></script>
<script>
$(function () {
  bsCustomFileInput.init();
});
</script>
<script>
    var table = $('#table_1').DataTable({
        "paging": true,
        "lengthChange": true,
        "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
        "searching": false,
        "ordering": true,
        "order": [[ 1, "asc" ]] ,
        "pageLength": 10,

        "language": {
            'lengthMenu': 'Display _MENU_',
        },
        "searchDelay": 500,
        "processing": true,
        "serverSide": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
        "buttons": [
            'print',
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            {
                "extend": 'pdfHtml5',
                "className": 'btn-datatable',
                "orientation": 'landscape',
                "pageSize": 'LEGAL',
            },
        ],
        ajax: {
            url: "{{ url('gestions_stocks/getProduit') }}",
            type: 'GET',
            data: function (d) {
                d.Sku   = $('#Sku').val();
            },
            
        },
        "columns": [
            {
                "data": "id",
                'searchable': false,
                'orderable': false,
                'render': function (data, type, full, meta) {
                    return '<div class="custom-control custom-checkbox" >\
                                <input class="m-checkable custom-control-input custom-control-input-danger custom-control-input-outline" name="id[]" value="' + full['id'] + '" type="checkbox" id="customCheckbox' + full['id'] + '">\
                                <label for="customCheckbox' + full['id'] + '" class="custom-control-label"></label>\
                            </div>';
                }
            },
            {"data": "Sku"},
            {"data": "tva"},
            {"data": "Poids"},
            {
                "data": "id",
                "responsivePriority": 1,
                render: function(data, type, full, meta) {
                    var html = '<a class="btn btn-info btn-sm" href="{{url('gestions_stocks')}}/'+full['id']+'/edit">\
                                    <i class="fas fa-pencil-alt">\
                                    </i>\
                                </a>';
                    
                    html += '<a class="btn btn-danger btn-sm" style="margin-left: 8px;" onclick="DeleteProduits('+full['id']+')">\
                                <i class="fas fa-trash">\
                                    </i>\
                                </a>';
                    
                    html += '</span>';

                    return html;
                },
                        
            },
        ],
        "language": {
            "sProcessing":     "Traitement en cours...",
            "sSearch":         "Rechercher&nbsp;:",
            "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
            "sInfo":           "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
            "sInfoEmpty":      "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
            "sInfoFiltered":   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
            "sInfoPostFix":    "",
            "sLoadingRecords": "Chargement en cours...",
            "sZeroRecords":    "Aucun &eacute;l&eacute;ment &agrave; afficher",
            "sEmptyTable":     "Aucune donn&eacute;e disponible dans le tableau",
            "oPaginate": {
                "sFirst":      "Premier",
                "sPrevious":   "Pr&eacute;c&eacute;dent",
                "sNext":       "Suivant",
                "sLast":       "Dernier"
            },
            "oAria": {
                "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
                "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
            },
            "buttons": {
                "colvis": 'Colonne visible'
            },
		    "select": {
	        	"rows": {
	         		_: "%d lignes séléctionnées",
	         		0: "Aucune ligne séléctionnée",
	        		1: "1 ligne séléctionnée"
	        	}  
		    }
	    },
    });
    $('#kt_search').on('click', function(e) {
        e.preventDefault();
        
        table.table().draw();
    });
    $('.kt-input').each(function() {
        $(this).on('keyup', function(e) {
            $("#kt_search").trigger("click"); 
        });
    });

    $('.kt-select').each(function() {
        $(this).on('change', function(e) {
            $("#kt_search").trigger("click"); 
        });
    });
    $('#kt_reset').on('click', function(e) {
        e.preventDefault();
        $('.kt-input').each(function() {
            $(this).val('');
        });
        table.table().draw();
    });
    $('#export_excel').on('click', function(e) {
        e.preventDefault();
        table.button(2).trigger();
    });

    $('#export_pdf').on('click', function(e) {
        e.preventDefault();
        table.button(4).trigger();
    });
    $('#example-select-all').on('click', function(){
        // Get all rows with search applied
        var rows = table.rows({ 'search': 'applied' }).nodes();
        // Check/uncheck checkboxes for all rows in the table
        $('input[type="checkbox"]', rows).prop('checked', this.checked);
        if (this.checked) {
            $('#BtnDelete').css('opacity','1');
            $('#spanCount').css('opacity','1');
            $('#countItem').html($('input[type="checkbox"]', rows).length);
        }else{
            $('#BtnDelete').css('opacity','0');
            $('#spanCount').css('opacity','0');
        }
    });

    $('#BtnDelete').on('click', function(e){
        var ids=[];
        table.rows().nodes().to$().find('input[type="checkbox"]').each(function(){
            if(this.checked) {
                ids.push($(this).val());
            }

        });
        if (ids.length>0){
            DeleteProduits(ids);
        }
        else {
            alert('@lang('stock.Selectionner au moins une produits')');
        }
    });
    $('#table_1 tbody').on('change', 'input[type="checkbox"]', function(){
        var rows = table.rows({ 'search': 'applied' }).nodes();
        if ($('#table_1 tbody input[type="checkbox"]:checked').length > 0) {
            $('#BtnDelete').css('opacity','1');
            $('#spanCount').css('opacity','1');
            $('#countItem').html($('input[type="checkbox"]:checked', rows).length);
        }else{
            $('#BtnDelete').css('opacity','0');
            $('#spanCount').css('opacity','0');
        }
        if(!this.checked){
            var el = $('#example-select-all').get(0);
            // If "Select all" control is checked and has 'indeterminate' property
            if(el && el.checked && ('indeterminate' in el)){
                el.checked = false;
            }
        }
    });

    function DeleteProduits(id) {
        Swal.fire({
            title: '@lang('layout.Êtes-vous sûr?')',
            text: "@lang('layout.Vous ne pourrez pas revenir en arrière!')",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '@lang('layout.Oui, Supprimé')'
        }).then((result) => {
            if (result.value) {
            $.get("gestions_stocks/multiple_delete?id="+id, function(data, status){
                $('#table_1').DataTable().ajax.reload();
                Swal.fire(
                '@lang('layout.Supprimé')',
                '@lang('stock.produit a été supprimée.')',
                'success'
                )
            });
            }
        })
    }
</script>
@if(Session::has('successResponse'))
    <script>
        var Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
        });
        Toast.fire({
            icon: 'success',
            title: " {{Session::get('successResponse')}}"
        });
    </script>
@endif
@endsection


@section('content')
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">@lang('layout.Gestion des stocks')</h3>
                <div class="card-tools">
                    <a href="javascript:;" data-toggle="modal" data-target="#modal-import-excel" class="btn btn-sm btn-success">
                        <i class="fas fa-file-csv"></i> @lang('stock.Importer xlsx')
                    </a>
                    <a href="{{ url('gestions_stocks/add') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus nav-icon"></i> @lang('layout.Ajouter un nouveau')
                    </a>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <form class="kt-form kt-form--fit kt-margin-b-20">
                    <div class="row kt-margin-b-20">
                        <div class="col-lg-3 kt-margin-b-10-tablet-and-mobile">
                            @lang('order.Sku')
                            <input type="text" class="form-control kt-input" placeholder="" id="Sku">
                        </div>
                        <div class="col-lg-8 kt-margin-b-10-tablet-and-mobile" style="padding-top: 31px;">
                            <button class="btn btn-primary btn-brand--icon" id="kt_search">
                                <span>
                                    <i class="la la-search"></i>
                                    <span>@lang('layout.Recherche')</span>
                                </span>
                            </button>
                            <button class="btn btn-secondary btn-secondary--icon" id="kt_reset">
                                <span>
                                    <i class="la la-close"></i>
                                    <span>@lang('layout.Effacer')</span>
                                </span>
                            </button>
                        </div>
                        <div style="float: right;text-align: right;margin-bottom: 20px;">
                            <a href="javascript:;" id="export_pdf" style="margin: 5px;">
                                <img src="{{ asset('assets/media/pdf.svg')}}" alt="" style="width: 39px;height: 51px;">
                            </a>
                            <a href="javascript:;" id="export_excel" style="margin: 5px;">
                                <img src="{{ asset('assets/media/xlsx.png')}}" alt="" style="width: 35px;height: 43px;">
                            </a>
                        </div>
                        
                    </div>
                </form>
                <div class="col-lg-12"  style="margin-bottom: 5px;position:relative;">
                    <a class="btn btn-danger  btn-brand--icon" id="BtnDelete" style="opacity: 0;margin-top: 5px;color:white;">
                        <i class="la la-trash"></i>  <span>@lang('layout.Supprimer') </span>
                            </button>
                    </a>
                    <span style="opacity: 0;margin-left: 10px;position: absolute;top: 17px;" id="spanCount" >
                            @lang('layout.Vous avez choisi') <b id="countItem" ></b> @lang('layout.lignes')
                    </span>
                </div>
                <table id="table_1" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                        <th>
                            <div class="custom-control custom-checkbox" style="top: -1px;right: -11px;">
                                <input class="m-checkable custom-control-input custom-control-input-danger custom-control-input-outline"  type="checkbox" id="example-select-all">
                                <label for="example-select-all" class="custom-control-label"></label>
                            </div>
                        </th>
                        <th>@lang('order.Sku')</th>
                        <th>@lang('stock.TVA')</th>
                        <th>@lang('stock.Poids')</th>
                        <th>@lang('layout.Action')</th>
                    </tr>
                  </thead>
                  <tbody>
                  
                  </tbody>
                  <tfoot>
                    <tr>
                        <th></th>
                        <th>@lang('order.Sku')</th>
                        <th>@lang('stock.TVA')</th>
                        <th>@lang('stock.Poids')</th>
                        <th>@lang('layout.Action')</th>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
    
    
    <!-- /.modal modal-import-excel -->
    <div class="modal fade" id="modal-import-excel" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">@lang('stock.Injection Excel des poids')</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                        
                <form name="excel" action="{{ url('gestions_stocks/ImporteSKU') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="kt-portlet kt-portlet--height-fluid ">
                        <div class="kt-portlet__head">
                            <div class="kt-portlet__head-label">
                                <h3 class="kt-portlet__head-title">
                                    @lang('stock.import les données')               
                                </h3>
                            </div>
                            
                        </div>

                        <!--full height portlet body-->
                        <div class="kt-portlet__body kt-portlet__body--fluid kt-portlet__body--fit">
                            <div class="kt-widget4 kt-widget4--sticky">
                                <div class="kt-widget4__items kt-portlet__space-x kt-margin-t-15">
                                    <div class="kt-widget4__item">
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" name="import_file" id="exampleInputFile">
                                            <label class="custom-file-label" for="exampleInputFile">@lang('stock.Choose file')</label>
                                        </div>
                                        <div class="input-group-append">
                                        <button type="submit" class="btn btn-primary" style="width: 110px;"><i class="flaticon-upload-1"></i> @('stock.Upload')</button>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="kt-portlet kt-portlet--height-fluid">
                    <div class="kt-portlet__head">
                        <div class="kt-portlet__head-label">
                            <br><br>
                            <h5 class="kt-portlet__head-title">@lang('stock.Télécharger Template')</h5>
                        </div>
                    </div>
                    <div class="kt-portlet__body">
                        <!--begin::k-widget4-->
                        <div class="kt-widget4">
                            <div class="kt-widget4__item">
                                <a href="{{ asset('TemplateSKU.xlsx')}}" class="kt-widget4__title">

                                    <div class="kt-widget4__pic kt-widget4__pic--icon">
                                        <img src="{{ asset('assets/media/xlsx.png')}}" alt="" style="width: 35px;height: 43px;">

                                    @lang('stock.Template SKU')</div></a>
                            </div>
                        </div>
                        <!--end::Widget 9-->
                    </div>
                </div>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->



    @endsection