@extends('layouts.app')
@section('title')
Quotation
@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 rel="stylesheet" href="../assets/custom.css">
@endpush

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

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-body">
        @can('add-statement')
            <a href="{{route('addstatement')}}" class="btn btn-success  mb-3" >Add Statement</a>
        @endcan
        @can('add-directmail')
            <a href="{{route('adddirectmail')}}" class="btn btn-success  mb-3" >Add Direct Mail</a>
        @endcan



        <div class="table-responsive">
            <table id="quotations_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>Status</th>
                        <th>Estimate Quantity</th>
                        <th>Start - End Date</th>
                        <th>Frequency</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>Status</th>
                        <th>Estimate Quantity</th>
                        <th>Start - End Date</th>
                        <th>Frequency</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>
$('#quotations_table tfoot th').each( function (index,element) {
    var title = $(this).text();

    if(index ==  0 || index ==  1 || index == 4){}
    else{
        $(this).html( '<input class="form-control" style="min-width:150px;" type="text" placeholder="Search '+title+'" />' );
    }
} );
$('#quotations_table').DataTable({
        pageLength: 10,
        lengthMenu: [5, 10, 20, 50],
        order: [[ 9, "desc" ]],
        search: {
            return: true,
        },
        columns: [
            {data:'id',name:'quotation.id',className:'text-center',
                render: function ( data, type, row, meta ) {
                    var html = `
                    <a type="button" class="btn btn-info" href="/quotationdetail/`+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:'quotation.job_code',searchable: true,orderable:true},
            {data:'job_name',name:'quotation.job_name',searchable: true,orderable:true},
            {data:'status',name:'quotation.status',
                render: function(data,type,row,meta){
                    var html = '';
                    if(row.status == 0){
                        html = `<span class="badge bg-warning">{{trans('custom.quotation.status.0')}}</span>`
                    }else if(row.status == 1){
                        html = `<span class="badge bg-primary">{{trans('custom.quotation.status.1')}}</span>`
                    }else if(row.status == 2){
                        html = `<span class="badge bg-primary">{{trans('custom.quotation.status.2')}}</span>`
                    }else if(row.status == 3 || row.status == 4){
                        html = `<span class="badge bg-success">{{trans('custom.quotation.status.3')}}</span>`
                    }else if(row.status == 98){
                        html = `<span class="badge bg-danger">{{trans('custom.quotation.status.98')}}</span>`
                    }else if(row.status == 99){
                        html = `<span class="badge bg-danger">{{trans('custom.quotation.status.99')}}</span>`
                    }
                    return html;
                },searchable: true,orderable:true
            },
            {data:'estimate_quantity',name:'quotation.estimate_quantity',
                render: function ( data, type, row, meta ) {
                    return numberWithCommas(row.estimate_quantity);
                },searchable: true,orderable:true
            },
            {data:'startenddate',name:'startenddate',
                render: function ( data, type, row, meta ) {
                    return data;
                },searchable: true,orderable:true
            },
            {data:'frequency',name:'frequency',
                render: function ( data, type, row, meta ) {
                    return data;
                },searchable: true,orderable:true
            },
            {data:'owner_name',name:'quotation.owner_name',searchable: true,orderable:true},
            {data:'created_at',name:'quotation.created_at',searchable: true,orderable:true},
            {data:'created_by_user',name:'created_by_user',searchable: true,orderable:true},

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

            },
        },
        initComplete: function () {
            var count = 0;
                this.api().columns([1,4]).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="1">Waiting quote the price</option>
                                        <option value="2">Offered price</option>
                                        <option value="3">Approve</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>' )
                        });
                    }
                    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();
                        }
                    });
                });



        },
});

</script>
@endpush