@extends('layouts.app')
@section('title')
Tracking All Job
@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" />

@endpush
@section('content')
<!-- BEGIN page-header -->
<h1 class="page-header">Tracking All Job</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>
        <div class="table-responsive">
            <table id="trackingalljob_table" class="table table-striped table-bordered align-middle nowrap w-100">
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Bill Cycle/Shipping Date</th>
                    <th>Status</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Start - End Date</th>
                    <th>Owner</th>
                    <th>Created Date</th>
                    <th>Created By</th>
                  </tr>
                </thead>
                <tbody>

                </tbody>
                <tfoot>
                    <tr>
                      <th>Type</th>
                      <th>Code</th>
                      <th>Name</th>
                      <th>Bill Cycle/Shipping Date</th>
                      <th>Status</th>
                      <th>Quantity</th>
                      <th>Price</th>
                      <th>Start - End Date</th>
                      <th>Owner</th>
                      <th>Created Date</th>
                      <th>Created By</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<!-- END panel -->
@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/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);


    $('#trackingalljob_table tfoot th').each( function (index,element) {
        var title = $(this).text();

        if(index !=  0 || index != 4){
            $(this).html( '<input class="form-control" style="min-width:150px;" type="text" id="searchcolumn'+index+'" placeholder="Search '+title+'" />' );
        }
    } );

    var trackingtable = $('#trackingalljob_table').DataTable({
        pageLength: 10,
        lengthMenu: [5, 10, 20, 50],
        order: [[ 9, "desc" ]],
        search: {
            return: true,
        },
        columns: [
            {data:'job_type',name:'quotation.job_type',
                render: function ( data, type, row, meta ) {
                    if (type === 'display') {
                        var html = '';
                        if(row.job_type == "1"){
                            html = "Statement";
                        }else if(row.job_type == "2"){
                            html = "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'){
                        return `<a href="/jobdetail/`+row.id+`">`+data+`</a>`;
                    }
                    return data;
                },searchable: true,orderable:true
            },
            {data:null,name:'bill_cycleandshipping',
                render: function ( data, type, row, meta ) {

                    return row.bill_cycleandshipping;
                },searchable: true,orderable:true
            },
            {data:'status',name:'job.status',
                render: function ( data, type, row, meta ) {
                    var html = '' ;
                    if(row.status == 0){
                        html = `<span class="badge bg-warning">{{trans('custom.job.status.0')}}</span>`
                    }else if(row.status == 1){
                        html = `<span class="badge bg-primary">{{trans('custom.job.status.1')}}</span>`
                    }else if(row.status == 2){
                        html = `<span class="badge bg-primary">{{trans('custom.job.status1.1')}}</span>`
                    }else if(row.status == 3 || row.status == 4){
                        html = `<span class="badge bg-success">{{trans('custom.job.status1.2')}}</span>`
                    }else if(row.status == 20){
                        html = `<span class="badge bg-warning">{{trans('custom.job.status.20')}}</span>`
                    }else if(row.status == 21){
                        html = `<span class="badge bg-warning">{{trans('custom.job.status.21')}}</span>`
                    }else if(row.status == 22){
                        html = `<span class="badge bg-primary">{{trans('custom.job.status.22')}}</span>`
                    }else if(row.status == 23){
                        html = `<span class="badge bg-danger">{{trans('custom.job.status.23')}}</span>`
                    }else if(row.status == 98){
                        html = `<span class="badge bg-danger">{{trans('custom.job.status.98')}}</span>`
                    }else if(row.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 ) {
                    return numberWithCommas(row.real_quantity);
                },searchable: true,orderable:true
            },
            {data:'job_price',name:'job.job_price',
                render: function ( data, type, row, meta ) {
                    return numberWithCommas(row.job_price);
                },searchable: true,orderable:true
            },
            {data:'startenddate',name:'startenddate',
                render: function ( data, type, row, meta ) {
                    return row.startenddate;
                },searchable: true,orderable:true
            },
            {data:'owner_name',name:'quotation.owner_name',searchable: true,orderable:true},
            {data:'created_at',name:'job.created_at',searchable: true,orderable:true},
            {data:'createduser',name:'users.username',searchable: true,orderable:true},
            // {data:'bill_cycle',name:'js.bill_cycle',searchable: false,orderable:false,visible:false},
            // {data:'shipping_date',name:'job.shipping_date',searchable: false,orderable:false,visible:false},
        ],
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{route('trackingalljobdatatable')}}",
            type: 'post',
            data: function (d) {

            },
            error: function(xhr,status,error) {
            },
        },
        initComplete: function () {
            var count = 0;
                this.api().columns([0,4]).every( function () //Columnas a mostrar
                {
                    var column = this;
                    var select = $('<select class="form-select" id="searchcolumn'+column[0]+'" style="min-width:150px;"><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();

                        });

                    if(count == 1){

                                var text = `
                                        <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>
                                `;

                                select.append( text)


                    }
                    if(count == 0){
                        column.data().unique().sort().each( function ( d, j ){
                                var text = '';
                                if(d == 1){
                                    text = 'Statement';
                                }else if(d == 2){
                                    text = 'Direct Mail';
                                }
                                select.append( '<option value="'+d+'">'+text+'</option>' )
                        });
                    }
                    count++;
                });

                this.api()
                .columns([1,2,3,5,6,7,8,9,10])
                .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();
                        }
                    });
                });



        },
    });

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



        $('#searchcolumn0').val(column0);
        $('#searchcolumn4').val(column4);
        if(column7){
            $('#searchcolumn7').val(column7)
        }
        var count = 0;

        trackingtable.columns().every(function (){
            if(count != 0 || count != 4 || count != 7){
                trackingtable.column(count).search($('#searchcolumn'+count).val());
            }
            count++;
        });

        trackingtable.draw();
    });

    $('#searchshowall').on('click', function (){
        $('tfoot input,#searchcolumn0,#searchcolumn4').val('');
        trackingtable.columns().search('').draw();
    })

    $('#exporttrackingbtn').on('click', function () {
        $('#exporttrackingbtn').prop('disabled',true);
        $('.exportloadspin').removeClass('hide');
            $.ajax({
                url:"{{route('exporttrackingalljob')}}",
                method:"POST",
                data:{type:$('#searchcolumn0').val(),jobcode:$('#searchcolumn1').val(),jobname:$('#searchcolumn2').val(),status:$('#searchcolumn4').val(),startend:$('#searchcolumn7').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