@extends('layouts.dashboard')

@section('title', $pageTitle ?? (isset($sale) ? 'Edit Sale' : 'Create Sale'))

@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($sale) ? 'Edit Sale' : 'Create Sale') }}</h5>
            </div>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('sales.index') }}">Sales</a></li>
                <li class="breadcrumb-item">{{ isset($sale) ? '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($sale);
                $oldItems = old('product_id');
                $items = $isEdit ? $sale->items : collect();
                $defaultAccount = old('account_id', '');
                $allocated = $isEdit ? $sale->allocations->sum('amount') : 0;
                $outstanding = $isEdit ? max($sale->amount - $allocated, 0) : 0;
            @endphp

            <form method="POST" action="{{ $isEdit ? route('sales.update', $sale) : route('sales.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', $sale?->company_id ?? '') == $company->id)>
                                    {{ $company->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Warehouse</label>
                        <select name="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('warehouse_id', $sale?->warehouse_id ?? '') == $warehouse->id)>
                                    {{ $warehouse->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Customer</label>
                        <select name="party_id" class="form-select" required data-placeholder="Select customer">
                            <option value="">Select customer</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}" data-company-id="{{ $customer->company_id }}"
                                    @selected(old('party_id', $sale?->party_id ?? '') == $customer->id)>
                                    {{ $customer->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Agent (Optional)</label>
                        <select name="agent_party_id" class="form-select" data-placeholder="Select agent">
                            <option value="">Select agent</option>
                            @foreach ($agents as $agent)
                                <option value="{{ $agent->id }}" data-company-id="{{ $agent->company_id }}"
                                    @selected(($defaultAgentId ?? '') == $agent->id)>
                                    {{ $agent->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Agent Commission %</label>
                        <input type="number" name="commission_pct" class="form-control" min="0" max="100"
                            step="0.01" value="{{ old('commission_pct', $defaultCommissionPct ?? 0) }}"
                            placeholder="0.00">
                        <small class="text-muted">Applied only when an agent is selected.</small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Date</label>
                        <input type="date" name="date" class="form-control" required
                            value="{{ old('date', $sale?->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">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 ($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>
                                            <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 ($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>
                                            <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 ($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>
                                        <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">Paid Amount (Optional)</label>
                            <input type="number" name="paid_amount" class="form-control" min="0" step="0.01"
                                value="{{ old('paid_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 payment description">{{ old('description') }}</textarea>
                        </div>
                    </div>
                @endif

                <div class="d-flex gap-2 mt-4">
                    <button type="submit" class="btn btn-primary">
                        {{ $isEdit ? 'Update Sale' : 'Create Sale' }}
                    </button>
                    <a href="{{ route('sales.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 Payment</h6>
                <div class="text-muted mb-3">Outstanding: {{ number_format((float) $outstanding, 2) }}</div>
                <form method="POST" action="{{ route('sales.payments.add', $sale) }}">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Paid Amount</label>
                            <input type="number" name="paid_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 payment description">{{ old('description') }}</textarea>
                        </div>
                    </div>
                    <div class="d-flex gap-2 mt-3">
                        <button type="submit" class="btn btn-primary">Record Payment</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 src="assets/vendors/js/select2-active.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 warehouseSelect = document.querySelector('select[name="warehouse_id"]');
            const stockByWarehouseProduct = @json($stockByWarehouseProduct ?? []);
            const dependentSelects = {
                warehouse_id: document.querySelector('select[name="warehouse_id"]'),
                party_id: document.querySelector('select[name="party_id"]'),
                agent_party_id: document.querySelector('select[name="agent_party_id"]'),
            };
            const dependentOptionCache = {
                warehouse_id: [],
                party_id: [],
                agent_party_id: [],
            };
            const productOptionCache = [];
            const hasSelect2 = typeof window.jQuery !== 'undefined' && typeof window.jQuery.fn.select2 ===
                'function';

            const formatQty = (qty) => Number(qty || 0).toFixed(2);

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

            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 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 placeholder = selectEl.dataset.placeholder || 'Select product';
                selectEl.innerHTML = `<option value="">${placeholder}</option>`;
                selectEl.disabled = !selectedCompanyId;

                productOptionCache
                    .filter((product) => selectedCompanyId && product.companyId === selectedCompanyId)
                    .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;
                }
                initProductSelect(selectEl);
            };

            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 = warehouseSelect?.value || '';
                const hasContext = Boolean(selectedWarehouseId && selectedProductId);
                const stock = hasContext ? availableQty(selectedWarehouseId, selectedProductId) : 0;

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

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

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

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

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

            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 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>
                        <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);
                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'));
                    recalcTotals();
                }
                if (event.target.classList.contains('js-price')) {
                    recalcTotals();
                }
            });

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

            cacheDependentOptions();
            cacheProductOptions();
            filterCompanyDependentOptions();
            refreshAllProductSelects();
            companySelect?.addEventListener('change', filterCompanyDependentOptions);
            companySelect?.addEventListener('change', refreshAllProductSelects);
            warehouseSelect?.addEventListener('change', refreshAllProductSelects);
            recalcTotals();
        });
    </script>
@endpush