@extends('layouts.layout')
@section('title', 'Refinery Unload')
@section('body_class', 'nav-md')
@section('body_content')
<title>Lakuemas | Refinery Unload</title>
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3><i class="fa fa-edit"></i> Refinery Unload</h3>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="row">                
                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            Filter (Unload Date)
                        </div>
                        <div class="x_content">
                            <form id="form-search" class="form-horizontal">
                                <div class="col-xs-12 col-sm-12">
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-3 control-label">Tanggal Mulai :</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <input type="text" class="form-control date_format" name="from_date" id="from_date" placeholder="Tanggal Mulai">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-3 control-label">Tanggal Selesai :</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <input type="text" class="form-control date_format" name="end_date" id="end_date" placeholder="Tanggal Selesai">
                                        </div>
                                    </div>
                                    <div class="form-group" style="margin-top:20px">
                                        <label class="col-xs-12 col-sm-3 control-label"></label>
                                        <div class="col-xs-12 col-sm-9">
                                            <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
                                            <button type="button" class="btn btn-warning" id="reset_btn"><i class="fa fa-trash"></i> Reset</button>
                                        </div>
                                    </div>
                                </div>
                            </form>  
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">                
                <div class="col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            QC Cashbox List
                        </div>
                        <div class="panel-body">
                            <table id="table_cashbox" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Outlet</th>
                                        <th>Qc Hub Location</th>
                                        <th>QC Unload Date</th>
                                        <th>Item Quantity</th>
                                        <th width="10%">Actions</th>
                                        <th>Unload By</th>
                                    </tr>
                                </thead>
                                <tbody class="response" id="scroll">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modal_reason_reject" data-backdrop="false" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Reject</h4>
                    </div>
                    <div class="modal-body"> 
                        <input type="hidden" name="id" id="id">
                        <label class="label-control">Reason</label>
                        <div class="form-group">
                            <textarea class="form-control" cols="4" rows="4" name="reason_reject" id="reason_reject"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm waves-effect btn-clus" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                        <button type="button" class="btn btn-sm btn-oke waves-effect btn-primary" id="reason_reject_submit"><i class="fa fa-plus"></i> Save</button>
                    </div>
                </div>
            </div>
        </div>       
        @include('includes.footer')
    </div>
</div>
@endsection
@section('scripts')
@include('includes.helper_js')
<script>
    $(function() {
        var d = new Date();
        var startDate = d.setMonth(d.getMonth() - 1);
        var e = new Date();
        var endDate = e.setDate(e.getDate());
        Helper.datePicker('date_format',null,endDate);
        $('input[name="from_date"]').val(moment(startDate).format('DD-MM-YYYY'));
        $('input[name="end_date"]').val(moment(endDate).format('DD-MM-YYYY'));
    });
    var tbl = globalCRUD.datatables({
        url: '/butik/refinery/unload/datatables',
        selector: '#table_cashbox',
        drawCallback: () => {
            $('.to_item_list').click(function() {
                var id = $(this).attr('data-id');
                Helper.confirm(function() {
                    Axios.post('/butik/refinery/unload/'+id+'/to_item_list',{unload_id:id})
                    .then(function(response) {
                        Helper.successNotif('Move To Item List Success !');
                        tbl.table.reloadTable();
                    })
                    .catch(function(error) {
                        Helper.handleErrorResponse(error)
                    });
                });
            });

            $('#reason_reject_submit').click(function() {
                var id = $('#id').val();
                Helper.confirm(function() {
                    Axios.post('/butik/refinery/unload/'+id+'/reject',
                        {
                            unload_id:id,
                            reason_reject: Helper.encodeHtmlSpecialChars($('#reason_reject').val())
                        }
                    )
                    .then(function(response) {
                        Helper.successNotif('Unload Reject Success !');
                        $('#modal_reason_reject').modal('hide');
                        tbl.table.reloadTable();
                    })
                    .catch(function(error) {
                        Helper.handleErrorResponse(error)
                    });
                });
            });
        },
        columnsField: [
            'DT_RowIndex',
            'outlet',
            { // hub_location
                data: 'hub_location',
                name: 'hub_location',
                render: function(data, type, full) {
                    let html ='';
                    if(data.length > 0) {
                        _.each(data, (val) => {
                            html += '- '+val+'<br/>';
                        });
                        return html;
                    } else {
                        return '-';
                    }
                }
            },
            'unload_date',
            'item_quantity',
            { // action
                data: "id",
                name: "id",
                render: function(data, type, full) {
                    
                    let is_hidden = full.qc_status == 'moved_central' ? '' : 'style="display:none"';
                    const unload_box = `<button type="button" data-id='${data}' title='Unload Box' class='btn btn-primary btn-sm btn-pill to_item_list' ${is_hidden}><i class="fa fa-dropbox"></i></button>`;
                    const lihat_detail = `<button onclick="window.location.href='${Helper.url('/butik/qc_cashbox/'+data+'/details_list')}'" data-id='${data}' title='Lihat Detail' class='lihat_detail btn btn-default btn-sm btn-pill' style='color:#337ab7;'><i class="fa fa-bars"></i></button>`;
                    const reject = `<button onclick="openReasonReject('${data}')" data-id='${data}' title='Reason Reject' class='btn btn-danger btn-sm btn-pill' ${is_hidden}><i class="fa fa-times-circle"></i></button>`;
                    return unload_box+' '+lihat_detail+' '+reject;
                }
            },
            'unload_refinery_by',
        ],
        actionLink: ""
    });
    // search datatables;
    $("#form-search").submit(function(e) {
        e.preventDefault();
        let input = Helper.serializeForm($(this));
        playload = '?';
        _.each(input, (val, key) => {
            playload += key + '=' + val + '&'
        });
        playload = playload.substring(0, playload.length - 1);
        console.log(playload);
        url = Helper.url('/butik/refinery/unload/datatables' + playload);
        tbl.table.reloadTable(url);
    });

    //reset field pencarian
    $("#reset_btn").click(function(e) {
        e.preventDefault();
        $('#from_date').val('');
        $('#end_date').val('');
    });

    function openReasonReject(id,content) {
        $('#id').val(id);
        $('#modal_reason_reject').modal('show');
    }

</script>
@endsection