@extends('layouts.stock')

@section('title', 'Edit 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">Edit 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.update', $stock) }}">
                @csrf
                @method('PUT')

                <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', $stock->medicine?->name) }}">
                            <input id="medicineIdMobile" type="hidden" name="medicine_id" value="{{ old('medicine_id', $stock->medicine_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', $stock->expiry_date?->format('m/Y')) }}" 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', $stock->listing_type) === 'sell')>Sell</option>
                                <option value="swap" @selected(old('listing_type', $stock->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', $stock->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="{{ $stock->unit_price }}">
                            </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', $stock->visibility) === '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', $stock->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">
                    <button class="flex items-center gap-2 text-red-600 dark:text-red-400 font-bold text-sm hover:bg-red-50 dark:hover:bg-red-900/20 px-4 py-2 rounded-lg transition-colors" type="submit" form="deleteStockMobile" onclick="return confirm('Remove this stock?')">
                        <span class="material-symbols-outlined text-lg">delete</span>
                        Remove Item
                    </button>
                    <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 Changes</button>
                    </div>
                </div>
            </form>
            <form id="deleteStockMobile" method="POST" action="{{ route('pharmacy.stock.destroy', $stock) }}">
                @csrf
                @method('DELETE')
            </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">history</span>
                </div>
                <div>
                    <p class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Last Updated</p>
                    <p class="text-sm font-semibold dark:text-white">{{ $stock->updated_at?->format('Y-m-d H:i') }}</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">inventory_2</span>
                </div>
                <div>
                    <p class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Total Stock Value</p>
                    <p class="text-sm font-semibold dark:text-white" id="totalValueMobile">-</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">analytics</span>
                </div>
                <div>
                    <p class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Status</p>
                    <p class="text-sm font-semibold dark:text-white">{{ $stock->status }} / {{ $stock->visibility }}</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">Edit Stock Item</p>
                    <p class="text-slate-500 dark:text-slate-400 text-sm font-normal leading-normal">Update medicine details and inventory status for the central database</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.update', $stock) }}">
                    @csrf
                    @method('PUT')

                    <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', $stock->medicine?->name) }}">
                                <input id="medicineId" type="hidden" name="medicine_id" value="{{ old('medicine_id', $stock->medicine_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', $stock->expiry_date?->format('m/Y')) }}" 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', $stock->listing_type) === 'sell')>Sell</option>
                                    <option value="swap" @selected(old('listing_type', $stock->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', $stock->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="{{ $stock->unit_price }}">
                                </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', $stock->visibility) === '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', $stock->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-between gap-4">
                        <button class="flex items-center gap-2 text-red-600 dark:text-red-400 font-bold text-sm hover:bg-red-50 dark:hover:bg-red-900/20 px-4 py-2 rounded-lg transition-colors" type="submit" form="deleteStockDesktop" onclick="return confirm('Remove this stock?')">
                            <span class="material-symbols-outlined text-lg">delete</span>
                            Remove Item
                        </button>
                        <div class="flex items-center 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 Changes</button>
                        </div>
                    </div>
                </form>
                <form id="deleteStockDesktop" method="POST" action="{{ route('pharmacy.stock.destroy', $stock) }}">
                    @csrf
                    @method('DELETE')
                </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">history</span>
                    </div>
                    <div>
                        <p class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Last Updated</p>
                        <p class="text-sm font-semibold dark:text-white">{{ $stock->updated_at?->format('Y-m-d H:i') }}</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">inventory_2</span>
                    </div>
                    <div>
                        <p class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Total Stock Value</p>
                        <p class="text-sm font-semibold dark:text-white" id="totalValueDesktop">-</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">analytics</span>
                    </div>
                    <div>
                        <p class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Status</p>
                        <p class="text-sm font-semibold dark:text-white">{{ $stock->status }} / {{ $stock->visibility }}</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, totalLabelId) {
                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 totalLabel = totalLabelId ? document.getElementById(totalLabelId) : null;

                let lastRequest = 0;

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

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

                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();
                            updateTotal();
                        });
                        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 = '';
                        updateTotal();
                        if (value.length < 2) {
                            clearResults();
                            return;
                        }
                        fetchMedicines(value);
                    });
                    search.addEventListener('blur', function () {
                        setTimeout(clearResults, 150);
                    });
                }

                if (qty) qty.addEventListener('input', updateTotal);
                if (expiry) {
                    expiry.addEventListener('input', function () {
                        expiry.value = formatMonthYearInput(expiry.value);
                    });
                }

                updateTotal();
            }

            wireAutocomplete('medicineSearch', 'medicineId', 'medicineResults', 'pphInput', 'quantityInput', 'expiryMonth', 'totalValueDesktop');
            wireAutocomplete('medicineSearchMobile', 'medicineIdMobile', 'medicineResultsMobile', 'pphInputMobile', 'quantityInputMobile', 'expiryMonthMobile', 'totalValueMobile');
        })();
    </script>
@endsection