@extends('layouts.dashboard')

@section('title', $pageTitle ?? (isset($transfer) ? 'Edit Warehouse Transfer' : 'Create Warehouse Transfer'))

@section('page_header')
    <div class="page-header">
        <div class="page-header-left d-flex align-items-center">
            <div class="page-header-title">
                <h5 class="m-b-10">{{ $pageTitle ?? (isset($transfer) ? 'Edit Warehouse Transfer' : 'Create Warehouse Transfer') }}</h5>
            </div>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('transfers.index') }}">Warehouse Transfers</a></li>
                <li class="breadcrumb-item">{{ isset($transfer) ? 'Edit' : 'Create' }}</li>
            </ul>
        </div>
    </div>
@endsection

@section('page_content')
    @if (session('status'))
        <div class="alert alert-success">{{ session('status') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    <div class="card">
        <div class="card-body">
            @php
                $isEdit = isset($transfer);
                $oldItems = old('product_id');
                $items = $isEdit ? $transfer->items : collect();
            @endphp

            <form method="POST" action="{{ $isEdit ? route('transfers.update', $transfer) : route('transfers.save') }}">
                @csrf
                @if ($isEdit)
                    @method('PUT')
                @endif

                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Company</label>
                        <select name="company_id" class="form-select" required>
                            <option value="">Select company</option>
                            @foreach ($companies as $company)
                                <option value="{{ $company->id }}" @selected(old('company_id', $transfer?->company_id ?? '') == $company->id)>
                                    {{ $company->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">From Warehouse</label>
                        <select name="from_warehouse_id" class="form-select" required data-placeholder="Select warehouse">
                            <option value="">Select warehouse</option>
                            @foreach ($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}" data-company-id="{{ $warehouse->company_id }}"
                                    @selected(old('from_warehouse_id', $transfer?->warehouse_id ?? '') == $warehouse->id)>
                                    {{ $warehouse->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">To Warehouse</label>
                        <select name="to_warehouse_id" class="form-select" required data-placeholder="Select warehouse">
                            <option value="">Select warehouse</option>
                            @foreach ($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}" data-company-id="{{ $warehouse->company_id }}"
                                    @selected(old('to_warehouse_id', $selectedToWarehouseId ?? '') == $warehouse->id)>
                                    {{ $warehouse->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Date</label>
                        <input type="date" name="date" class="form-control" required
                            value="{{ old('date', $transfer?->date?->format('Y-m-d') ?? now()->format('Y-m-d')) }}">
                    </div>
                </div>

                <hr class="my-4">

                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h6 class="mb-0 fw-semibold">Transfer Items</h6>
                    <button type="button" class="btn btn-sm btn-light-brand" id="addItemRow">
                        <i class="feather-plus"></i>
                        Add Item
                    </button>
                </div>

                <div class="table-responsive">
                    <table class="table table-borderless align-middle" id="itemsTable">
                        <thead>
                            <tr>
                                <th style="width: 65%">Product</th>
                                <th style="width: 30%">Quantity</th>
                                <th style="width: 5%"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (is_array($oldItems))
                                @foreach ($oldItems as $index => $oldProduct)
                                    <tr>
                                        <td>
                                            <select name="product_id[]" class="form-select js-product-select" data-placeholder="Select product" required>
                                                <option value="">Select product</option>
                                                @foreach ($products as $product)
                                                    <option value="{{ $product->id }}" data-company-id="{{ $product->company_id }}" data-product-name="{{ $product->name }}"
                                                        @selected($oldProduct == $product->id)>
                                                        {{ $product->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="number" name="quantity[]" class="form-control js-qty" min="0.01" step="0.01" value="{{ old('quantity.' . $index) }}" required>
                                            <small class="text-danger d-block mt-1 js-available-stock"></small>
                                        </td>
                                        <td class="text-end">
                                            <button type="button" class="btn btn-link text-danger p-0 remove-row">
                                                <i class="feather-x"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            @elseif ($items->isNotEmpty())
                                @foreach ($items as $item)
                                    <tr>
                                        <td>
                                            <select name="product_id[]" class="form-select js-product-select" data-placeholder="Select product" required>
                                                <option value="">Select product</option>
                                                @foreach ($products as $product)
                                                    <option value="{{ $product->id }}" data-company-id="{{ $product->company_id }}" data-product-name="{{ $product->name }}"
                                                        @selected($item->product_id == $product->id)>
                                                        {{ $product->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="number" name="quantity[]" class="form-control js-qty" min="0.01" step="0.01" value="{{ $item->quantity }}" required>
                                            <small class="text-danger d-block mt-1 js-available-stock"></small>
                                        </td>
                                        <td class="text-end">
                                            <button type="button" class="btn btn-link text-danger p-0 remove-row">
                                                <i class="feather-x"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td>
                                        <select name="product_id[]" class="form-select js-product-select" data-placeholder="Select product" required>
                                            <option value="">Select product</option>
                                            @foreach ($products as $product)
                                                <option value="{{ $product->id }}" data-company-id="{{ $product->company_id }}" data-product-name="{{ $product->name }}">
                                                    {{ $product->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <input type="number" name="quantity[]" class="form-control js-qty" min="0.01" step="0.01" required>
                                        <small class="text-danger d-block mt-1 js-available-stock"></small>
                                    </td>
                                    <td class="text-end">
                                        <button type="button" class="btn btn-link text-danger p-0 remove-row">
                                            <i class="feather-x"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>

                <div class="d-flex gap-2 mt-4">
                    <button type="submit" class="btn btn-primary">
                        {{ $isEdit ? 'Update Transfer' : 'Create Transfer' }}
                    </button>
                    <a href="{{ route('transfers.index') }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tableBody = document.querySelector('#itemsTable tbody');
            const addButton = document.getElementById('addItemRow');
            const companySelect = document.querySelector('select[name="company_id"]');
            const fromWarehouseSelect = document.querySelector('select[name="from_warehouse_id"]');
            const toWarehouseSelect = document.querySelector('select[name="to_warehouse_id"]');
            const stockByWarehouseProduct = @json($stockByWarehouseProduct ?? []);
            const dependentSelects = {
                from_warehouse_id: fromWarehouseSelect,
                to_warehouse_id: toWarehouseSelect,
            };
            const dependentOptionCache = {
                from_warehouse_id: [],
                to_warehouse_id: [],
            };
            const productOptionCache = [];

            const availableQty = (warehouseId, productId) => {
                if (!warehouseId || !productId) return 0;
                return Number(stockByWarehouseProduct?.[String(warehouseId)]?.[String(productId)] ?? 0);
            };

            const cacheProductOptions = () => {
                const firstProductSelect = document.querySelector('.js-product-select');
                if (!firstProductSelect) return;

                productOptionCache.length = 0;
                Array.from(firstProductSelect.options)
                    .filter((option) => option.value !== '')
                    .forEach((option) => {
                        productOptionCache.push({
                            value: option.value,
                            name: option.dataset.productName || option.textContent.trim(),
                            companyId: option.dataset.companyId || '',
                        });
                    });
            };

            const renderProductSelectOptions = (selectEl, selectedValue = '') => {
                if (!selectEl) return;
                const selectedCompanyId = companySelect?.value || '';
                const selectedWarehouseId = fromWarehouseSelect?.value || '';
                const placeholder = selectEl.dataset.placeholder || 'Select product';
                selectEl.innerHTML = `<option value="">${placeholder}</option>`;
                selectEl.disabled = !selectedCompanyId || !selectedWarehouseId;

                productOptionCache
                    .filter((product) => {
                        if (!selectedCompanyId || !selectedWarehouseId) {
                            return false;
                        }

                        if (product.companyId !== selectedCompanyId) {
                            return false;
                        }

                        const stock = availableQty(selectedWarehouseId, product.value);
                        return stock > 0;
                    })
                    .forEach((product) => {
                        const optionEl = document.createElement('option');
                        optionEl.value = product.value;
                        optionEl.textContent = product.name;
                        optionEl.dataset.companyId = product.companyId;
                        optionEl.dataset.productName = product.name;
                        selectEl.appendChild(optionEl);
                    });

                if (selectedValue && Array.from(selectEl.options).some((option) => option.value === selectedValue)) {
                    selectEl.value = selectedValue;
                }
            };

            const syncRowStock = (row) => {
                if (!row) return;
                const productSelect = row.querySelector('.js-product-select');
                const qtyInput = row.querySelector('.js-qty');
                const stockText = row.querySelector('.js-available-stock');
                if (!productSelect || !qtyInput || !stockText) return;

                const selectedProductId = productSelect.value;
                const selectedWarehouseId = fromWarehouseSelect?.value || '';
                const hasContext = Boolean(selectedWarehouseId && selectedProductId);
                const stock = hasContext ? availableQty(selectedWarehouseId, selectedProductId) : 0;

                stockText.textContent = hasContext ? `Available stock: ${stock.toFixed(2)}` : '';

                if (!hasContext) {
                    qtyInput.removeAttribute('max');
                    qtyInput.setCustomValidity('');
                    return;
                }

                qtyInput.max = stock.toFixed(2);
                const qtyValue = Number(qtyInput.value || 0);

                if (qtyValue > stock) {
                    qtyInput.value = stock > 0 ? stock.toFixed(2) : '';
                }

                const normalizedQty = Number(qtyInput.value || 0);
                qtyInput.setCustomValidity(normalizedQty > stock ? 'Quantity exceeds available stock.' : '');
            };

            const syncAllRowsStock = () => {
                tableBody.querySelectorAll('tr').forEach((row) => syncRowStock(row));
            };

            const refreshAllProductSelects = () => {
                tableBody.querySelectorAll('.js-product-select').forEach((selectEl) => {
                    const previousValue = selectEl.value;
                    renderProductSelectOptions(selectEl, previousValue);
                });
                syncAllRowsStock();
            };

            const cacheDependentOptions = () => {
                Object.entries(dependentSelects).forEach(([name, select]) => {
                    if (!select) return;
                    dependentOptionCache[name] = Array.from(select.options)
                        .filter((option) => option.value !== '')
                        .map((option) => ({
                            value: option.value,
                            label: option.textContent,
                            companyId: option.dataset.companyId || '',
                        }));
                });
            };

            const filterCompanyDependentOptions = () => {
                const selectedCompanyId = companySelect?.value || '';

                Object.entries(dependentSelects).forEach(([name, select]) => {
                    const options = dependentOptionCache[name];
                    if (!select) return;

                    const previousValue = select.value;
                    const placeholder = select.dataset.placeholder || 'Select';
                    select.innerHTML = `<option value="">${placeholder}</option>`;
                    select.disabled = !selectedCompanyId;

                    options
                        .filter((option) => selectedCompanyId && option.companyId === selectedCompanyId)
                        .forEach((option) => {
                            const optionEl = document.createElement('option');
                            optionEl.value = option.value;
                            optionEl.textContent = option.label;
                            optionEl.dataset.companyId = option.companyId;
                            select.appendChild(optionEl);
                        });

                    if (previousValue && Array.from(select.options).some((option) => option.value === previousValue)) {
                        select.value = previousValue;
                    }
                });

                syncWarehouseSelection();
            };

            const syncWarehouseSelection = () => {
                const selectedFrom = fromWarehouseSelect?.value || '';
                const selectedTo = toWarehouseSelect?.value || '';

                if (fromWarehouseSelect) {
                    Array.from(fromWarehouseSelect.options).forEach((option) => {
                        option.disabled = option.value !== '' && option.value === selectedTo;
                    });
                }

                if (toWarehouseSelect) {
                    Array.from(toWarehouseSelect.options).forEach((option) => {
                        option.disabled = option.value !== '' && option.value === selectedFrom;
                    });
                }

                const isSameWarehouse = selectedFrom !== '' && selectedTo !== '' && selectedFrom === selectedTo;
                const message = isSameWarehouse ? 'From Warehouse and To Warehouse cannot be the same.' : '';
                fromWarehouseSelect?.setCustomValidity(message);
                toWarehouseSelect?.setCustomValidity(message);
            };

            const buildRow = () => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>
                        <select name="product_id[]" class="form-select js-product-select" data-placeholder="Select product" required>
                            <option value="">Select product</option>
                        </select>
                    </td>
                    <td>
                        <input type="number" name="quantity[]" class="form-control js-qty" min="0.01" step="0.01" required>
                        <small class="text-danger d-block mt-1 js-available-stock"></small>
                    </td>
                    <td class="text-end">
                        <button type="button" class="btn btn-link text-danger p-0 remove-row">
                            <i class="feather-x"></i>
                        </button>
                    </td>
                `;
                return row;
            };

            addButton.addEventListener('click', function() {
                const row = buildRow();
                tableBody.appendChild(row);
                renderProductSelectOptions(row.querySelector('.js-product-select'));
                syncRowStock(row);
            });

            tableBody.addEventListener('input', function(event) {
                if (event.target.classList.contains('js-qty')) {
                    syncRowStock(event.target.closest('tr'));
                }
            });

            tableBody.addEventListener('change', function(event) {
                if (event.target.classList.contains('js-product-select')) {
                    syncRowStock(event.target.closest('tr'));
                }
            });

            tableBody.addEventListener('click', function(event) {
                const removeBtn = event.target.closest('.remove-row');
                if (!removeBtn) return;
                const row = removeBtn.closest('tr');
                if (row && tableBody.children.length > 1) {
                    row.remove();
                }
            });

            companySelect?.addEventListener('change', function() {
                filterCompanyDependentOptions();
                refreshAllProductSelects();
                syncWarehouseSelection();
            });
            fromWarehouseSelect?.addEventListener('change', function() {
                refreshAllProductSelects();
            });
            fromWarehouseSelect?.addEventListener('change', syncWarehouseSelection);
            toWarehouseSelect?.addEventListener('change', syncWarehouseSelection);

            cacheDependentOptions();
            cacheProductOptions();
            filterCompanyDependentOptions();
            syncWarehouseSelection();
            refreshAllProductSelects();
        });
    </script>
@endpush