@extends('layouts.admin')

@section('title', 'Top up — '.$client->name)

@section('content')
<x-admin.nav :show-title="false" />

<div class="mx-auto max-w-[min(100%,92rem)] px-4 pt-8 pb-16 sm:px-6 sm:pt-10">
    <div class="mb-6">
        <a href="{{ route('admin.dashboard') }}" class="text-sm font-semibold text-oah-muted hover:text-oah-black">
            ← Back to clients
        </a>
    </div>

    <div class="rounded-2xl border border-neutral-200 bg-white shadow-oah overflow-hidden">
        <div class="border-b border-neutral-100 px-5 pt-8 pb-6 sm:px-8 sm:pt-10">
            <div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
                <div>
                    <h1 class="text-xl font-extrabold uppercase tracking-tight text-oah-black sm:text-2xl">
                    UPDATE CLIENT UTILISATION
                    </h1>
                    @php $daysSinceTopUp = $client->daysSinceLastTopUp(); @endphp
                    @if ($daysSinceTopUp !== null)
                        <p class="mt-2 text-sm font-semibold text-oah-muted">
                            @if ($daysSinceTopUp === 0)
                                Last updated today
                            @elseif ($daysSinceTopUp === 1)
                                1 day since last update
                            @else
                                {{ $daysSinceTopUp }} days since last update
                            @endif
                            <span class="font-normal text-oah-muted">({{ $client->last_top_up_at->format('d M Y') }})</span>
                        </p>
                    @else
                        <p class="mt-2 text-sm text-oah-muted">No top up has been saved for this client yet.</p>
                    @endif
                </div>
                <div class="flex w-full shrink-0 items-center justify-end gap-4 sm:w-auto sm:gap-5">
                    <img
                        src="{{ asset('images/company-logo.svg') }}?v=1"
                        alt="OAH Partnership Programme"
                        width="197"
                        height="96"
                        class="h-20 w-auto max-h-20 shrink-0 object-contain sm:h-24 sm:max-h-24"
                        decoding="async"
                    >
                    @if ($client->logo_path)
                        <img
                            src="{{ asset('storage/'.$client->logo_path) }}"
                            alt="{{ $client->name }}"
                            width="96"
                            height="96"
                            class="h-20 w-20 shrink-0 rounded-lg border border-neutral-200 sm:h-24 sm:w-24"
                            decoding="async"
                        >
                    @else
                        <div
                            class="flex h-20 w-20 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-oah-black text-xl font-bold text-white sm:h-24 sm:w-24 sm:text-2xl"
                            aria-hidden="true"
                        >
                            {{ strtoupper(substr($client->name, 0, 1)) }}
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="border-b border-neutral-100 px-5 py-6 sm:px-8" id="top-up-summary">
            <p class="mb-3 text-xs font-bold uppercase tracking-wider text-oah-muted">Current package</p>
            <div class="rounded-xl border border-neutral-200 bg-neutral-50/30 overflow-hidden">
                <div class="overflow-x-auto">
                    <x-admin.client-summary-row :client="$client" :show-actions="false" :live-quantities="true" />
                </div>
            </div>
        </div>

        <div class="px-5 py-8 sm:px-8">
            @if ($errors->any())
                <x-oah.alert type="error" class="mb-6">
                    <ul class="space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </x-oah.alert>
            @endif

            @php $products = $client->resolvedProducts(); @endphp

            @if (count($products) > 0)
                <form method="POST" action="{{ route('admin.clients.top-up.update', $client) }}">
                    @csrf
                    @method('PUT')

                    <div class="space-y-4">
                        <p class="text-xs font-bold uppercase tracking-wider text-oah-muted">Update utilisation</p>

                        <div class="overflow-hidden rounded-xl border border-neutral-200">
                            <div class="overflow-x-auto max-w-full min-w-0">
                                <div class="min-w-full" style="min-width: max(100%, 60rem);">
                                    <div
                                        class="grid border-b border-neutral-200 bg-neutral-50"
                                        style="grid-template-columns: minmax(18rem, 2fr) minmax(11rem, 1fr) minmax(11rem, 1fr) minmax(11rem, 1fr);"
                                    >
                                        <div class="border-r border-neutral-200 px-4 py-3 text-xs font-bold uppercase tracking-wider text-oah-muted">Product name</div>
                                        <div class="border-r border-neutral-200 px-4 py-3 text-center text-xs font-bold uppercase tracking-wider text-red-600">Assigned</div>
                                        <div class="border-r border-neutral-200 px-4 py-3 text-center text-xs font-bold uppercase tracking-wider text-oah-black">Used</div>
                                        <div class="px-4 py-3 text-center text-xs font-bold uppercase tracking-wider text-oah-black">Remaining</div>
                                    </div>
                                    @foreach ($products as $index => $product)
                                        @php
                                            $assigned = old('products.'.$index.'.quantity', $product['quantity'] ?? '');
                                            $used = old('products.'.$index.'.used', $product['used'] ?? '0');
                                            $remaining = '—';
                                            if (is_numeric($assigned) && is_numeric($used)) {
                                                $remaining = max(0, (int) $assigned - (int) $used);
                                            }
                                        @endphp
                                        <div
                                            @class([
                                                'top-up-product-row grid',
                                                'border-b border-neutral-200' => ! $loop->last,
                                            ])
                                            style="grid-template-columns: minmax(18rem, 2fr) minmax(11rem, 1fr) minmax(11rem, 1fr) minmax(11rem, 1fr);"
                                            data-row-index="{{ $index }}"
                                        >
                                            <div class="border-r border-neutral-200 p-4">
                                                <div class="oah-input flex min-h-[3.25rem] h-full items-center bg-neutral-50/80 px-4 py-3">
                                                    <p class="text-sm text-oah-black">
                                                        <span class="font-bold">{{ $product['name'] ?? '—' }}</span>
                                                        <span class="font-semibold"> used since last update</span>
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="border-r border-neutral-200 p-4">
                                                <x-admin.qty-stepper
                                                    :id="'product_assigned_'.$index"
                                                    :name="'products['.$index.'][quantity]'"
                                                    :value="$assigned"
                                                    input-class="top-up-assigned-input text-red-600"
                                                />
                                            </div>
                                            <div class="border-r border-neutral-200 p-4">
                                                <x-admin.qty-stepper
                                                    :id="'product_used_'.$index"
                                                    :name="'products['.$index.'][used]'"
                                                    :value="$used"
                                                    input-class="top-up-used-input text-oah-black"
                                                />
                                            </div>
                                            <div class="p-4">
                                                <div class="oah-input flex min-h-[3.25rem] h-full items-center justify-center bg-neutral-50/80 px-4 py-3">
                                                    <p class="top-up-remaining-display text-xl font-extrabold leading-none text-oah-black sm:text-2xl">
                                                        {{ $remaining }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-8 flex justify-end gap-3 border-t border-neutral-200 pt-6">
                        <a href="{{ route('admin.dashboard') }}" class="rounded border border-neutral-300 px-5 py-2.5 text-sm font-medium hover:bg-neutral-50">Cancel</a>
                        <button type="submit" class="btn-oah rounded px-6 py-2.5 text-sm font-bold">Save utilisation</button>
                    </div>
                </form>
            @else
                <div class="rounded-xl border-2 border-dashed border-neutral-200 bg-neutral-50/50 px-6 py-12 text-center">
                    <p class="font-semibold text-oah-black">No products on this client</p>
                    <p class="mt-2 text-sm text-oah-muted">Add products when editing the client first.</p>
                    <a href="{{ route('admin.clients.edit', $client) }}" class="btn-oah mt-5 inline-flex rounded-lg px-6 py-2.5 text-sm font-bold">
                        Edit client
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .oah-qty-stepper-input::-webkit-outer-spin-button,
    .oah-qty-stepper-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .oah-qty-stepper-input {
        -moz-appearance: textfield;
        appearance: textfield;
    }
</style>
@endpush

@push('scripts')
<script>
(function () {
    function displayQty(value) {
        const trimmed = String(value ?? '').trim();
        return trimmed === '' ? '—' : trimmed;
    }

    function syncSummaryAssigned(index, value) {
        const cell = document.querySelector('[data-summary-qty="' + index + '"]');
        if (cell) {
            cell.textContent = displayQty(value);
        }
    }

    function syncRemaining(row) {
        const assignedInput = row.querySelector('.top-up-assigned-input');
        const usedInput = row.querySelector('.top-up-used-input');
        const remainingDisplay = row.querySelector('.top-up-remaining-display');
        if (! remainingDisplay) {
            return;
        }

        const assigned = parseInt(assignedInput?.value, 10);
        const used = parseInt(usedInput?.value, 10);

        if (Number.isNaN(assigned) || Number.isNaN(used)) {
            remainingDisplay.textContent = '—';
            return;
        }

        remainingDisplay.textContent = String(Math.max(0, assigned - used));
    }

    function validateRow(row) {
        const assignedInput = row.querySelector('.top-up-assigned-input');
        const usedInput = row.querySelector('.top-up-used-input');
        if (! assignedInput || ! usedInput) {
            return;
        }

        const assigned = parseInt(assignedInput.value, 10);
        const used = parseInt(usedInput.value, 10);

        if (! Number.isNaN(assigned)) {
            usedInput.max = String(assigned);
        } else {
            usedInput.removeAttribute('max');
        }

        if (! Number.isNaN(assigned) && ! Number.isNaN(used) && used > assigned) {
            usedInput.setCustomValidity('Used cannot be greater than assigned (' + assigned + ').');
        } else {
            usedInput.setCustomValidity('');
        }

        syncRemaining(row);
    }

    document.querySelectorAll('.top-up-product-row').forEach(function (row) {
        const index = row.dataset.rowIndex;
        const assignedInput = row.querySelector('.top-up-assigned-input');
        const usedInput = row.querySelector('.top-up-used-input');

        if (assignedInput) {
            syncSummaryAssigned(index, assignedInput.value);
            assignedInput.addEventListener('input', function () {
                syncSummaryAssigned(index, assignedInput.value);
                validateRow(row);
            });
            assignedInput.addEventListener('change', function () {
                validateRow(row);
            });
        }

        if (usedInput) {
            usedInput.addEventListener('input', function () {
                validateRow(row);
            });
            usedInput.addEventListener('change', function () {
                validateRow(row);
            });
        }

        validateRow(row);
    });

    document.querySelectorAll('.oah-qty-stepper').forEach(function (stepper) {
        const input = stepper.querySelector('.oah-qty-stepper-input');
        if (! input) {
            return;
        }

        stepper.querySelectorAll('.oah-qty-stepper-btn').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const step = parseInt(btn.dataset.step, 10);
                const min = parseInt(input.min, 10) || 0;
                const maxAttr = input.getAttribute('max');
                const max = maxAttr !== null && maxAttr !== '' ? parseInt(maxAttr, 10) : null;
                let val = parseInt(input.value, 10);
                if (Number.isNaN(val)) {
                    val = 0;
                }
                val += step;
                if (val < min) {
                    val = min;
                }
                if (max !== null && ! Number.isNaN(max) && val > max) {
                    val = max;
                }
                input.value = String(val);
                input.dispatchEvent(new Event('input', { bubbles: true }));
                input.dispatchEvent(new Event('change', { bubbles: true }));
            });
        });
    });
})();
</script>
@endpush