@php
    $i = $item ?? null;
    $itemType = old('type', $i?->type ?? 'product');
    $descMax = $descriptionMax ?? 1000;
    $descVal = old('description', $i?->description ?? '');
    $descLen = strlen($descVal);
    $descPct = min(100, round(($descLen / $descMax) * 100));
@endphp

<input type="hidden" name="type" id="item-type" value="{{ $itemType }}">

<div class="billing-form-card card border-0">
    <div class="card-body">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
            <div>
                <h5 class="mb-1 fw-semibold">{{ $i ? 'Edit Item' : 'New Item' }}</h5>
                <p class="text-muted mb-0 small">Add a product with inventory or a service for billing</p>
            </div>
            <ul class="nav billing-type-toggle mb-0" role="tablist" id="item-type-tabs">
                <li class="nav-item">
                    <a class="nav-link {{ $itemType === 'product' ? 'active' : '' }}" href="#" data-type="product" role="tab">
                        <i class="ri-box-3-line me-1"></i> Product
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $itemType === 'service' ? 'active' : '' }}" href="#" data-type="service" role="tab">
                        <i class="ri-service-line me-1"></i> Service
                    </a>
                </li>
            </ul>
        </div>

        <div class="billing-section">
            <div class="billing-section-title">
                <i class="ri-file-list-3-line"></i> Basic details
            </div>
            <div class="row g-3">
                <div class="col-lg-8">
                    <div class="mb-3">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <div class="billing-input-icon">
                            <i class="ri-price-tag-3-line"></i>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $i?->name) }}" placeholder="Item or service name" required>
                        </div>
                    </div>
                    <div class="mb-0">
                        <label class="form-label">Description</label>
                        <textarea name="description" id="item-description" class="form-control" rows="3" maxlength="{{ $descMax }}" placeholder="Optional description for invoices...">{{ $descVal }}</textarea>
                        <div class="billing-char-counter">
                            <div class="billing-char-bar">
                                <div class="billing-char-bar__fill" id="desc-bar-fill" style="width: {{ $descPct }}%"></div>
                            </div>
                            <span><span id="desc-chars-left">{{ $descMax - $descLen }}</span> / {{ $descMax }} characters left</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    @php
                        $savedUnit = old('unit', $i?->unit ?? '');
                        $unitMeta = $savedUnit
                            ? (collect($unitsCatalog ?? [])->firstWhere('code', $savedUnit)
                                ?? collect($unitsCatalog ?? [])->first(fn ($u) => strcasecmp($u['code'], $savedUnit) === 0))
                            : null;
                        $unitLabel = $unitMeta['label'] ?? ($savedUnit ?: 'Select unit');
                    @endphp
                    <div class="mb-3">
                        <label class="form-label">Unit @if(!($unitOptional ?? true))<span class="text-danger">*</span>@endif</label>
                        @include('partials.admin.unit-combobox', [
                            'name' => 'unit',
                            'value' => $unitMeta['code'] ?? $savedUnit,
                            'label' => $unitLabel,
                            'size' => 'lg',
                            'placeholder' => 'Select unit',
                            'optional' => $unitOptional ?? true,
                            'required' => !($unitOptional ?? true),
                        ])
                    </div>
                    <div class="mb-0">
                        <label class="form-label">Tax</label>
                        <div class="billing-input-icon">
                            <i class="ri-percent-line"></i>
                            <select name="tax_rate_id" class="form-select">
                                <option value="">Select tax rate</option>
                                @foreach($taxRates as $tax)
                                    <option value="{{ $tax->id }}" @selected(old('tax_rate_id', $i?->tax_rate_id) == $tax->id)>
                                        {{ $tax->name }} ({{ $tax->rate }}%)
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="billing-section" id="product-fields" style="{{ $itemType === 'service' ? 'display:none' : '' }}">
            <div class="billing-section-title">
                <i class="ri-barcode-box-line"></i> Product & inventory
            </div>
            <div class="row g-3 billing-meta-grid">
                <div class="col-sm-6 col-md-3">
                    <label class="form-label">Current quantity</label>
                    <div class="billing-input-icon billing-input-icon--readonly">
                        <i class="ri-stack-line"></i>
                        <input type="text" id="item-current-qty" class="form-control" readonly
                            value="{{ number_format($i ? ($i->stock_qty ?? 0) : old('opening_quantity', 0), 3, '.', '') }}">
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <label class="form-label">Opening quantity</label>
                    <input type="number" step="0.001" min="0" name="opening_quantity" id="item-opening-qty" class="form-control"
                        value="{{ old('opening_quantity', $i ? ($i->opening_quantity ?? $i->stock_qty) : 0) }}"
                        {{ $i ? 'readonly' : '' }} placeholder="0">
                    @if($i)<small class="text-muted">Locked after creation</small>@endif
                </div>
                <div class="col-sm-6 col-md-3">
                    <label class="form-label">HSN</label>
                    <input type="text" name="hsn_sac" id="hsn-sac-field" class="form-control" value="{{ old('hsn_sac', $i?->hsn_sac) }}" placeholder="e.g. 8471">
                </div>
                <div class="col-sm-6 col-md-3">
                    <label class="form-label">SKU</label>
                    <input type="text" name="sku" class="form-control" value="{{ old('sku', $i?->sku) }}" placeholder="Stock keeping unit">
                </div>
            </div>
        </div>

        <div class="billing-section" id="service-fields" style="{{ $itemType === 'product' ? 'display:none' : '' }}">
            <div class="billing-section-title">
                <i class="ri-code-s-slash-line"></i> Service codes
            </div>
            <div class="row g-3 billing-meta-grid">
                <div class="col-md-6">
                    <label class="form-label">SAC</label>
                    <input type="text" name="hsn_sac_service" id="hsn-sac-service" class="form-control service-hsn-sac"
                        value="{{ old('hsn_sac', $i?->hsn_sac) }}" placeholder="Service Accounting Code">
                </div>
                <div class="col-md-6">
                    <label class="form-label">SKU</label>
                    <input type="text" name="sku_service" class="form-control service-sku" value="{{ old('sku', $i?->sku) }}" placeholder="Optional reference code">
                </div>
            </div>
        </div>

        <div class="billing-section mb-0">
            <div class="billing-section-title">
                <i class="ri-money-rupee-circle-line"></i> Pricing
            </div>
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="billing-price-panel billing-price-panel--sale">
                        <div class="billing-price-panel__head">
                            <i class="ri-arrow-up-circle-line"></i> Sales info
                        </div>
                        <div class="row g-2 mb-2">
                            <div class="col-7">
                                <label class="form-label">Unit price</label>
                                <input type="number" step="0.01" min="0" name="sale_rate" class="form-control" value="{{ old('sale_rate', $i?->sale_rate ?? 0) }}">
                            </div>
                            <div class="col-5">
                                <label class="form-label">Currency</label>
                                <select name="sale_currency" class="form-select">
                                    @foreach($currencies as $cur)
                                        <option value="{{ $cur }}" @selected(old('sale_currency', $i?->sale_currency ?? 'INR') === $cur)>{{ $cur }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row g-2">
                            <div class="col-6">
                                <label class="form-label">CESS %</label>
                                <input type="number" step="0.01" min="0" name="sale_cess_percent" class="form-control" value="{{ old('sale_cess_percent', $i?->sale_cess_percent ?? 0) }}">
                            </div>
                            <div class="col-6">
                                <label class="form-label">+ CESS</label>
                                <input type="number" step="0.01" min="0" name="sale_cess_amount" class="form-control" value="{{ old('sale_cess_amount', $i?->sale_cess_amount ?? 0) }}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="billing-price-panel billing-price-panel--purchase">
                        <div class="billing-price-panel__head">
                            <i class="ri-arrow-down-circle-line"></i> Purchase info
                        </div>
                        <div class="row g-2 mb-2">
                            <div class="col-7">
                                <label class="form-label">Unit price</label>
                                <input type="number" step="0.01" min="0" name="purchase_rate" class="form-control" value="{{ old('purchase_rate', $i?->purchase_rate ?? 0) }}">
                            </div>
                            <div class="col-5">
                                <label class="form-label">Currency</label>
                                <select name="purchase_currency" class="form-select">
                                    @foreach($currencies as $cur)
                                        <option value="{{ $cur }}" @selected(old('purchase_currency', $i?->purchase_currency ?? 'INR') === $cur)>{{ $cur }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row g-2">
                            <div class="col-6">
                                <label class="form-label">CESS %</label>
                                <input type="number" step="0.01" min="0" name="purchase_cess_percent" class="form-control" value="{{ old('purchase_cess_percent', $i?->purchase_cess_percent ?? 0) }}">
                            </div>
                            <div class="col-6">
                                <label class="form-label">+ CESS</label>
                                <input type="number" step="0.01" min="0" name="purchase_cess_amount" class="form-control" value="{{ old('purchase_cess_amount', $i?->purchase_cess_amount ?? 0) }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="pt-3 mt-2 border-top">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="is_active" value="1" id="is_active" @checked(old('is_active', $i?->is_active ?? true))>
                <label class="form-check-label" for="is_active">Item is active and available for invoices</label>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const typeInput = document.getElementById('item-type');
    const productFields = document.getElementById('product-fields');
    const serviceFields = document.getElementById('service-fields');
    const hsnProduct = document.getElementById('hsn-sac-field');
    const hsnService = document.getElementById('hsn-sac-service');
    const desc = document.getElementById('item-description');
    const descLeft = document.getElementById('desc-chars-left');
    const descBar = document.getElementById('desc-bar-fill');
    const descMax = {{ $descMax }};

    function syncHsnSacNames() {
        const isProduct = typeInput.value === 'product';
        if (isProduct) {
            if (hsnProduct) { hsnProduct.name = 'hsn_sac'; hsnProduct.disabled = false; }
            if (hsnService) { hsnService.name = ''; hsnService.disabled = true; }
            document.querySelectorAll('.service-sku').forEach(el => { el.name = ''; el.disabled = true; });
            productFields?.querySelector('[name="sku"]')?.setAttribute('name', 'sku');
            productFields?.querySelector('[name="sku"]')?.removeAttribute('disabled');
        } else {
            if (hsnService) { hsnService.name = 'hsn_sac'; hsnService.disabled = false; }
            if (hsnProduct) { hsnProduct.name = ''; hsnProduct.disabled = true; }
            const skuProd = productFields?.querySelector('[name="sku"]');
            if (skuProd) { skuProd.name = ''; skuProd.disabled = true; }
            document.querySelectorAll('.service-sku').forEach(el => { el.name = 'sku'; el.disabled = false; });
        }
    }

    function setType(type) {
        typeInput.value = type;
        document.querySelectorAll('#item-type-tabs .nav-link').forEach(tab => {
            tab.classList.toggle('active', tab.dataset.type === type);
        });
        if (productFields) productFields.style.display = type === 'product' ? '' : 'none';
        if (serviceFields) serviceFields.style.display = type === 'service' ? '' : 'none';
        syncHsnSacNames();
    }

    document.querySelectorAll('#item-type-tabs .nav-link').forEach(tab => {
        tab.addEventListener('click', function (e) {
            e.preventDefault();
            setType(this.dataset.type);
        });
    });

    function updateDescCounter() {
        if (!desc || !descLeft) return;
        const left = descMax - desc.value.length;
        const pct = Math.min(100, Math.round((desc.value.length / descMax) * 100));
        descLeft.textContent = left;
        if (descBar) {
            descBar.style.width = pct + '%';
            descBar.classList.remove('is-warning', 'is-danger');
            if (pct > 85) descBar.classList.add('is-danger');
            else if (pct > 70) descBar.classList.add('is-warning');
        }
    }

    desc?.addEventListener('input', updateDescCounter);
    syncHsnSacNames();

    const openingQty = document.getElementById('item-opening-qty');
    const currentQty = document.getElementById('item-current-qty');

    function formatQty(n) {
        const num = Math.max(0, parseFloat(n) || 0);
        return num.toLocaleString('en-IN', { minimumFractionDigits: 3, maximumFractionDigits: 3 });
    }

    function syncCurrentFromOpening() {
        if (!openingQty || !currentQty || openingQty.readOnly) return;
        currentQty.value = formatQty(openingQty.value);
    }

    const syncOpeningEnabled = {{ ($syncOpeningQty ?? true) ? 'true' : 'false' }};
    if (syncOpeningEnabled) {
        openingQty?.addEventListener('input', syncCurrentFromOpening);
        openingQty?.addEventListener('change', syncCurrentFromOpening);
        syncCurrentFromOpening();
    }
});
</script>
@if(isset($unitsJson))
<script>
    window.__billingUnits = @json($unitsJson);
    window.__billingCsrf = '{{ csrf_token() }}';
    window.__billingUnitsStore = '{{ route('admin.units.store') }}';
</script>
<script src="{{ asset('js/unit-picker.js') }}"></script>
<script src="{{ asset('js/item-form.js') }}"></script>
@endif
@endpush