@extends('m3::liberty-theme.layout.main')
@section('title')
    Solon Sentinel Portal - Replenishment Settings Update
@endsection
@section('content')
    <!-- /.row -->
    <div class="container-fluid px-4">
        <h1 class="mt-4">Replenishment Settings</h1>

        <div class="card mb-4">
            <div class="card-header">
                <button type="button" class="btn btn-primary" id="addRecordBtn">Add Record</button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover" id="datatablesSimple5" style="width:100%">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Division</th>
                            <th>Plant</th>
                            <th>Warehouse</th>
                            <th>Location</th>
                            <th>Part</th>
                            <th>Minimum qty</th>
                            <th>Replenishment qty</th>
                            <th>Tolerance</th>
                            <th>Replenishment min qty</th>
                            <th>Lot Controlled</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- @foreach ($REFCAT658 as $key => $val)
                            <tr>
                                <td></td>
                                <td> {{ $val->R658CO }} </td>
                                <td> {{ $val->R658PL }} </td>
                                <td> {{ $val->R658WH }} </td>
                                <td> {{ $val->R658LC }} </td>
                                <td> {{ $val->R658PN }} </td>
                                <td> {{ $val->R658MQ }} </td>
                                <td> {{ $val->R658RQ }} </td>
                                <td> {{ $val->R658TL }} </td>
                                <td> {{ $val->R658RMQ }} </td>
                                <td class="text-center">
                                    {!! ($val->R658IZLCF ?? '')=='1' ? '<i class="fas fa-lg fa-check"></i>' :'<i class="fas fa-lg fa-times"></i>'  !!}
                                </td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-info editrefcat"
                                        data-comp="{{ trim($val->R658CO) }}" data-pl="{{ trim($val->R658PL) }}" data-loc="{{ trim($val->R658LC) }}"
                                        data-part="{{ trim($val->R658PN) }}" data-wh="{{ trim($val->R658WH) }}"
                                        data-minqty="{{ trim($val->R658MQ) }}" data-repqty="{{ trim($val->R658RQ) }}"
                                        data-repminqty="{{ trim($val->R658RMQ) }}" data-tol="{{ trim($val->R658TL) }}"
                                        data-controlled="{{ trim($val->R658IZLCF) }}"
                                        title="Edit Replenishment">
                                        Edit
                                    </button>
                                    <button type="button" class="btn btn-sm btn-danger deleterefcat"
                                    data-comp="{{ trim($val->R658CO) }}" data-pl="{{ trim($val->R658PL) }}" data-loc="{{ trim($val->R658LC) }}"
                                    data-part="{{ trim($val->R658PN) }}" data-wh="{{ trim($val->R658WH) }}" title="Delete Replenishment">
                                        Delete
                                    </button>
                                </td>
                            </tr>
                        @endforeach --}}
                    </tbody>
                </table>
                </div>
            </div>
        </div>

    </div>

    <!-- Add Modal -->
    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true"
        data-bs-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addModalLabel">Add Record</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form class="needs-validation" id="addReplen" method="POST" action="{{ route("m3.replenishmentSettings.store") }}" enctype="multipart/form-data">
                    <div class="modal-body">
                        @csrf
                        <div class="row">
                            <div class="col-6">
                                <div class="mb-3">
                                    <label for="WHDDA" class="col-form-label">Part:</label>
                                    <label for="R658PNA" class="visually-hidden">R658PN</label>
<input type="text" class="form-control" name="R658PN" id="R658PNA" required>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Location:</label>
                                    <label for="R658LCA" class="visually-hidden">R658LC</label>
<input type="text" class="form-control" name="R658LC" id="R658LCA" required>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Minimum quantity:</label>
                                    <label for="R658MQA" class="visually-hidden">R658MQ</label>
<input type="number" class="form-control" name="R658MQ" id="R658MQA" required>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Replenishment quantity:</label>
                                    <label for="R658RQA" class="visually-hidden">R658RQ</label>
<input type="number" class="form-control" name="R658RQ" id="R658RQA" required>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Replenishment Min quantity:</label>
                                    <label for="R658RMQA" class="visually-hidden">R658RMQ</label>
<input type="number" class="form-control" name="R658RMQ" id="R658RMQA" required>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Tolerance:</label>
                                    <label for="R658TLA" class="visually-hidden">R658TL</label>
<input type="text" class="form-control" name="R658TL" id="R658TLA" maxlength="2" required>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="mb-3">
                                <label for="recipient-name" class="col-form-label">Warehouse:</label>
                                <select class="form-select"  id="WHDDA" tabindex="0" required>
                                    <option value="">Select Warehouse</option>
                                    @foreach ($IC670M as $key => $IC670MR)
                                        <option  value="{{ trim($IC670MR->WDCO).trim($IC670MR->WDPL).trim($IC670MR->WDWHS) }}"
                                        data-comp="{{ trim($IC670MR->WDCO) }}" data-pl="{{ trim($IC670MR->WDPL) }}" data-wh="{{ trim($IC670MR->WDWHS) }}" >
                                            {{ trim(Str::upper($IC670MR->WDWNAM)) }}
                                        </option>
                                    @endforeach
                                </select>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Division:</label>
                                    <label for="R658COA" class="visually-hidden">R658CO</label>
<input type="text" class="form-control" name="R658CO" id="R658COA" required readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Plant:</label>
                                    <label for="R658PLA" class="visually-hidden">R658PL</label>
<input type="text" class="form-control" name="R658PL" id="R658PLA" required readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Warehouse:</label>
                                    <label for="R658WHA" class="visually-hidden">R658WH</label>
<input type="text" class="form-control" name="R658WH" id="R658WHA" required readonly>
                                </div>
                                <div class="form-check form-switch">
                                    <label for="R658IZLCFA" class="visually-hidden">R658IZLCF</label>
<input class="form-check-input" type="checkbox" role="switch" name="R658IZLCF" id="R658IZLCFA" value="1" aria-checked="false">
                                    <label class="form-check-label" for="flexSwitchCheckDefault">Lot Controlled</label>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" onClick="return validateAdd();">Submit</button>
                    </div>
                </form>

            </div>
        </div>
    </div>

    <!-- Edit Modal -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true"
        data-bs-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Edit Record</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form class="needs-validation" id="editReplen" method="POST" action="replenishmentSettingsUpdate"
                    enctype="multipart/form-data">
                    <div class="modal-body">
                        @csrf
                        <div class="row">
                            <div class="col-6">
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Part:</label>
                                    <label for="R658PN" class="visually-hidden">R658PN</label>
<input type="text" class="form-control" name="R658PN" id="R658PN" required>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Location:</label>
                                    <label for="R658LC" class="visually-hidden">R658LC</label>
<input type="text" class="form-control" name="R658LC" id="R658LC" required>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Minimum quantity:</label>
                                    <label for="R658MQ" class="visually-hidden">R658MQ</label>
<input type="number" class="form-control" name="R658MQ" id="R658MQ" required>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Replenishment quantity:</label>
                                    <label for="R658RQ" class="visually-hidden">R658RQ</label>
<input type="number" class="form-control" name="R658RQ" id="R658RQ" required>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Replenishment Min quantity:</label>
                                    <label for="R658RMQ" class="visually-hidden">R658RMQ</label>
<input type="number" class="form-control" name="R658RMQ" id="R658RMQ" required>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Tolerance:</label>
                                    <label for="R658TL" class="visually-hidden">R658TL</label>
<input type="text" class="form-control" name="R658TL" id="R658TL" maxlength="2" required>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="mb-3">
                                <label for="WHDD" class="col-form-label">Warehouse:</label>
                                <select class="form-select"  id="WHDD" tabindex="0" disabled>
                                    <option value="">Select Warehouse</option>
                                    @foreach ($IC670M as $key => $IC670MR)
                                        <option  value="{{ trim($IC670MR->WDCO).trim($IC670MR->WDPL).trim($IC670MR->WDWHS) }}"
                                            data-comp="{{ trim($IC670MR->WDCO) }}" data-pl="{{ trim($IC670MR->WDPL) }}" data-wh="{{ trim($IC670MR->WDWHS) }}" >
                                            {{ trim(Str::upper($IC670MR->WDWNAM)) }}
                                        </option>
                                    @endforeach
                                </select>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Division:</label>
                                    <label for="R658CO" class="visually-hidden">R658CO</label>
<input type="text" class="form-control" name="R658CO" id="R658CO" required readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Plant:</label>
                                    <label for="R658PL" class="visually-hidden">R658PL</label>
<input type="text" class="form-control" name="R658PL" id="R658PL" required readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">Warehouse:</label>
                                    <label for="R658WH" class="visually-hidden">R658WH</label>
<input type="text" class="form-control" name="R658WH" id="R658WH" required readonly>
                                </div>
                                <div class="form-check form-switch">
                                    <label for="R658IZLCF" class="visually-hidden">R658IZLCF</label>
<input class="form-check-input" type="checkbox" role="switch" name="R658IZLCF" id="R658IZLCF" value="1" aria-checked="false">
                                    <label class="form-check-label" for="flexSwitchCheckDefault">Lot Controlled</label>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>

            </div>
        </div>
    </div>

@endsection

@section('scripts')
<script>

// DataTables Init
let copyButtonTrans = 'Copy'
let csvButtonTrans = 'CSV'
let excelButtonTrans = 'Excel'
let pdfButtonTrans = 'PDF'
// let printButtonTrans = '{{ trans('global.datatables.print') }}'
let colvisButtonTrans = 'Columns'
let selectAllButtonTrans = 'Select All'
let selectNoneButtonTrans = 'Deselect All'

let languages = {
    'en': 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/English.json'
};

$.extend(true, $.fn.dataTable.Buttons.defaults.dom.button, {
    className: 'btn'
})
// End Datatables

$(document).ready(function() {
    var editModal = new bootstrap.Modal(document.getElementById('editModal'), {
        backdrop: 'static',
        keyboard: false
    });

    var addModal = new bootstrap.Modal(document.getElementById('addModal'), {
        backdrop: 'static',
        keyboard: false
    });

    var columnDefs = [
        {
            data: 'checkbox',
            name: 'checkbox',
            orderable: false,
            searchable: false,
            render: function (data, type, row) {
                return '<label for="sonar-input-5b415a7750" class="visually-hidden">sonar input 5b415a7750</label>
<input type="checkbox" class="select-checkbox" value="' + row.id + '" id="sonar-input-5b415a7750">';
            }
        },
        {
            data: "R658CO",
            name: "R658CO"
        },
        {
            data: "R658PL",
            name: "R658PL"
        },
        {
            data: "R658WH",
            name: "R658WH"
        },
        {
            data: "R658LC",
            name: "R658LC"
        },
        {
            data: "R658PN",
            name: "R658PN"
        },
        {
            data: "R658MQ",
            name: "R658MQ"
        },
        {
            data: "R658RQ",
            name: "R658RQ"
        },
        {
            data: "R658TL",
            name: "R658TL"
        },
        {
            data: "R658RMQ",
            name: "R658RMQ"
        },
        {
            data: "R658IZLCF",
            name: "R658IZLCF",
            orderable: false,
            searchable: false,
            render: function (data, type, row) {
                // console.log("data: "+data);
                return  data=='1' ? '<i class="fas fa-lg fa-check"></i>' :'<i class="fas fa-lg fa-times"></i>';
                // return '<label for="sonar-input-b328551d58" class="visually-hidden">sonar input b328551d58</label>
<input type="checkbox" class="select-checkbox" value="' + row.id + '" id="sonar-input-b328551d58">';
            }
        },
        {
            data: 'action',
            name: 'action',
            orderable: false,
            searchable: false,
            render: function (data, type, row) {
                // console.log(row.R658LC);
                // return '<button type="button" class="btn btn-sm btn-danger delete-user" data-id="' + row.id + '">Delete</button>';
                return '<button type="button" class="btn btn-sm btn-info editrefcat"'+
                ' data-comp="'+row.R658CO.trim()+'" data-pl="'+row.R658PL.trim()+'" data-loc="'+row.R658LC.trim()+'" '+
                ' data-part="'+row.R658PN.trim()+'" data-wh="'+row.R658WH.trim()+'"'+
                ' data-minqty="'+row.R658MQ.trim()+'" data-repqty="'+row.R658RQ.trim()+'"'+
                ' data-repminqty="'+row.R658RMQ.trim()+'" data-tol="'+row.R658TL.trim()+'"'+
                ' data-controlled="'+row.R658IZLCF.trim()+'" title="Edit Replenishment"> Edit </button>'+
                ' <button type="button" class="btn btn-sm btn-danger deleterefcat"'+
                ' data-comp="'+row.R658CO.trim()+'" data-pl="'+row.R658PL.trim()+'" data-loc="'+row.R658LC.trim()+'"'+
                ' data-part="'+row.R658PN.trim()+'" data-wh="'+row.R658WH.trim()+'" title="Delete Replenishment">Delete</button>';
            }
        }
    ];

    // DataTable init
    $.extend(true, $.fn.dataTable.defaults, {
        order: [
            [1, 'asc']
        ],
        "lengthMenu": [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "All"]
        ],
        pageLength: 100,
        processing: true,
        serverSide: true,
        ajax: '{{ route('m3.replenishmentSettingsDT') }}',
        columns: columnDefs,
        language: {
            url: languages['{{ app()->getLocale() }}']
        },
        select: {
            style: 'multi+shift',
            selector: 'td:first-child'
        },
        dom: "<'row'<'col-sm-12 col-md-2'l><'col-sm-12 col-md-7'B><'col-sm-12 col-md-3'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
        buttons: [
            {
                extend: 'selectAll',
                className: 'btn-primary mr-1',
                text: selectAllButtonTrans,
                exportOptions: {
                    columns: ':visible'
                },
                action: function(e, dt) {
                    e.preventDefault()
                    dt.rows().deselect();
                    dt.rows({
                        search: 'applied'
                    }).select();
                }
            },
            {
                extend: 'selectNone',
                className: 'btn-primary mr-1',
                text: selectNoneButtonTrans,
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'copy',
                className: 'btn-default mr-1',
                text: copyButtonTrans,
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'csv',
                className: 'btn-default mr-1',
                text: csvButtonTrans,
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'excelHtml5',
                className: 'btn-default mr-1',
                text: excelButtonTrans,
                exportOptions: {
                    columns: ':visible',
                    stripHtml: true
                },
                customize: function(xlsx,btnObj, tableInst) {
                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
                    var cellIndexes = tableInst.cells(".bg-danger").indexes();
                    for (var i = 0; i < cellIndexes.length; i++) {
                        var cellIndex = cellIndexes[i];
                        var tblRow = cellIndex['row']+3; // adjusted from 0 indexed
                        var tblCol = cellIndex['column']; // adjusted from 0 indexed
                        var xlCol = numberToLetters(tblCol);
                        var excelCell = xlCol+tblRow;
                        $('row c[r='+excelCell+']', sheet).attr( 's', '11' );
                    }
                }
            },
            {
                extend: 'pdfHtml5',
                className: 'btn-default mr-1',
                text: pdfButtonTrans,
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'colvis',
                className: 'btn-default mr-1',
                text: colvisButtonTrans,
                exportOptions: {
                    columns: ':visible'
                }
            }
        ]
    });

    var myTable = $('#datatablesSimple5').DataTable({});

    // Update Division/WH/Plant on Warehouse change
    $(document).on('change select','#WHDDA',function(){
        $("#R658COA").val($(this).find("option:selected").data("comp"));
        $("#R658PLA").val($(this).find("option:selected").data("pl"));
        $("#R658WHA").val($(this).find("option:selected").data("wh"));
    });

    // Open Modal Edit
    $(document).on('click', '.editrefcat', function() {
        // console.log($(this).data("part"));
        $("#editReplen").trigger('reset');

        // console.log($(this).data("comp").toString() + $(this).data("pl").toString() + $(this).data("wh").toString() );
        // Set WH name
        WHDD = $(this).data("comp").toString() + $(this).data("pl").toString() + $(this).data("wh").toString();
        $("#WHDD").val(WHDD);

        $("#R658PN").val($(this).data("part"));
        $("#R658CO").val($(this).data("comp"));
        $("#R658LC").val($(this).data("loc"));
        $("#R658PL").val($(this).data("pl"));
        $("#R658WH").val($(this).data("wh"));
        $("#R658MQ").val($(this).data("minqty"));
        $("#R658RQ").val($(this).data("repqty"));
        $("#R658RMQ").val($(this).data("repminqty"));
        $("#R658TL").val($(this).data("tol"));
        if ($(this).data("controlled")=='1') {
            $("#R658IZLCF").prop('checked',true);
        }
        else{
            $("#R658IZLCF").prop('checked',false);
        }

        editModal.show();
    });

    // Add Record Btn
    $(document).on('click', '#addRecordBtn', function() {
        $("#addReplen").trigger('reset');
        addModal.show();
    });

    // Delete Record
    $(document).on('click', '.deleterefcat', function() {
        R658PN = $(this).data("part");
        R658CO = $(this).data("comp");
        R658LC = $(this).data("loc");
        R658PL = $(this).data("pl");
        R658WH = $(this).data("wh");

        var form_post = {
            R658PN: R658PN,
            R658CO: R658CO,
            R658LC: R658LC,
            R658PL: R658PL,
            R658WH: R658WH,
            _token: '{{ csrf_token() }}'
        };

        if (confirm("Delete Record?") == true) {
            $.ajax({
                url: "{{ route('m3.replenishmentSettingsDelete') }}",
                type: "POST",
                data: form_post,
                success: function(response) {
                    // console.log("record Deleted...");
                    location.reload();
                },
                error: function(error) {}
            });
        }

    });

    // Check Record Exist
    checkRecordExist = function(form_post){
        $.ajax({
            url: "{{ route('m3.replenishmentSettingsExist') }}",
            type: "POST",
            data: form_post,
            success: function(response) {
                if(response.recordExists){
                    $('#addReplen').submit();
                }
                else{
                    alert("Part already exist!");
                }
            },
            error: function(error) {}
        });
    }

});

// Validate Add Record before Submit
function validateAdd() {
    // console.log($.trim($("#R658PNA").val()) == "");
    $.trim($("#R658PNA").val())  == "" ? $("#R658PNA").addClass("is-invalid")  : $("#R658PNA").removeClass("is-invalid");
    $.trim($("#R658LCA").val())  == "" ? $("#R658LCA").addClass("is-invalid")  : $("#R658LCA").removeClass("is-invalid");
    $.trim($("#R658MQA").val())  == "" ? $("#R658MQA").addClass("is-invalid")  : $("#R658MQA").removeClass("is-invalid");
    $.trim($("#R658RQA").val())  == "" ? $("#R658RQA").addClass("is-invalid")  : $("#R658RQA").removeClass("is-invalid");
    $.trim($("#R658RMQA").val()) == "" ? $("#R658RMQA").addClass("is-invalid")  : $("#R658RMQA").removeClass("is-invalid");
    $.trim($("#R658TLA").val())  == "" ? $("#R658TLA").addClass("is-invalid")  : $("#R658TLA").removeClass("is-invalid");
    $.trim($("#R658COA").val())  == "" ? $("#R658COA").addClass("is-invalid")  : $("#R658COA").removeClass("is-invalid");
    $.trim($("#R658PLA").val())  == "" ? $("#R658PLA").addClass("is-invalid")  : $("#R658PLA").removeClass("is-invalid");
    $.trim($("#R658WHA").val())  == "" ? $("#R658WHA").addClass("is-invalid")  : $("#R658WHA").removeClass("is-invalid");

    if ($.trim($("#R658LCA").val()) == "" || $.trim($("#R658PNA").val()) == "" || $.trim($("#R658MQA").val()) == "" || $.trim($("#R658RQA").val()) == ""
    || $.trim($("#R658RMQA").val()) == "" || $.trim($("#R658TLA").val()) == "" || $.trim($("#R658COA").val()) == "" || $.trim($("#R658PLA").val()) == "" ||
    $.trim($("#R658WHA").val()) == "" ) {
        return false;
    }

    var formInputs = $("#addReplen").serialize();
    var form_post = {
        data: formInputs,
        _token: '{{ csrf_token() }}'
    };
    checkRecordExist(form_post);
};
</script>
@endsection