@extends('layouts.stock')

@section('title', 'Add Stock')

@section('mobile_header')
    <div class="flex items-center justify-between p-4">
        <div class="flex items-center gap-3">
            <a class="flex items-center justify-center p-2 rounded-lg hover:bg-primary/10 text-slate-700 dark:text-slate-200" href="{{ route('pharmacy.stock.index') }}">
                <span class="material-symbols-outlined">arrow_back</span>
            </a>
            <h1 class="text-xl font-bold tracking-tight text-slate-900 dark:text-slate-100">Add Stock</h1>
        </div>
        @include('pharmacy.partials.notifications_icon')
    </div>
@endsection

@section('mobile_content')
    <div class="p-4">
        <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
            <form method="POST" action="{{ route('pharmacy.stock.store') }}">
                @csrf

                <div class="p-4 flex flex-col gap-4">
                    <div class="flex flex-col gap-2">
                        <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Medicine Name</label>
                        <div class="relative">
                            <input id="medicineSearchMobile" class="form-input w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:border-primary h-12 px-4 text-base font-normal transition-all" type="text" autocomplete="off" value="{{ old('medicine_name', $selectedMedicine?->name) }}">
                            <input id="medicineIdMobile" type="hidden" name="medicine_id" value="{{ old('medicine_id', $selectedMedicine?->id) }}" required>
                            <div id="medicineResultsMobile" class="absolute left-0 right-0 mt-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl shadow-lg overflow-hidden z-20"></div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4">
                        <div class="flex flex-col gap-2">
                            <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Expiry Date</label>
                            <div class="relative flex items-center">
                                <input id="expiryMonthMobile" name="expiry_month" class="form-input w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:border-primary h-12 pl-4 pr-12 text-base font-normal transition-all" placeholder="MM/YYYY" inputmode="numeric" value="{{ old('expiry_month') }}" required>
                                <span class="material-symbols-outlined absolute right-4 text-slate-400">calendar_today</span>
                            </div>
                        </div>

                        <div class="flex flex-col gap-2">
                            <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Type (Sell/Swap)</label>
                            <select class="form-select w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:border-primary h-12 px-4 text-base font-normal transition-all" name="listing_type" required>
                                <option value="sell" @selected(old('listing_type', 'sell') === 'sell')>Sell</option>
                                <option value="swap" @selected(old('listing_type') === 'swap')>Swap</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4">
                        <div class="flex flex-col gap-2">
                            <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Quantity</label>
                            <input id="quantityInputMobile" class="form-input w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:border-primary h-12 px-4 text-base font-normal transition-all" type="number" min="1" name="quantity" value="{{ old('quantity') }}" required>
                        </div>

                        <div class="flex flex-col gap-2">
                            <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Price Per Unit (PPH)</label>
                            <div class="relative flex items-center">
                                <span class="absolute left-4 text-slate-400 font-medium">DH</span>
                                <input id="pphInputMobile" class="form-input w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:border-primary h-12 pl-12 pr-4 text-base font-normal transition-all" type="text" readonly value="{{ $selectedMedicine?->pph }}">
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-col gap-4 py-2">
                        <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Visibility Status</label>
                        <div class="flex flex-col sm:flex-row gap-4">
                            <label class="flex flex-1 cursor-pointer">
                                <input class="peer sr-only" name="visibility" type="radio" value="visible" @checked(old('visibility', 'visible') === 'visible')>
                                <div class="flex w-full items-center p-4 rounded-xl border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors peer-checked:border-primary peer-checked:bg-primary/5">
                                    <div class="flex items-center gap-3 text-slate-500 peer-checked:text-primary">
                                        <span class="material-symbols-outlined">visibility</span>
                                        <span class="font-medium text-slate-900 dark:text-white">Showing</span>
                                    </div>
                                </div>
                            </label>
                            <label class="flex flex-1 cursor-pointer">
                                <input class="peer sr-only" name="visibility" type="radio" value="hidden" @checked(old('visibility') === 'hidden')>
                                <div class="flex w-full items-center p-4 rounded-xl border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors peer-checked:border-primary peer-checked:bg-primary/5">
                                    <div class="flex items-center gap-3 text-slate-500 peer-checked:text-primary">
                                        <span class="material-symbols-outlined">visibility_off</span>
                                        <span class="font-medium">Hidden</span>
                                    </div>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="px-4 py-4 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-800 flex flex-col gap-3">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <a class="w-full text-center px-6 py-2.5 rounded-xl text-slate-600 dark:text-slate-300 font-bold text-sm hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" href="{{ route('pharmacy.stock.index') }}">Cancel</a>
                        <button class="w-full px-10 py-2.5 rounded-xl bg-primary text-white font-bold text-sm shadow-lg shadow-primary/20 hover:brightness-110 active:scale-95 transition-all" type="submit">Save</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div class="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex items-center gap-4">
                <div class="size-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400">
                    <span class="material-symbols-outlined">medication</span>
                </div>
                <div class="min-w-0">
                    <p class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Selected Medicine</p>
                    <p class="text-sm font-semibold dark:text-white truncate" id="createMedicineMobile">{{ $selectedMedicine?->name ?: '-' }}</p>
                </div>
            </div>
            <div class="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex items-center gap-4">
                <div class="size-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center text-green-600 dark:text-green-400">
                    <span class="material-symbols-outlined">payments</span>
                </div>
                <div class="min-w-0">
                    <p class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Estimated Total</p>
                    <p class="text-sm font-semibold dark:text-white" id="createTotalMobile">-</p>
                </div>
            </div>
            <div class="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex items-center gap-4">
                <div class="size-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                    <span class="material-symbols-outlined">visibility</span>
                </div>
                <div class="min-w-0">
                    <p class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Status</p>
                    <p class="text-sm font-semibold dark:text-white truncate" id="createStatusMobile">-</p>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('desktop_content')
    <main class="flex-1 flex flex-col items-center py-10 px-4">
        <div class="w-full max-w-[800px] flex flex-col gap-8">
            <div class="flex flex-wrap justify-between items-end gap-3">
                <div class="flex flex-col gap-1">
                    <p class="text-slate-900 dark:text-white tracking-light text-[32px] font-bold leading-tight">Add Stock Item</p>
                    <p class="text-slate-500 dark:text-slate-400 text-sm font-normal leading-normal">Add a new medicine to your inventory</p>
                </div>
                <a class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-10 px-4 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 text-sm font-bold leading-normal hover:bg-slate-200 dark:hover:bg-slate-700 transition-all" href="{{ route('pharmacy.stock.index') }}">
                    <span class="material-symbols-outlined mr-2 text-sm">arrow_back</span>
                    <span class="truncate">Back to Inventory</span>
                </a>
            </div>

            <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
                <form method="POST" action="{{ route('pharmacy.stock.store') }}">
                    @csrf

                    <div class="p-8 flex flex-col gap-6">
                        <div class="flex flex-col gap-2">
                            <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Medicine Name</label>
                            <div class="relative">
                                <input id="medicineSearch" class="form-input w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:border-primary h-12 px-4 text-base font-normal transition-all" type="text" placeholder="Search medicine name..." autocomplete="off" value="{{ old('medicine_name', $selectedMedicine?->name) }}">
                                <input id="medicineId" type="hidden" name="medicine_id" value="{{ old('medicine_id', $selectedMedicine?->id) }}" required>
                                <div id="medicineResults" class="absolute left-0 right-0 mt-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl shadow-lg overflow-hidden z-20"></div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="flex flex-col gap-2">
                                <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Expiry Date</label>
                                <div class="relative flex items-center">
                                    <input id="expiryMonth" class="form-input w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:border-primary h-12 pl-4 pr-12 text-base font-normal transition-all" name="expiry_month" placeholder="MM/YYYY" inputmode="numeric" value="{{ old('expiry_month') }}" required>
                                    <span class="material-symbols-outlined absolute right-4 text-slate-400">calendar_today</span>
                                </div>
                            </div>
                            <div class="flex flex-col gap-2">
                                <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Type (Sell/Swap)</label>
                                <select class="form-select w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:border-primary h-12 px-4 text-base font-normal transition-all" name="listing_type" required>
                                    <option value="sell" @selected(old('listing_type', 'sell') === 'sell')>Sell</option>
                                    <option value="swap" @selected(old('listing_type') === 'swap')>Swap</option>
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="flex flex-col gap-2">
                                <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Quantity</label>
                                <input id="quantityInput" class="form-input w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:border-primary h-12 px-4 text-base font-normal transition-all" type="number" min="1" name="quantity" value="{{ old('quantity') }}" required>
                            </div>
                            <div class="flex flex-col gap-2">
                                <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Price Per Unit (PPH)</label>
                                <div class="relative flex items-center">
                                    <span class="absolute left-4 text-slate-400 font-medium">DH</span>
                                    <input id="pphInput" class="form-input w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:border-primary h-12 pl-12 pr-4 text-base font-normal transition-all" type="text" readonly value="{{ $selectedMedicine?->pph }}">
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-col gap-4 py-2">
                            <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Visibility Status</label>
                            <div class="flex gap-4">
                                <label class="flex flex-1 cursor-pointer">
                                    <input class="peer sr-only" name="visibility" type="radio" value="visible" @checked(old('visibility', 'visible') === 'visible')>
                                    <div class="flex w-full items-center justify-between p-4 rounded-xl border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors peer-checked:border-primary peer-checked:bg-primary/5">
                                        <div class="flex items-center gap-3 text-slate-500 peer-checked:text-primary">
                                            <span class="material-symbols-outlined">visibility</span>
                                            <span class="font-medium text-slate-900 dark:text-white">Showing</span>
                                        </div>
                                    </div>
                                </label>
                                <label class="flex flex-1 cursor-pointer">
                                    <input class="peer sr-only" name="visibility" type="radio" value="hidden" @checked(old('visibility') === 'hidden')>
                                    <div class="flex w-full items-center justify-between p-4 rounded-xl border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors peer-checked:border-primary peer-checked:bg-primary/5">
                                        <div class="flex items-center gap-3 text-slate-500 peer-checked:text-primary">
                                            <span class="material-symbols-outlined">visibility_off</span>
                                            <span class="font-medium">Hidden</span>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="px-8 py-6 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-800 flex flex-wrap items-center justify-end gap-3">
                        <a class="px-6 py-2.5 rounded-xl text-slate-600 dark:text-slate-300 font-bold text-sm hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" href="{{ route('pharmacy.stock.index') }}">Cancel</a>
                        <button class="px-10 py-2.5 rounded-xl bg-primary text-white font-bold text-sm shadow-lg shadow-primary/20 hover:brightness-110 active:scale-95 transition-all" type="submit">Save</button>
                    </div>
                </form>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex items-center gap-4">
                    <div class="size-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400">
                        <span class="material-symbols-outlined">medication</span>
                    </div>
                    <div class="min-w-0">
                        <p class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Selected Medicine</p>
                        <p class="text-sm font-semibold dark:text-white truncate" id="createMedicineDesktop">{{ $selectedMedicine?->name ?: '-' }}</p>
                    </div>
                </div>
                <div class="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex items-center gap-4">
                    <div class="size-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center text-green-600 dark:text-green-400">
                        <span class="material-symbols-outlined">payments</span>
                    </div>
                    <div class="min-w-0">
                        <p class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Estimated Total</p>
                        <p class="text-sm font-semibold dark:text-white" id="createTotalDesktop">-</p>
                    </div>
                </div>
                <div class="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex items-center gap-4">
                    <div class="size-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <span class="material-symbols-outlined">visibility</span>
                    </div>
                    <div class="min-w-0">
                        <p class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Status</p>
                        <p class="text-sm font-semibold dark:text-white truncate" id="createStatusDesktop">-</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        (function () {
            const endpoint = @json(route('pharmacy.medicines.search'));

            function formatMonthYearInput(value) {
                const digits = String(value || '').replace(/[^\d]/g, '').slice(0, 6);
                if (digits.length <= 2) return digits;
                return `${digits.slice(0, 2)}/${digits.slice(2)}`;
            }

            function wireAutocomplete(searchId, hiddenId, resultsId, pphId, qtyId, expiryId, medicineLabelId, totalLabelId, statusLabelId) {
                const search = document.getElementById(searchId);
                const hidden = document.getElementById(hiddenId);
                const results = document.getElementById(resultsId);
                const pph = document.getElementById(pphId);
                const qty = document.getElementById(qtyId);
                const expiry = document.getElementById(expiryId);
                const medicineLabel = medicineLabelId ? document.getElementById(medicineLabelId) : null;
                const totalLabel = totalLabelId ? document.getElementById(totalLabelId) : null;
                const statusLabel = statusLabelId ? document.getElementById(statusLabelId) : null;
                const form = search ? search.closest('form') : null;

                let lastRequest = 0;

                function clearResults() {
                    if (results) results.innerHTML = '';
                }

                function updateSummary() {
                    const medicineName = String(search?.value || '').trim();
                    if (medicineLabel) {
                        medicineLabel.textContent = medicineName !== '' ? medicineName : '-';
                    }

                    if (totalLabel) {
                        const q = Number(qty?.value || 0);
                        const p = Number(pph?.value || 0);
                        if (Number.isFinite(q) && Number.isFinite(p) && q > 0 && p > 0) {
                            totalLabel.textContent = `${(q * p).toFixed(2)} DH`;
                        } else {
                            totalLabel.textContent = '-';
                        }
                    }

                    if (statusLabel) {
                        const typeEl = form ? form.querySelector('select[name="listing_type"]') : null;
                        const visEl = form ? form.querySelector('input[name="visibility"]:checked') : null;
                        const typeVal = typeEl ? (typeEl.value || '') : '';
                        const visVal = visEl ? (visEl.value || '') : '';
                        const typeText = typeVal === 'sell' ? 'Sell' : (typeVal === 'swap' ? 'Swap' : typeVal);
                        const visText = visVal === 'visible' ? 'Showing' : (visVal === 'hidden' ? 'Hidden' : visVal);
                        const parts = [];
                        if (typeText) parts.push(typeText);
                        if (visText) parts.push(visText);
                        statusLabel.textContent = parts.length > 0 ? parts.join(' • ') : '-';
                    }
                }

                function renderResults(items) {
                    clearResults();
                    if (!results || !Array.isArray(items) || items.length === 0) return;

                    for (const item of items) {
                        const btn = document.createElement('button');
                        btn.type = 'button';
                        btn.className = 'w-full text-left px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-800 text-sm';
                        btn.textContent = item.name;
                        btn.addEventListener('click', function () {
                            search.value = item.name;
                            hidden.value = item.id;
                            if (pph) pph.value = item.pph ?? '';
                            clearResults();
                            updateSummary();
                        });
                        results.appendChild(btn);
                    }
                }

                async function fetchMedicines(query) {
                    const requestId = ++lastRequest;
                    const url = `${endpoint}?q=${encodeURIComponent(query)}`;
                    const res = await fetch(url, { headers: { Accept: 'application/json' } });
                    if (!res.ok) return;
                    const data = await res.json();
                    if (requestId !== lastRequest) return;
                    renderResults(data);
                }

                if (search) {
                    search.addEventListener('input', function () {
                        const value = String(search.value || '').trim();
                        hidden.value = '';
                        if (pph) pph.value = '';
                        updateSummary();
                        if (value.length < 2) {
                            clearResults();
                            return;
                        }
                        fetchMedicines(value);
                    });
                    search.addEventListener('blur', function () {
                        setTimeout(clearResults, 150);
                    });
                }
                if (qty) {
                    qty.addEventListener('input', updateSummary);
                }
                if (expiry) {
                    expiry.addEventListener('input', function () {
                        expiry.value = formatMonthYearInput(expiry.value);
                    });
                }

                const typeEl = form ? form.querySelector('select[name="listing_type"]') : null;
                if (typeEl) typeEl.addEventListener('change', updateSummary);
                const radios = form ? form.querySelectorAll('input[name="visibility"]') : null;
                if (radios && radios.length) {
                    radios.forEach((r) => r.addEventListener('change', updateSummary));
                }

                updateSummary();
            }

            wireAutocomplete('medicineSearch', 'medicineId', 'medicineResults', 'pphInput', 'quantityInput', 'expiryMonth', 'createMedicineDesktop', 'createTotalDesktop', 'createStatusDesktop');
            wireAutocomplete('medicineSearchMobile', 'medicineIdMobile', 'medicineResultsMobile', 'pphInputMobile', 'quantityInputMobile', 'expiryMonthMobile', 'createMedicineMobile', 'createTotalMobile', 'createStatusMobile');
        })();
    </script>
@endsection