@extends('layouts.app')
@section('title')
    Good Receiving View
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('good_receiving.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        #productTable input {
            width: 130px;
        }

        [data-bs-theme=light] .icon {
            color: #000;
        }

        [data-bs-theme=dark] .icon {
            color: #fff;
        }
    </style>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <h5>GOOD RECEIVING DETAILS</h5>
            </div>
            <br>
            <div class="row">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="po_no" class="form-label col-4">Po No</label>
                        <div class="col-6">
                            <div class="input-group">
                                <select name="po_id" id="po_id" class="form-select" disabled
                                    style="width: 100% !important;">
                                    <option selected>
                                        {{ $good_receiving->purchase_order->ref_no ?? '' }}
                                    </option>
                                </select>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="date_input" class="form-label col-4">Received Date</label>
                        <div class="col-6">
                            <input disabled type="text" name="date" id="date_input" class="form-control rounded-4"
                                value="{{ $good_receiving->date }}">
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="supplier" class="form-label col-4">Supplier.</label>
                        <div class="col-6">
                            <input type="text" disabled name="supplier" id="supplier"
                                value = "{{ $good_receiving->purchase_order->supplier->name ?? '' }}" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="received_by" class="form-label col-4">Received By</label>
                        <div class="col-6">
                            <input type="text" disabled name="received_by" id="received_by"
                                class="form-control rounded-4" value="{{ $good_receiving->user->user_name ?? '' }}">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="ref_no" class="form-label col-4">DO No</label>
                        <div class="col-6">
                            <input type="text" disabled name="ref_no" id="ref_no" class="form-control rounded-4"
                                value="{{ $good_receiving->ref_no }}">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="inputGroupFileAddon03" class="form-label col-4">Attachment</label>
                        <div class="col-6">
                            <div class="input-group mb-3 col-6">
                                @if ($good_receiving->attachment != null)
                                    <a target="_blank"
                                        href="{{ asset('/order-attachments/') }}/{{ $good_receiving->attachment }}"
                                        class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">
                                        <i class="bi bi-file-text"></i>
                                    </a>
                                    <small class="text-dark mt-2 mx-2">
                                        {{ substr($good_receiving->attachment, 14) }}
                                    </small>
                                @else
                                    <small class="mt-2 mx-2 fs-5 border border-2">
                                        No Attachment
                                    </small>
                                @endif
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="delivery_date" class="form-label col-4">Estimated Delivery Date:</label>
                        <div class="col-6">
                            <input disabled type="text" name="delivery_date" id="delivery_date"
                                class="form-control rounded-4" value="{{ $good_receiving->delivery_date }}">
                        </div>
                    </div>
                </div>

            </div>

            <br>
            <div class="row">
                <div class="col-12 d-flex justify-content-between">
                    <h5>PRODUCT/MATERIAL DETAILS</h5>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-12">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0" id="productTable">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>Part No.</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                    <th>Incoming Qty</th>
                                    <th>Received Qty</th>
                                    <th>Rejected Qty</th>
                                    <th>Rejected Type</th>
                                    <th>Allocated Area</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($good_receiving_products as $good_receiving_product)
                                    @php
                                        $current_qc = $good_receiving_qcs
                                            ->where('product_id', $good_receiving_product->product_id)
                                            ->first();
                                        $rejection_type = $current_qc
                                            ? $current_qc->type_of_rejection->type ?? '-'
                                            : '-';
                                        $area = $good_receiving_locations
                                            ->where('product_id', $good_receiving_product->product_id)
                                            ->first();
                                        $area_location = $area ? $area->area->name ?? '-' : '-';
                                        $rack_location = $area ? $area->rack->name ?? '-' : '-';
                                        $level_location = $area ? $area->level->name ?? '-' : '-';
                                    @endphp
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td><input type="hidden" class="product_id"
                                                value="{{ $good_receiving_product->product_id }}"
                                                name="products[{{ $loop->iteration }}][product_id]">{{ $good_receiving_product->product->part_no }}
                                        </td>
                                        <td>{{ $good_receiving_product->product->part_name }}</td>
                                        <td>{{ $good_receiving_product->product->units->name ?? '' }}</td>
                                        <td><input type="number" readonly class="form-control qty"
                                                value="{{ $good_receiving_product->incoming_qty }}"
                                                name="products[{{ $loop->iteration }}][qty]">
                                        </td>
                                        <td><input type="number" readonly class="form-control received_qty"
                                                value="{{ $good_receiving_product->received_qty }}"
                                                name="products[{{ $loop->iteration }}][received_qty]"></td>

                                        <td><input type="number" readonly class="form-control rejected_qty"
                                                value="{{ $good_receiving_product->rejected_qty ?? 0 }}"
                                                name="products[{{ $loop->iteration }}][rejected_qty]">
                                        </td>
                                        <td><button type="button" class="btn btn-danger btn-sm openModal"
                                                data-bs-toggle="modal" data-bs-target="#exampleModal1"><i
                                                    class="bi bi-plus-circle"></i></button></td>
                                        <td><button type="button" class="btn btn-success btn-sm openModal1"
                                                data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                                    class="bi bi-plus-circle"></i></button></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- LOCATIONS MODAL --}}
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">ALLOCATION</h5>
                    <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>Accepted 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>Allocate 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>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    {{-- REJECTION MODAL --}}
    <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModal1Label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModal1Label">REJECTION</h5>
                    <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>Receiving Quantity: <span class="receiving_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>Rejected Quantity: <span class="rejected_qty_text"></span></div>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive" id="popUp">
                        <table class="table table-bordered m-0 w-100" id="rejectionTable">
                            <thead>
                                <tr>
                                    <th>Rejected Qty</th>
                                    <th>Rejection Type</th>
                                    <th>Comments</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>
                </div>
            </div>
        </div>
    </div>
    {{-- REMARKS MODAL --}}
    <div class="modal fade" id="remarksModal" tabindex="-1" aria-labelledby="remarksModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <input type="hidden" class="product_idss">
                    <h5 class="modal-title" id="remarksModalLabel">Add Remarks</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <textarea readonly id="remarksText" class="form-control" rows="4" placeholder="Enter your remarks here"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Include Bootstrap Datepicker CSS and JS -->
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#date_input').datepicker({
                format: 'dd/mm/yyyy', // Set the desired date format
                autoclose: true, // Automatically close the datepicker after selection
                todayHighlight: true,
                orientation: 'bottom' // Ensures the date picker opens below the input
                // Highlight today's date
            }).datepicker("setDate", new Date()); // Set today's date as the default
        });
    </script>
    <script>
        var allocationTable;
        var rejectionTable;
        let locations = [];
        let rejections = [];
        $(document).ready(function() {
            $('#productTable').DataTable();
            allocationTable = $('#allocationTable').DataTable();
            rejectionTable = $('#rejectionTable').DataTable();
            sessionStorage.clear();
            var good_receiving_locations = @json($good_receiving_locations);
            good_receiving_locations.forEach(element => {
                let data = sessionStorage.getItem(`modalData${element.product_id}`);
                if (!data) {
                    data = [];
                } else {
                    data = JSON.parse(data);
                }
                let rowData = {};
                rowData['location'] = `${element.area_id}->${element.rack_id}->${element.level_id}`;
                rowData['area'] = element.area_id;
                rowData['rack'] = element.rack_id;
                rowData['level'] = element.level_id;
                rowData['lot_no'] = element.lot_no;
                rowData['qty'] = element.qty;
                rowData['hiddenId'] = element.product_id;
                data.push(rowData);
                sessionStorage.setItem(`modalData${element.product_id}`, JSON.stringify(data));
            });
            var good_receiving_qcs = @json($good_receiving_qcs);
            good_receiving_qcs.forEach(element => {
                let data = sessionStorage.getItem(`modalData1${element.product_id}`);
                if (!data) {
                    data = [];
                } else {
                    data = JSON.parse(data);
                }
                let rowData = {};
                rowData['rejection'] = `${element.rt_id}`;
                rowData['comments'] = element.comment ?? '';
                rowData['qty'] = element.qty;
                rowData['hiddenId'] = element.product_id;
                data.push(rowData);
                sessionStorage.setItem(`modalData1${element.product_id}`, JSON.stringify(data));
            });
            locations = @json($locations);
            rejections = @json($type_of_rejections);
        });

        $('#productTable tbody').on('click', '.add-remarks', function() {
            $('.product_idss').val($(this).closest('tr').find('.product_id').val());
            $('#remarksText').val($(this).closest('tr').find('.remarks').val());
            $('#remarksModal').modal('show');
        });

        let goodReceivingLocations = @json($good_recieving_locations);
        $(document).on('click', '.openModal1', function() {
            let hiddenId = $(this).closest('tr').find('.product_id').val();
            $('.product_ids').val(hiddenId);
            let storedData = sessionStorage.getItem(`modalData${hiddenId}`);

            // Clear existing rows in the table
            allocationTable.clear().draw(false);

            if (storedData) {
                storedData = JSON.parse(storedData);
                storedData.forEach(element => {
                    let optionsHtml = '';
                    locations.forEach(location => {
                        let selected = '';
                        if (element.location ===
                            `${location.area_id}->${location.rack_id}->${location.level_id}`) {
                            selected = '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} disabled>${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" readonly value="${element.lot_no}">`,
                        `<input type="number" class="form-control qty" readonly value="${element.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);
                });
            } else if (goodReceivingLocations[hiddenId] && goodReceivingLocations[hiddenId].length > 0) {
                let element = goodReceivingLocations[hiddenId][0];
                let optionsHtml = '';
                locations.forEach(location => {
                    let selected = '';
                    if (element.area_id == location.area_id && element.rack_id == location.rack_id &&
                        element.level_id == location.level_id) {
                        selected = 'selected';
                    }
                    optionsHtml += `
                            <option disabled 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} disabled>
                                ${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 " readonly value="${element.lot_no || ''}">`,
                    `<input type="number" class="form-control qty " readonly value="${element.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);
            } else {
                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}" disabled>${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" readonly>`,
                    `<input type="number" class="form-control qty" readonly>`,
                    `<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);
            }

            let part_no = $(this).closest('tr').find('td:eq(1)').text();
            let part_name = $(this).closest('tr').find('td:eq(2)').text();
            let accepted_qty = $(this).closest('tr').find('.accepted_qty').val();
            $('.part_no_text').text(part_no);
            $('.part_name_text').text(part_name);
            $('.accepted_qty_text').text(accepted_qty);
            $('.qty').trigger('keyup');
        });

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

        $(document).on('click', '.openModal', function() {
            let hiddenId = $(this).closest('tr').find('.product_id').val();
            $('.product_ids').val(hiddenId);
            let storedData = sessionStorage.getItem(`modalData1${hiddenId}`);

            // Clear existing rows in the table
            rejectionTable.clear().draw(false);

            if (storedData) {
                storedData = JSON.parse(storedData);
                storedData.forEach(element => {
                    let optionsHtml = '';
                    rejections.forEach(rejection => {
                        let selected = '';
                        if (element.rejection === rejection.id) {
                            selected = 'selected';
                        }
                        optionsHtml +=
                            `<option value="${rejection.id}" ${selected}>${rejection.type}</option>`;
                    });

                    rejectionTable.row.add([
                        `<input type="number" readonly class="form-control qty1" value="${element.qty}">`,
                        `<select disabled class="form-control rejection_type">${optionsHtml}</select>`,
                        `<input type="text" readonly class="form-control comments" value="${element.comments}">`
                    ]).draw(false);
                });
            } else if (good_receiving_qcs[hiddenId] && good_receiving_qcs[hiddenId].length > 0) {
                let element = good_receiving_qcs[hiddenId][0];
                let optionsHtml = '';
                rejections.forEach(rejection => {
                    let selected = '';
                    if (element.rejection === rejection.id) {
                        selected = 'selected';
                    }
                    optionsHtml +=
                        `<option value="${rejection.id}" ${selected}>${rejection.type}</option>`;
                });

                rejectionTable.row.add([
                    `<input type="number" readonly class="form-control qty1" value="${element.qty}">`,
                    `<select disabled class="form-control rejection_type">${optionsHtml}</select>`,
                    `<input type="text" readonly class="form-control comments" value="${element.comments}">`
                ]).draw(false);
            } else {
                let optionsHtml = '';
                rejections.forEach(rejection => {
                    optionsHtml +=
                        `<option value="${rejection.id}">${rejection.type}</option>`;
                });

                rejectionTable.row.add([
                    `<input type="number" readonly class="form-control qty1" value="">`,
                    `<select disabled class="form-control rejection_type">${optionsHtml}</select>`,
                    `<input type="text" readonly class="form-control comments" value="">`
                ]).draw(false);
            }

            let part_no = $(this).closest('tr').find('td:eq(1)').text();
            let part_name = $(this).closest('tr').find('td:eq(2)').text();
            let receiving_qty = $(this).closest('tr').find('.received_qty').val();
            $('.part_no_text').text(part_no);
            $('.part_name_text').text(part_name);
            $('.receiving_qty_text').text(receiving_qty);
            $('.qty1').trigger('keyup');
        });

        $(document).on('keyup change', '.qty1', function() {
            let total = 0;
            $('#rejectionTable .qty1').each(function() {
                total += +$(this).val();
            });
            $('.rejected_qty_text').text(total);
        });
    </script>
@endsection