@extends('layouts.app')
@section('title')
Material Delivery
@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">Material Delivery</h1>
<!-- END page-header -->

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-body">
        <a href="{{route('addmaterialdelivery')}}" class="btn btn-primary mb-2">Delivery Material</a>
        <div class="table-responsive">
            <table id="material_delivery_table" class="table table-striped table-bordered align-middle nowrap w-100">
                <thead>
                    <tr>
                        <th></th>
                        <th>Created Date</th>
                        <th>Name</th>
                        <th>Material Owner</th>
                        <th>Status</th>
                        <th>Delivery Date</th>
                        <th>Delivery Amount</th>
                        <th>Receive Amount</th>
                        <th>Receive Date</th>
                        <th>Receive By</th>
                        <th>Created By</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
                <tfoot>
                    <tr>
                        <th></th>
                        <th>Created Date</th>
                        <th>Name</th>
                        <th>Material Owner</th>
                        <th>Status</th>
                        <th>Delivery Date</th>
                        <th>Delivery Amount</th>
                        <th>Receive Amount</th>
                        <th>Receive Date</th>
                        <th>Receive By</th>
                        <th>Created By</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<!-- END panel -->

@include('modals.materialadd')
@include('modals.materialedit')
@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>
$('#material_delivery_table tfoot th').each( function (index,element) {
    var title = $(this).text();

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

                    var html = `<a href="deliverydetail/`+data+`" class="btn btn-info btn-sm "><i class="fa fa-list"></i> Detail</a>`;
                    if(row.status == 3){
                        html += `<a href="/reorderdelivery/`+data+`" class="btn btn-success btn-sm "><i class="fa fa-edit"></i> Re-order</a>`;
                    }
                    if(row.delete_trigger == 0){
                        html += `<a href="javascript:void(0)" onclick="deletedelivery(`+data+`)" class="btn btn-danger btn-sm "><i class="fa fa-times"></i> Cancel</a>`;
                    }

                    return html;

                },searchable: false,orderable:false
            },
            {data:'created_at',name:'material_transection.created_at',searchable: true,orderable:true},
            {data:'name',name:'material_transection.name',searchable: true,orderable:true},
            {data:'owner_detail',name:'material_transection.owner_detail',searchable: true,orderable:true},
            {data:'status',name:'material_transection.status',
                render: function(data,type,row,meta){
                    if(type == 'display'){
                        var html = '';
                        if(row.status == 1){
                            html = `<span class="badge bg-warning">{{trans('custom.stock.delivery.1')}}</span>`
                        }
                        else if(row.status == 2){
                            html = `<span class="badge bg-primary">{{trans('custom.stock.delivery.2')}}</span>`
                        }
                        else if(row.status == 3){
                            html = `<span class="badge bg-danger">{{trans('custom.stock.delivery.3')}}</span>`
                        }
                        else if(row.status == 4){
                            html = `<span class="badge bg-success">{{trans('custom.stock.delivery.4')}}</span>`
                        }
                        else if(row.status == 99){
                            html = `<span class="badge bg-danger">{{trans('custom.stock.delivery.99')}}</span>`
                        }
                        return html;
                    }
                    return data
                },searchable: true,orderable:true
            },
            {data:'delivery_date',name:'material_transection.delivery_date',searchable: true,orderable:true},
            {data:'total_send_amount',name:'material_transection.total_send_amount',
                render: function ( data, type, row, meta ) {
                    if(type == "display"){
                        return numberWithCommas(data);
                    }
                    return data;
                },searchable: true,orderable:true
            },
            {data:'total_receive_amount',name:'material_transection.total_receive_amount',
                render: function ( data, type, row, meta ) {
                    if(type == "display"){
                        return numberWithCommas(data);
                    }
                    return data;
                },searchable: true,orderable:true
            },

            {data:'receive_date',name:'material_transection.receive_date',searchable: true,orderable:true},
            {data:'receiveusername',name:'receive.username',searchable: true,orderable:true},
            {data:'deliveryusername',name:'delivery.username',searchable: true,orderable:true},

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

            },
        },
        initComplete: function () {

                this.api().columns([4]).every( function ()
                {
                    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();

                        });

                        select.append( `
                        <option value="1">{{trans('custom.stock.delivery.1')}}</option>
                        <option value="2">{{trans('custom.stock.delivery.2')}}</option>
                        <option value="3">{{trans('custom.stock.delivery.3')}}</option>
                        <option value="4">{{trans('custom.stock.delivery.4')}}</option>
                        <option value="99">{{trans('custom.stock.delivery.99')}}</option>
                        ` );

                });

                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();
                        }
                    });
                });

        },
});
function deletedelivery(id){
    Swal.fire({
            title: 'Are you sure to Delete?',
            text: 'If confirm will delete all data from this Delivery',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            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('deletedelivery')}}",
                        method:"POST",
                        data:{'id':id},
                        beforeSend:function(){

                        },
                        success:function(response){
                            window.location.reload();
                        },
                        error:function(response){
                            Swal.fire(
                            'Error!!',
                            'Contract Admin',
                            'error'
                            )
                        }
                    });
                }
            })
}

</script>
@endpush