@extends('layouts.app')
@section('title')
    Good Receiving Edit
@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;
        }
    </style>
    <form method="post" action="{{ route('good_receiving.update', $good_receiving->id) }}" enctype="multipart/form-data">
        @csrf
        <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"> <!-- Adjusted the column width to accommodate the icon -->
                                <div class="input-group">
                                    <select name="po_id" id="po_id" class="form-select" onchange="get_po()"
                                        style="width: 100% !important;">
                                        <option value="" selected disabled>Please Select</option>
                                        @foreach ($purchase_orders as $purchase_order)
                                            <option value="{{ $purchase_order->id }}" @selected($good_receiving->po_id == $purchase_order->id)>
                                                {{ $purchase_order->ref_no }}</option>
                                        @endforeach
                                    </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 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" readonly 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" readonly name="received_by" id="received_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">
                        <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" readonly 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="inputGroupFile02" class="form-label col-4">Attachment</label>
                            <div class="col-6">
                                <div class="input-group mb-3 col-6">
                                    <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>

                                    <input type="file" class="form-control" id="inputGroupFile03"
                                        aria-describedby="inputGroupFileAddon03" aria-label="Upload">
                                    <small class="text-muted mt-2">
                                        {{ substr($good_receiving->attachment, 14) }}
                                    </small>
                                </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 type="text" name="delivery_date" id="delivery_date" class="form-control datepicker-current-date 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>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#exampleModalCenter">ADD PRODUCTS</button>
                    </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>Po Qty</th>
                                        <th>Previous Qty</th>
                                        <th>Balance Qty</th>
                                        <th>Remaining Qty</th>
                                        <th>Received Qty</th>
                                        <th>Remarks</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($good_receiving_products as $good_receiving_product)
                                    @php
                                     $po_detail = \App\Models\PurchaseOrderDetail::where('purchase_order_id', $good_receiving->po_id)
                                                ->where('product_id', $good_receiving_product->product_id)
                                                ->first();
                                    @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" class="form-control previous_qty" readonly
                                                    value="{{ $po_detail->previous_qty ?? 0}}"
                                                    name="products[{{ $loop->iteration }}][previous_qty]"></td>
                                            <td><input type="number" class="form-control balance_qty" readonly
                                                    value="{{ $po_detail->balance_qty ?? 0}}"
                                                    name="products[{{ $loop->iteration }}][balance_qty]"></td>
                                            <td><input type="number" class="form-control remaining_qty" readonly
                                                    value="{{ $po_detail->remaining_qty ?? 0 }}"
                                                    name="products[{{ $loop->iteration }}][remaining_qty]"></td>
                                            <td><input type="number" class="form-control received_qty"
                                                    value="{{ $good_receiving_product->received_qty }}"
                                                    name="products[{{ $loop->iteration }}][received_qty]"></td>
                                            <td>
                                                <textarea class="form-control good_receiving_remark" rows="1" name="products[{{ $loop->iteration }}][good_receiving_remark]">{{ $good_receiving_product->remarks }}</textarea>
                                            </td>
                                            <td><button type="button" class="btn btn-danger btn-sm remove-product"><i
                                                        class="bi bi-trash"></i></button></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="d-flex gap-2 justify-content-end col-12">
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    {{-- PRODUCTS MODAL --}}
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle"
        aria-modal="true" role="dialog" 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="exampleModalCenterTitle">
                        PRODUCTS
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0 w-100" id="modalTable">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" id="selectAll" style="width: 22px; height: 22px;">
                                    </th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                    <th>Incoming Qty</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal">
                        CANCEL
                    </button>
                    <button type="button" class="btn btn-primary" onclick="add_product()">
                        ADD
                    </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
            }); // Set today's date as the default
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#delivery_date').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
            });
            // Set today's date as the default
        });
    </script>
    <script>
        var modalTable;
        let productTable;
        let purchase_orders;
        let purchase_returns;
        let firstAttempt = true;
        $(document).ready(function() {
            modalTable = $('#modalTable').DataTable();
            productTable = $('#productTable').DataTable();

            purchase_orders = {!! json_encode($purchase_orders) !!};

            if ($("#po_id").val() != null) {
                get_po();
            }
            $('#po_pr').on('change', function() {
                if ($(this).is(':checked')) {
                    $('.purchase_return').removeClass('d-none');
                    $('.purchase_return').find('.select2-container').addClass('w-100');
                    $('.purchase_order').addClass('d-none');
                } else {
                    $('.purchase_order').removeClass('d-none');
                    $('.purchase_return').addClass('d-none');
                }
                modalTable.clear().draw(false);
                productTable.clear().draw(false);
            });
        });

        function get_po() {
            var poId = $("#po_id").val();
            var po = purchase_orders.find(p => p.id == poId);
            if (po) {
                let supplier_name = po.supplier ? po.supplier.name : '';
                $('#supplier').val(supplier_name);
                if (!firstAttempt) {
                    populateProductTable(po.purchase_order_detail);
                    firstAttempt = false;
                }
            } else {
                productTable.clear().draw(false);
            }
        };


        function populateProductTable(data) {
            productTable.clear();
            data.forEach((product, index) => {
                let qty = 0;
                if ($('#po_pr').is(':checked')) {
                    qty = product.return_qty;
                } else {
                    qty = product.qty;
                }
                let newRow = productTable.row.add([
                    productTable.rows().data().length + 1,
                    `<input type="hidden" name="products[${index}][product_id]" value="${product.product_id}">${product.product.part_no}`,
                    product.product.part_name,
                    product.product.units ? product.product.units.name : '',
                    `<input type="number" readonly class="form-control qty" name="products[${index}][qty]" value="${qty}">`,
                    `<input type="number" class="form-control received_qty" name="products[${index}][received_qty]" value="0">`,
                    `<input type="number" class="form-control received_qty" name="products[${index}][received_qty]" value="0">`,
                    `<input type="number" class="form-control received_qty" name="products[${index}][received_qty]" value="0">`,
                    `<textarea class="form-control remarks" rows="1" name="products[${index}][remarks]"></textarea>`,
                    `<button type="button" class="btn btn-danger btn-sm remove-product"><i class="bi bi-trash"></i></button>`
                ]).draw(false);
            });
        }

        function add_product() {
            modalTable.$('input:checked').each(function() {
                var row = $(this).closest('tr');
                var product_id = row.find('.product_id').val();
                var part_no = row.find('td:eq(1)').text();
                var part_name = row.find('td:eq(2)').text();
                var unit = row.find('td:eq(3)').text();
                var qty = row.find('td:eq(4)').text();

                // Add the row data to the main table
                productTable.row.add([
                    productTable.rows().data().length + 1,
                    `<input type="hidden" class="product_id" name="products[${productTable.rows().data().length + 1}][product_id]" value="${product_id}">${part_no}`,
                    part_name,
                    unit,
                    `<input type="number" readonly class="form-control qty" name="products[${productTable.rows().data().length + 1}][qty]" value="${qty}">`,
                    `<input type="number" class="form-control received_qty" name="products[${productTable.rows().data().length + 1}][received_qty]" value="0">`,
                    `<input type="number" class="form-control received_qty" name="products[${productTable.rows().data().length + 1}][received_qty]" value="0">`,
                    `<input type="number" class="form-control received_qty from-add-product2" name="products[${productTable.rows().data().length + 1}][received_qty]" value="0">`,
                    `<textarea class="form-control remarks" rows="1" name="products[${productTable.rows().data().length + 1}][remarks]"></textarea>`,
                    `<button type="button" class="btn btn-danger btn-sm remove-product"><i class="bi bi-trash"></i></button>`
                ]).draw(false);

                // Remove the row from the modal table
                modalTable.row(row).remove().draw(false);
            });
            $(document).on('input', '.received_qty.from-add-product2', function() {
                var $row = $(this).closest('tr');
                var incoming_qty = parseFloat($row.find('.qty').val()) || 0;
                var qty = parseFloat($(this).val()) || 0;
                var balance = parseFloat($row.find('.balance_qty').val()) || 0;
                var total = balance - qty;

                if (qty <= 0 || isNaN(qty)) {
                    $row.find('.remaining_qty').val(balance);
                } else if (qty > incoming_qty) {
                    $(this).val(incoming_qty);
                    $row.find('.remaining_qty').val(balance - incoming_qty);
                } else {
                    $row.find('.remaining_qty').val(total);
                }
            });

            // Uncheck all checkboxes
            $('#modalTable input:checked').prop('checked', false);

            // Hide the modal
            $('#exampleModalCenter').modal('hide');
        }

        $('#productTable tbody').on('click', 'button.remove-product', function() {
            var row = $(this).closest('tr');
            var part_no = row.find('td:eq(1)').text();
            var part_name = row.find('td:eq(2)').text();
            var unit = row.find('td:eq(3)').text();
            var incoming_qty = row.find('.qty').val();

            // Add the removed row back to the modal table
            modalTable.row.add([
                `<input class="form-check-input product_id" type="checkbox" value="${$(row).find('.product_id').val()}">`,
                part_no,
                part_name,
                unit,
                incoming_qty
            ]).draw(false);

            // Remove the row from the main table
            productTable.row(row).remove().draw(false);
            resetSerialNumbers(productTable);
        });

        function resetSerialNumbers() {
            if ($('#productTable tbody tr:first').find('td:first').text() != 'No data available in table') {
                $('#productTable tbody tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            }
        }
    </script>
@endsection