@extends('layouts.app')
@section('title')
    DAILY PRODUCTION OUTPUT LIST
@endsection
@section('button')
    <link rel="stylesheet" href="{{ asset('assets/vendor/daterange/daterange.css') }}" />
    <button class="btn btn-primary" id="showFilterBtn">
        <i class="bi bi-gear me-2"></i>Advance Search
    </button>
@endsection
@section('content')
    <style>
        .all_column {
            background: transparent;
            color: white;
        }
    </style>
    <div class="row gx-5 viewInput" style="display: none;">

        <div class="col-lg-4 col-md-4 col-12 mt-3">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="form-group m-0">
                        <label class="form-label" for="abc12">Date Range</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="bi bi-calendar4"></i>
                            </span>
                            <input type="text" id="abc12" class="form-control datepicker-range-iso-week-numbers">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-12 mt-3">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="form-group m-0">
                        <label class="form-label" for="status">Status</label>
                        <select id="status" class="form-select rounded-4" style="width: 100% !important;">
                            <option value="" disabled selected>Select Status</option>
                            <option value="Not-initiated">Not-initiated</option>
                            <option value="Start">Start</option>
                            <option value="Pause">Pause</option>
                            <option value="Stop">Stop</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-12 mt-3">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="form-group m-0">
                        <label class="form-label" for="order_no">Production Order No</label>
                        <select id="order_no" class="form-select rounded-4" style="width: 100% !important;">
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-12 mt-3">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="form-group m-0">
                        <label for="part_no" class="form-label">Part No :</label>
                        <select name="part_no" id="part_no" class="form-select rounded-4" style="width: 100% !important;">
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-12 mt-3">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="form-group m-0">
                        <label for="process" class="form-label">Process :</label>
                        <select name="process" id="process" class="form-select rounded-4" style="width: 100% !important;">
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="row gx-3 mb-3">
            <div class="col-12 d-flex justify-content-end">

                <button type="button" class="btn btn-info me-2" id="generate">
                    <i class="bi bi-search"></i> Search
                </button>
                <form action="{{ route('production_output_traceability.export') }}" method="POST" style="display: inline;">
                    @csrf
                    <input type="hidden" name="start_date" id="export_start_date">
                    <input type="hidden" name="end_date" id="export_end_date">
                    <input type="hidden" name="status_filter" id="export_status_filter">
                    <input type="hidden" name="order_no_filter" id="export_order_no">
                    <input type="hidden" name="part_no_filter" id="export_part_no">
                    <input type="hidden" name="process_filter" id="export_process_filter">

                    <button type="submit" class="btn btn-info need-dt">
                        <i class="bi bi-download"></i> Download
                    </button>
                </form>

            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body tr_1">
            <div class="table-responsive tr_2">
                <table class="table datatable table-bordered m-0">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Production Date</th>
                            <th>Production Order No</th>
                            <th>Process</th>
                            <th>Machine</th>
                            <th>Part No</th>
                            <th>Part Name</th>
                            <th>Shift</th>
                            <th>Operator Name</th>
                            <th>Total Produced</th>
                            <th>Total Rejected Qty</th>
                            <th>Total Good Qty</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                <input type="text" id="search-production_date" class="all_column"
                                    placeholder="Search Production Date">
                            </th>
                            <th>
                                <input type="text" id="search-order_no" class="all_column"
                                    placeholder="Search Production Order No">
                            </th>
                            <th>
                                <input type="text" id="search-process" class="all_column"
                                    placeholder="Search Process">
                            </th>
                            <th>
                                <input type="text" id="search-machine" class="all_column"
                                    placeholder="Search Machine">
                            </th>
                            <th>
                                <input type="text" id="search-part_no" class="all_column"
                                    placeholder="Search Part No">
                            </th>
                            <th>
                                <input type="text" id="search-part_name" class="all_column"
                                    placeholder="Search Part Name">
                            </th>
                            <th>
                                <input type="text" id="search-shift" class="all_column" placeholder="Search Shift">
                            </th>
                            <th>
                                <input type="text" id="search-operator" class="all_column"
                                    placeholder="Search Operator Name">
                            </th>
                            <th>
                                <input type="text" id="search-total_produced" class="all_column"
                                    placeholder="Search Total Produced">
                            </th>
                            <th>
                                <input type="text" id="search-total_rejected_qty" class="all_column"
                                    placeholder="Search Total Rejected Qty">
                            </th>
                            <th>
                                <input type="text" id="search-total_good_qty" class="all_column"
                                    placeholder="Search Total Good Qty">
                            </th>
                            <th>
                                <input type="text" id="search-status" class="all_column" placeholder="Search Status">
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
        data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">TRANSFER</h5>
                    <input type="hidden" class="pot_id">
                    <input type="hidden" class="product_ids">
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <div>Part No: <span class="part_no_text"></span></div>
                            <div>Good Quantity: <span class="accepted_qty_text"></span></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <div>Part Name: <span class="part_name_text"></span></div>
                            <div>Transfer Quantity: <span class="allocate_qty_text"></span></div>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive" id="popUp">
                        <table class="table table-bordered m-0 w-100" id="allocationTable">
                            <thead>
                                <tr>
                                    <th>Location</th>
                                    <th>Lot No</th>
                                    <th>Quantity</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </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" id="saveModal">Add</button>
                </div>
            </div>
        </div>
    </div>
    <script src="{{ asset('assets/js/moment.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        function getDateRange() {
            var datepicker = $(".datepicker-range-iso-week-numbers").data('daterangepicker');
            return {
                start_date: datepicker.startDate.format('DD-MM-YYYY'),
                end_date: datepicker.endDate.format('DD-MM-YYYY')
            };
        }

        var table;
        var searchTimeout;
        let locations = [];
        var allocationTable;
        let allData = {};
        $(document).ready(function() {
            let bool = true;
            const tableKey = 'DataTables_DataTables_Table_0_' + window.location.pathname;
            const savedState = localStorage.getItem(tableKey);

            if (savedState) {
                allData = JSON.parse(savedState);
                if (allData.columns) {
                    allData.columns.forEach((col, i) => {
                        if (col.search) {
                            $('thead tr:eq(1) th').eq(i).find('input').val(col.search);
                        }
                    });
                }

                if (allData.search && allData.search.sSearch) {
                    $('#dt-search-0').val(allData.search.sSearch);
                }
                bool = false;
            }
            $(".datepicker-range-iso-week-numbers").daterangepicker({
                drops: "up",
                opens: "left",
                showWeekNumbers: true,
                showISOWeekNumbers: true,
                startDate: moment().subtract(1, "days").startOf("day"),
                endDate: moment().add(1, "days").endOf("day"), 
                locale: {
                    format: "DD-MM-YYYY",
                },
            });
            
            table = $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                displayStart: allData.start || 0,
                pageLength: allData.length || 10,
                order: allData.order || [],
                search: allData.search || {},
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('production_output_traceability.index') }}",
                    type: 'GET',
                    data: function(d) {
                        d.firstAttempt = bool;

                        var dateRange = getDateRange();
                        d.start_date = dateRange.start_date;
                        d.end_date = dateRange.end_date;

                        d.production_date = $('#search-production_date').val();
                        d.order_no = $('#search-order_no').val();
                        d.process = $('#search-process').val();
                        d.machine = $('#search-machine').val();
                        d.part_no = $('#search-part_no').val();
                        d.part_name = $('#search-part_name').val();
                        d.shift = $('#search-shift').val();
                        d.operator = $('#search-operator').val();
                        d.total_produced = $('#search-total_produced').val();
                        d.total_rejected_qty = $('#search-total_rejected_qty').val();
                        d.total_good_qty = $('#search-total_good_qty').val();
                        d.status = $('#search-status').val();

                        d.status_filter = $('#status').val();
                        d.order_no_filter = $('#order_no').val();
                        d.part_no_filter = $('#part_no').val();
                        d.process_filter = $('#process').val();
                        d.bool = bool;
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'planned_date',
                        name: 'planned_date',
                    },
                    {
                        data: 'po_no',
                        name: 'po_no',
                    },
                    {
                        data: 'processes.name',
                        name: 'processes.name',
                        defaultContent: ''
                    },
                    {
                        data: 'machines.name',
                        name: 'machines.name',
                        defaultContent: ''
                    },
                    {
                        data: 'products.part_no',
                        name: 'products.part_no',
                        defaultContent: ''
                    },
                    {
                        data: 'products.part_name',
                        name: 'products.part_name',
                        defaultContent: ''
                    },
                    {
                        data: 'shift',
                        name: 'shift',
                    },
                    {
                        data: 'operator',
                        name: 'operator',
                        defaultContent: ''
                    },
                    {
                        data: 'total_produced',
                        name: 'total_produced',
                    },
                    {
                        data: 'total_rejected_qty',
                        name: 'total_rejected_qty',
                    },
                    {
                        data: 'total_good_qty',
                        name: 'total_good_qty',
                    },
                    {
                        data: 'status',
                        name: 'status',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                paging: true,
                pagingType: 'input',
                initComplete: function(settings, json) {
                    bool = true;
                }
            });

            

            let isFirstLoad = true;

            $('.datatable').on('search.dt order.dt length.dt', function() {
                if (isFirstLoad) {
                    isFirstLoad = false;
                    return;
                }
                bool = false;
                storeInLocalStorage();
            });

            $('.datatable thead tr:eq(1) th').each(function(i) {
                $('input', this).on('keyup change', function() {
                    let value = this.value;
                    if (table.column(i).search() !== value) {
                        clearTimeout(searchTimeout);
                        searchTimeout = setTimeout(() => {
                            table.column(i).search(value).draw();
                            bool = false;
                            storeInLocalStorage();
                        }, 500);
                    }
                });
            });

            function storeInLocalStorage() {
                const tableKey = 'DataTables_DataTables_Table_0_' + window.location.pathname;
                const settings = table.settings()[0];
                const state = {
                    time: +new Date(),
                    start: settings._iDisplayStart,
                    length: settings._iDisplayLength,
                    order: settings.aaSorting,
                    search: settings.oPreviousSearch,
                    columns: settings.aoPreSearchCols.map(col => ({
                        search: col.sSearch
                    }))
                };
                localStorage.setItem(tableKey, JSON.stringify(state));
            }

            allocationTable = $('#allocationTable').DataTable();
            locations = @json($locations);

            $(document).on('click', '.openModal', function() {
                let id = $(this).data('id');
                let productId = $(this).data('productid');
                let count = $(this).data('count');
                $('.pot_id').val(id);
                $('.product_ids').val(productId);
                setTimeout(() => {
                    $('.modal-body .accepted_qty_text').text(count);
                }, 500);


                let accepted_qty = $(this).closest('tr').find('td:eq(11)').text().trim();

                allocationTable.clear().draw(false);
                $.ajax({
                    url: "{{ route('production_output_traceability.get.transfer') }}",
                    type: 'GET',
                    data: {
                        id: id,
                        product_id: productId
                    },
                    success: function(storedData) {
                        if (storedData && storedData.length > 0) {
                            $('#saveModal').hide();
                            storedData.forEach(element => {
                                let optionsHtml = '';
                                locations.forEach(location => {
                                    let selected = (
                                        `${element.area_id}->${element.rack_id}->${element.level_id}` ===
                                        `${location.area_id}->${location.rack_id}->${location.level_id}`
                                    ) ? 'selected' : '';
                                    optionsHtml += `
                                    <option data-area-id="${location.area_id}" data-rack-id="${location.rack_id}" data-level-id="${location.level_id}"
                                        value="${location.area_id}->${location.rack_id}->${location.level_id}" ${selected}>
                                        ${location.area.name}->${location.rack.name}->${location.level.name}
                                    </option>`;
                                });

                                allocationTable.row.add([
                                    `<select class="form-control location" disabled>${optionsHtml}</select>`,
                                    `<input type="text" class="form-control lot_no" disabled value="${element.lot_no}">`,
                                    `<input type="number" class="form-control qty" disabled value="${element.qty}">`,
                                    `<button type="button" class="btn btn-success btn-sm me-2" disabled onclick="addRow(this)"><i class="bi bi-plus"></i></button>
                                    <button type="button" class="btn btn-danger btn-sm" disabled onclick="removeRow(this)"><i class="bi bi-dash"></i></button>`
                                ]).draw(false);
                            });
                            $('.allocate_qty_text').text(accepted_qty);
                        } else {
                            $('.allocate_qty_text').text(0);
                            $('#saveModal').show();
                            addDefaultRow();
                        }
                    }
                });

                let part_no = $(this).closest('tr').find('td:eq(5)').text();
                let part_name = $(this).closest('tr').find('td:eq(6)').text();
                $('.part_no_text').text(part_no);
                $('.part_name_text').text(part_name);
                $('.accepted_qty_text').text(accepted_qty);
                $('#exampleModal').modal('show');
            });

            $('#saveModal').on('click', function() {
                var alertNeeded = false;

                var accepted_qty = parseFloat($('.accepted_qty_text').text());
                var allocate_qty = parseFloat($('.allocate_qty_text').text());
                if (allocate_qty != accepted_qty) {
                    alertNeeded = true;
                }

                if (alertNeeded) {
                    $('#popUp').prepend(`
                        <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
                        <b>Warning!</b> Transfer quantity must be equals to Good quantity!.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    `);
                } else {
                    $('#exampleModal').modal('hide');
                    let data = [];
                    allocationTable.rows().every(function() {
                        let $row = $(this.node());
                        let $selectedOption = $row.find('.location option:selected');

                        data.push({
                            id: $('.pot_id').val(),
                            product_id: $('.product_ids').val(),
                            location: $row.find('.location').val(),
                            area: $selectedOption.data('area-id'),
                            rack: $selectedOption.data('rack-id'),
                            level: $selectedOption.data('level-id'),
                            lot_no: $row.find('.lot_no').val(),
                            qty: $row.find('.qty').val()
                        });
                    });

                    $.ajax({
                        url: "{{ route('production_output_traceability.transfer.update') }}",
                        type: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            data: data,
                            id: $('.pot_id').val()
                        },
                        success: function(response) {
                            alert('Good Transferred Successfully');
                            table.ajax.reload();
                        }
                    });
                }
            });

            function addDefaultRow() {
                let optionsHtml = '';
                locations.forEach(location => {
                    optionsHtml += `
                <option data-area-id="${location.area_id}" data-rack-id="${location.rack_id}" data-level-id="${location.level_id}"
                    value="${location.area_id}->${location.rack_id}->${location.level_id}">
                    ${location.area.name}->${location.rack.name}->${location.level.name}
                </option>`;
                });

                allocationTable.row.add([
                    `<select class="form-control location">${optionsHtml}</select>`,
                    `<input type="text" class="form-control lot_no">`,
                    `<input type="number" class="form-control qty">`,
                    `<button type="button" class="btn btn-success btn-sm me-2" onclick="addRow(this)"><i class="bi bi-plus"></i></button>
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)"><i class="bi bi-dash"></i></button>`
                ]).draw(false);
            }

            function addRow(button) {
                var row = button.parentNode.parentNode.cloneNode(true);
                var rowData = $(row).find('td').map(function() {
                    return $(this).html();
                }).get();

                allocationTable.row.add(rowData).draw(false);

                $('.qty').trigger('keyup');
            }

            function removeRow(button) {
                if ($('#allocationTable tr').length > 2) {
                    allocationTable.row($(button).closest('tr')).remove().draw(false);
                } else {
                    $('#popUp').prepend(`
                    <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
                    <b>Warning!</b> Can't remove Row!.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `);
                }

                $('.qty').trigger('keyup');
            }

            $(document).on('keyup change', '.qty', function() {
                let total = 0;
                allocationTable.rows().nodes().to$().find('.qty').each(function() {
                    total += +$(this).val();
                });
                $('.allocate_qty_text').text(total);
            });

            $('#part_no').select2({
                placeholder: 'Select Part No',
                ajax: {
                    url: '{{ route('product.search') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;

                        return {
                            results: $.map(data.items, function(item) {
                                return {
                                    text: item.part_no,
                                    id: item.id
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                }
            });

            $('#process').select2({
                placeholder: 'Select Process',
                ajax: {
                    url: '{{ route('process.search') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;

                        return {
                            results: $.map(data.items, function(item) {
                                return {
                                    text: item.name,
                                    id: item.id
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                }
            });

            $('#order_no').select2({
                placeholder: 'Select Production Order No',
                ajax: {
                    url: '{{ route('production_output_traceability.search') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;

                        return {
                            results: $.map(data.items, function(item) {
                                return {
                                    text: item.po_no,
                                    id: item.id
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                }
            });

            $('#showFilterBtn').click(function() {
                if ($('.viewInput').is(':hidden')) {
                    $('.viewInput').show();
                    $('#showFilterBtn').html(
                        '<i class="bi bi-gear"> Advance Search'
                    );
                } else {
                    $('.viewInput').hide();
                    $('#showFilterBtn').html(
                        '<i class="bi bi-gear"> Advance Search'
                    );
                }
            });

            $('#generate').on('click', function() {

                let dateRange = $('#abc12').val().split(' to ');
                let startDate = dateRange[0] || '';
                let endDate = dateRange[1] || '';

                $('#export_start_date').val(startDate);
                $('#export_end_date').val(endDate);
                $('#export_status_filter').val($('#status').val());
                $('#export_order_no').val($('#order_no').val());
                $('#export_part_no').val($('#part_no').val());
                $('#export_process_filter').val($('#process').val());
                bool = false;
                table.ajax.reload();
            });
        });
    </script>
@endsection