@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>
      #dragg_and_drop input[type=text]
        {
            /*margin-top:8px;*/
            font-size:18px;
            color:#545454;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            -border-radius: 2px;
            display:none;
            /*width:280px;*/
            
        }
        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>
<!-- 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 src="https://unpkg.com/axios/dist/axios.min.js"></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('getCommande') }}",
            type: 'GET',
            data: function (d) {
                d.Sku   = $('#Sku').val();
                d.Country      = $('#Country').val();
                d.start_prix   = $('#start_prix').val();
                d.end_prix     = $('#end_prix').val();
                d.ShippingCode = $('#ShippingCode').val();
                d.boutique_id  = $('#boutique_id').val();
            },
            
        },
        "columns": [
            {
                "data": "id",
                'searchable': false,
                'orderable': false,
                'render': function (data, type, full, meta) {
                    return '<div class="custom-control custom-checkbox" style="top: 21px;right: -6px;">\
                                <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": "OrderNumber"},
            {
                "data": "boutique_id",
                render: function(data, type, full, meta) {
                    if(full['platform'] == 'cdiscount') return full['cdiscount_boutique']['nom'];
                    if(full['platform'] == 'amazon') return full['amazon_boutique']['nom'];
                },
            },
            {"data": "platform"},
            {
                "data": "id",
                render: function(data, type, full, meta){
                    return full['details'].map(function (el) {
                        if(el.Sku == '[]') return '';
                        return el.Sku;
                    }).join('/ ');
                }
            },
            {"data": "ShippingCode"},
            {"data": "ValidatedTotalAmount"},
            {
                "data": "id",
                render: function(data, type, full, meta){
                    return full['details'].map(function (el) {
                        if(el.ProductEan == '[]') return '';
                        return el.ProductEan;
                    }).join('/ ');
                }
            },
            {
                "data": "id",
                render: function(data, type, full, meta){
                    return full['details'].map(function (el) {
                        if(el.NameProduct == '[]') return '';
                        return el.NameProduct;
                    }).join('/ ');
                }
            },
            {
                "data": "id",
                render: function(data, type, full, meta){
                    return full['details'].map(function (el) {
                        if(el.SellerProductId == '[]') return '';
                        return el.SellerProductId;
                    }).join('/ ');
                }
            },
            {
                "data": "id",
                render: function(data, type, full, meta){
                    return full['details'].map(function (el) {
                        if(el.Quantity == '[]') return '';
                        return el.Quantity;
                    }).join('/ ');
                }
            },
            {
                "data": "TotalPoids",
                render: function(data, type, full, meta){
                    var poids = 0;
                    return full['details'].map(function (el) {
                        if(el.Quantity != '[]'){
                            return Number(el.poids.Poids) * el.Quantity;
                        }
                        return 0;
                    }).reduce((previousValue, currentValue) => previousValue + currentValue);
                }
            },
            {"data": "FirstName"},
            {"data": "LastName"},
            {"data": "Country"},
            {"data": "City"},
            {"data": "Street"},
            {"data": "ZipCode"},
            {
                "data": "id",
                "responsivePriority": 1,
                render: function(data, type, full, meta) {
                    var html = '<span style="overflow: visible; position: relative; width: 110px;"><a title="@lang('layout.Supprimer')" class="btn btn-sm btn-clean btn-icon btn-icon-sm" onclick="DeleteOrdres('+full['id']+')"><i class="fas fa-trash-alt"></i></a>';
                    html += '</span>';
                    html += '<span style="overflow: visible; position: relative; width: 110px;"><a title="@lang('layout.Imprimer')" href="{{ url('order/print') }}/?id=' + full['id'] + '" class="btn btn-sm btn-clean btn-icon btn-icon-sm"><i class="fas fa-print"></i></a>';
                    html += '</span>';

                    return html;
                },
                        
            },
        ],
        footerCallback: function(row, data, start, end, display) {
            $.ajax({
                url: "{{ url('getCommandeSum') }}",
                type: 'GET',
                data: {
                    Sku   : $('#Sku').val(),
                    Country     : $('#Country').val(),
                    start_prix   : $('#start_prix').val(),
                    end_prix     : $('#end_prix').val(),
                    ShippingCode : $('#ShippingCode').val(),
                    boutique_id : $('#boutique_id').val(),
                },
                success : function(code_html, statut){
                    var th = $('#table_1 tfoot tr')[0].children;
                    th[6].innerHTML =  code_html ;
                },
                dataType: 'json'
            });
        },
        "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();
        setTimeout(function(){ 
            $.ajax({
                url: "{{ url('getCommandeSum') }}",
                type: 'GET',
                data: {
                    Sku   : $('#Sku').val(),
                    Country     : $('#Country').val(),
                    start_prix   : $('#start_prix').val(),
                    end_prix     : $('#end_prix').val(),
                    ShippingCode : $('#ShippingCode').val(),
                    boutique_id : $('#boutique_id').val(),
                },
                success : function(code_html, statut){
                    console.log(code_html);
                    var th = $('#table_1 tfoot tr')[0].children;
                    th[6].innerHTML =  code_html;
                },
                dataType: 'json'
            });
        }, 1000);
    });
    $('.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('');
        });
        $.ajax({
            url: "{{ url('getCommandeSum') }}",
            type: 'GET',
            data: {
                Sku   : '',
                Country     : '',
                start_prix   : '',
                end_prix     : '',
                ShippingCode : '',
                boutique_id : '',
            },
            success : function(code_html, statut){
                var th = $('#table_1 tfoot tr')[0].children;
                th[6].innerHTML =  code_html ;
            },
            dataType: 'json'
        });
        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');
            $('#BtnPrint').css('opacity','1');
            $('#spanCount').css('opacity','1');
            $('#countItem').html($('input[type="checkbox"]', rows).length);
        }else{
            $('#BtnDelete').css('opacity','0');
            $('#BtnPrint').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){
            DeleteOrdres(ids);
        }
        else {
            alert('@lang('layout.Selectionner au moins une commande')');
        }
    });

    $('#BtnPrint').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){
            $(location).attr('href','{{ url('order') }}/print/?id='+ids);
        }
        else {
            alert('@lang('layout.Selectionner au moins une commande')');
        }
    });
    $('#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');
            $('#BtnPrint').css('opacity','1');
            $('#spanCount').css('opacity','1');
            $('#countItem').html($('input[type="checkbox"]:checked', rows).length);
        }else{
            $('#BtnDelete').css('opacity','0');
            $('#BtnPrint').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 DeleteOrdres(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("orders/delete?id="+id, function(data, status){
                $('#table_1').DataTable().ajax.reload();
                Swal.fire(
                '@lang('layout.Supprimé')',
                '@lang('layout.order a été supprimée.')',
                'success'
                )
            });
            }
        })
    }
</script>
@if(Session::has('errorBoutique'))
    <script>
        var Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
        });
        Toast.fire({
            icon: 'error',
            title: " {{Session::get('errorBoutique')}}"
        });
    </script>
@endif
@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
<!-- jQuery UI -->
<script src="{{ asset('assets/plugins/jquery-ui/jquery-ui.min.js')}}"></script>
<script>

    $( "#sortable1, #sortable2" ).sortable({
      placeholder: "ui-state-highlight",
      connectWith: ".connectedSortable"
    }).disableSelection();

    function ExporterCSV() {
        if($('#sortable2 div.db_column').length == 0){
            var Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });
            Toast.fire({
                icon: 'error',
                title: "@lang('layout.Choisissez au moins une colonne')"
            });
        }else if($('#nom_modele').val() == ''){
            var Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });
            Toast.fire({
                icon: 'error',
                title: "@lang('layout.Champs Nom modele vide')"
            });
        }else{
            Swal.fire({
                title: '@lang('layout.Confirmation')',
                text: "@lang('layout.Cette Opération peut prendre quelque seconde voulez vous continuer ?')",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#1dc9b7',
                cancelButtonColor: '#2e40d4',
                confirmButtonText: '@lang('layout.Enregistrer')'
            }).then((result) => {
                if (result.value) {
                    var columns = [];
                    var nom_modele = $('#nom_modele').val();
                    $('#sortable2 div.db_column .text_label').each(function(){
                        columns.push({
                            'label'  : $(this).html(),
                            'column' : $(this).attr('column_data'),
                        });
                    });
                    console.log(columns);
                    window.location = "{{ url('save_modele') }}?nom_modele=" + nom_modele + "&columns=" + JSON.stringify(columns);
                    
                }
            });
        }

        
    }

    function deleteModel(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("{{ url('deleteModele') }}?id="+id, function(data, status){
                Swal.fire(
                    '@lang('layout.Supprimé')',
                    '@lang('layout.model a été supprimée.')',
                    'success'
                );
                location.reload();
            });
            }
        });
    }

    function applyModel(id){
        Swal.fire({
            title: '@lang('layout.Confirmation')',
            text: "@lang('layout.Cette Opération peut prendre quelque seconde voulez vous continuer ?')",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '@lang('layout.Oui, Exporter')'
        }).then((result) => {
            if (result.value) {
                window.location = "{{ url('applyModel') }}?id=" + id;
            }
        });
    }

    async function sendFile() {
        let progression_obj;

        var csvfile = document.querySelector("#csvfile").files
        if (csvfile.length !==  0){
            let alert_file_csv = document.querySelector("#alert_file_csv")
            alert_file_csv.style.display = "none"

            var formData = new FormData();
            formData.append("csvfile", csvfile[0]);
            axios.post('uploadCSV', formData, {
                headers: {
                'Content-Type': 'multipart/form-data'
                }
            })
            .then(res => {
                console.log(res);             
            })
            .catch(err => {
                console.log(err)
            })

                let progression = 0;

                let texts_template = document.querySelectorAll(".text_template")    
                Array.from(texts_template).map(el => el.style.display = 'none')            
                
                let csv_import_btn = document.querySelector("#csvfile") 
                csv_import_btn.style.display = 'none';
                
                let progressBarFile = document.querySelector(".progressBarFile")
                progressBarFile.style.display = 'flex';

                let botton_import = document.querySelector(".botton_import")
                botton_import.style.display = 'none';

                let validation_text = document.querySelector(".validation_text")
                validation_text.style.display = 'block';


                while (progression !== 1){

                    progress_promise = getProgress();
                    await Promise.all([progress_promise]).then(function(results) {
                        progression_obj = results[0];
                    });
                    progression = progression_obj.data.progression
                    console.log("progression: ", progression)
                    await new Promise(resolve => setTimeout(resolve, 1000));

                    let progressBar = document.querySelector(".progress-bar");
                    progressBar.style.width = `${parseInt(progression * 100)}%`;
                }
                if (progression == 1 ) {
                    await new Promise(resolve => setTimeout(resolve, 1000));
                    //window.location.reload()
                    location.replace("/orderRapport")
                }
            }else {
                let alert_file_csv = document.querySelector("#alert_file_csv")
                alert_file_csv.style.display = "block"
            }
    }

    function getProgress() {
        return axios.get(
            "getProgress"
        );
    }
</script>

@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.Liste des orders')</h3>
                <div class="card-tools">
                    <a href="javascript:;" data-toggle="modal" data-target="#modal-upload-csv" class="btn btn-sm btn-warning">
                        <i class="fas fa-file-csv"></i> @lang('order.Valider les commandes')
                    </a>
                    <a href="javascript:;" data-toggle="modal" data-target="@if(Auth::user()->exportation()->count() > 0) #list-export-csv @else #modal-export-csv @endif" class="btn btn-sm btn-success">
                        <i class="fas fa-file-csv"></i> @lang('layout.Exporter csv')
                    </a>
                    <a href="{{ url('getOrders') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-sync-alt"></i> @lang('layout.Mise a jour')
                    </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-3 kt-margin-b-10-tablet-and-mobile">
                            <label>@lang('order.Pays'):</label>
                            <select class="form-control kt-input kt-select" id="Country">
                                <option value="">@lang('layout.Select')</option>
                                @foreach(array_unique(\App\Models\Order::pluck('Country')->toArray()) as $pays)
                                    <option value="{{ $pays }}">{{ $pays }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-3 kt-margin-b-10-tablet-and-mobile">
                            <label>@lang('order.mode de livraison'):</label>
                            <select class="form-control kt-input kt-select" id="ShippingCode">
                                <option value="">@lang('layout.Select')</option>
                                <option value="STD">Normal</option>
                                <option value="TRK">Tracking</option>
                                <option value="REG">Recomendé</option>
                            </select>
                        </div>
                        <div class="col-lg-3 kt-margin-b-10-tablet-and-mobile">
                            <label>@lang('order.Prix Total'):</label>
                            <div class="input-daterange input-group">
                                <input type="number" min="0" class="form-control kt-input" id="start_prix" autocomplete="off">
                                <div class="input-group-append">
                                    <span class="input-group-text">à</span>
                                </div>
                                <input type="number" min="0" class="form-control kt-input" id="end_prix" autocomplete="off">
                            </div>
                        </div>
                            
                    </div>
                    <div class="kt-separator kt-separator--md kt-separator--dashed"></div>
                    <div class="row">
                        <div class="col-lg-12" style="margin-top:14px;">
                            <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 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>
                    </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="fas fa-trash-alt"></i>  <span>@lang('layout.Supprimer') </span>
                    </a>
                    <a class="btn btn-primary  btn-brand--icon" id="BtnPrint" style="opacity: 0;margin-top: 5px;color:white;">
                        <i class="fas fa-print"></i>  <span>@('layout.Imprimer') </span>
                    </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.OrderNumber')</th>
                        <th>@lang('order.Boutique')</th>
                        <th>@lang('order.Platform')</th>
                        <th>@lang('order.Sku')</th>
                        <th>@lang('order.mode de livraison') </th>
                        <th>@lang('order.prix')</th>
                        <th>@lang('order.ProductEan')</th>
                        <th>@lang('order.NameProduct')</th>
                        <th>@lang('order.SellerProductId')</th>
                        <th>@lang('order.Quantity')</th>
                        <th>@lang('stock.Poids')</th>
                        <th>@lang('order.FirstName')</th>
                        <th>@lang('order.LastName')</th>
                        <th>@lang('order.Pays')</th>
                        <th>@lang('order.City')</th>
                        <th>@lang('order.Street')</th>
                        <th>@lang('order.ZipCode')</th>
                        <th>@lang('layout.Action')</th>
                    </tr>
                  </thead>
                  <tbody>
                  
                  </tbody>
                  <tfoot>
                    <tr>
                        <th></th>
                        <th>@lang('order.OrderNumber')</th>
                        <th>@lang('order.Boutique')</th>
                        <th>@lang('order.Platform')</th>
                        <th>@lang('order.Sku')</th>
                        <th>@lang('order.mode de livraison') </th>
                        <th>@lang('order.prix')</th>
                        <th>@lang('order.ProductEan')</th>
                        <th>@lang('order.NameProduct')</th>
                        <th>@lang('order.SellerProductId')</th>
                        <th>@lang('order.Quantity')</th>
                        <th>@lang('stock.Poids')</th>
                        <th>@lang('order.FirstName')</th>
                        <th>@lang('order.LastName')</th>
                        <th>@lang('order.Pays')</th>
                        <th>@lang('order.City')</th>
                        <th>@lang('order.Street')</th>
                        <th>@lang('order.ZipCode')</th>
                        <th>@lang('layout.Action')</th>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
    <div class="modal fade" id="modal-export-csv" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">@lang('order.Mapping column')</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <div class="row kt-margin-b-10-tablet-and-mobile" style="margin-bottom: 20px;padding-right: 8px;">
                    <label class="col-4">@lang('order.Nom de modele'):</label>
                    <input type="text" class="col-8 form-control" id="nom_modele" placeholder="@lang('order.Nom de modele')">
                </div>
                <div class="row" id="dragg_and_drop">
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                            <h4 class="card-title">@lang('order.Liste columns')</h4>
                            </div>
                            <div class="card-body">
                                <!-- the events -->
                                <div id="sortable1" class="connectedSortable">
                                    @foreach(\Illuminate\Support\Facades\Schema::getColumnListing('orders') as $columns)
                                        <div class="db_column external-event bg-info row">
                                            <label class="text_label col-10" column_data="{{ $columns }}">{{ $columns }}</label>
                                            <div class="edit col-2"><i class="fas fa-edit"></i></div>
                                            <input type="text" class="form-control" value="{{ $columns }}" />
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    <div class="col-6">
                    <div class="card" style="height: 93%;">
                            <div class="card-header">
                            <h4 class="card-title">@lang('order.CSV columns')</h4>
                            </div>
                            <div class="card-body">
                            <!-- the events -->
                                <div id="sortable2" class="connectedSortable" style="height: 100%;">
                                    
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">@lang('layout.Close')</button>
              <button type="button" class="btn btn-primary" onclick="ExporterCSV()">@lang('layout.Exporter csv')</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div class="modal fade" id="list-export-csv" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">@lang('order.List Models')</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <div class="row" >
                    @foreach(Auth::user()->exportation as $model)
                    <div class="card card-info card-outline" id="model_{{ $model->id }}" style="width:97%;">
                        <div class="card-header">
                            <h5 class="card-title">{{ $model->nom_modele }} </h5>
                            <div class="card-tools">
                            <!--<a href="#" class="btn btn-tool btn-link">#3</a>-->
                            <a href="javascript:;" class="btn btn-tool" onclick="deleteModel({{ $model->id }})">
                                <i class="fas fa-trash-alt"></i>
                            </a>
                            <a href="javascript:;" class="btn btn-tool" onclick="applyModel({{ $model->id }})">
                                <i class="fas fa-download"></i>
                            </a>
                            </div>
                        </div>
                        <div class="card-body">
                            @foreach(json_decode($model->culumns_modele,TRUE) AS $row)
                                <div class="custom-control custom-checkbox">
                                    <input class="custom-control-input" type="checkbox" id="customCheckbox1" checked disabled="">
                                    <label for="customCheckbox1" class="custom-control-label">{{ $row['column'] . ' AS ' . $row['label'] }}</label>
                                </div>
                            @endforeach
                            
                        </div>
                    </div>
                    @endforeach
                </div>

            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <a href="javascript:;" onclick="$('#list-export-csv').modal('hide');$('#modal-export-csv').modal('show');" class="btn btn-sm btn-success">
                <i class="fas fa-file-csv"></i> @lang('order.Ajouter nouveau modele')
              </a>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!-- /.modal modal-upload-csv -->
    <div class="modal fade" id="modal-upload-csv" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">@lang('order.Uploader votre fichier csv')</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                    <div class="d-flex flex-row">
                <div class="modal-body">
                    <div class="row" id="dragg_and_drop">
                        <p class="sm text_template" style='color: #555'>@lang('order.veuillez uploader votre fichier csv duquel les commandes a valider seront importées')</p>
                        <p class="sm validation_text" style='color: #555;padding-left:10px; display:none'>@lang('order.Validation en cours')</p>
                        <p class="sm rapport_text" style='color: #555;padding-left:10px; display:none'>@lang('order.Rapport des commandes')</p>

                        <input class="w-100" type="file" accept=".csv" name="csvfile" id="csvfile">
                                 
                        </div>
                        <div class="progress progressBarFile" style="display:none">
                                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                <span class="sr-only">40% @lang('order.Complete') (success)</span>
                                </div>
                        </div>
                    
                </div>
            </div>
            
            
            <p class="sm text_template"  style='color: #555; padding-left: 1em'>@lang('order.Télcharger un template en') <a href="TemplateValidateOrder.csv">cliquant ici<a></p>
            <div class="alert alert-danger alert-dismissible" id="alert_file_csv" style="display:none">
                <h6><i class="icon fa fa-ban"></i> ('order.Veuillez choisir votre fichier')</h6>
            </div>
            <div class="modal-footer justify-content-between" style="padding-left: 1em; padding-right:1em">
              <button type="button" class="btn btn-default" data-dismiss="modal">@lang('layout.Close')</button>
                <a class="btn btn-sm btn-success botton_import" onClick="sendFile()" class="fas fa-file-csv" >@lang('order.Import csv')</a>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->


    @endsection