@extends('layouts.app')
@section('title')
Shipping Report
@endsection
@push('styles')
<link href="../assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
<link href="../assets/custom.css">
@endpush

@section('content')
<!-- BEGIN page-header -->
<h1 class="page-header">Shipping Report</h1>
<!-- END page-header -->

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-body">
        <div class="row">
            <div class="form-group row mb-2">
                <div class="col-sm-1 mt-2">
                    <button type="button" class="btn btn-primary" id="searchshowall">Show all</button>
                </div>
                <div class="col-sm-4 mt-2">
                    <input class="form-control" type="text" name="searchrange" id="searchrange" value="Select Job"/>
                    <input type="hidden" name="searchrangestart" id="searchrangestart">
                    <input type="hidden" name="searchrangeend" id="searchrangeend">
                </div>
                <div class="col-sm-2 mt-2">
                    <select name="jobtype" id="jobtype" class="form-control" required>
                        <option value="">All job type</option>
                        <option value="1">Statement</option>
                        <option value="2">Direct Mail</option>
                    </select>
                </div>
                <div class="col-sm-2 mt-2">
                    <select name="status" id="status" class="form-control" required>
                        <option value="">All status</option>
                        <option value="0">Waiting receiving job</option>
                        <option value="2">During production</option>
                        <option value="3">Production completed</option>
                    </select>
                </div>
                <div class="col-sm-2 mt-2">
                    <button type="button" class="btn btn-primary" id="searchtrackbtn">Search
                    </button>
                    {{-- <button type="button" class="btn btn-success" id="exporttrackingbtn">Export
                        <div class="spinner-border spinner-border-sm text-primary exportloadspin hide" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </button> --}}

                </div>
            </div>
        </div>
        @can('addparcel')
        <a href="#shippingaddmodal" class="btn btn-primary mb-2" data-bs-toggle="modal">Add Shipping Report</a>
        @endcan

        <div class="table-responsive">
            <table id="shipping_table" class="table table-striped table-bordered align-middle nowrap w-100">
                <thead>
                    <tr>
                        <th></th>
                        <th>Status</th>
                        <th>Parcel Type</th>
                        <th>Job Type</th>
                        <th>Job ID</th>
                        <th>Job Name</th>
                        <th>Bill Cycle/Shipping Date</th>
                        <th>Job Status</th>
                        <th>Job Quantity</th>
                        <th>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="downloadAll">
                                <label class="form-check-label" for="flexCheckDefault">
                                    <button class="btn btn-xs btn-primary" data-toggle="tooltip" data-placement="top" title="Can download only 1 page. If need to download more change show to what ypu need." onclick="startmultipleDownload()" id="downloadallbtn">Download All File
                                    </button>
                                    <div class="spinner-border spinner-border-sm text-warning" id="loadingfile" role="status" hidden>
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </label>
                            </div>
                        </th>
                        <th>Created Date</th>
                        <th>Updated Date</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
                <tfoot>
                    <tr>
                        <th></th>
                        <th>Status</th>
                        <th>Parcel Type</th>
                        <th>Job Type</th>
                        <th>Job ID</th>
                        <th>Job Name</th>
                        <th>Bill Cycle/Shipping Date</th>
                        <th>Job Status</th>
                        <th>Job Quantity</th>
                        <th></th>
                        <th>Created Date</th>
                        <th>Updated Date</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<!-- END panel -->

@include('modals.shippingadd')
@endsection

@push('scripts')
<script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="../assets/plugins/jszip/jszip.min.js"></script>
<script src="../assets/plugins/filesaver/FileSaver.js"></script>
<script src="../assets/plugins/moment/min/moment.min.js"></script>
<script src="../assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
var currentdate = new Date();
var date = currentdate.getFullYear()+'-'+(currentdate.getMonth()+1 < 10 ? '0'+(currentdate.getMonth()+1) : currentdate.getMonth()+1)+'-'+(currentdate.getDate() < 10 ? '0'+currentdate.getDate() : currentdate.getDate());
$('input[name="searchrange"]').daterangepicker({
    startDate: moment(),
    endDate: moment(),
    locale:{
        format: 'YYYY-MM-DD',
        separator: " to ",
    }
},function(start, end, label) {
    $('#searchrangestart').val(start.format('YYYY-MM-DD'));
    $('#searchrangeend').val(end.format('YYYY-MM-DD'));
});
$('#searchrange').val(date+' to '+date);
$('#searchrangestart').val(date);
$('#searchrangeend').val(date);

function startmultipleDownload() {
    $("#downloadallbtn").attr("disabled", true);
    $("#loadingfile").attr("hidden", false);
    var selectedFiles = [];
    $.each($('input:checkbox[name="download[]"]:checked'), function () {
        selectedFiles.push($(this).val());
    });
    var zip = new JSZip();

    Promise.all(selectedFiles.map(filename => fetchFile(filename)))
        .then(blobArray => {
            blobArray.forEach(({ filename, blob }) => {
                let count = filename.split("/");
                let newName = count[count.length - 1];
                zip.file(newName, blob, { binary: true });
            });

            // Generate and download the zip archive
            zip.generateAsync({ type: "blob" })
                .then(function (content) {
                    saveAs(content, "Shipping-Report.zip");
                })
                .catch(function (error) {
                    console.error('Error generating the zip file:', error);
                });

        });
     $("#loadingfile").attr("hidden", true);
    $("#downloadallbtn").attr("disabled", false);
}
function fetchFile(filename) {
    return fetch('/storage/' + filename)
        .then(response => response.blob())
        .then(blob => ({ filename, blob }))
        .catch(error => {
            console.error(`Error fetching ${filename}:`, error);
            return { filename, blob: null };
        });
}
$("#downloadAll").click(function(){
    $('input:checkbox[name="download[]"]').prop('checked', this.checked);
});
$('#shipping_table tfoot th').each( function (index,element) {
    var title = $(this).text();

    if(index ==  0 || index ==  1 || index ==  2 || index ==  3 || index ==  7 || index ==  9 ){}
    else{
        $(this).html( '<input class="form-control" style="min-width:150px;" type="text" id="searchcolumn'+index+'" placeholder="Search '+title+'" />' );
    }
} );
let shipping_table = $('#shipping_table').DataTable({
        pageLength: 10,
        lengthMenu: [5, 10, 20, 50],
        order: [[ 10, "desc" ]],
        search: {
            return: true,
        },
        columns: [
            {data:'id',name:'parcel_group.id',className:'text-center',
                render: function ( data, type, row, meta ) {

                    var html = `<a href="shippingreportdetail/`+data+`"  class="btn btn-info btn-sm "><i class="fa fa-list"></i> Detail</a>`;
                    if(row.status == 0){
                        @can('parcelapprove')
                        html +=`<a href="javascript:void(0)" onclick="approve(`+data+`);" class="btn btn-success btn-sm "><i class="fa fa-check"></i> Approve All</a>`;
                        @endcan
                        @can('parcelreject')
                        html += `<a href="javascript:void(0)" onclick="reject(`+data+`);" class="btn btn-danger btn-sm "><i class="fa fa-times"></i> Reject All</a>`;
                        @endcan
                    }
                    if(row.status == 0 || row.status == 2){
                        @can('parceldelete')
                        html += `<a href="javascript:void(0)" onclick="deleted(`+data+`);" class="btn btn-danger btn-sm "><i class="fa fa-times"></i> Delete</a>`;
                        @endcan
                    }

                    return html;

                },searchable: false,orderable:false
            },
            {data:'status',name:'parcel_group.status',
                render: function(data,type,row,meta){
                    if(type == 'display'){
                        var html = '';
                        if(row.status == 0){
                            html = `<span class="badge bg-warning">Waiting confirm</span>`
                        }
                        else if(row.status == 1){
                            html = `<span class="badge bg-primary">Approve</span>`
                        }
                        else if(row.status == 2){
                            html = `<span class="badge bg-danger">Reject</span>`
                        }
                        return html;
                    }
                    return data;
                },searchable: true,orderable:true
            },
            {data:'group_parcel_type',name:'parcel_group.group_parcel_type',render: function(data,type,row,meta){
                    if(type == 'display'){
                        var html = '';
                        if(row.group_parcel_type == 1){
                            html = `ใบนำส่งไปรษณีย์`
                        }
                        else if(row.group_parcel_type == 2){
                            html = `ใบฝากรวม AWN & BOS`
                        }
                        else if(row.group_parcel_type == 3){
                            html = `ใบฝากรวม Statement FBB`
                        }
                        else if(row.group_parcel_type == 4){
                            html = `ใบฝากรวม Direct Mail`
                        }

                        return html;
                    }
                    return data;
                },searchable: true,orderable:true
            },
            {data:'job_type',name:'quotation.job_type',render: function(data,type,row,meta){
                   if(type == 'display'){
                        if(data == 1){
                            return "Statement";
                        }else if(data == 2){
                            return "Direct Mail";
                        }

                    return html;
                   }
                   return data;
                },searchable: true,orderable:true},
            {data:'job_code',name:'job.job_code',searchable: true,orderable:true},
            {data:'job_name',name:'job.job_name',render: function(data,type,row,meta){
                    if(type == 'display'){
                        var html = `<a href="jobdetail/`+row.jobid+`"> `+data+`</a>`;

                        return html;
                    }
                    return data;
                },searchable: true,orderable:true
            },
            {data:'bill_cycleandshipping',name:'bill_cycleandshipping',render: function(data,type,row,meta){

                    return data;
                },searchable: true,orderable:true
            },
            {data:'job_status',name:'job.status',
                render: function ( data, type, row, meta ) {
                    var html = '' ;
                    if(row.job_status == 0){
                        html = `<span class="badge bg-warning">{{trans('custom.job.status.0')}}</span>`
                    }else if(row.job_status == 1){
                        html = `<span class="badge bg-primary">{{trans('custom.job.status.1')}}</span>`
                    }else if(row.job_status == 2){
                        html = `<span class="badge bg-primary">{{trans('custom.job.status1.1')}}</span>`
                    }else if(row.job_status == 3 || row.job_status == 4){
                        html = `<span class="badge bg-success">{{trans('custom.job.status1.2')}}</span>`
                    }else if(row.job_status == 20){
                        html = `<span class="badge bg-warning">{{trans('custom.job.status.20')}}</span>`
                    }else if(row.job_status == 21){
                        html = `<span class="badge bg-warning">{{trans('custom.job.status.21')}}</span>`
                    }else if(row.job_status == 22){
                        html = `<span class="badge bg-primary">{{trans('custom.job.status.22')}}</span>`
                    }else if(row.job_status == 23){
                        html = `<span class="badge bg-danger">{{trans('custom.job.status.23')}}</span>`
                    }else if(row.job_status == 98){
                        html = `<span class="badge bg-danger">{{trans('custom.job.status.98')}}</span>`
                    }else if(row.job_status == 99){
                        html = `<span class="badge bg-danger">{{trans('custom.job.status.99')}}</span>`
                    }
                    return html;
                },searchable: true,orderable:true
            },
            {data:'real_quantity',name:'job.real_quantity',render: function(data,type,row,meta){
                    if(type == 'display'){
                      return numberWithCommas(data);
                    }
                    return data;
                },searchable: true,orderable:true
            },
            {data:'file_url',name:'parcel_group.file_url',render: function(data,type,row,meta){
                    var html = '';
                    if(type == 'display'){
                        html = `
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="`+data+`" name="download[]" >
                            <label class="form-check-label">
                                <a href="storage/`+data+`" target="_blank" download> Download</a>
                            </label>
                        </div>
                        `;
                      return html;
                    }
                    return data;
                },searchable: false,orderable:false
            },
            {data:'created_at',name:'parcel_group.created_at',searchable: true,orderable:true},
            {data:'updated_at',name:'parcel_group.updated_at',searchable: true,orderable:true},

        ],
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{route('shippingreportdatatable')}}",
            type: 'post',
            data: function (d) {

            },
        },
        initComplete: function () {
                this.api().columns([1]).every( function ()
                {
                    var column = this;
                    var select = $('<select class="form-select" style="min-width:150px;"><option value="" id="searchcolumn0">Search '+column.header().textContent+'</option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());

                            column.search( val ? val: '', true, false ).draw();

                        });

                        select.append( '<option value="0">Waiting confirm</option><option value="1">Approve</option><option value="2">Reject</option>' );

                });
                this.api().columns([2]).every( function ()
                {
                    var column = this;
                    var select = $('<select class="form-select" style="min-width:150px;"><option value="" id="searchcolumn2">Search '+column.header().textContent+'</option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());

                            column.search( val ? val: '', true, false ).draw();

                        });

                        select.append( `
                        <option value="1">ใบนำส่งไปรษณีย์</option>
                        <option value="2">ใบฝากรวม AWN & BOS</option>
                        <option value="3">ใบฝากรวม Statement FBB</option>
                        <option value="4">ใบฝากรวม Direct Mail</option>
                        ` );

                });
                this.api().columns([3]).every( function ()
                {
                    var column = this;
                    var select = $('<select class="form-select" style="min-width:150px;"><option value="" id="searchcolumn3">Search '+column.header().textContent+'</option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());

                            column.search( val ? val: '', true, false ).draw();

                        });

                        select.append( `
                        <option value="1">Statement</option>
                        <option value="2">Direct Mail</option>
                        ` );

                });

                this.api().columns([7]).every( function ()
                {
                    var column = this;
                    var select = $('<select class="form-select" style="min-width:150px;" id="searchcolumn7"><option value="">Search '+column.header().textContent+'</option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());

                            column.search( val ? val: '', true, false ).draw();

                        });

                        select.append( `
                            <option value="0">Waiting receiving job</option>
                            <option value="1">Job received</option>
                            <option value="2">During production</option>
                            <option value="3">Production completed</option>
                            <option value="4">Shipping complete</option>
                            <option value="20">Waiting upload example</option>
                            <option value="21">Waiting confirm example</option>
                            <option value="22">Approve example</option>
                            <option value="23">Reject example</option>
                            <option value="50">Waiting Approve</option>
                            <option value="98">Reject</option>
                            <option value="99">Cancel</option>
                        ` );

                });

                this.api().columns([7]).every( function ()
                {
                    var column = this;
                });

                this.api()
                .columns([4,5,6,8,10,11])
                .every(function () {
                    var that = this;

                    $('input', this.footer()).on('keypress', function (e) {
                        if (that.search() !== this.value && e.key === "Enter") {
                            that.search(this.value).draw();
                        }
                    });
                });

        },
});

    function approve(id){
            Swal.fire({
                        title: 'Are you Sure?',
                        text: 'Approve this Parcel.',
                        icon: 'warning',
                        showCancelButton: true,
                        cancelButtonColor: '#d33',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Approve',
                        reverseButtons:true,
                        }).then((result) => {
                            if (result.value) {
                                Swal.fire({
                                    title: 'Please Wait..!',
                                    text: 'Is working..',
                                    allowOutsideClick: false,
                                    allowEscapeKey: false,
                                    allowEnterKey: false,
                                    didOpen: () => {
                                        swal.showLoading()
                                    }
                                })
                                $.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    }
                                });
                                $.ajax({
                                    url:"{{route('approveallparcel')}}",
                                    method:"POST",
                                    data:{'id':id},
                                    beforeSend:function(){

                                    },
                                    success:function(data){
                                        Swal.fire({
                                        title: 'Success!!',
                                        text: 'Press OK to continuous.',
                                        icon: 'success',
                                        showCancelButton: false,
                                        confirmButtonColor: '#3085d6',
                                        confirmButtonText: 'OK'
                                        }).then((result) => {
                                            $('#shipping_table').DataTable().ajax.reload(null,false);
                                        })
                                    },
                                    error:function(response){
                                        Swal.fire(
                                            'Error!!',
                                            'Contract Admin',
                                            'error'
                                            )
                                    }
                                });
                            }
                        })

}

async function reject(id){
    const {value: formValues} = await Swal.fire({
                title: 'Reason to Reject',
                html:
                    '<input id="swal-input" class="swal2-input">',
                focusConfirm: false,
                showCancelButton: true,
                reverseButtons:true,
                preConfirm: () => {
                        return [
                            document.getElementById('swal-input').value,
                        ]
                }
            })
            if(formValues){
                Swal.fire({
                        title: 'Are you Sure?',
                        text: 'Reject this Parcel.',
                        icon: 'warning',
                        showCancelButton: true,
                        cancelButtonColor: '#d33',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Reject',
                        reverseButtons:true,
                        }).then((result) => {
                            if (result.value) {
                                Swal.fire({
                                    title: 'Please Wait..!',
                                    text: 'Is working..',
                                    allowOutsideClick: false,
                                    allowEscapeKey: false,
                                    allowEnterKey: false,
                                    didOpen: () => {
                                        swal.showLoading()
                                    }
                                })
                                $.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    }
                                });
                                $.ajax({
                                    url:"{{route('rejectallparcel')}}",
                                    method:"POST",
                                    data:{'id':id,'data':formValues[0]},
                                    beforeSend:function(){
                                    },
                                    success:function(data){
                                        Swal.fire({
                                        title: 'Success!!',
                                        text: 'Press OK to continuous.',
                                        icon: 'success',
                                        showCancelButton: false,
                                        confirmButtonColor: '#3085d6',
                                        confirmButtonText: 'OK'
                                        }).then((result) => {
                                            $('#shipping_table').DataTable().ajax.reload(null,false);
                                        })
                                    },
                                    error:function(response){
                                        Swal.fire(
                                            'Error!!',
                                            'Contract Admin',
                                            'error'
                                            )
                                    }
                                });
                            }
                        })
            }


}

function deleted(id){
            Swal.fire({
                        title: 'Are you Sure?',
                        text: 'Delete this Parcel.',
                        icon: 'warning',
                        showCancelButton: true,
                        cancelButtonColor: '#d33',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Delete',
                        reverseButtons:true,
                        }).then((result) => {
                            if (result.value) {
                                Swal.fire({
                                    title: 'Please Wait..!',
                                    text: 'Is working..',
                                    allowOutsideClick: false,
                                    allowEscapeKey: false,
                                    allowEnterKey: false,
                                    didOpen: () => {
                                        swal.showLoading()
                                    }
                                })
                                $.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    }
                                });
                                $.ajax({
                                    url:"{{route('deleteallparcel')}}",
                                    method:"POST",
                                    data:{'id':id},
                                    beforeSend:function(){

                                    },
                                    success:function(data){
                                        Swal.fire({
                                        title: 'Success!!',
                                        text: 'Press OK to continuous.',
                                        icon: 'success',
                                        showCancelButton: false,
                                        confirmButtonColor: '#3085d6',
                                        confirmButtonText: 'OK'
                                        }).then((result) => {
                                            $('#shipping_table').DataTable().ajax.reload(null,false);
                                        })
                                    },
                                    error:function(response){
                                        Swal.fire(
                                            'Error!!',
                                            'Contract Admin',
                                            'error'
                                            )
                                    }
                                });
                            }
                        })

}


$('#searchtrackbtn').on('click', function () {
        var column3 = $('#jobtype').val();
        var column7 = $('#status').val();
        var column10 = $('#searchrange').val();



        $('#searchcolumn3').val(column3);
        $('#searchcolumn7').val(column7);
        if(column10){
            $('#searchcolumn10').val(column10)
        }
        var count = 0;

        shipping_table.columns().every(function (){
            if(count != 3 || count != 7 || count != 10){
                shipping_table.column(count).search($('#searchcolumn'+count).val());
            }
            count++;
        });

        shipping_table.draw();
    });

    $('#searchshowall').on('click', function (){
        $('tfoot input,#searchcolumn3,#searchcolumn7,#searchcolumn10').val('');
        shipping_table.columns().search('').draw();
    })

    // $('#exporttrackingbtn').on('click', function () {
    //     $('#exporttrackingbtn').prop('disabled',true);
    //     $('.exportloadspin').removeClass('hide');
    //         $.ajax({
    //             url:"{{route('exporttrackingalljob')}}",
    //             method:"POST",
    //             data:{type:$('#searchcolumn3').val(),jobcode:$('#searchcolumn1').val(),jobname:$('#searchcolumn2').val(),status:$('#searchcolumn3').val(),startend:$('#searchcolumn10').val()},
    //             success:function(data){
    //                 $('.exportloadspin').addClass('hide');
    //                 $('#exporttrackingbtn').prop('disabled',false);
    //                 if(data.response =='success'){
    //                     Swal.fire({
    //                     title: 'Success!!',
    //                     text: 'Press Download to save file.',
    //                     icon: 'success',
    //                     showCancelButton: false,
    //                     confirmButtonColor: '#3085d6',
    //                     cancelButtonColor: '#d33',
    //                     confirmButtonText: 'Download'
    //                     }).then((result) => {
    //                         if (result.value) {
    //                             var element = document.createElement('a');
    //                             element.setAttribute('href', data.filename);
    //                             element.setAttribute('download',data.name);

    //                             element.style.display = 'none';
    //                             document.body.appendChild(element);

    //                             element.click();

    //                             document.body.removeChild(element);
    //                         }

    //                     })
    //                 }else{

    //                     Swal.fire(
    //                             'Not Found!!',
    //                             'No DATA in selected condition.',
    //                             'error'
    //                             )

    //                 }

    //             },
    //             error:function(response){
    //                 $('.exportloadspin').addClass('hide');
    //                 $('#exporttrackingbtn').prop('disabled',false);
    //                 Swal.fire(
    //                     'Error!!',
    //                     'Contract Admin',
    //                     'error'
    //                     )
    //             }
    //         });
    // });
</script>
@endpush