@extends('layouts.marketplace')

@section('title', 'Pharmacy Profile')

@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="{{ url()->previous() }}">
                <span class="material-symbols-outlined">arrow_back</span>
            </a>
            <h1 class="text-xl font-bold tracking-tight text-slate-900 dark:text-slate-100">Pharmacy</h1>
        </div>
    </div>
@endsection

@section('mobile_content')
    <div class="p-4 space-y-4">
        <div class="rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 overflow-hidden">
            <div class="p-4 flex items-center gap-3">
                <div class="h-12 w-12 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-lg font-black truncate text-slate-900 dark:text-white">{{ $pharmacy->name }}</div>
                    <div class="mt-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
                        Verified
                    </div>
                </div>
            </div>
            <div class="border-t border-slate-200 dark:border-slate-800 p-4 space-y-3 text-sm">
                <div class="flex items-center justify-between gap-3">
                    <span class="text-slate-500 dark:text-slate-400 font-semibold">License</span>
                    <span class="font-bold text-slate-900 dark:text-white">{{ $pharmacy->license_number }}</span>
                </div>
                <div class="flex items-center justify-between gap-3">
                    <span class="text-slate-500 dark:text-slate-400 font-semibold">City</span>
                    <span class="font-semibold text-slate-900 dark:text-white">{{ $pharmacy->city ?: '—' }}</span>
                </div>
                <div class="flex items-center justify-between gap-3">
                    <span class="text-slate-500 dark:text-slate-400 font-semibold">Phone</span>
                    <span class="font-semibold text-slate-900 dark:text-white">{{ $pharmacy->contact_phone ?: '—' }}</span>
                </div>
                <div class="flex items-center justify-between gap-3">
                    <span class="text-slate-500 dark:text-slate-400 font-semibold">WhatsApp</span>
                    <span class="font-semibold text-slate-900 dark:text-white">{{ $pharmacy->whatsapp_number ?: '—' }}</span>
                </div>
                <div class="flex items-center justify-between gap-3">
                    <span class="text-slate-500 dark:text-slate-400 font-semibold">Email</span>
                    <span class="font-semibold text-slate-900 dark:text-white">{{ $pharmacy->contact_email ?: '—' }}</span>
                </div>
                <div class="flex items-start justify-between gap-3">
                    <span class="text-slate-500 dark:text-slate-400 font-semibold">Address</span>
                    <span class="font-semibold text-slate-900 dark:text-white text-right">{{ $pharmacy->address_line ?: '—' }}</span>
                </div>
            </div>
        </div>

        <a class="inline-flex w-full 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.chats.create', $pharmacy) }}">
            <span class="material-symbols-outlined text-lg">chat</span>
            Chat
        </a>
    </div>
@endsection

@section('desktop_content')
    <main class="mx-auto flex w-full max-w-[1200px] flex-1 flex-col gap-6 p-6 lg:px-10">
        <div class="flex items-end justify-between gap-4">
            <div class="flex items-center gap-4">
                <div class="h-16 w-16 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-2" src="{{ asset('images/pharma-logo.png') }}" alt="Pharmacy logo">
                </div>
                <div class="min-w-0">
                    <h1 class="text-3xl font-black tracking-tight text-slate-900 dark:text-white">{{ $pharmacy->name }}</h1>
                    <div class="mt-2 flex items-center gap-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
                            Verified
                        </span>
                        @if($pharmacy->verifiedByPharmacy)
                            <span class="text-sm text-slate-500 dark:text-slate-400">Verified by {{ $pharmacy->verifiedByPharmacy->name }}</span>
                        @endif
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <a class="inline-flex items-center justify-center gap-2 rounded-xl bg-slate-100 px-6 py-3 text-sm font-bold text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700" href="{{ route('pharmacy.marketplace', ['scope' => 'others']) }}">
                    <span class="material-symbols-outlined text-lg">arrow_back</span>
                    Back
                </a>
                <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.chats.create', $pharmacy) }}">
                    <span class="material-symbols-outlined text-lg">chat</span>
                    Chat
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 overflow-hidden">
                <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800">
                    <h2 class="text-sm font-bold tracking-widest uppercase text-slate-500 dark:text-slate-400">Contact</h2>
                </div>
                <div class="p-6 space-y-4 text-sm">
                    <div class="flex items-center justify-between gap-3">
                        <span class="text-slate-500 dark:text-slate-400 font-semibold">Phone</span>
                        <span class="font-bold text-slate-900 dark:text-white">{{ $pharmacy->contact_phone ?: '—' }}</span>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <span class="text-slate-500 dark:text-slate-400 font-semibold">WhatsApp</span>
                        <span class="font-bold text-slate-900 dark:text-white">{{ $pharmacy->whatsapp_number ?: '—' }}</span>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <span class="text-slate-500 dark:text-slate-400 font-semibold">Email</span>
                        <span class="font-bold text-slate-900 dark:text-white">{{ $pharmacy->contact_email ?: '—' }}</span>
                    </div>
                </div>
            </div>

            <div class="rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 overflow-hidden">
                <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800">
                    <h2 class="text-sm font-bold tracking-widest uppercase text-slate-500 dark:text-slate-400">Location</h2>
                </div>
                <div class="p-6 space-y-4 text-sm">
                    <div class="flex items-center justify-between gap-3">
                        <span class="text-slate-500 dark:text-slate-400 font-semibold">License</span>
                        <span class="font-bold text-slate-900 dark:text-white">{{ $pharmacy->license_number }}</span>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <span class="text-slate-500 dark:text-slate-400 font-semibold">City</span>
                        <span class="font-bold text-slate-900 dark:text-white">{{ $pharmacy->city ?: '—' }}</span>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <span class="text-slate-500 dark:text-slate-400 font-semibold">Country</span>
                        <span class="font-bold text-slate-900 dark:text-white">{{ $pharmacy->country ?: '—' }}</span>
                    </div>
                    <div class="flex items-start justify-between gap-3">
                        <span class="text-slate-500 dark:text-slate-400 font-semibold">Address</span>
                        <span class="font-bold text-slate-900 dark:text-white text-right">{{ $pharmacy->address_line ?: '—' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection