@extends('layouts.admin')

@section('title', 'Website Settings')

@section('content')
<div class="space-y-8">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-black text-slate-800 uppercase tracking-tight">Website Settings</h1>
            <p class="text-slate-500 text-sm font-medium">Manage your hospital's online presence and global configurations.</p>
        </div>
    </div>

    @if(session('success'))
        <div class="p-4 bg-emerald-50 border border-emerald-100 rounded-2xl flex items-center gap-3 text-emerald-700 text-sm font-bold shadow-sm animate-fade-in">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            {{ session('success') }}
        </div>
    @endif

    <form action="{{ route('admin.settings.website.update') }}" method="POST" enctype="multipart/form-data" class="space-y-8 pb-20">
        @csrf

        <!-- Basic Information -->
        <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden">
            <div class="px-10 py-8 border-b border-slate-50 bg-slate-50/50">
                <h3 class="text-sm font-black text-slate-800 uppercase tracking-widest">Basic Information</h3>
            </div>
            <div class="p-10 space-y-10">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                    <!-- Site Logo -->
                    <div class="space-y-4">
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest">Website Logo</label>
                        <div class="relative group h-40 bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200 flex flex-col items-center justify-center p-6 transition-all hover:bg-slate-100 hover:border-indigo-300">
                            @if($setting->logo_path)
                                <img src="{{ asset('storage/' . $setting->logo_path) }}" class="max-h-full max-w-full object-contain">
                            @else
                                <svg class="h-10 w-10 text-slate-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">PNG, JPG up to 2MB</span>
                            @endif
                            <input type="file" name="logo" class="absolute inset-0 opacity-0 cursor-pointer">
                        </div>
                    </div>

                    <!-- App Icon -->
                    <div class="space-y-4">
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest">App Icon</label>
                        <div class="relative group h-40 bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200 flex flex-col items-center justify-center p-6 transition-all hover:bg-slate-100 hover:border-indigo-300">
                            @if($setting->app_icon_path)
                                <img src="{{ asset('storage/' . $setting->app_icon_path) }}" class="h-16 w-16 object-contain rounded-xl shadow-lg">
                            @else
                                <svg class="h-10 w-10 text-slate-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">PNG, SVG</span>
                            @endif
                            <input type="file" name="app_icon" class="absolute inset-0 opacity-0 cursor-pointer">
                        </div>
                    </div>

                    <!-- Favicon -->
                    <div class="space-y-4">
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest">Favicon</label>
                        <div class="relative group h-40 bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200 flex flex-col items-center justify-center p-6 transition-all hover:bg-slate-100 hover:border-indigo-300">
                            @if($setting->favicon_path)
                                <img src="{{ asset('storage/' . $setting->favicon_path) }}" class="h-8 w-8 object-contain">
                            @else
                                <svg class="h-10 w-10 text-slate-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
                                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">ICO, PNG</span>
                            @endif
                            <input type="file" name="favicon" class="absolute inset-0 opacity-0 cursor-pointer">
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-2">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-widest">Sales Phone</label>
                        <input type="text" name="sales_phone" value="{{ $setting->sales_phone }}" class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all">
                    </div>
                    <div class="space-y-2">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-widest">Support Phone</label>
                        <input type="text" name="support_phone" value="{{ $setting->support_phone }}" class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all">
                    </div>
                    <div class="space-y-2">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-widest">Sales Email</label>
                        <input type="email" name="sales_email" value="{{ $setting->sales_email }}" class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all">
                    </div>
                    <div class="space-y-2">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-widest">Support Email</label>
                        <input type="email" name="support_email" value="{{ $setting->support_email }}" class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-2">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-widest">Head Office Address</label>
                        <textarea name="head_office_address" rows="3" class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all resize-none">{{ $setting->head_office_address }}</textarea>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-widest">Branch Office Address</label>
                        <textarea name="branch_office_address" rows="3" class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all resize-none">{{ $setting->branch_office_address }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Social Media Links -->
        <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden">
            <div class="px-10 py-8 border-b border-slate-50 bg-slate-50/50">
                <h3 class="text-sm font-black text-slate-800 uppercase tracking-widest">Social Media Links</h3>
            </div>
            <div class="p-10">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                    @foreach(['facebook', 'instagram', 'twitter', 'linkedin', 'youtube', 'pinterest'] as $social)
                        <div class="space-y-6">
                            <div class="flex items-center gap-3">
                                <div class="h-8 w-8 bg-slate-100 rounded-lg flex items-center justify-center text-slate-400 capitalize">
                                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.411 2.865 8.139 6.839 9.465.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482C21.138 20.136 24 16.411 24 12c0-5.523-4.477-10-10-10z"/></svg>
                                </div>
                                <span class="text-xs font-black text-slate-800 uppercase tracking-widest capitalize">{{ $social }}</span>
                            </div>
                            <input type="text" name="{{ $social }}[url]" value="{{ $setting->$social['url'] ?? '' }}" placeholder="https://..." class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all">
                            <div class="flex items-center gap-8">
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <input type="checkbox" name="{{ $social }}[open_in_new]" {{ ($setting->$social['open_in_new'] ?? false) ? 'checked' : '' }} class="h-5 w-5 rounded-lg border-slate-200 text-indigo-600 focus:ring-indigo-50 transition-all cursor-pointer">
                                    <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest group-hover:text-indigo-600 transition-colors">Open in new window</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <input type="checkbox" name="{{ $social }}[nofollow]" {{ ($setting->$social['nofollow'] ?? false) ? 'checked' : '' }} class="h-5 w-5 rounded-lg border-slate-200 text-indigo-600 focus:ring-indigo-50 transition-all cursor-pointer">
                                    <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest group-hover:text-indigo-600 transition-colors">Add rel="nofollow"</span>
                                </label>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-16 space-y-4">
                    <div class="flex items-center gap-3">
                        <svg class="h-5 w-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-widest">Instagram Feed Embed URL</label>
                    </div>
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">The URL to fetch/embed your Instagram feed (e.g., from a widget provider).</p>
                    <textarea name="instagram_feed_embed" rows="4" class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-3xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all font-mono text-xs">{{ $setting->instagram_feed_embed }}</textarea>
                </div>
            </div>
        </div>

        <!-- Security Settings -->
        <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden">
            <div class="px-10 py-8 border-b border-slate-50 bg-slate-50/50">
                <h3 class="text-sm font-black text-slate-800 uppercase tracking-widest">Security Settings</h3>
            </div>
            <div class="p-10 grid grid-cols-1 md:grid-cols-2 gap-10">
                <div class="space-y-4">
                    <label class="block text-xs font-black text-slate-800 uppercase tracking-widest">Max Login Attempts</label>
                    <input type="number" name="max_login_attempts" value="{{ $setting->max_login_attempts }}" class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all">
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Number of failed attempts allowed before blocking.</p>
                </div>
                <div class="space-y-4">
                    <label class="block text-xs font-black text-slate-800 uppercase tracking-widest">Lockout Time (Minutes)</label>
                    <input type="number" name="lockout_time" value="{{ $setting->lockout_time }}" class="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all">
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Duration to block login after exceeding max attempts.</p>
                </div>
            </div>
        </div>

        <!-- Action Button -->
        <div class="flex justify-end pt-4">
            <button type="submit" class="px-12 py-5 bg-indigo-600 text-white rounded-2xl font-black uppercase tracking-widest text-sm hover:bg-indigo-700 shadow-2xl shadow-indigo-100 transition-all transform hover:scale-105 flex items-center gap-3">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 00-2 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
                Save Settings
            </button>
        </div>
    </form>
</div>
@endsection