@extends('layouts.marketplace')

@section('title', 'Verifications')

@section('mobile_header')
    <div class="flex items-center p-4 justify-between">
        <a class="text-slate-900 dark:text-slate-100 flex size-10 shrink-0 items-center justify-start" href="{{ route('pharmacy.marketplace') }}">
            <span class="material-symbols-outlined">arrow_back</span>
        </a>
        <h1 class="text-lg font-bold leading-tight tracking-tight flex-1 text-center">Verification - Mobile</h1>
        <div class="flex w-10 items-center justify-end">
            <button class="flex items-center justify-center rounded-xl size-10 bg-transparent text-slate-900 dark:text-slate-100" type="button">
                <span class="material-symbols-outlined">search</span>
            </button>
        </div>
    </div>
@endsection

@section('mobile_content')
    @php
        $pendingCount = $requests->where('status', 'pending')->count();
    @endphp
    <main class="flex-1 overflow-y-auto pb-24">
        <section class="p-4">
            <h2 class="text-xl font-bold mb-4">Invite Code</h2>
            <div class="flex flex-col rounded-xl overflow-hidden shadow-sm bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-800">
                <div class="w-full bg-center bg-no-repeat aspect-video bg-cover" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDoFpxhG0GxjrC5e4vMHcT0DRQFnguvxTs18KHz1caafFqgKdIX_JmY1Zhib5H7jowBOqotXnIf87O0Hc_K5Kyx1QoVYEPoiL-yNaS2AmAarxHG2iaGUFatyvio2h0jOCb1PUARCSVgOhSatZsLzs1ecqNp-lrVGm6NNeC03W4hbdQiqCKZMkVxUL3BlPJ3N2NX_SEneIo0EAK-j3DPZvyD5eqCzIrW-4PRAd8pOkiN8M3wBB_OxkeF6eu6hhtloYbUaTGMxF67Kvc");'></div>
                <div class="p-4 flex flex-col gap-3">
                    <p class="text-lg font-bold">Generate New Invite Code</p>
                    <p class="text-slate-600 dark:text-slate-400 text-sm">Share this code with pharmacy partners to initiate the verification process securely within the network.</p>
                    <form method="POST" action="{{ route('pharmacy.verifications.invite_code.regenerate') }}">
                        @csrf
                        <button class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 rounded-xl transition-colors" type="submit">
                            Generate Code
                        </button>
                    </form>
                </div>
            </div>
        </section>

        <section class="px-4 py-2">
            <label class="flex flex-col gap-2">
                <span class="text-sm font-semibold text-slate-700 dark:text-slate-300">Active Invite Code</span>
                <div class="flex items-stretch">
                    <input id="inviteCodeMobile" class="flex-1 rounded-l-xl border-y border-l border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-4 py-3 text-primary font-mono font-bold focus:ring-0 focus:outline-none" readonly type="text" value="{{ $pharmacy->invite_code }}">
                    <button class="bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-800 rounded-r-xl px-4 flex items-center justify-center text-slate-600 dark:text-slate-400" type="button" data-copy-invite="inviteCodeMobile">
                        <span class="material-symbols-outlined text-[20px]">content_copy</span>
                    </button>
                </div>
            </label>
        </section>

        <section class="p-4">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold">Pending Requests</h2>
                @if($pendingCount > 0)
                    <span class="bg-primary/10 text-primary text-xs font-bold px-2.5 py-1 rounded-full">{{ $pendingCount }} New</span>
                @endif
            </div>

            @if($requests->count() === 0)
                <div class="bg-white dark:bg-slate-800/50 p-4 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm text-slate-500 dark:text-slate-400">
                    No requests.
                </div>
            @else
                <div class="space-y-4">
                    @foreach($requests as $req)
                        @php
                            $location = trim(($req->requesterPharmacy?->city ? $req->requesterPharmacy?->city : '').(($req->requesterPharmacy?->city && $req->requesterPharmacy?->state) ? ', ' : '').($req->requesterPharmacy?->state ? $req->requesterPharmacy?->state : ''));
                            $license = $req->requesterPharmacy?->license_number;
                        @endphp
                        <div class="bg-white dark:bg-slate-800/50 p-4 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
                            <div class="flex justify-between items-start mb-3">
                                <div class="flex gap-3">
                                    <div class="size-12 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
                                        <span class="material-symbols-outlined">local_pharmacy</span>
                                    </div>
                                    <div class="min-w-0">
                                        <h3 class="font-bold truncate">{{ $req->requesterPharmacy?->name }}</h3>
                                        <p class="text-xs text-slate-500">ID: #{{ $req->id }}</p>
                                    </div>
                                </div>
                                <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">{{ $req->created_at?->diffForHumans() }}</span>
                            </div>
                            <div class="grid grid-cols-2 gap-2 mb-4">
                                <div class="bg-slate-50 dark:bg-slate-900/50 p-2 rounded-lg">
                                    <p class="text-[10px] text-slate-500 uppercase">License</p>
                                    <p class="text-sm font-medium">{{ $license ?: 'N/A' }}</p>
                                </div>
                                <div class="bg-slate-50 dark:bg-slate-900/50 p-2 rounded-lg">
                                    <p class="text-[10px] text-slate-500 uppercase">Location</p>
                                    <p class="text-sm font-medium">{{ $location ?: 'N/A' }}</p>
                                </div>
                            </div>

                            @if($req->status === 'pending')
                                <div class="flex gap-2">
                                    <a class="flex-1 py-2 rounded-lg border border-slate-200 dark:border-slate-700 font-semibold text-sm hover:bg-slate-50 dark:hover:bg-slate-800 text-center" href="{{ route('pharmacy.verifications.show', $req) }}">Review</a>
                                    <form class="flex-1" method="POST" action="{{ route('pharmacy.verifications.accept', $req) }}">
                                        @csrf
                                        <button class="w-full py-2 rounded-lg bg-primary text-white font-semibold text-sm hover:bg-primary/90" type="submit">Approve</button>
                                    </form>
                                </div>
                            @else
                                <div class="flex justify-end">
                                    <a class="py-2 px-4 rounded-lg border border-slate-200 dark:border-slate-700 font-semibold text-sm hover:bg-slate-50 dark:hover:bg-slate-800" href="{{ route('pharmacy.verifications.show', $req) }}">View Details</a>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </section>
    </main>

    <nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 px-6 py-2 flex justify-between items-center z-50 md:hidden">
        <a class="flex flex-col items-center gap-1 @if(request()->routeIs('pharmacy.marketplace')) text-primary @else text-slate-400 dark:text-slate-500 @endif" href="{{ route('pharmacy.marketplace') }}">
            <span class="material-symbols-outlined">storefront</span>
            <span class="text-[10px] font-medium @if(request()->routeIs('pharmacy.marketplace')) font-bold @endif">Market</span>
        </a>
        <a class="flex flex-col items-center gap-1 @if(request()->routeIs('pharmacy.community.*')) text-primary @else text-slate-400 dark:text-slate-500 @endif" href="{{ route('pharmacy.community.index') }}">
            <span class="material-symbols-outlined">forum</span>
            <span class="text-[10px] font-medium @if(request()->routeIs('pharmacy.community.*')) font-bold @endif">Community</span>
        </a>
        <a class="flex flex-col items-center gap-1 @if(request()->routeIs('pharmacy.requests')) text-primary @else text-slate-400 dark:text-slate-500 @endif" href="{{ route('pharmacy.requests') }}">
            <span class="material-symbols-outlined">assignment</span>
            <span class="text-[10px] font-medium @if(request()->routeIs('pharmacy.requests')) font-bold @endif">Requests</span>
        </a>
        <a class="flex flex-col items-center gap-1 @if(request()->routeIs('pharmacy.stock.*')) text-primary @else text-slate-400 dark:text-slate-500 @endif" href="{{ route('pharmacy.stock.index') }}">
            <span class="material-symbols-outlined">inventory_2</span>
            <span class="text-[10px] font-medium @if(request()->routeIs('pharmacy.stock.*')) font-bold @endif">Stock</span>
        </a>
        <a class="flex flex-col items-center gap-1 @if(request()->routeIs('pharmacy.verifications.*')) text-primary @else text-slate-400 dark:text-slate-500 @endif" href="{{ route('pharmacy.verifications.index') }}">
            <span class="material-symbols-outlined">verified_user</span>
            <span class="text-[10px] font-medium @if(request()->routeIs('pharmacy.verifications.*')) font-bold @endif">Verify</span>
        </a>
    </nav>

    <script>
        (function () {
            function copyText(text) {
                if (navigator.clipboard && window.isSecureContext) {
                    return navigator.clipboard.writeText(text);
                }
                return new Promise(function (resolve, reject) {
                    try {
                        var ta = document.createElement('textarea');
                        ta.value = text;
                        ta.setAttribute('readonly', '');
                        ta.style.position = 'fixed';
                        ta.style.top = '-9999px';
                        ta.style.left = '-9999px';
                        document.body.appendChild(ta);
                        ta.select();
                        var ok = document.execCommand('copy');
                        document.body.removeChild(ta);
                        ok ? resolve() : reject(new Error('copy failed'));
                    } catch (e) {
                        reject(e);
                    }
                });
            }

            document.querySelectorAll('[data-copy-invite]').forEach(function (btn) {
                btn.addEventListener('click', async function () {
                    var targetId = btn.getAttribute('data-copy-invite');
                    if (!targetId) return;
                    var el = document.getElementById(targetId);
                    if (!el) return;
                    var text = (el.value || el.textContent || '').trim();
                    if (!text) return;
                    var label = btn.querySelector('[data-copy-label]');
                    var icon = btn.querySelector('.material-symbols-outlined');
                    try {
                        await copyText(text);
                        if (label) {
                            label.textContent = 'Copied';
                        } else if (icon) {
                            icon.textContent = 'done';
                        }
                        window.setTimeout(function () {
                            if (label) {
                                label.textContent = 'Copy';
                            } else if (icon) {
                                icon.textContent = 'content_copy';
                            }
                        }, 1200);
                    } catch (e) {
                        if (label) label.textContent = 'Copy';
                    }
                });
            });
        })();
    </script>
@endsection

@section('desktop_content')
    <main class="flex-1 flex justify-center py-8 px-6 lg:px-20">
        <div class="flex flex-col max-w-[1200px] flex-1 gap-8">
            <div class="flex flex-col gap-2">
                <h1 class="text-slate-900 dark:text-white text-4xl font-black leading-tight tracking-tight">Verification - Desktop</h1>
                <p class="text-slate-500 dark:text-slate-400 text-base font-normal">Manage and review pharmacy verification requests within the network.</p>
            </div>

            <section class="flex flex-col gap-4">
                <h2 class="text-slate-900 dark:text-white text-xl font-bold leading-tight tracking-tight">Your Invite Code</h2>
                <div class="flex flex-col items-start justify-between gap-4 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 md:flex-row md:items-center shadow-sm">
                    <div class="flex flex-col gap-1">
                        <div class="flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary">key</span>
                            <p class="text-slate-900 dark:text-white text-lg font-bold">Invite Code: <span id="inviteCodeDesktop">{{ $pharmacy->invite_code }}</span></p>
                        </div>
                        <p class="text-slate-500 dark:text-slate-400 text-sm">Share this code with pharmacies to invite them to your network.</p>
                    </div>
                    <button class="flex items-center gap-2 min-w-[120px] cursor-pointer justify-center rounded-xl h-10 px-6 bg-primary text-white text-sm font-bold hover:bg-primary/90 transition-all shadow-md active:scale-95" type="button" data-copy-invite="inviteCodeDesktop">
                        <span class="material-symbols-outlined text-sm">content_copy</span>
                        <span data-copy-label>Copy Code</span>
                    </button>
                </div>
            </section>

            <section class="flex flex-col gap-4">
                <div class="flex items-center justify-between">
                    <h2 class="text-slate-900 dark:text-white text-xl font-bold">Verification Requests</h2>
                    <div class="flex gap-2">
                        <button class="flex items-center gap-1 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" type="button">
                            <span class="material-symbols-outlined text-lg">filter_list</span>
                            Filter
                        </button>
                        <button class="flex items-center gap-1 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-primary transition-colors ml-4" type="button">
                            <span class="material-symbols-outlined text-lg">download</span>
                            Export
                        </button>
                    </div>
                </div>

                <div class="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm">
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse">
                            <thead>
                                <tr class="bg-slate-50 dark:bg-slate-800/50 text-slate-500 dark:text-slate-400 text-xs font-bold uppercase tracking-wider">
                                    <th class="px-6 py-4">ID</th>
                                    <th class="px-6 py-4">Pharmacy</th>
                                    <th class="px-6 py-4">Status</th>
                                    <th class="px-6 py-4">Created</th>
                                    <th class="px-6 py-4 text-right">Action</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                                @forelse($requests as $req)
                                    @php
                                        $statusText = match ($req->status) {
                                            'accepted' => 'Verified',
                                            'rejected' => 'Action Required',
                                            default => 'Pending Review',
                                        };
                                        $statusClass = match ($req->status) {
                                            'accepted' => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400',
                                            'rejected' => 'bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-400',
                                            default => 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
                                        };
                                    @endphp
                                    <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors">
                                        <td class="px-6 py-4 text-sm font-medium text-slate-900 dark:text-white">#REQ-{{ $req->id }}</td>
                                        <td class="px-6 py-4">
                                            <div class="flex flex-col">
                                                <span class="text-sm font-bold text-slate-900 dark:text-white">{{ $req->requesterPharmacy?->name }}</span>
                                                <span class="text-xs text-slate-500 dark:text-slate-400">
                                                    {{ $req->requesterPharmacy?->city }}@if($req->requesterPharmacy?->city && $req->requesterPharmacy?->state), @endif{{ $req->requesterPharmacy?->state }}
                                                </span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $statusClass }}">{{ $statusText }}</span>
                                        </td>
                                        <td class="px-6 py-4 text-sm text-slate-500 dark:text-slate-400">{{ $req->created_at?->format('M d, Y') }}</td>
                                        <td class="px-6 py-4 text-right">
                                            <a class="text-primary hover:text-primary/80 font-bold text-sm" href="{{ route('pharmacy.verifications.show', $req) }}">
                                                @if($req->status === 'pending') Review @else View Details @endif
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="px-6 py-6 text-sm text-slate-500 dark:text-slate-400" colspan="5">No requests.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="px-6 py-4 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between">
                        <span class="text-sm text-slate-500 dark:text-slate-400">
                            Showing {{ $requests->firstItem() ?? 0 }}-{{ $requests->lastItem() ?? 0 }} of {{ $requests->total() }} requests
                        </span>
                        <div class="flex gap-2">
                            <a class="px-3 py-1 text-sm font-medium border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-white dark:hover:bg-slate-700 transition-colors @if(! $requests->previousPageUrl()) opacity-50 pointer-events-none @endif" href="{{ $requests->previousPageUrl() ?? '#' }}">Previous</a>
                            <a class="px-3 py-1 text-sm font-medium border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 shadow-sm transition-colors @if(! $requests->nextPageUrl()) opacity-50 pointer-events-none @endif" href="{{ $requests->nextPageUrl() ?? '#' }}">Next</a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <script>
        (function () {
            function copyText(text) {
                if (navigator.clipboard && window.isSecureContext) {
                    return navigator.clipboard.writeText(text);
                }
                return new Promise(function (resolve, reject) {
                    try {
                        var ta = document.createElement('textarea');
                        ta.value = text;
                        ta.setAttribute('readonly', '');
                        ta.style.position = 'fixed';
                        ta.style.top = '-9999px';
                        ta.style.left = '-9999px';
                        document.body.appendChild(ta);
                        ta.select();
                        var ok = document.execCommand('copy');
                        document.body.removeChild(ta);
                        ok ? resolve() : reject(new Error('copy failed'));
                    } catch (e) {
                        reject(e);
                    }
                });
            }

            document.querySelectorAll('[data-copy-invite]').forEach(function (btn) {
                btn.addEventListener('click', async function () {
                    var targetId = btn.getAttribute('data-copy-invite');
                    if (!targetId) return;
                    var el = document.getElementById(targetId);
                    if (!el) return;
                    var text = (el.value || el.textContent || '').trim();
                    if (!text) return;
                    var label = btn.querySelector('[data-copy-label]');
                    var icon = btn.querySelector('.material-symbols-outlined');
                    try {
                        await copyText(text);
                        if (label) {
                            label.textContent = 'Copied';
                        } else if (icon) {
                            icon.textContent = 'done';
                        }
                        window.setTimeout(function () {
                            if (label) {
                                label.textContent = btn.matches('[data-copy-invite=\"inviteCodeDesktop\"]') ? 'Copy Code' : 'Copy';
                            } else if (icon) {
                                icon.textContent = 'content_copy';
                            }
                        }, 1200);
                    } catch (e) {
                        if (label) label.textContent = btn.matches('[data-copy-invite=\"inviteCodeDesktop\"]') ? 'Copy Code' : 'Copy';
                    }
                });
            });
        })();
    </script>
@endsection