@extends('admin.layouts.app')

@section('title', 'Hospital Logo & Branding Settings')

@section('content')
<div class="space-y-6" 
     x-data="{ 
         previewUrl: '{{ $currentLogo }}',
         fileName: '',
         handleFileSelect(event) {
             const file = event.target.files[0];
             if (file) {
                 this.fileName = file.name;
                 const reader = new FileReader();
                 reader.onload = (e) => {
                     this.previewUrl = e.target.result;
                 };
                 reader.readAsDataURL(file);
             }
         }
     }">

    <!-- Page Header -->
    <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-xs flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2 mb-1.5">
                <span class="px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-sky-50 text-sky-700 border border-sky-200">
                    <i class="fa-solid fa-palette mr-1"></i> System Branding
                </span>
            </div>
            <h1 class="text-2xl font-extrabold text-slate-800 tracking-tight">Hospital Logo Management</h1>
            <p class="text-xs text-slate-500 mt-1">Upload and update your hospital logo. Any changes are automatically applied across all portal pages, navigation, and tab favicon.</p>
        </div>

        @if($isCustomLogo)
            <form method="POST" action="{{ route('admin.logo.reset') }}" onsubmit="return confirm('Are you sure you want to reset the logo back to default?')">
                @csrf
                <button type="submit" class="px-4 py-2.5 bg-slate-100 hover:bg-red-50 text-slate-600 hover:text-red-600 rounded-2xl text-xs font-bold transition-colors flex items-center gap-2 cursor-pointer border border-slate-200">
                    <i class="fa-solid fa-rotate-left text-xs"></i>
                    <span>Reset to Default Logo</span>
                </button>
            </form>
        @endif
    </div>

    <!-- Main Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        
        <!-- Left: Upload Form -->
        <div class="lg:col-span-7 bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-xs">
            <h2 class="text-base font-bold text-slate-800 mb-1 flex items-center gap-2">
                <i class="fa-solid fa-cloud-arrow-up text-sky-600"></i>
                <span>Upload New Logo</span>
            </h2>
            <p class="text-xs text-slate-400 mb-6">Supported formats: WEBP, PNG, JPG, JPEG, SVG (Max 5MB)</p>

            <form method="POST" action="{{ route('admin.logo.update') }}" enctype="multipart/form-data" class="space-y-6">
                @csrf

                <!-- Hospital Name Input -->
                <div>
                    <label for="hospital_name" class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                        Hospital / Software Name
                    </label>
                    <input id="hospital_name" 
                           name="hospital_name" 
                           type="text" 
                           value="{{ old('hospital_name', $hospitalName) }}" 
                           placeholder="e.g. City General Hospital" 
                           class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm text-slate-800 focus:bg-white focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none transition-all">
                </div>

                <!-- Dropzone / File Upload -->
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                        Select Logo File
                    </label>
                    <div class="relative border-2 border-dashed border-slate-300 hover:border-sky-500 rounded-3xl p-8 text-center bg-slate-50/50 hover:bg-sky-50/30 transition-all group cursor-pointer">
                        <input type="file" 
                               name="logo" 
                               id="logo_file" 
                               accept="image/png,image/jpeg,image/webp,image/svg+xml" 
                               @change="handleFileSelect($event)" 
                               class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                        
                        <div class="flex flex-col items-center justify-center">
                            <div class="w-14 h-14 rounded-2xl bg-sky-50 text-sky-600 flex items-center justify-center text-2xl mb-3 group-hover:scale-110 transition-transform">
                                <i class="fa-solid fa-image"></i>
                            </div>
                            <p class="text-sm font-bold text-slate-700 group-hover:text-sky-600 transition-colors">
                                Click or drag & drop new logo image here
                            </p>
                            <p class="text-xs text-slate-400 mt-1">High resolution transparent PNG or WEBP recommended</p>
                            <span x-show="fileName" x-transition class="mt-3 text-xs font-mono text-emerald-600 font-bold bg-emerald-50 px-3 py-1 rounded-full border border-emerald-200">
                                Selected: <span x-text="fileName"></span>
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="pt-2">
                    <button type="submit" 
                            class="w-full py-3.5 px-5 bg-gradient-to-r from-sky-600 to-cyan-600 hover:from-sky-700 hover:to-cyan-700 text-white rounded-2xl text-xs font-bold shadow-md shadow-sky-600/20 hover:shadow-lg transition-all flex items-center justify-center gap-2 cursor-pointer">
                        <i class="fa-solid fa-check"></i>
                        <span>Apply New Logo Across All Pages</span>
                    </button>
                </div>
            </form>
        </div>

        <!-- Right: Live Real-Time Previews -->
        <div class="lg:col-span-5 space-y-6">
            
            <!-- Live Preview Card -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-sm font-bold text-slate-800">Logo Preview</h3>
                    <span class="text-[11px] font-bold text-sky-600 bg-sky-50 px-2.5 py-0.5 rounded-full border border-sky-100">Active</span>
                </div>

                <div class="bg-slate-900 rounded-2xl p-6 flex flex-col items-center justify-center text-center relative overflow-hidden">
                    <div class="w-24 h-24 rounded-2xl bg-white p-2.5 shadow-xl ring-4 ring-sky-500/20 flex items-center justify-center mb-3">
                        <img :src="previewUrl" alt="Hospital Logo Preview" class="w-full h-full object-contain">
                    </div>
                    <p class="text-sm font-bold text-white">{{ $hospitalName }}</p>
                    <p class="text-[11px] text-slate-400">Main System Emblem</p>
                </div>
            </div>

            <!-- Multi-Surface Rendering Demo -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs space-y-4">
                <h3 class="text-sm font-bold text-slate-800">Where this logo appears</h3>

                <!-- 1. Browser Tab -->
                <div class="p-3 rounded-2xl bg-slate-100 flex items-center gap-3">
                    <div class="w-6 h-6 rounded bg-white p-0.5 flex items-center justify-center shadow-xs">
                        <img :src="previewUrl" alt="Tab Icon" class="w-full h-full object-contain">
                    </div>
                    <div class="min-w-0">
                        <p class="text-xs font-bold text-slate-700">Browser Tab Favicon</p>
                        <p class="text-[11px] text-slate-400">All browser tabs & bookmarks</p>
                    </div>
                </div>

                <!-- 2. Sidebar Navigation -->
                <div class="p-3 rounded-2xl bg-slate-900 text-white flex items-center gap-3">
                    <div class="w-8 h-8 rounded-xl bg-white p-1 flex items-center justify-center shrink-0">
                        <img :src="previewUrl" alt="Sidebar Icon" class="w-full h-full object-contain">
                    </div>
                    <div class="min-w-0">
                        <p class="text-xs font-bold text-white">Sidebar Header</p>
                        <p class="text-[11px] text-slate-400">Pinned & unpinned navigation</p>
                    </div>
                </div>

                <!-- 3. Login Screen -->
                <div class="p-3 rounded-2xl bg-slate-800 text-white flex items-center gap-3">
                    <div class="w-8 h-8 rounded-xl bg-white p-1 flex items-center justify-center shrink-0">
                        <img :src="previewUrl" alt="Login Icon" class="w-full h-full object-contain">
                    </div>
                    <div class="min-w-0">
                        <p class="text-xs font-bold text-white">Admin Login Screen</p>
                        <p class="text-[11px] text-slate-400">Authentication portal card</p>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>
@endsection