@php
    $isEdit = isset($client);
    $products = $isEdit ? $client->resolvedProducts() : [];
    $catalogProducts = $catalogProducts ?? collect();
    $logoRequired = ! $isEdit || empty($client->logo_path);
@endphp

<form method="POST" action="{{ $formAction }}" enctype="multipart/form-data" class="mt-2 space-y-6" id="client-form">
    @csrf
    @if ($isEdit)
        @method('PUT')
    @endif

    <x-oah.section title="Client details" description="Basic information and branding for the partnership.">
        <x-slot:icon>
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
        </x-slot:icon>
        <div class="grid gap-6 sm:grid-cols-2">
            <x-oah.field label="Client name" for="client_name" required class="sm:col-span-2">
                <input type="text" id="client_name" name="client_name"
                    value="{{ old('client_name', $isEdit ? $client->name : '') }}" required class="oah-input" placeholder="e.g. Acme Corporation Ltd">
            </x-oah.field>

            <x-oah.field label="Client logo" for="client_logo" :required="$logoRequired" class="sm:col-span-2">
                @if ($isEdit && $client->logo_path)
                    <img src="{{ asset('storage/'.$client->logo_path) }}" alt="" class="mb-3 h-14 w-14 rounded-lg border border-neutral-200">
                @endif
                <label class="group flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed border-neutral-200 bg-neutral-50 px-6 py-8 transition hover:border-oah-yellow">
                    <p class="text-sm font-semibold text-oah-black">Click to upload logo</p>
                    <p class="mt-1 text-xs text-oah-muted" id="logo-label">{{ $logoRequired ? 'Required — PNG or JPG up to 2MB' : 'PNG, JPG up to 2MB (optional)' }}</p>
                    <input type="file" id="client_logo" name="client_logo" accept="image/*" class="sr-only"
                        @if ($logoRequired) required @endif
                        onchange="document.getElementById('logo-label').textContent = this.files[0]?.name || '{{ $logoRequired ? 'Required — PNG or JPG up to 2MB' : 'PNG, JPG up to 2MB' }}'">
                </label>
            </x-oah.field>

            <x-oah.field label="Package renewal date" for="renewal_date" required class="sm:col-span-2">
                <input type="date" id="renewal_date" name="renewal_date" required
                    value="{{ old('renewal_date', $isEdit && $client->renewal_date ? $client->renewal_date->format('Y-m-d') : '') }}" class="oah-input">
            </x-oah.field>
        </div>
    </x-oah.section>

    <x-oah.section title="Products & quantities">
        <x-slot:icon>
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
        </x-slot:icon>

        @if ($catalogProducts->isEmpty())
            <p class="mb-4 text-sm font-semibold text-oah-muted">Add products first.</p>
        @endif

        <div id="products-list" class="space-y-5">
            @foreach (range(1, $productCount) as $n)
                @php
                    $saved = $products[$n - 1] ?? [];
                    $pName = old('products.'.$n.'.name', $saved['name'] ?? '');
                    $pQty = old('products.'.$n.'.quantity', $saved['quantity'] ?? '');
                    $pUsed = $saved['used'] ?? '0';
                @endphp
                @include('admin.clients._product-row', [
                    'index' => $n,
                    'name' => $pName,
                    'quantity' => $pQty,
                    'used' => $pUsed,
                    'productId' => $saved['product_id'] ?? null,
                    'preserveUsed' => $isEdit,
                    'catalogProducts' => $catalogProducts,
                    'required' => true,
                ])
            @endforeach
        </div>
        <template id="product-row-template">
            @include('admin.clients._product-row', [
                'index' => '__INDEX__',
                'name' => '',
                'quantity' => '',
                'catalogProducts' => $catalogProducts,
                'required' => true,
            ])
        </template>
        <button type="button" id="add-product-btn" class="mt-5 w-full rounded-lg border border-dashed border-neutral-300 py-3 text-sm font-semibold hover:bg-neutral-50">+ Add product</button>
    </x-oah.section>

    <x-oah.section title="Client administrators">
        <x-slot:icon>
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        </x-slot:icon>
        <div class="grid gap-6">
            <x-oah.field label="Primary administrator Email" for="admin_email" required>
                <input type="email" id="admin_email" name="admin_email" value="{{ old('admin_email', $isEdit ? $client->admin_email : '') }}" required class="oah-input">
            </x-oah.field>
            <div class="grid gap-6 sm:grid-cols-2">
                <x-oah.field label="Secondary administrator Email (optional)" for="admin_email_secondary">
                    <input type="email" id="admin_email_secondary" name="admin_email_secondary" value="{{ old('admin_email_secondary', $isEdit ? $client->admin_email_secondary : '') }}" class="oah-input">
                </x-oah.field>
                <x-oah.field label="Third administrator Email (optional)" for="admin_email_third">
                    <input type="email" id="admin_email_third" name="admin_email_third" value="{{ old('admin_email_third', $isEdit ? $client->admin_email_third : '') }}" class="oah-input">
                </x-oah.field>
            </div>
        </div>
    </x-oah.section>

    <div class="flex justify-end gap-3 pt-4 border-t border-neutral-200">
        <a href="{{ route('admin.dashboard') }}" class="px-5 py-2.5 text-sm font-medium border border-neutral-300 rounded hover:bg-neutral-50">Cancel</a>
        <button type="submit" class="btn-oah px-6 py-2.5 text-sm font-bold rounded">{{ $submitLabel }}</button>
    </div>
</form>

@push('scripts')
<script>
(function () {
    const list = document.getElementById('products-list');
    const addBtn = document.getElementById('add-product-btn');
    const template = document.getElementById('product-row-template');
    let nextIndex = {{ $productCount }};

    function updateRemoveButtons() {
        const rows = list.querySelectorAll('.product-row');
        rows.forEach(function (row, i) {
            const wrap = row.querySelector('.remove-product-wrap');
            if (wrap) {
                wrap.classList.toggle('hidden', rows.length === 1);
            }
        });
    }

    function renumberRows() {
        const rows = list.querySelectorAll('.product-row');
        rows.forEach(function (row, i) {
            const n = i + 1;
            row.dataset.productIndex = String(n);
            row.querySelectorAll('.product-label-number').forEach(function (el) {
                el.textContent = String(n);
            });
            const nameField = row.querySelector('.product-name');
            const qtyInput = row.querySelector('.product-quantity');
            const usedInput = row.querySelector('.product-used-value');
            if (nameField) {
                nameField.id = 'product_' + n + '_name';
                nameField.name = 'products[' + n + '][name]';
            }
            if (qtyInput) {
                qtyInput.id = 'product_' + n + '_quantity';
                qtyInput.name = 'products[' + n + '][quantity]';
            }
            if (usedInput) {
                usedInput.id = 'product_' + n + '_used';
                usedInput.name = 'products[' + n + '][used]';
            }
            row.querySelectorAll('label[for]').forEach(function (label) {
                const field = label.getAttribute('for') || '';
                if (field.includes('_name')) {
                    label.setAttribute('for', 'product_' + n + '_name');
                } else if (field.includes('_quantity')) {
                    label.setAttribute('for', 'product_' + n + '_quantity');
                }
            });
        });
        nextIndex = rows.length;
        updateRemoveButtons();
    }

    addBtn.addEventListener('click', function () {
        nextIndex++;
        const html = template.innerHTML.replaceAll('__INDEX__', String(nextIndex));
        list.insertAdjacentHTML('beforeend', html);
        renumberRows();
        list.querySelector('[data-product-index="' + nextIndex + '"] .product-name')?.focus();
    });

    list.addEventListener('click', function (e) {
        const btn = e.target.closest('.remove-product');
        if (!btn) return;
        const row = btn.closest('.product-row');
        if (!row || list.querySelectorAll('.product-row').length <= 1) return;
        row.remove();
        renumberRows();
    });

    updateRemoveButtons();

    const form = document.getElementById('client-form');
    if (form) {
        form.addEventListener('submit', function (event) {
            const seen = new Set();
            let duplicateName = null;

            list.querySelectorAll('.product-name').forEach(function (field) {
                const name = (field.value || '').trim();
                if (name === '') {
                    return;
                }

                const key = name.toLowerCase();
                if (seen.has(key)) {
                    duplicateName = name;
                    return;
                }

                seen.add(key);
            });

            if (duplicateName) {
                event.preventDefault();
                const message = 'Each product can only be added once. "' + duplicateName + '" is listed more than once.';
                if (window.OahToast) {
                    OahToast.show(message, 'error');
                } else {
                    alert(message);
                }
                return;
            }

        });
    }
})();
</script>
@endpush