@extends('layouts.layout')
@section('title', 'Refinery Item List')
@section('body_class', 'nav-md')
@section('body_content')
<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 Item List </h3> 
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="row">                
                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            Filter
                        </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">Carat :</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <select type="text" class="form-control" name="carat" id="carat" placeholder="Carat" style="width:100%;"></select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-3 control-label">Type :</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <select type="text" class="form-control" name="type" id="type" placeholder="Type" style="width:100%;"></select>
                                        </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-default"><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="x_panel">
                        <div class="x_title">
                            <div class="row">
                                <div class="col-md-3 text-left">
                                    Item List
                                </div>
                                <div class="col-md-9 text-right">
                                    Total ETA Berat 24K : <span id="total_eta_berat24k_view">0.0</span> gram &nbsp;<button type="button" id="modal_to_refinery" class="btn btn-primary" disabled>Send to Refinery</button>
                                    
                                </div>
                            </div>
                        </div>
                        <div class="x_content">
                            <table id="table_item_list" class="table table-bordered table-striped nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Tgl. Nota</th>
                                        <th>Kode</th>
                                        <th>Note</th>
                                        <th>Tipe</th>
                                        <th>Karat Akt.</th>
                                        <th>Berat Akt.</th>
                                        <th>Eta Berat 24k.</th>
                                        <th>Send to Refinery &nbsp;<input type="checkbox" id="check_all"></th>
                                    </tr>
                                </thead>
                                <tbody class="response" id="scroll">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <form id="form_refinery" class="form-horizontal">
                <div class="modal fade" id="modal_form_refinery" 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">
                                    SEND TO REFINERY
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                </h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 control-label">Nama File :</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input type="text" class="form-control" name="name_file" id="name_file" placeholder="Nama File" style="width:100%;">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 control-label">Jumlah Item :</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <label class="col-xs-12 col-sm-4 control-label" style="text-align:left;font-weight:bold;"><span id="total_item"></label>
                                    </div>
                                </div>    
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 control-label">Total ETA Berat 24K :</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <label class="col-xs-12 col-sm-4 control-label" style="text-align:left;font-weight:bold;"><span id="total_eta_weight"></label>
                                    </div>
                                </div>  
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 control-label">Estimasi Kadar :</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <label class="col-xs-12 col-sm-4 control-label" style="text-align:left;font-weight:bold;"><span id="total_eta_carat"></label>
                                        
                                    </div>
                                </div>                         
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-sm btn-oke waves-effect btn-primary" id="send_to_refinery">Generate Report</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section('scripts')
@include('includes.helper_js')
<script>
    var total_actual_weight;
    var total_eta_weight;
    var total_eta_carat;
    var detail_id_array;

    globalCRUD.select2('#carat','/select2/item_carat', function(item) {
        return {
            id: item.id,
            text: item.carat_text
        }
    });
    globalCRUD.select2('#type','/select2/item_type', function(item) {
        return {
            id: item.id,
            text: item.type
        }
    });
    $(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/item_list/datatables',
        selector: '#table_item_list',
        serverSide: false,
        drawCallback: () => {
            $(document).on('click', 'input[name="to_refinery[]"]', function(e) {    
                getTotal();
            });
            $('#check_all').click(function(event) {  //on click 
                var allPages = tbl.table.table.cells().nodes();    
                if ($(this).is(':checked')) {
                    $(allPages).find('.to_refinery').prop('checked', 'checked');
                } else {
                    $(allPages).find('.to_refinery').prop('checked', false);     
                } 
                getTotal();
            });
        },
        columnsField: [
            'DT_RowIndex',
            { // invoce_date
                data: 'invoice.invoice_date',
                name: 'invoice.invoice_date',
                render: function(data, type, full) {
                    return data ? moment(data).format("DD MMMM YYYY") : '-';
                }
            },
            { // invoce_date
                data: 'invoice.invoice',
                name: 'invoice.invoice',
                render: function(data, type, full) {
                    return data ? data : '-';
                }
            },
            'refinery_item_type',
            { // item type
                data: "item_type",
                name: "item_type",
                render: function(data, type, full) {
                    return data ? data.type : '-';
                }
            },
            { // actual karat
                data: "actual_item_carat",
                name: "actual_item_carat",
                render: function(data, type, full) {
                    return data ? data.carat_text : '-';
                }
            },
            'actual_weight',
            { // ETA Berat 24K
                render: function(data, type, full) {
                    let actual_weight = full.actual_weight ?? 0;
                    let actual_carat = full.actual_item_carat ? full.actual_item_carat.carat : 0;
                    return rumusEtaWeight24k(actual_weight, actual_carat);
                }
            }, 
            { // Send To Refinery
                render: function(data, type, full) {
                    let actual_weight = full.actual_weight ?? 0;
                    let actual_carat = full.actual_item_carat ? full.actual_item_carat.carat : 0;
                    let eta_weight = rumusEtaWeight24k(actual_weight, actual_carat);
                    return `<div class="form-check">
                                <input name="to_refinery[]" class="form-check-input to_refinery" type="checkbox" id="to_refinery_${full.id}" actual_weight="${full.actual_weight}" eta_weight="${eta_weight}" data-id='${full.id}' value="0">
                                <label class="form-check-label" for="to_refinery_${full.id}">
                                </label>
                            </div>`;
                }
            }, 
        ],
        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/item_list/datatables' + playload);
        tbl.table.reloadTable(url);
        $('#check_all').prop('checked', false);  
        $('#modal_to_refinery').prop('disabled',true);
        $('#total_eta_berat24k_view').html('0.00');
    });

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

    $('#modal_to_refinery').click(function() {
        $('#total_eta_weight').html(total_eta_weight+' gram');
        $('#total_eta_carat').html(total_eta_carat+' %');
        $('#total_item').html(detail_id_array.length+' pcs');
        $('#modal_form_refinery').modal('show');
    });

    $('#send_to_refinery').click(function() {
        var data = {
            name_file: $('#name_file').val(),
            total_actual_weight: total_actual_weight,
            total_eta_weight: total_eta_weight,
            total_eta_carat: total_eta_carat,
            detail_id_array: detail_id_array
        }
        Axios.post('/butik/refinery/item_list/send_to_refinery',data)
        .then(function(response) {
            console.log(response);
            Helper.successNotif('Send To Refinery Success !');
            $('#modal_form_refinery').modal('hide');
            tbl.table.reloadTable();
            $('#check_all').prop('checked', false);  
            $('#modal_to_refinery').prop('disabled',true);
            $('#total_eta_berat24k_view').html('0.00');
        })
        .catch(function(error) {
            Helper.handleErrorResponse(error)
        });
    });
    

    function rumusEtaWeight24k(actual_weight, actual_item_carat) {
        return eta_weight = parseFloat(parseFloat(actual_weight) * (parseFloat(actual_item_carat) / 24)).toFixed(2);
    }

    function setEtaWeight(id) {
        return $('#to_refinery_'+id+'').attr('eta_weight');
    }

    function getTotal() {
        let tot_act_weight = 0;
        let tot_eta_weight = 0;
        let tot_eta_carat = 0;
        let det_id_arr = [];
        var allPages = tbl.table.table.cells().nodes();
        $(allPages).find('input[name="to_refinery[]"]').each(function () {
            let id = $(this).attr('data-id');
            let invoice_id = $(allPages).find('#to_refinery_'+id+'').attr('data-id');
            if ($(allPages).find('#to_refinery_'+id+'').is(':checked')) {
                let act_weight = +parseFloat($(allPages).find('#to_refinery_'+id+'').attr('actual_weight'));
                let eta_weight = +parseFloat($(allPages).find('#to_refinery_'+id+'').attr('eta_weight'));
                tot_act_weight += act_weight;
                tot_eta_weight += eta_weight;
                if(!det_id_arr.includes(id)) {
                    det_id_arr.push(id);
                }
            } 
        });
        tot_eta_carat = parseFloat((tot_eta_weight / tot_act_weight) * 100).toFixed(2);
        if(tot_eta_weight != 0) {
            $('#modal_to_refinery').prop('disabled',false);
        } else {
            $('#modal_to_refinery').prop('disabled',true);
        }
        $('#total_eta_carat').val(tot_eta_carat);
        $('#total_eta_berat24k_view').html(parseFloat(tot_eta_weight).toFixed(2)).css({ color: "limegreen" });
        total_actual_weight = parseFloat(tot_act_weight).toFixed(2);
        total_eta_weight =  parseFloat(tot_eta_weight).toFixed(2);
        total_eta_carat = tot_eta_carat;
        detail_id_array = det_id_arr;
        
    }
    
</script>
@endsection