@extends('layouts.app')
@section('title')
    Good Receiving Create
@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.store') }}" 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">
                                <div class="input-group">
                                    <select name="po_id" id="po_id" class="form-select"
                                        style="width: 100% !important;">
                                        @if (old('po_id') != null)
                                            @php
                                                $po = App\Models\PurchaseOrder::select('id', 'ref_no')->find(
                                                    old('po_id'),
                                                );
                                            @endphp
                                            @if ($po)
                                                <option value="{{ $po->id }}" selected style="color: black;">
                                                    {{ $po->name }}
                                                </option>
                                            @else
                                                <option value="" selected disabled>Invalid Purchase Order Selected
                                                </option>
                                            @endif
                                        @else
                                            <option value="" selected disabled>Select Purchase Order</option>
                                        @endif
                                    </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="{{ date('d/m/Y') }}">
                            </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" 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" name="ref_no" id="ref_no" class="form-control rounded-4">
                            </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">
                                <input type="file" class="form-control rounded-4" name="attachment"
                                    id="inputGroupFile02">
                            </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 rounded-4"
                                    value="{{ old('delivery_date', \Carbon\Carbon::now()->format('d/m/Y')) }}">
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="button-group d-flex justify-content-end">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
                            Add Products(PO)
                        </button>
                        <button type="button" class="btn btn-primary ms-2" data-bs-toggle="modal"
                            data-bs-target="#exampleModal2">
                            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>
                                </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">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalTitle" aria-modal="true"
        role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg ">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">PRODUCTS</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></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-secondary" data-bs-dismiss="modal">
                        CANCEL
                    </button>
                    <button type="button" class="btn btn-primary" onclick="add_product()">
                        ADD
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- PRODUCTS MODAL --}}
    <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModal2Title" aria-modal="true"
        role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModal2Title">
                        PRODUCTS
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="selectedRowsProducts = {};$('#modalTable2 input:checked').prop('checked', false);modalTable2.ajax.reload();"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0 w-100" id="modalTable2">
                            <thead>
                                <tr>
                                    <th>Select</th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal" onclick="selectedRowsProducts = {};$('#modalTable2 input:checked').prop('checked', false);modalTable2.ajax.reload();">
                        CANCEL
                    </button>
                    <button type="button" class="btn btn-primary" onclick="add_product2()">
                        ADD
                    </button>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script>
        let bool = 0;
        var modalTable;
        var modalTable2;
        let productTable;
        var selectedRowsProducts = {};
        const addedProductIds = new Set();
        $(document).ready(function() {
            $('#date_input').datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            }).datepicker("setDate", new Date());

            $('#delivery_date').datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            }).datepicker("setDate", new Date());

            $('#po_id').select2({
                placeholder: 'Select Purchase Order',
                ajax: {
                    url: '{{ route('purchase_order.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.ref_no}`,
                                    id: item.id,
                                    supplier_name: item.supplier?.name ?? ''
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                },
            });

            productTable = $('#productTable').DataTable();

            $('#po_id').on('select2:select', function(e) {
                let selected = e.params.data;
                $('#supplier').val(selected.supplier_name);
                $.ajax({
                    url: "{{ route('purchase_order.items') }}",
                    type: 'GET',
                    data: {
                        id: selected.id
                    },
                    success: function(response) {
                        productTable.clear().draw(false);
                        response.forEach(function(product) {
                            let qty = product.qty;
                            let balance_qty = product.balance_qty;
                            let remaining_qty = product.remaining_qty;
                            let previous_qty = product.previous_qty;
                            let good_receiving_remark = product
                                .good_receiving_remark;
                            productTable.row.add([
                                productTable.rows().data().length + 1,
                                `<input type="hidden" class="product_id" name="products[${bool}][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[${bool}][qty]" value="${qty}">`,
                                `<input type="number" readonly class="form-control previous_qty" name="products[${bool}][previous_qty]" value="${previous_qty}">`,
                                `<input type="number" readonly class="form-control balance_qty" name="products[${bool}][balance_qty]" value="${balance_qty}">`,
                                `<input type="number" readonly class="form-control remaining_qty" name="products[${bool}][remaining_qty]" value="${remaining_qty}">`,
                                `<input type="number" class="form-control received_qty" name="products[${bool}][received_qty]" value="0">`,
                                `<textarea class="form-control good_receiving_remark" rows="1" name="products[${bool}][good_receiving_remark]"></textarea>`,
                                `<button type="button" class="btn btn-danger btn-sm remove-product"><i class="bi bi-trash"></i></button>`
                            ]).draw(false);
                            addedProductIds.add(product.product_id);
                            bool++;
                        });
                    }
                });
            });

            modalTable = $('#modalTable').DataTable();

            modalTable2 = $('#modalTable2').DataTable({
                perPageSelect: [5, 10, 15, ["All", -1]],
                processing: true,
                serverSide: true,
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('product.data') }}",
                    type: 'GET',
                },
                columns: [{
                        data: 'id',
                        name: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            let checked = selectedRowsProducts[row.id] ? 'checked' : '';
                            return `
                                <input class="form-check-input product_id" type="checkbox" id="inlineCheckbox_${row.id}" value="${row.id}" ${checked}>
                            `;
                        }
                    }, {
                        data: 'part_no',
                        name: 'part_no',
                    },
                    {
                        data: 'part_name',
                        name: 'part_name',
                    },
                    {
                        data: 'units.name',
                        name: 'units.name',
                        defaultContent: ''
                    },
                ],
                paging: true,
                pagingType: 'input',
            });

            $('#selectAll').on('change', function() {
                var $modal = $(this).closest('.modal');
                $modal.find('.product_id').prop('checked', this.checked);
            });

            $(document).on('change', '#modalTable2 .product_id', function() {
                var row = $(this).closest('tr');

                var rowData = modalTable2.row(row).data();
                var productId = $(this).val();

                if ($(this).is(':checked')) {
                    selectedRowsProducts[productId] = rowData;
                } else {
                    delete selectedRowsProducts[productId];
                }
            });

            $(document).on('change', '#modalTable .product_id', function() {
                var row = $(this).closest('tr');

                var rowData = modalTable.row(row).data();
                var productId = $(this).val();

                if ($(this).is(':checked')) {
                    selectedRowsProducts[productId] = rowData;
                } else {
                    delete selectedRowsProducts[productId];
                }
            });
        });

        function add_product2() {
            Object.values(selectedRowsProducts).forEach(rowData => {
                var productId = rowData.id;

                if (!addedProductIds.has(productId)) {
                    productTable.row.add([
                        productTable.rows().data().length + 1,
                        `<input type="hidden" class="product_id" name="products[${bool}][product_id]" value="${productId}">${rowData.part_no}`,
                        rowData.part_name,
                        rowData.unit,
                        `<input type="number"  class="form-control qty" name="products[${bool}][qty]" value="0">`,
                        `<input type="number" readonly class="form-control previous_qty" name="products[${bool}][previous_qty]" value="0">`,
                        `<input type="number" readonly class="form-control balance_qty" name="products[${bool}][balance_qty]" value="0">`,
                        `<input type="number" readonly class="form-control remaining_qty" name="products[${bool}][remaining_qty]" value="0">`,
                        `<input type="number" class="form-control received_qty" name="products[${bool}][received_qty]" value="0">`,
                        `<textarea class="form-control good_receiving_remark" rows="1" name="products[${bool}][good_receiving_remark]"></textarea>`,
                        `<button type="button" class="btn btn-danger btn-sm remove-product2"><i class="bi bi-trash"></i></button>`
                    ]).draw(false);
                    addedProductIds.add(productId);
                    delete selectedRowsProducts[productId ?? ''];
                    bool++;
                }
            });

            $('#modalTable2 input:checked').prop('checked', false);

            $('#exampleModal2').modal('hide');

        }

        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();

                if (!addedProductIds.has($(row).find('.product_id').val())) {
                    productTable.row.add([
                        productTable.rows().data().length + 1,
                        `<input type="hidden" class="product_id" name="products[${bool}][product_id]" value="${$(row).find('.product_id').val()}">${part_no}`,
                        part_name,
                        unit,
                        `<input type="number" readonly class="form-control qty" name="products[${bool}][qty]" value="${qty}">`,
                        `<input type="number" readonly class="form-control previous_qty" name="products[${bool}][previous_qty]" value="${$(row).find('.previous_qty').val()}">`,
                        `<input type="number" readonly class="form-control balance_qty" name="products[${bool}][balance_qty]" value="${$(row).find('.balance_qty').val()}">`,
                        `<input type="number" readonly class="form-control remaining_qty" name="products[${bool}][remaining_qty]" value="${$(row).find('.remaining_qty').val()}">`,
                        `<input type="number" class="form-control received_qty from-add-product2" name="products[${bool}][received_qty]" value="0">`,
                        `<textarea class="form-control good_receiving_remark" rows="1" name="products[${bool}][good_receiving_remark]"></textarea>`,
                        `<button type="button" class="btn btn-danger btn-sm remove-product"><i class="bi bi-trash"></i></button>`
                    ]).draw(false);
                    addedProductIds.add(productId);
                    delete selectedRowsProducts[productId ?? ''];
                    modalTable.row(row).remove().draw(false);
                    bool++;
                }

                $(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);
                    }
                });
            });

            $('#modalTable input:checked').prop('checked', false);

            $('#myModal').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();

            modalTable.row.add([
                `<input class="form-check-input product_id" type="checkbox" value="${$(row).find('.product_id').val()}">
                <input class="previous_qty" type="hidden" value="${$(row).find('.previous_qty').val()}">
                <input class="balance_qty" type="hidden" value="${$(row).find('.balance_qty').val()}">
                <input class="remaining_qty" type="hidden" value="${$(row).find('.remaining_qty').val()}">`,
                part_no,
                part_name,
                unit,
                incoming_qty
            ]).draw(false);

            var productId = row.find('.product_id').val();
            addedProductIds.delete(+productId);
            delete selectedRowsProducts[productId ?? ''];
            productTable.row(row).remove().draw(false);
            resetSerialNumbers(productTable);
        });

        $('#productTable tbody').on('click', 'button.remove-product2', function() {
            var row = $(this).closest('tr');
            var productId = row.find('.product_id').val();
            addedProductIds.delete(+productId);
            delete selectedRowsProducts[productId ?? ''];
            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