@extends('layouts.app')
@section('title')
    Stock Relocation Edit
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('stock_relocation.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        #mainTable input {
            width: 100px;
        }
    </style>
    <div class="card">
        <form method="post" action="{{ route('stock_relocation.update', $stock_relocation->id) }}"
            enctype="multipart/form-data">
            @csrf
            <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">Ref No</label>
                            <div class="col-6">
                                <input type="text" readonly name="ref_no" id="ref_no" class="form-control rounded-4"
                                    value="{{ $stock_relocation->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">Created Date</label>
                            <div class="col-6">
                                <input type="text" readonly name="date" id="date" 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="description" class="form-label col-4">Description</label>
                            <div class="col-6">
                                <textarea name="description" id="description" rows="1" class="form-control rounded-4">{{ $stock_relocation->description }}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="transfer_by" class="form-label col-4">Transfer By</label>
                            <div class="col-6">
                                <input type="text" readonly name="transfer_by" id="transfer_by"
                                    class="form-control rounded-4" value="{{ Auth::user()->user_name }}">
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <h5>LOCATION TRANSFER</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="previous_location" class="form-label col-4">Previous Location</label>
                            <div class="col-6">
                                <select name="previous_location" id="previous_location" class="form-select"
                                    style="width:100%!important;">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($locations as $location)
                                        <option data-area-id="{{ $location->area->id }}"
                                            data-rack-id="{{ $location->rack->id }}"
                                            data-level-id="{{ $location->level->id }}"
                                            value="{{ $location->area->name }}->{{ $location->rack->name }}->{{ $location->level->name }}"
                                            @selected($stock_relocation->previous_area_id == $location->area->id && $stock_relocation->previous_rack_id == $location->rack->id && $stock_relocation->previous_level_id == $location->level->id)>
                                            {{ $location->area->name }}->{{ $location->rack->name }}->{{ $location->level->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="new_location" class="form-label col-4">New Location</label>
                            <div class="col-6">
                                <select name="new_location" id="new_location" class="form-select"
                                    style="width:100%!important;">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($locations as $location)
                                        <option data-area-id="{{ $location->area->id }}"
                                            data-rack-id="{{ $location->rack->id }}"
                                            data-level-id="{{ $location->level->id }}"
                                            value="{{ $location->area->name }}->{{ $location->rack->name }}->{{ $location->level->name }}"
                                            @selected($stock_relocation->new_area_id == $location->area->id && $stock_relocation->new_rack_id == $location->rack->id && $stock_relocation->new_level_id == $location->level->id)>
                                            {{ $location->area->name }}->{{ $location->rack->name }}->{{ $location->level->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-12 d-flex justify-content-end">
                        <button type="button" class="btn btn-primary" id="additem" data-bs-toggle="modal"
                            data-bs-target="#exampleModalCenter">ADD PRODUCTS</button>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0" id="mainTable">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                    <th>Available Qty</th>
                                    <th>Quantity</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($stock_relocation_details as $stock_relocation_detail)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $stock_relocation_detail->products->part_no }}</td>
                                        <td>{{ $stock_relocation_detail->products->part_name }}</td>
                                        <td>{{ $stock_relocation_detail->products->units->name ?? '' }}</td>
                                        @php
                                            $used_qty = App\Models\Location::where(
                                                'product_id',
                                                $stock_relocation_detail->product_id,
                                            )
                                                ->where('area_id', $stock_relocation_detail->previous_area_id)
                                                ->where('rack_id', $stock_relocation_detail->previous_rack_id)
                                                ->where('level_id', $stock_relocation_detail->previous_level_id)
                                                ->sum('used_qty');
                                        @endphp
                                        <td><input type="number" readonly class="form-control available_qty"
                                                name="products[{{ $loop->iteration }}][available_qty]"
                                                value="{{ $stock_relocation_detail->available_qty + $used_qty }}"><input
                                                type="hidden" name="products[{{ $loop->iteration }}][product_id]"
                                                class="product_id" value="{{ $stock_relocation_detail->product_id }}">
                                        </td>
                                        <td><input type="number" class="form-control qty"
                                                name="products[{{ $loop->iteration }}][qty]"
                                                value="{{ $stock_relocation_detail->qty }}">
                                        </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 class="card-footer">
                    <div class="row">
                        <input type="hidden" name="previous_area_id" id="previous_area_id">
                        <input type="hidden" name="previous_rack_id" id="previous_rack_id">
                        <input type="hidden" name="previous_level_id" id="previous_level_id">
                        <input type="hidden" name="new_area_id" id="new_area_id">
                        <input type="hidden" name="new_rack_id" id="new_rack_id">
                        <input type="hidden" name="new_level_id" id="new_level_id">
                        <div class="d-flex gap-2 justify-content-end col-12">
                            <button type="button" class="btn btn-primary submit">Update</button>
                        </div>
                    </div>
                </div>
            </div>
            {{-- 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>Available 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>
        </form>
    </div>
    <script>
        let modalTable;
        let mainTable;
        let firstAttempt = true;
        $(document).ready(function() {
            modalTable = $('#modalTable').DataTable({
                "columnDefs": [{
                    "targets": 0,
                    "orderable": false
                }]
            });
            mainTable = $('#mainTable').DataTable();
            add_product();
        });

        $('#previous_location,#new_location').on('change', function() {
            mainTable.clear().draw(false);
            $previous = $('#previous_location').val();
            $new = $('#new_location').val();
            if ($previous == null || $new == null) {
                $('#additem').attr('disabled', 'disabled');
            } else if ($previous == $new) {
                $('#additem').attr('disabled', 'disabled');
            } else {
                $('#additem').removeAttr('disabled');
            }
        });

        $('.remove-product').click(function() {
            if (firstAttempt) {
                let mainTableProductIds = new Set();
                $("#mainTable tbody").find(".product_id").each(function() {
                    mainTableProductIds.add($(this).val());
                });
                $("#modalTable tbody").find(".product_id").each(function() {
                    if (mainTableProductIds.has($(this).val())) {
                        modalTable.row($(this).closest('tr')).remove().draw(false);
                    }
                });
                firstAttempt = false;
            }
        });

        $('#additem').click(function() {
            let area_id = $('#previous_location option:selected').attr('data-area-id');
            let rack_id = $('#previous_location option:selected').attr('data-rack-id');
            let level_id = $('#previous_location option:selected').attr('data-level-id');
            $.ajax({
                url: '{{ route('stock_relocation.products') }}',
                method: 'GET',
                data: {
                    area_id: area_id,
                    rack_id: rack_id,
                    level_id: level_id
                },
                success: function(response) {
                    modalTable.clear();
                    Object.values(response).forEach(element => {
                        modalTable.row.add([
                            `<input class="form-check-input" type="checkbox"><input type="hidden" value="${element.product_id}" class="product_id">`,
                            element.part_no,
                            element.part_name,
                            element.units ? element.units.name : '',
                            element.used_qty
                        ]);
                    });
                    modalTable.draw(false);
                    let mainTableProductIds = new Set();
                    $("#mainTable tbody").find(".product_id").each(function() {
                        mainTableProductIds.add($(this).val());
                    });
                    $("#modalTable tbody").find(".product_id").each(function() {
                        if (mainTableProductIds.has($(this).val())) {
                            let modalRow = $(this).closest('tr');
                            modalTable.row(modalRow).remove();
                        }
                    });
                    modalTable.draw(false);
                }
            });
        });

        function add_product() {
            modalTable.$('input:checked').each(function() {
                var row = $(this).closest('tr');
                var rowData = modalTable.row(row).data();
                var product_id = $(row).find('.product_id').val();

                // Add the row data to the main table
                mainTable.row.add([
                    mainTable.rows().data().length + 1,
                    rowData[1],
                    rowData[2],
                    rowData[3],
                    `<input type="hidden" class="form-control available_qty" name="products[${mainTable.rows().data().length + 1}][available_qty]" value="${rowData[4]}"><input type="hidden" name="products[${mainTable.rows().data().length + 1}][product_id]" class="product_id" value="${product_id}"><input type="number" class="form-control qty" name="products[${mainTable.rows().data().length + 1}][qty]" value="${rowData[4]}">`,
                    `<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);
            });

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

            // Add event listener to remove buttons
            $('#mainTable tbody').on('click', 'button.remove-product', function() {
                var row = $(this).closest('tr');
                var rowData = mainTable.row(row).data();
                let available_qty = $(row).find('.available_qty').val();

                // Add the removed row back to the modal table
                modalTable.row.add([
                    `<input class="form-check-input product_id" type="checkbox"
                                                id="inlineCheckbox1" value="${$(row).find('.product_id').val()}"><input type="hidden" value="${$(row).find('.product_id').val()}" class="product_id">`,
                    rowData[1],
                    rowData[2],
                    rowData[3],
                    available_qty
                ]).draw(false);

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

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

        function resetSerialNumbers() {
            if ($('#mainTable tbody tr:first').find('td:first').text() != 'No data available in table') {
                $('#mainTable tbody tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            }
        }

        $(document).on('keyup change', '.qty', function() {
            if (parseFloat($(this).val()) > parseFloat($(this).closest('tr').find('.available_qty').val())) {
                $(this).val($(this).closest('tr').find('.available_qty').val());
            }
        });

        $('.submit').on('click', function() {
            let previous_area_id = $('#previous_location option:selected').attr('data-area-id');
            let previous_rack_id = $('#previous_location option:selected').attr('data-rack-id');
            let previous_level_id = $('#previous_location option:selected').attr('data-level-id');

            let new_area_id = $('#new_location option:selected').attr('data-area-id');
            let new_rack_id = $('#new_location option:selected').attr('data-rack-id');
            let new_level_id = $('#new_location option:selected').attr('data-level-id');

            $('#previous_area_id').val(previous_area_id);
            $('#previous_rack_id').val(previous_rack_id);
            $('#previous_level_id').val(previous_level_id);

            $('#new_area_id').val(new_area_id);
            $('#new_rack_id').val(new_rack_id);
            $('#new_level_id').val(new_level_id);

            $(this).closest('form').submit();
        });

        $(document).ready(function() {


            // "Select All" checkbox functionality
            document.getElementById('selectAll').addEventListener('change', function() {
                const checkboxes = document.querySelectorAll('.product_id');
                checkboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
            });
        });
    </script>
@endsection