@extends('layouts.app')
@section('title')
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/custom.css">
@endpush

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

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-body">
        @can('create-job')
            <a href="{{route('createjob')}}" class="btn btn-success  mb-3" >Create Job</a>
        @endcan



        <div class="table-responsive">
            <table id="job_table" class="table table-striped table-bordered align-middle nowrap w-100">
                <thead>
                    <tr>
                        <th></th>
                        <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>Summary report status</th>
                        <th>Owner</th>
                        <th>Created Date</th>
                        <th>Created By</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
                <tfoot>
                    <tr>
                        <th></th>
                        <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>Summary report status</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>
$('#job_table tfoot th').each( function (index,element) {
    var title = $(this).text();

    if(index ==  0 || index ==  1 || index == 5){}
    else{
        $(this).html( '<input class="form-control" style="min-width:150px;" type="text" placeholder="Search '+title+'" />' );
    }
} );
$('#job_table').DataTable({
        pageLength: 10,
        lengthMenu: [5, 10, 20, 50],
        order: [[11, "desc" ]],
        search: {
            return: true,
        },
        columns: [
            {data:'id',name:'job.id',className:'text-center',
                render: function ( data, type, row, meta ) {
                    var html = `
                    <a type="button" class="btn btn-info" href="/jobdetail/`+data+`"><i class="fa fa-list"></i> Detail</a>
                    `;
                    return html;

                },searchable: false,orderable:false
            },
            {data:'job_type',name:'quotation.job_type',
                render: function(data,type,row,meta){
                    return (data == 1 ? 'Statement' : 'Direct Mail');
                },searchable: true,orderable:true
            },
            {data:'job_code',name:'job.job_code',searchable: true,orderable:true},
            {data:'job_name',name:'job.job_name',searchable: true,orderable:true},
            {data:'bill_cycleandshipping',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-info">{{trans('custom.job.status.1')}}</span>`
                    }else if(row.status == 2){
                        html = `<span class="badge bg-success">{{trans('custom.job.status.2')}}</span>`
                    }else if(row.status == 3 || row.status == 4){
                        html = `<span class="badge bg-primary">{{trans('custom.job.status.3')}}</span>`
                    }else if(row.status == 4){
                        html = `<span class="badge bg-primary">{{trans('custom.job.status.4')}}</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 ) {
                    if(type == 'display'){
                        return numberWithCommas(data);
                    }
                    return data;
                },searchable: true,orderable:true
            },
            {data:'job_price',name:'job.job_price',
                render: function ( data, type, row, meta ) {

                    return numberWithCommas(data);
                },searchable: true,orderable:true
            },
            {data:'startenddate',name:'startenddate',
                render: function ( data, type, row, meta ) {
                    return data;
                },searchable: true,orderable:true
            },
            {data:'summary_report',name:'job.summary_report',
                render: function ( data, type, row, meta ) {
                    if(data != null){
                        return '<span class="badge bg-green">Submited</span>';
                    }else{
                        return '<span class="badge bg-warning">Waiting</span>';
                    }

                },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:'createduser',searchable: true,orderable:true},

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

            },
        },
        initComplete: function () {
            var count = 0;
                this.api().columns([1,5,9]).every( function () //Columnas a mostrar
                {
                    var column = this;
                    var select = $('<select class="form-select" 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="98">Cancel</option>
                            <option value="99">Reject</option>
                        `;

                         select.append( text)


                    }else 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>' )
                        });
                    }else if(count == 2){

                            var text = `
                                <option value="0">Waiting submit</option>
                                <option value="1">Submited</option>
                            `;

                            select.append( text)
                    }
                    count++;
                });

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



        },
});

</script>
@endpush