@extends('layouts.marketplace')

@section('title', 'Profile')

@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">Profile</h1>
        </div>
        @include('pharmacy.partials.notifications_icon')
    </div>
@endsection

@section('mobile_content')
    <div class="p-4 space-y-4 pb-24">
        @if(session('status'))
            <div class="rounded-2xl bg-green-50 border border-green-200 p-4 text-green-800">
                {{ session('status') }}
            </div>
        @endif

        @if($errors->any())
            <div class="rounded-2xl bg-red-50 border border-red-200 p-4 text-red-800">
                <div class="font-bold mb-2">Please fix the following:</div>
                <ul class="list-disc pl-5 space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <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-2" 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>
                    @if($pharmacy->isVerified())
                        <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>
                    @else
                        <div class="mt-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
                            Not Verified
                        </div>
                    @endif
                </div>
            </div>

            <div class="border-t border-slate-200 dark:border-slate-800 p-4 space-y-3 text-sm">
                @if($pharmacy->isVerified())
                    <div class="rounded-xl bg-green-50 border border-green-200 p-3 text-green-800">
                        Verified. You can use the platform.
                    </div>
                @else
                    @if($latestRequest && $latestRequest->status === 'pending')
                        <div class="rounded-xl bg-amber-50 border border-amber-200 p-3 text-amber-800">
                            Verification pending with: {{ $latestRequest->verifierPharmacy?->name }} ({{ $latestRequest->license_number_entered }})
                        </div>
                    @elseif($latestRequest && $latestRequest->status === 'rejected')
                        <div class="rounded-xl bg-red-50 border border-red-200 p-3 text-red-800">
                            Verification rejected.
                            @if($latestRequest->note)
                                <div class="mt-2">{{ $latestRequest->note }}</div>
                            @endif
                        </div>
                    @else
                        <div class="rounded-xl bg-blue-50 border border-blue-200 p-3 text-blue-800">
                            Not verified. Enter a sponsor license and submit for pharmacy verification.
                        </div>
                    @endif
                @endif

                <div class="grid grid-cols-1 gap-3">
                    <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">Sponsor License</span>
                        <span class="font-semibold text-slate-900 dark:text-white">{{ $pharmacy->sponsor_license_number ?: '—' }}</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-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-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>
        </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-4 py-3 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">Edit Profile</h2>
            </div>
            <form class="p-4 space-y-4" method="POST" action="{{ route('pharmacy.profil.update') }}">
                @csrf
                @method('PUT')

                <div class="space-y-2">
                    <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Pharmacy Name</label>
                    <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="name" value="{{ old('name', $pharmacy->name) }}" required>
                </div>

                <div class="space-y-2">
                    <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Sponsor License / Code</label>
                    <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="sponsor_license_number" value="{{ old('sponsor_license_number', $pharmacy->sponsor_license_number) }}" placeholder="Enter sponsor license or code">
                </div>

                <div class="space-y-2">
                    <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Address</label>
                    <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="address_line" value="{{ old('address_line', $pharmacy->address_line) }}">
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">City</label>
                        <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="city" value="{{ old('city', $pharmacy->city) }}">
                    </div>
                    <div class="space-y-2">
                        <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">State</label>
                        <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="state" value="{{ old('state', $pharmacy->state) }}">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Country</label>
                        <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="country" value="{{ old('country', $pharmacy->country) }}">
                    </div>
                    <div class="space-y-2">
                        <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Phone</label>
                        <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="contact_phone" value="{{ old('contact_phone', $pharmacy->contact_phone) }}">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">WhatsApp Number</label>
                        <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="whatsapp_number" value="{{ old('whatsapp_number', $pharmacy->whatsapp_number) }}">
                    </div>
                    <div class="space-y-2">
                        <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Email</label>
                        <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" type="email" name="contact_email" value="{{ old('contact_email', $pharmacy->contact_email) }}">
                    </div>
                </div>

                <button class="w-full rounded-xl bg-primary px-6 py-3 text-sm font-bold text-white shadow-lg shadow-primary/20 hover:bg-primary/90" type="submit">
                    Save Changes
                </button>
            </form>
        </div>
    </div>
@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 pb-24">
        <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-3" 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">
                        @if($pharmacy->isVerified())
                            <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>
                        @else
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">Not Verified</span>
                        @endif
                    </div>
                </div>
            </div>
            <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') }}">
                <span class="material-symbols-outlined text-lg">arrow_back</span>
                Back
            </a>
        </div>

        @if(session('status'))
            <div class="rounded-2xl bg-green-50 border border-green-200 p-4 text-green-800">
                {{ session('status') }}
            </div>
        @endif

        @if($errors->any())
            <div class="rounded-2xl bg-red-50 border border-red-200 p-4 text-red-800">
                <div class="font-bold mb-2">Please fix the following:</div>
                <ul class="list-disc pl-5 space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="grid grid-cols-1 lg: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">Pharmacy Info</h2>
                </div>
                <div class="p-6 space-y-4 text-sm">
                    @if($pharmacy->isVerified())
                        <div class="rounded-xl bg-green-50 border border-green-200 p-3 text-green-800">
                            Verified. You can use the platform.
                        </div>
                    @else
                        @if($latestRequest && $latestRequest->status === 'pending')
                            <div class="rounded-xl bg-amber-50 border border-amber-200 p-3 text-amber-800">
                                Verification pending with: {{ $latestRequest->verifierPharmacy?->name }} ({{ $latestRequest->license_number_entered }})
                            </div>
                        @elseif($latestRequest && $latestRequest->status === 'rejected')
                            <div class="rounded-xl bg-red-50 border border-red-200 p-3 text-red-800">
                                Verification rejected.
                                @if($latestRequest->note)
                                    <div class="mt-2">{{ $latestRequest->note }}</div>
                                @endif
                            </div>
                        @else
                            <div class="rounded-xl bg-blue-50 border border-blue-200 p-3 text-blue-800">
                                Not verified. Enter a sponsor license and submit for pharmacy verification.
                            </div>
                        @endif
                    @endif

                    <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">Sponsor License</span>
                        <span class="font-bold text-slate-900 dark:text-white">{{ $pharmacy->sponsor_license_number ?: '—' }}</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-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 class="flex items-center justify-between gap-3">
                        <span class="text-slate-500 dark:text-slate-400 font-semibold">Owner</span>
                        <span class="font-bold text-slate-900 dark:text-white">{{ $pharmacy->createdBy?->name ?? auth()->user()->name }}</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">Edit Profile</h2>
                </div>
                <form class="p-6 space-y-4" method="POST" action="{{ route('pharmacy.profil.update') }}">
                    @csrf
                    @method('PUT')

                    <div class="space-y-2">
                        <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Pharmacy Name</label>
                        <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="name" value="{{ old('name', $pharmacy->name) }}" required>
                    </div>

                    <div class="space-y-2">
                        <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Sponsor License / Code</label>
                        <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="sponsor_license_number" value="{{ old('sponsor_license_number', $pharmacy->sponsor_license_number) }}" placeholder="Enter sponsor license or code">
                    </div>

                    <div class="space-y-2">
                        <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Address</label>
                        <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="address_line" value="{{ old('address_line', $pharmacy->address_line) }}">
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="space-y-2">
                            <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">City</label>
                            <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="city" value="{{ old('city', $pharmacy->city) }}">
                        </div>
                        <div class="space-y-2">
                            <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">State</label>
                            <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="state" value="{{ old('state', $pharmacy->state) }}">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="space-y-2">
                            <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Country</label>
                            <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="country" value="{{ old('country', $pharmacy->country) }}">
                        </div>
                        <div class="space-y-2">
                            <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Phone</label>
                            <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="contact_phone" value="{{ old('contact_phone', $pharmacy->contact_phone) }}">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="space-y-2">
                            <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">WhatsApp Number</label>
                            <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" name="whatsapp_number" value="{{ old('whatsapp_number', $pharmacy->whatsapp_number) }}">
                        </div>
                        <div class="space-y-2">
                            <label class="text-slate-900 dark:text-slate-100 text-sm font-semibold leading-normal">Email</label>
                            <input class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none" type="email" name="contact_email" value="{{ old('contact_email', $pharmacy->contact_email) }}">
                        </div>
                    </div>

                    <button class="w-full rounded-xl bg-primary px-6 py-3 text-sm font-bold text-white shadow-lg shadow-primary/20 hover:bg-primary/90" type="submit">
                        Save Changes
                    </button>
                </form>
            </div>
        </div>
    </main>
@endsection