@extends('layouts.app')
@section('title', 'School Settings - Admin')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">School Branding & Settings</h1>
        <p class="text-gray-500 mt-1">Customize your school's identity across the portal — login page, sidebar, and reports.</p>
    </div>

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

        {{-- Logo Section --}}
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                <h2 class="font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-image text-primary-600"></i> School Logo
                </h2>
            </div>
            <div class="p-6">
                <div class="flex items-start gap-6" x-data="logoUpload()">
                    {{-- Current Logo Preview --}}
                    <div class="shrink-0">
                        <div class="w-32 h-32 rounded-xl border-2 border-dashed border-gray-200 flex items-center justify-center bg-gray-50 overflow-hidden"
                             id="logo-preview-container">
                            @if(!empty($settings['school_logo']))
                                <img src="{{ asset('storage/' . $settings['school_logo']) }}" 
                                     alt="Current Logo" class="w-full h-full object-contain p-2" id="logo-preview">
                            @else
                                <div class="text-center" id="logo-placeholder">
                                    <i class="fas fa-cloud-arrow-up text-2xl text-gray-300"></i>
                                    <p class="text-xs text-gray-400 mt-1">No logo</p>
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- Upload Controls --}}
                    <div class="flex-1 space-y-3">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Upload New Logo</label>
                            <input type="file" name="school_logo" accept="image/png,image/jpeg,image/svg+xml,image/webp"
                                   @change="previewLogo($event)"
                                   class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg 
                                          file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 
                                          hover:file:bg-primary-100 file:cursor-pointer cursor-pointer">
                        </div>
                        <p class="text-xs text-gray-400">Recommended: Square image, PNG or SVG, max 2MB. Displays on login page, sidebar, and reports.</p>
                        @if(!empty($settings['school_logo']))
                            <a href="{{ route('admin.settings.remove-logo') }}" 
                               onclick="return confirm('Remove the school logo?')"
                               class="inline-flex items-center gap-1.5 text-xs text-red-500 hover:text-red-700 font-medium">
                                <i class="fas fa-trash-can"></i> Remove current logo
                            </a>
                        @endif
                    </div>
                </div>
                @error('school_logo')
                    <p class="text-red-500 text-sm mt-2"><i class="fas fa-triangle-exclamation"></i> {{ $message }}</p>
                @enderror
            </div>
        </div>

        {{-- School Identity --}}
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                <h2 class="font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-school text-primary-600"></i> School Identity
                </h2>
            </div>
            <div class="p-6 space-y-5">
                {{-- School Name --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">School Name <span class="text-red-400">*</span></label>
                    <input type="text" name="school_name" 
                           value="{{ old('school_name', $settings['school_name'] ?? '') }}" required
                           placeholder="e.g. St. Mary's Higher Secondary School"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 outline-none transition">
                    @error('school_name')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Tagline --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Tagline / Motto</label>
                    <input type="text" name="school_tagline" 
                           value="{{ old('school_tagline', $settings['school_tagline'] ?? '') }}"
                           placeholder="e.g. Nurturing Minds, Building Futures"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 outline-none transition">
                    <p class="text-xs text-gray-400 mt-1">Shown on the login page below the school name.</p>
                </div>
            </div>
        </div>

        {{-- Contact Information --}}
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                <h2 class="font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-address-book text-primary-600"></i> Contact Information
                </h2>
            </div>
            <div class="p-6 space-y-5">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    {{-- Email --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">School Email</label>
                        <input type="email" name="school_email" 
                               value="{{ old('school_email', $settings['school_email'] ?? '') }}"
                               placeholder="info@school.com"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 outline-none transition">
                    </div>

                    {{-- Phone --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Phone Number</label>
                        <input type="text" name="school_phone" 
                               value="{{ old('school_phone', $settings['school_phone'] ?? '') }}"
                               placeholder="+91 XXXXX XXXXX"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 outline-none transition">
                    </div>
                </div>

                {{-- Address --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">School Address</label>
                    <textarea name="school_address" rows="2"
                              placeholder="Full school address..."
                              class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 outline-none transition resize-none">{{ old('school_address', $settings['school_address'] ?? '') }}</textarea>
                </div>
            </div>
        </div>

        {{-- Save --}}
        <div class="flex items-center justify-end gap-3 pt-2">
            <a href="{{ route('dashboard') }}" class="px-5 py-2.5 text-sm font-medium text-gray-600 hover:text-gray-800 transition">
                Cancel
            </a>
            <button type="submit" 
                    class="px-6 py-2.5 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 
                           focus:ring-4 focus:ring-primary-500/20 transition-all shadow-sm">
                <i class="fas fa-check mr-1.5"></i> Save Changes
            </button>
        </div>
    </form>

    {{-- Live Preview --}}
    <div class="mt-8 bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
            <h2 class="font-semibold text-gray-800 flex items-center gap-2">
                <i class="fas fa-eye text-primary-600"></i> Login Page Preview
            </h2>
            <p class="text-xs text-gray-400 mt-0.5">This is how your login page looks to users.</p>
        </div>
        <div class="p-6">
            <div class="rounded-xl overflow-hidden ring-1 ring-gray-200 shadow-sm" style="height: 320px;">
                <iframe src="{{ route('login') }}" class="w-full h-full border-0 pointer-events-none" loading="lazy"></iframe>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function logoUpload() {
    return {
        previewLogo(event) {
            const file = event.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            const container = document.getElementById('logo-preview-container');
            reader.onload = (e) => {
                container.innerHTML = `<img src="${e.target.result}" alt="Preview" class="w-full h-full object-contain p-2">`;
            };
            reader.readAsDataURL(file);
        }
    }
}
</script>
@endpush
@endsection