@extends('layouts.app')
@section('title')
    Outgoing View
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('outgoing.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <div class="card">
        <div class="card-body">
            <div class="row">
                <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">Delivery Order (DO) No</label>
                        <div class="col-6">
                            <input type="text" readonly name="ref_no" id="ref_no" class="form-control rounded-4"
                                value="{{ $outgoing->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="date" class="form-label col-4">Date</label>
                        <div class="col-6">
                            <input type="text" readonly name="date" id="date" class="form-control rounded-4"
                                value="{{ $outgoing->date }}">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="order_id" class="form-label col-4">Order No :</label>
                        <div class="col-6">
                            <select name="order_id" id="order_id" class="form-select" style="width: 100% !important;">
                                <option value="{{ $outgoing->order_id }}" selected>
                                    {{ $outgoing->order->order_no }}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="created_by" class="form-label col-4">Created By</label>
                        <div class="col-6">
                            <input type="text" readonly name="created_by" id="created_by" class="form-control rounded-4"
                                value="{{ Auth::user()->user_name }}">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3 customer @if (old('category') == 2) d-none @endif">
                    <div class="row align-items-center">
                        <label for="customer" class="form-labe col-4">Customer</label>
                        <div class="col-6">
                            <input type="text" readonly name="customer" id="customer" placeholder="auto based or order"
                                class="form-control rounded-4" value="{{ $outgoing->order->customers->name }}">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="shipping_location" class="form-label col-4">Shipping Location</label>
                        <div class="col-6">
                            <textarea type="text" name="address" id="address" class="form-control rounded-4" disabled>
                                {{ optional($outgoing->order->customers->shippingLocations->first())->shipping_location }}
                            </textarea>
                        </div>
                    </div>
                </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>Carton Box</th>
                                    <th>Qty in Box</th>
                                    <th>Quantity</th>
                                    <th>Remarks</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($outgoing_details as $outgoing_detail)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td><input type="hidden" class="product_id"
                                                name="products[{{ $loop->iteration }}][product_id]"
                                                value="{{ $outgoing_detail->product_id }}">{{ $outgoing_detail->product->part_no }}
                                        </td>
                                        <td>{{ $outgoing_detail->product->part_name }}</td>
                                        <td>{{ $outgoing_detail->product->units->name ?? '' }}</td>
                                        <td>{{ $outgoing_detail->product->carton_box_type }}</td>
                                        <td>{{ $outgoing_detail->product->qty_in_box }}</td>
                                        <td><input type="number" readonly class="form-control qty"
                                                name="products[{{ $loop->iteration }}][qty]"
                                                value="{{ $outgoing_detail->qty }}"></td>
                                        <td>
                                            <textarea class="form-control remarks" rows="1" name="products[{{ $loop->iteration }}][remarks]">{{ $outgoing_detail->remarks }}</textarea>
                                        </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>Total Quantity: <span class="total_qty_text"></span></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <div>Unit: <span class="unit_text"></span></div>
                            <div>Part Name: <span class="part_name_text"></span></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <div><span></span></div>
                            <div>Actual Quantity: <span class="actual_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>Available Qty</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>
    <script>
        let orders;
        let productTable;
        let sales_returns;
        let allocationTable;
        let purchase_returns;
        let firstAttempt = true;
        $(document).ready(function() {
            $('.card').find('input, select, textarea').prop('disabled', true);
            productTable = $('#productTable').DataTable();
            allocationTable = $('#allocationTable').DataTable();
            sessionStorage.clear();
            var outgoing_locations = @json($outgoing_locations);
            outgoing_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['qty'] = element.qty;
                rowData['available_qty'] = element.available_qty;
                rowData['lot_no'] = element.lot_no;
                rowData['hiddenId'] = element.product_id;
                data.push(rowData);
                sessionStorage.setItem(`modalData${element.product_id}`, JSON.stringify(data));
            });
            locations = @json($locations);
        });

        function get_order() {
            var orderId = $("#order_id").val();
            var order = orders.find(p => p.id == orderId);
            if (order) {
                $('#supplier').val('');
                $('#customer').val(order.customers.name);
                let allLocations = '';
                if (order.customers && order.customers.shipping_locations) {

                    order.customers.shipping_locations.forEach(function(location) {
                        allLocations += location.shipping_location;
                    });
                }

                $('#address').val(allLocations);
                if (!firstAttempt) {
                    populateProductTable(order.order_detail);
                    firstAttempt = false;
                }
            } else {
                productTable.clear().draw(false);
            }
        };

        $(document).on('click', '.openModal', 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}>${location.area.name}->${location.rack.name}->${location.level.name}</option>`;
                    });

                    allocationTable.row.add([
                        `<select disabled class="form-control location">${optionsHtml}</select>`,
                        `<input type="number" class="form-control lot_no" readonly value="${element.lot_no}">`,
                        `<input type="number" class="form-control available_qty" readonly value="${element.available_qty}">`,
                        `<input type="number" class="form-control qty" readonly value="${element.qty}">`
                    ]).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}">${location.area.name}->${location.rack.name}->${location.level.name}</option>`;
                });

                allocationTable.row.add([
                    `<select disabled class="form-control location">${optionsHtml}</select>`,
                    `<input type="number" class="form-control lot_no" readonly>`,
                    `<input type="number" class="form-control available_qty" readonly>`,
                    `<input type="number" class="form-control qty" readonly>`
                ]).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 unit = $(this).closest('tr').find('td:eq(3)').text();
            let qty = $(this).closest('tr').find('.qty').val();
            $('.part_no_text').text(part_no);
            $('.part_name_text').text(part_name);
            $('.unit_text').text(unit);
            $('.actual_qty_text').text(qty);
            $('.location').trigger('change');
            $('.qty').trigger('keyup');
        });

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

        $(document).on('change', '.location, .lot_no', function() {
            var value = $(this).val();
            var $this = $(this).closest('tr').find('.available_qty');
            var lot_no = $(this).closest('tr').find('.lot_no').val();
            var area_id = $(this).find('option:selected').attr('data-area-id');
            var rack_id = $(this).find('option:selected').attr('data-rack-id');
            var level_id = $(this).find('option:selected').attr('data-level-id');
            var product_id = $('.product_ids').val();

            var $currentRow = $(this).closest('tr');
            var dropdownValueSelected = false;

            $('.location').not(this).each(function() {
                if ($(this).val() === value) {
                    dropdownValueSelected = true;
                    return false;
                }
            });
        });
    </script>
@endsection