@extends('layouts.app')
@section('title')
    GOOD RECEIVING ALLOCATION
@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.allocation_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">
                                <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 readonly 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" class="form-control"
                                    value="{{ $good_receiving->purchase_order->supplier->name ?? '' }}">
                            </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="{{ $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" 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="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 p-2 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 readonly 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>Status</th>
                                        <th>Accepted Qty</th>
                                        <th>Remarks</th>
                                        <th>Allocated Qty</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($good_receiving_products as $good_receiving_product)
                                        <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
                                                @if ($good_receiving_product->status == 1) style="color: green;" @elseif($good_receiving_product->status == 0) style="color: red;" @endif>
                                                <input type="hidden" class="status"
                                                    value="{{ $good_receiving_product->status }}"
                                                    name="products[{{ $loop->iteration }}][status]">
                                                @if ($good_receiving_product->status == 1)
                                                    <span class="border badge border-success text-success">Accept</span>
                                                @elseif($good_receiving_product->status == 0)
                                                    <span class="border badge border-danger text-danger">On Hold</span>
                                                @endif
                                            </td>
                                            <td>
                                                <input type="number" readonly class="form-control accepted_qty"
                                                    value="{{ $good_receiving_product->accepted_qty }}"
                                                    name="products[{{ $loop->iteration }}][accepted_qty]">
                                                <input type="hidden" class="allocation_remarks"
                                                    name="products[{{ $loop->iteration }}][allocation_remarks]">
                                            </td>
                                            <td>
                                                <input type="hidden" class="remarks"
                                                    value="{{ $good_receiving_product->remarks }}"
                                                    name="products[{{ $loop->iteration }}][remarks]">
                                                <button type="button"
                                                    class="btn btn-success btn-sm add-remarks1">View</button>
                                            </td>
                                            <td>
                                                <input type="number" readonly class="form-control allocated_qty"
                                                    value="{{ $good_receiving_product->allocated_qty ?? 0 }}"
                                                    name="products[{{ $loop->iteration }}][allocated_qty]">
                                            </td>
                                            <td><button type="button" class="btn btn-success btn-sm openModal"
                                                    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 class="card-footer">
                <div class="row">
                    <div class="d-flex gap-2 justify-content-end col-12">
                        <input type="hidden" id="storedData" name="details">
                        <button type="button" class="btn btn-primary" id="saveForm">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    {{-- 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>
                                    <th>Label</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>
    {{-- 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 Remark</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <textarea 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>
                    <button type="button" class="btn btn-primary" id="saveRemarks">Save</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="remarksModal1" 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 id="remarksText22" class="form-control" rows="4" disabled placeholder="Enter your remarks here">{{ $good_receiving->purchase_order->purchase_order_detail[0]->good_receiving_remark }}</textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

                </div>
            </div>
        </div>
    </div>
    <script>
        var allocationTable;
        let locations = [];
        $(document).ready(function() {
            $('#productTable').DataTable();
            allocationTable = $('#allocationTable').DataTable();
            sessionStorage.clear();
            var goodReceivingLocations = @json($good_recieving_locations);
            goodReceivingLocations.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['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);
        });

        // location WORK
        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) {
            // Check if there is more than one row
            if ($('#allocationTable tr').length > 2) { // Including header row
                // Find the row index and remove it
                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');
        }

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

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

            let product_idss = $('.product_idss').val();
            $('#productTable .product_id').each(function() {
                if (product_idss == $(this).val()) {
                    let remarks = $('#remarksText').val();
                    let button = $(this).closest('tr').find('.add-remarks');
                    if (remarks.trim() !== '') {
                        button.removeClass('btn-danger');
                        button.addClass('btn-success');
                        button.text('Edit');
                    } else {
                        button.removeClass('btn-success');
                        button.addClass('btn-danger');
                        button.text('Add');
                    }

                    $(this).closest('tr').find('.allocation_remarks').val($('#remarksText').val());
                    $('#remarksModal').modal('hide');
                    return;
                }
            });
        });

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

            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 class="form-control location">${optionsHtml}</select>`,
                        `<input type="text" class="form-control lot_no" value="${element.lot_no}">`,
                        `<input type="number" class="form-control qty" value="${element.qty}">`,
                        `<button type="button" class="btn btn-primary btn-sm" onclick="printRow(this)"> Print</button>`,
                        `<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}">${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-primary btn-sm" onclick="printRow(this)"> Print</button>`,
                    `<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');
        });
        $('#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> Allocate quantity must be equals to Accepted quantity!.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `);
            } else {
                $('#exampleModal').modal('hide');
                let hiddenId = $('.product_ids').val();
                let data = [];
                $('#allocationTable tbody tr').each(function() {
                    let rowData = {};
                    rowData['location'] = $(this).find('.location').val();
                    rowData['area'] = $(this).find('.location option:selected').attr('data-area-id');
                    rowData['rack'] = $(this).find('.location option:selected').attr('data-rack-id');
                    rowData['level'] = $(this).find('.location option:selected').attr('data-level-id');
                    rowData['lot_no'] = $(this).find('.lot_no').val();
                    rowData['qty'] = $(this).find('.qty').val();
                    rowData['hiddenId'] = hiddenId;
                    data.push(rowData);
                });
                $('#productTable tbody tr').each(function() {
                    if ($(this).find('.product_id').val() == hiddenId) {
                        $(this).find('.allocated_qty').val(allocate_qty);
                    }
                });
                sessionStorage.setItem(`modalData${hiddenId}`, JSON.stringify(data));
            }
        });

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

        $('#saveForm').on('click', function() {
            let array = [];
            $('.product_id').each(function() {
                let storedData = sessionStorage.getItem(`modalData${$(this).val()}`);
                array.push(JSON.parse(storedData));
            });
            $('#storedData').val(JSON.stringify(array));
            $(this).closest('form').submit();
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>

    <script>
        async function printRow(button) {
            const row = $(button).closest('tr');

            const date = row.find('.date').val();
            const lotNo = row.find('.lot_no').val();
            const partNo = $('.part_no_text').text().trim("");
            const partName =  $('.part_name_text').text().trim("");
            const location = row.find('.location option:selected').text().trim("");
            const uom = row.find('td:nth-child(4)').text();
            const doNo = $('#ref_no').val();
            const qty = row.find('.qty').val();

            const tableData = [
                [{
                        content: 'Date',
                        styles: {
                            fontStyle: 'bold'
                        }
                    }, '{{ $good_receiving->date }}',
                    {
                        content: 'Do No',
                        styles: {
                            fontStyle: 'bold'
                        }
                    },
                    doNo
                ],
                [{
                        content: 'Part No',
                        styles: {
                            fontStyle: 'bold'
                        },
                    },
                    {
                        content: partNo,
                        colSpan: 4
                    }
                ],
                [{
                        content: 'Part Name',
                        styles: {
                            fontStyle: 'bold'
                        },
                    },
                    {
                        content: partName ,
                        colSpan: 4
                    }
                ],
                [{
                        content: 'Location',
                        styles: {
                            fontStyle: 'bold'
                        }
                    }, location,
                    {
                        content: 'Lot No',
                        styles: {
                            fontStyle: 'bold'
                        }
                    },
                    lotNo
                ],
                [{
                        content: 'UOM',
                        styles: {
                            fontStyle: 'bold'
                        }
                    }, '{{ $good_receiving_product->product->units->name }}',
                    {
                        content: 'Quantity',
                        styles: {
                            fontStyle: 'bold'
                        }
                    },
                    qty,
                ]
            ];

            const qrData = '{{ route('good_receiving.view', $good_receiving->id) }}';

            const {
                jsPDF
            } = window.jspdf;
            const doc = new jsPDF({
                orientation: 'landscape',
                unit: 'mm',
                format: [105, 205]
            });
            const logoBase64 = '{{ asset('assets/images/pna_logo.png') }}';
            const logoWidth = 30;
            const logoHeight = 30;
            const pageWidth = doc.internal.pageSize.width;
            const logoX = (pageWidth - logoWidth) / 2;
            const logoY = 10;
            doc.addImage(logoBase64, 'JPEG', logoX, logoY, logoWidth, logoHeight);

            const tableMargin = {
                left: 10,
                right: pageWidth * 0.2 + 10
            };
            doc.autoTable({
                body: tableData,
                startY: logoY + logoHeight + 10,
                theme: 'grid',
                styles: {
                    fontSize: 10
                },
                margin: tableMargin,
                tableWidth: 'auto',
            });

            const qrCodeUrl =
                `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(qrData)}&size=100x100`;
            const qrCode = await loadImage(qrCodeUrl);

            const qrWidth = 40;
            const qrHeight = 40;
            const qrX = pageWidth - qrWidth - 10;
            const qrY = logoY + logoHeight + 10;

            doc.addImage(qrCode, 'PNG', qrX, qrY, qrWidth, qrHeight);

            doc.save('Good-Receiving-Label.pdf');
        }

        function loadImage(url) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.crossOrigin = 'Anonymous';
                img.onload = () => resolve(img);
                img.onerror = () => reject('Failed to load image');
                img.src = url;
            });
        }
    </script>
@endsection