@extends('layouts.marketplace')

@section('title', 'Marketplace')

@section('mobile_header')
    <div class="flex items-center justify-between p-4">
        <div class="flex items-center gap-3">
            <button class="flex items-center justify-center p-2 rounded-lg hover:bg-primary/10 text-slate-700 dark:text-slate-200" type="button">
                <span class="material-symbols-outlined">menu</span>
            </button>
            <h1 class="text-xl font-bold tracking-tight text-slate-900 dark:text-slate-100">Marketplace</h1>
        </div>
        <div class="flex items-center gap-2">
            <button class="flex items-center justify-center p-2 rounded-lg hover:bg-primary/10 text-slate-700 dark:text-slate-200" type="button" onclick="document.getElementById('marketplaceSearchMobileInput')?.focus()">
                <span class="material-symbols-outlined">search</span>
            </button>
            @include('pharmacy.partials.notifications_icon')
        </div>
    </div>
    <div id="marketplaceMobileTabs" class="flex border-b border-primary/10 px-4 gap-6 overflow-x-auto no-scrollbar">
        <a class="flex flex-col items-center justify-center pb-3 pt-2 whitespace-nowrap @if(($scope ?? 'all') === 'all') border-b-2 border-primary text-primary @else border-b-2 border-transparent text-slate-500 dark:text-slate-400 @endif" href="{{ route('pharmacy.marketplace', ['scope' => 'all', 'q' => request('q'), 'filter' => $filter ?? request('filter', 'nearby'), 'sort' => $sort ?? request('sort', '')]) }}">
            <span class="text-sm font-bold">All</span>
        </a>
        <a class="flex flex-col items-center justify-center pb-3 pt-2 whitespace-nowrap @if(($scope ?? 'all') === 'others') border-b-2 border-primary text-primary @else border-b-2 border-transparent text-slate-500 dark:text-slate-400 @endif" href="{{ route('pharmacy.marketplace', ['scope' => 'others', 'q' => request('q'), 'filter' => $filter ?? request('filter', 'nearby'), 'sort' => $sort ?? request('sort', '')]) }}">
            <span class="text-sm font-bold">Others</span>
        </a>
        <a class="flex flex-col items-center justify-center pb-3 pt-2 whitespace-nowrap @if(($scope ?? 'all') === 'mine') border-b-2 border-primary text-primary @else border-b-2 border-transparent text-slate-500 dark:text-slate-400 @endif" href="{{ route('pharmacy.marketplace', ['scope' => 'mine', 'q' => request('q'), 'filter' => $filter ?? request('filter', 'nearby'), 'sort' => $sort ?? request('sort', '')]) }}">
            <span class="text-sm font-bold">My Listings</span>
        </a>
    </div>
@endsection

@section('mobile_content')
    @php
        $resultsTotal = method_exists($stocks, 'total') ? $stocks->total() : $stocks->count();
        $nextSort = ($sort ?? '') === 'price_asc' ? 'price_desc' : 'price_asc';
    @endphp
    <main id="marketplaceMobileMain" class="flex-1 p-4 space-y-4 pb-24">
        <form class="flex gap-2" method="GET" action="{{ route('pharmacy.marketplace') }}">
            <input type="hidden" name="scope" value="{{ $scope ?? request('scope', 'all') }}">
            <input type="hidden" name="filter" value="{{ $filter ?? request('filter', 'nearby') }}">
            <input type="hidden" name="sort" value="{{ $sort ?? request('sort', '') }}">
            <div class="flex-1 relative">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg">search</span>
                <input id="marketplaceSearchMobileInput" class="w-full pl-10 pr-4 py-2.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl focus:ring-2 focus:ring-primary focus:border-primary outline-none text-sm transition-all" name="q" value="{{ request('q') }}" placeholder="Search medicine or pharmacy..." type="text">
            </div>
            <button class="bg-primary text-white p-2.5 rounded-xl shadow-lg shadow-primary/20 flex items-center justify-center" type="submit">
                <span class="material-symbols-outlined">search</span>
            </button>
        </form>

        <div class="flex items-center justify-between">
            <p class="text-sm font-medium text-slate-500">Showing {{ number_format($resultsTotal) }} results</p>
            <a class="text-primary text-sm font-bold flex items-center gap-1" href="{{ route('pharmacy.marketplace', ['sort' => $nextSort, 'scope' => $scope ?? request('scope', 'all'), 'filter' => $filter ?? request('filter', 'nearby'), 'q' => request('q')]) }}">
                <span class="material-symbols-outlined text-[18px]">filter_list</span>
                Sort by Price
            </a>
        </div>

        @if($stocks->count() === 0)
            <div class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm p-4 text-slate-500 dark:text-slate-400">
                No listings to show.
            </div>
        @else
            <div class="flex flex-col gap-4">
                @foreach($stocks as $stock)
                    @php
                        $isMine = ($myPharmacyId ?? auth()->user()->pharmacy_id) === $stock->pharmacy_id;
                        $isExpiring = $stock->expiry_date ? $stock->expiry_date->lte(now()->addMonths(3)) : false;
                        $totalText = $stock->listing_type === 'sell' && ! is_null($stock->unit_price)
                            ? 'T: '.number_format((float) $stock->unit_price * (float) $stock->quantity, 2).' DH'
                            : 'Swap';
                    @endphp
                    <div class="group flex flex-col overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm transition-all hover:shadow-md">
                        <div class="p-4 bg-slate-50 dark:bg-slate-800/40 border-b border-slate-100 dark:border-slate-800 flex items-start justify-between gap-3">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="h-10 w-10 rounded-full overflow-hidden bg-white flex items-center justify-center border border-slate-200 dark:border-slate-800">
                                    <img class="h-full w-full object-contain p-1" src="{{ asset('images/pharma-logo.png') }}" alt="Pharmacy logo">
                                </div>
                                <div class="min-w-0">
                                    <div class="text-sm font-bold text-slate-900 dark:text-white truncate">
                                        @if($isMine)
                                            <a class="hover:text-primary" href="{{ route('pharmacy.profil') }}">{{ $stock->pharmacy?->name }} (You)</a>
                                        @else
                                            <a class="hover:text-primary" href="{{ route('pharmacy.pharmacies.show', $stock->pharmacy) }}">{{ $stock->pharmacy?->name }}</a>
                                        @endif
                                    </div>
                                    <div class="mt-1 text-xs font-semibold text-slate-500 dark:text-slate-400">
                                        {{ $stock->listing_type === 'swap' ? 'Swap' : 'Sell' }}
                                    </div>
                                </div>
                            </div>
                            <span class="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 text-[10px] font-extrabold px-2 py-0.5 rounded-full whitespace-nowrap">{{ $totalText }}</span>
                        </div>
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-2">
                                <div class="min-w-0">
                                    <h3 class="text-lg font-bold text-slate-900 dark:text-white truncate">{{ $stock->medicine?->name }}</h3>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 gap-3 py-3 border-y border-slate-100 dark:border-slate-800 my-3">
                                <div class="flex flex-col">
                                    <span class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Available Qty</span>
                                    <span class="text-sm font-semibold">{{ number_format($stock->quantity) }} {{ $stock->unit }}</span>
                                </div>
                                <div class="flex flex-col">
                                    <span class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Expiry Date</span>
                                    <span class="text-sm font-semibold @if($isExpiring) text-orange-500 @endif">{{ $stock->expiry_date?->format('m / Y') }}</span>
                                </div>
                            </div>
                            <div class="flex gap-2">
                                @if($isMine)
                                    <a class="flex-1 h-10 rounded-lg bg-primary/10 text-primary text-sm font-bold hover:bg-primary/20 transition-colors flex items-center justify-center gap-2" href="{{ route('pharmacy.stock.edit', $stock) }}">
                                        <span class="material-symbols-outlined text-[18px]">edit</span>
                                        Edit
                                    </a>
                                @else
                                    <a class="flex-1 h-10 rounded-lg bg-primary text-white text-sm font-bold hover:bg-primary/90 transition-colors flex items-center justify-center" href="{{ route('pharmacy.requests.create', $stock) }}">Request</a>
                                    <a class="flex-1 h-10 rounded-lg bg-primary/10 text-primary text-sm font-bold hover:bg-primary/20 transition-colors flex items-center justify-center gap-2" href="{{ route('pharmacy.chats.create', $stock->pharmacy) }}">
                                        <span class="material-symbols-outlined text-[18px]">chat_bubble</span>
                                        Chat
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div>
                {{ $stocks->links() }}
            </div>
        @endif
    </main>
@endsection

@section('desktop_content')
    <main class="mx-auto flex w-full max-w-[1440px] flex-1 flex-col gap-6 p-6 lg:px-10">
        <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
            <div class="flex flex-col gap-1">
                <h1 class="text-3xl font-black tracking-tight text-slate-900 dark:text-white">Marketplace</h1>
                <p class="text-slate-500 dark:text-slate-400 text-base">Find and trade medical supplies across the verified network</p>
            </div>
            <a class="inline-flex items-center justify-center gap-2 rounded-xl bg-primary px-6 py-3 text-sm font-bold text-white shadow-lg shadow-primary/20 hover:bg-primary/90" href="{{ route('pharmacy.stock.create') }}">
                <span class="material-symbols-outlined text-lg">add</span>
                <span>Add New Listing</span>
            </a>
        </div>

        <div id="marketplaceDesktopControls" class="flex flex-col gap-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900/50">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center">
                <form class="relative flex-1" method="GET" action="{{ route('pharmacy.marketplace') }}">
                    <span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">search</span>
                    <input class="h-12 w-full rounded-xl border-slate-200 bg-slate-50 pl-12 pr-4 text-base focus:border-primary focus:ring-primary dark:border-slate-800 dark:bg-slate-800" name="q" value="{{ request('q') }}" placeholder="Search medicines, pharmacies..." type="text">
                    <input type="hidden" name="scope" value="{{ $scope ?? request('scope', 'all') }}">
                </form>
                <div class="flex items-center gap-2 overflow-x-auto pb-1 lg:pb-0">
                    <a class="flex h-10 items-center gap-2 rounded-xl px-5 text-sm font-bold @if(($scope ?? 'all') === 'all') bg-primary text-white @else bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-400 @endif" href="{{ route('pharmacy.marketplace', ['scope' => 'all', 'q' => request('q')]) }}">All</a>
                    <a class="flex h-10 items-center gap-2 rounded-xl px-5 text-sm font-bold @if(($scope ?? 'all') === 'others') bg-primary text-white @else bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-400 @endif" href="{{ route('pharmacy.marketplace', ['scope' => 'others', 'q' => request('q')]) }}">Others</a>
                    <a class="flex h-10 items-center gap-2 rounded-xl px-5 text-sm font-bold @if(($scope ?? 'all') === 'mine') bg-primary text-white @else bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-400 @endif" href="{{ route('pharmacy.marketplace', ['scope' => 'mine', 'q' => request('q')]) }}">My Listings</a>
                    <div class="mx-2 h-6 w-px bg-slate-200 dark:bg-slate-800"></div>
                    <a class="flex h-10 items-center gap-2 rounded-xl bg-primary/10 px-5 text-sm font-bold text-primary hover:bg-primary/20" href="{{ route('pharmacy.stock.index') }}">
                        <span class="material-symbols-outlined text-lg">inventory_2</span>
                        My Stock
                    </a>
                </div>
            </div>
        </div>

        <div id="marketplaceDesktopResults" class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
            @if($stocks->count() === 0)
                <div class="p-6 text-slate-500 dark:text-slate-400">
                    No listings to show. Marketplace shows only stocks that are available and visible from verified pharmacies.
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="w-full text-left text-sm">
                        <thead class="bg-slate-50 text-xs font-bold uppercase tracking-wider text-slate-500 dark:bg-slate-800/50 dark:text-slate-400">
                            <tr>
                                <th class="px-6 py-4">Pharmacy Name</th>
                                <th class="px-6 py-4">Medicine Name</th>
                                <th class="px-6 py-4">Quantity</th>
                                <th class="px-6 py-4">Expiry</th>
                                <th class="px-6 py-4">Type</th>
                                <th class="px-6 py-4 text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                            @foreach($stocks as $stock)
                                @php
                                    $isMine = ($myPharmacyId ?? auth()->user()->pharmacy_id) === $stock->pharmacy_id;
                                    $typeText = $stock->listing_type === 'swap' ? 'Swap' : 'Sell';
                                    $typeBadge = $stock->listing_type === 'swap'
                                        ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
                                        : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400';
                                @endphp
                                <tr class="hover:bg-slate-50/80 dark:hover:bg-slate-800/30 @if($isMine) bg-primary/5 hover:bg-primary/10 @endif">
                                    <td class="px-6 py-4">
                                        <div class="flex items-center gap-3">
                                            <div class="h-9 w-9 rounded-full overflow-hidden bg-white flex items-center justify-center border border-slate-200 dark:border-slate-800">
                                                <img class="h-full w-full object-contain p-1" src="{{ asset('images/pharma-logo.png') }}" alt="Pharmacy logo">
                                            </div>
                                            @if($isMine)
                                                <a class="font-bold text-primary hover:underline" href="{{ route('pharmacy.profil') }}">
                                                    {{ $stock->pharmacy?->name }} (You)
                                                </a>
                                            @else
                                                <a class="font-semibold hover:text-primary hover:underline" href="{{ route('pharmacy.pharmacies.show', $stock->pharmacy) }}">
                                                    {{ $stock->pharmacy?->name }}
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex flex-col">
                                            <span class="font-medium text-slate-900 dark:text-white">{{ $stock->medicine?->name }}</span>
                                            <span class="text-xs text-slate-500">{{ $stock->medicine?->generic_name }}</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="inline-flex items-center rounded-md bg-slate-100 px-2 py-1 text-xs font-medium text-slate-700 dark:bg-slate-800 dark:text-slate-300">{{ number_format($stock->quantity) }} {{ $stock->unit }}</span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="text-slate-600 dark:text-slate-400">{{ $stock->expiry_date?->format('M Y') }}</span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-bold uppercase {{ $typeBadge }}">{{ $typeText }}</span>
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <div class="flex justify-end gap-2">
                                            @if($isMine)
                                                <a class="flex h-9 items-center gap-1 rounded-lg border-2 border-primary bg-white px-4 text-xs font-bold text-primary hover:bg-primary/5" href="{{ route('pharmacy.stock.edit', $stock) }}">
                                                    <span class="material-symbols-outlined text-sm">edit</span>
                                                    Edit
                                                </a>
                                            @else
                                                <a class="flex h-9 items-center gap-1 rounded-lg bg-primary px-4 text-xs font-bold text-white hover:bg-primary/90" href="{{ route('pharmacy.requests.create', $stock) }}">Request</a>
                                                <a class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-400" href="{{ route('pharmacy.chats.create', $stock->pharmacy) }}">
                                                    <span class="material-symbols-outlined text-lg">chat</span>
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="border-t border-slate-100 bg-slate-50 px-6 py-4 dark:border-slate-800 dark:bg-slate-800/50">
                    {{ $stocks->links() }}
                </div>
            @endif
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <div class="group relative flex items-center gap-6 overflow-hidden rounded-3xl bg-primary/95 p-8 text-white">
                <div class="relative z-10 flex flex-col gap-2">
                    <h3 class="text-2xl font-bold">Short on stock?</h3>
                    <p class="text-primary-50 max-w-[300px] opacity-90">Post an Urgent Request to the community and get notified when someone has what you need.</p>
                    <a class="mt-4 w-fit rounded-xl bg-white px-6 py-2.5 text-sm font-bold text-primary shadow-lg transition-transform hover:scale-105 active:scale-95" href="{{ route('pharmacy.community.index') }}">Post Request</a>
                </div>
                <div class="absolute -right-8 -top-8 h-48 w-48 rounded-full bg-white/10 blur-3xl"></div>
                <div class="absolute bottom-0 right-0 h-40 w-40 overflow-hidden opacity-20">
                    <span class="material-symbols-outlined scale-[5] text-white">campaign</span>
                </div>
            </div>
            <div class="flex items-center gap-6 rounded-3xl border border-primary/20 bg-white p-8 dark:bg-slate-900">
                <div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                    <span class="material-symbols-outlined text-4xl">verified_user</span>
                </div>
                <div class="flex flex-col gap-1">
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white">Verified Trade Network</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-sm">All users on the marketplace are licensed pharmaceutical entities. Secure your supplies with confidence.</p>
                    <a class="mt-2 text-sm font-bold text-primary hover:underline underline-offset-4" href="{{ route('pharmacy.verifications.index') }}">Learn more about security</a>
                </div>
            </div>
        </div>
    </main>

    <script>
        (function () {
            function shouldHandleLink(a) {
                if (!a) return false;
                if (a.target && a.target !== '_self') return false;
                if (a.hasAttribute('download')) return false;
                var href = a.getAttribute('href');
                if (!href || href.startsWith('#')) return false;
                try {
                    var url = new URL(href, window.location.href);
                    if (url.origin !== window.location.origin) return false;
                    return url.pathname.endsWith('/pharmacy/marketplace') || url.pathname.includes('/pharmacy/marketplace');
                } catch (e) {
                    return false;
                }
            }

            function setLoading(isLoading) {
                var desktop = document.getElementById('marketplaceDesktopResults');
                var mobile = document.getElementById('marketplaceMobileMain');

                [desktop, mobile].forEach(function (el) {
                    if (!el) return;
                    if (isLoading) {
                        el.classList.add('opacity-60', 'pointer-events-none');
                        el.setAttribute('aria-busy', 'true');
                    } else {
                        el.classList.remove('opacity-60', 'pointer-events-none');
                        el.removeAttribute('aria-busy');
                    }
                });
            }

            var inFlight = null;
            async function loadMarketplace(url, push) {
                if (inFlight) {
                    try {
                        inFlight.abort();
                    } catch (e) {}
                }

                var controller = new AbortController();
                inFlight = controller;

                setLoading(true);
                try {
                    var res = await fetch(url, {
                        signal: controller.signal,
                        headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    });
                    if (!res.ok) return;
                    var text = await res.text();
                    var doc = new DOMParser().parseFromString(text, 'text/html');

                    var replacements = [
                        'marketplaceMobileTabs',
                        'marketplaceMobileMain',
                        'marketplaceDesktopControls',
                        'marketplaceDesktopResults',
                    ];
                    replacements.forEach(function (id) {
                        var current = document.getElementById(id);
                        var fresh = doc.getElementById(id);
                        if (current && fresh) {
                            current.replaceWith(fresh);
                        }
                    });

                    if (push) {
                        history.pushState({}, '', url);
                    }
                } catch (e) {
                } finally {
                    setLoading(false);
                    inFlight = null;
                }
            }

            document.addEventListener('click', function (e) {
                if (e.defaultPrevented) return;
                if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
                var a = e.target && e.target.closest ? e.target.closest('a') : null;
                if (!shouldHandleLink(a)) return;
                e.preventDefault();
                loadMarketplace(a.href, true);
            });

            document.addEventListener('submit', function (e) {
                var form = e.target;
                if (!form || !(form instanceof HTMLFormElement)) return;
                var action = form.getAttribute('action') || '';
                if (!action) return;
                try {
                    var url = new URL(action, window.location.href);
                    if (!url.pathname.includes('/pharmacy/marketplace')) return;
                } catch (err) {
                    return;
                }
                var method = (form.getAttribute('method') || 'GET').toUpperCase();
                if (method !== 'GET') return;
                e.preventDefault();
                var params = new URLSearchParams(new FormData(form));
                var fullUrl = (form.action || action) + (params.toString() ? '?' + params.toString() : '');
                loadMarketplace(fullUrl, true);
            });

            window.addEventListener('popstate', function () {
                loadMarketplace(window.location.href, false);
            });
        })();
    </script>
@endsection