@extends('layouts.dashboard')

@section('title', $pageTitle ?? (isset($salesReturn) ? 'Edit Sales Return' : 'Create Sales Return'))

@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($salesReturn) ? 'Edit Sales Return' : 'Create Sales Return') }}</h5>
            </div>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('sales-returns.index') }}">Sales Returns</a></li>
                <li class="breadcrumb-item">{{ isset($salesReturn) ? '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($salesReturn);
                $oldItems = old('product_id');
                $items = $isEdit ? $salesReturn->items : collect();
                $allocated = $isEdit ? $salesReturn->returnAllocations->sum('amount') : 0;
                $outstanding = $isEdit ? max($salesReturn->amount - $allocated, 0) : 0;
                $defaultAccount = old('account_id', '');
                $currentSaleId = (string) ($selectedSaleId ?? '');
                $selectedSaleProducts = collect($saleProductsMap[$currentSaleId] ?? []);
            @endphp

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

                <div class="row g-3">
                    <div class="col-md-4">
                        <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', $salesReturn?->company_id ?? '') == $company->id)>
                                    {{ $company->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Sale Invoice</label>
                        <select name="sale_id" class="form-select" required data-placeholder="Select sale">
                            <option value="">Select sale</option>
                            @foreach ($sales as $sale)
                                <option
                                    value="{{ $sale->id }}"
                                    data-company-id="{{ $sale->company_id }}"
                                    data-party-name="{{ $sale->party?->name ?? '-' }}"
                                    data-warehouse-name="{{ $sale->warehouse?->name ?? '-' }}"
                                    @selected(old('sale_id', $salesReturn?->reference_transaction_id ?? '') == $sale->id)
                                >
                                    {{ $sale->transaction_no }} - {{ $sale->party?->name ?? 'N/A' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Date</label>
                        <input type="date" name="date" class="form-control" required
                            value="{{ old('date', $salesReturn?->date?->format('Y-m-d') ?? now()->format('Y-m-d')) }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Customer</label>
                        <input type="text" class="form-control" id="saleCustomerText" readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Warehouse</label>
                        <input type="text" class="form-control" id="saleWarehouseText" readonly>
                    </div>
                </div>

                <hr class="my-4">

                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h6 class="mb-0 fw-semibold">Return 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: 45%">Product</th>
                                <th style="width: 15%">Quantity</th>
                                <th style="width: 20%">Price</th>
                                <th style="width: 15%" class="text-end">Total</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 ($selectedSaleProducts as $product)
                                                    <option value="{{ $product['id'] }}" data-max-qty="{{ $product['max_qty'] }}" data-price="{{ $product['price'] }}"
                                                        @selected((string) $oldProduct === (string) $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-max-qty"></small>
                                        </td>
                                        <td>
                                            <input type="number" name="price[]" class="form-control js-price" min="0" step="0.01"
                                                value="{{ old('price.' . $index) }}" required>
                                        </td>
                                        <td class="text-end">
                                            <input type="text" class="form-control-plaintext text-end js-line-total" value="0.00" readonly>
                                        </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 ($selectedSaleProducts as $product)
                                                    <option value="{{ $product['id'] }}" data-max-qty="{{ $product['max_qty'] }}" data-price="{{ $product['price'] }}"
                                                        @selected((string) $item->product_id === (string) $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-max-qty"></small>
                                        </td>
                                        <td>
                                            <input type="number" name="price[]" class="form-control js-price" min="0" step="0.01"
                                                value="{{ $item->price }}" required>
                                        </td>
                                        <td class="text-end">
                                            <input type="text" class="form-control-plaintext text-end js-line-total" value="{{ number_format((float) $item->total, 2) }}" readonly>
                                        </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 ($selectedSaleProducts as $product)
                                                <option value="{{ $product['id'] }}" data-max-qty="{{ $product['max_qty'] }}" data-price="{{ $product['price'] }}">
                                                    {{ $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-max-qty"></small>
                                    </td>
                                    <td>
                                        <input type="number" name="price[]" class="form-control js-price" min="0" step="0.01" required>
                                    </td>
                                    <td class="text-end">
                                        <input type="text" class="form-control-plaintext text-end js-line-total" value="0.00" readonly>
                                    </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>
                        <tfoot>
                            <tr>
                                <th colspan="3" class="text-end">Grand Total</th>
                                <th class="text-end">
                                    <input type="text" class="form-control-plaintext text-end fw-semibold" id="grandTotal" value="0.00" readonly>
                                </th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                @if (! $isEdit)
                    <div class="row g-3 mt-3">
                        <div class="col-md-4">
                            <label class="form-label">Refund Amount (Optional)</label>
                            <input type="number" name="refund_amount" class="form-control" min="0" step="0.01"
                                value="{{ old('refund_amount') }}" placeholder="0.00">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Payment Mode</label>
                            <select name="payment_mode" class="form-select">
                                <option value="">Select mode</option>
                                @foreach ($paymentModes as $mode)
                                    <option value="{{ $mode }}" @selected(old('payment_mode') === $mode)>
                                        {{ $mode }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Account</label>
                            <select name="account_id" class="form-select">
                                <option value="">Select account</option>
                                @foreach ($accounts as $account)
                                    <option value="{{ $account->id }}" @selected($defaultAccount == $account->id)>
                                        {{ $account->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Description (Optional)</label>
                            <textarea name="description" class="form-control" rows="2" placeholder="Enter refund description">{{ old('description') }}</textarea>
                        </div>
                    </div>
                @endif

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

    @if ($isEdit)
        <div class="card mt-4">
            <div class="card-body">
                <h6 class="fw-semibold mb-3">Add Refund</h6>
                <div class="text-muted mb-3">Pending Refund: {{ number_format((float) $outstanding, 2) }}</div>
                <form method="POST" action="{{ route('sales-returns.refunds.add', $salesReturn) }}">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Refund Amount</label>
                            <input type="number" name="refund_amount" class="form-control" min="0.01" step="0.01" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Payment Mode</label>
                            <select name="payment_mode" class="form-select" required>
                                <option value="">Select mode</option>
                                @foreach ($paymentModes as $mode)
                                    <option value="{{ $mode }}">{{ $mode }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Account</label>
                            <select name="account_id" class="form-select" required>
                                <option value="">Select account</option>
                                @foreach ($accounts as $account)
                                    <option value="{{ $account->id }}" @selected($defaultAccount == $account->id)>
                                        {{ $account->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Description (Optional)</label>
                            <textarea name="description" class="form-control" rows="2" placeholder="Enter refund description">{{ old('description') }}</textarea>
                        </div>
                    </div>
                    <div class="d-flex gap-2 mt-3">
                        <button type="submit" class="btn btn-primary">Record Refund</button>
                    </div>
                </form>
            </div>
        </div>
    @endif
@endsection

@push('styles')
    <link rel="stylesheet" href="assets/vendors/css/select2.min.css">
    <link rel="stylesheet" href="assets/vendors/css/select2-theme.min.css">
@endpush

@push('scripts')
    <script src="assets/vendors/js/select2.min.js"></script>
    <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 saleSelect = document.querySelector('select[name="sale_id"]');
            const saleCustomerText = document.getElementById('saleCustomerText');
            const saleWarehouseText = document.getElementById('saleWarehouseText');
            const saleProductsMap = @json($saleProductsMap ?? []);
            const hasSelect2 = typeof window.jQuery !== 'undefined' && typeof window.jQuery.fn.select2 === 'function';
            const saleOptionCache = [];

            const initProductSelect = (selectEl) => {
                if (!hasSelect2 || !selectEl) return;
                const $select = window.jQuery(selectEl);
                if ($select.hasClass('select2-hidden-accessible')) {
                    $select.select2('destroy');
                }
                $select.select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: selectEl.dataset.placeholder || 'Select product',
                });
            };

            const cacheSaleOptions = () => {
                saleOptionCache.length = 0;
                Array.from(saleSelect.options)
                    .filter((option) => option.value !== '')
                    .forEach((option) => {
                        saleOptionCache.push({
                            value: option.value,
                            label: option.textContent,
                            companyId: option.dataset.companyId || '',
                            partyName: option.dataset.partyName || '-',
                            warehouseName: option.dataset.warehouseName || '-',
                        });
                    });
            };

            const filterSalesByCompany = () => {
                const selectedCompany = companySelect.value || '';
                const previousSale = saleSelect.value;
                const placeholder = saleSelect.dataset.placeholder || 'Select sale';

                saleSelect.innerHTML = `<option value="">${placeholder}</option>`;
                saleSelect.disabled = !selectedCompany;

                saleOptionCache
                    .filter((option) => selectedCompany && option.companyId === selectedCompany)
                    .forEach((option) => {
                        const optionEl = document.createElement('option');
                        optionEl.value = option.value;
                        optionEl.textContent = option.label;
                        optionEl.dataset.companyId = option.companyId;
                        optionEl.dataset.partyName = option.partyName;
                        optionEl.dataset.warehouseName = option.warehouseName;
                        saleSelect.appendChild(optionEl);
                    });

                if (previousSale && Array.from(saleSelect.options).some((option) => option.value === previousSale)) {
                    saleSelect.value = previousSale;
                } else {
                    saleSelect.value = '';
                }

                updateSaleMeta();
            };

            const getSelectedSaleProducts = () => {
                const saleId = saleSelect.value || '';
                return Array.isArray(saleProductsMap[saleId]) ? saleProductsMap[saleId] : [];
            };

            const renderProductOptions = (selectEl, selectedValue = '') => {
                if (!selectEl) return;
                const products = getSelectedSaleProducts();
                const placeholder = selectEl.dataset.placeholder || 'Select product';

                selectEl.innerHTML = `<option value="">${placeholder}</option>`;
                selectEl.disabled = !saleSelect.value;

                products.forEach((product) => {
                    const optionEl = document.createElement('option');
                    optionEl.value = String(product.id);
                    optionEl.textContent = product.name;
                    optionEl.dataset.maxQty = String(product.max_qty);
                    optionEl.dataset.price = String(product.price);
                    selectEl.appendChild(optionEl);
                });

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

                initProductSelect(selectEl);
            };

            const updateSaleMeta = () => {
                const selectedOption = saleSelect.options[saleSelect.selectedIndex];
                const hasSale = selectedOption && selectedOption.value;
                saleCustomerText.value = hasSale ? (selectedOption.dataset.partyName || '-') : '';
                saleWarehouseText.value = hasSale ? (selectedOption.dataset.warehouseName || '-') : '';
            };

            const syncRowLimit = (row) => {
                const productSelect = row.querySelector('.js-product-select');
                const qtyInput = row.querySelector('.js-qty');
                const priceInput = row.querySelector('.js-price');
                const hint = row.querySelector('.js-max-qty');
                if (!productSelect || !qtyInput || !priceInput || !hint) return;

                const selectedOption = productSelect.options[productSelect.selectedIndex];
                if (!selectedOption || !selectedOption.value) {
                    qtyInput.removeAttribute('max');
                    qtyInput.setCustomValidity('');
                    hint.textContent = '';
                    return;
                }

                const maxQty = Number(selectedOption.dataset.maxQty || 0);
                const defaultPrice = Number(selectedOption.dataset.price || 0);
                qtyInput.max = maxQty.toFixed(2);
                hint.textContent = `Max returnable: ${maxQty.toFixed(2)}`;

                if (!priceInput.value || Number(priceInput.value) === 0) {
                    priceInput.value = defaultPrice.toFixed(2);
                }

                const qtyValue = Number(qtyInput.value || 0);
                if (qtyValue > maxQty) {
                    qtyInput.value = maxQty > 0 ? maxQty.toFixed(2) : '';
                }

                qtyInput.setCustomValidity(Number(qtyInput.value || 0) > maxQty ? 'Quantity exceeds max returnable.' : '');
            };

            const syncAllRows = () => {
                tableBody.querySelectorAll('tr').forEach((row) => syncRowLimit(row));
            };

            const recalcTotals = () => {
                let grand = 0;
                tableBody.querySelectorAll('tr').forEach((row) => {
                    const qty = parseFloat(row.querySelector('.js-qty')?.value || '0');
                    const price = parseFloat(row.querySelector('.js-price')?.value || '0');
                    const total = qty * price;
                    const totalInput = row.querySelector('.js-line-total');
                    if (totalInput) {
                        totalInput.value = total.toFixed(2);
                    }
                    grand += total;
                });
                const grandInput = document.getElementById('grandTotal');
                if (grandInput) {
                    grandInput.value = grand.toFixed(2);
                }
            };

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

            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-max-qty"></small>
                    </td>
                    <td>
                        <input type="number" name="price[]" class="form-control js-price" min="0" step="0.01" required>
                    </td>
                    <td class="text-end">
                        <input type="text" class="form-control-plaintext text-end js-line-total" value="0.00" readonly>
                    </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);
                renderProductOptions(row.querySelector('.js-product-select'));
                syncRowLimit(row);
            });

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

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

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

            companySelect.addEventListener('change', function() {
                filterSalesByCompany();
                refreshAllProductSelects();
            });

            saleSelect.addEventListener('change', function() {
                updateSaleMeta();
                refreshAllProductSelects();
            });

            cacheSaleOptions();
            filterSalesByCompany();
            refreshAllProductSelects();
        });
    </script>
@endpush