@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <div class="border-b border-slate-200 pb-8">
        <h2 class="text-4xl font-black text-slate-800 tracking-tight">College <span class="text-brand-primary">Management</span></h2>
        <p class="text-slate-500 mt-2 font-medium flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-brand-primary animate-pulse"></span>
            Configure core identity and visual brand orientation
        </p>
    </div>

    @if(session('success'))
    <div class="bg-green-50 border border-green-200 text-green-700 px-6 py-4 rounded-2xl flex items-center gap-3">
        <span class="material-icons-round">check_circle</span>
        <span>{{ session('success') }}</span>
    </div>
    @endif

    <div class="table-container bg-white/50 backdrop-blur-md">
        <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data" class="p-8 space-y-6">
            @csrf

            <!-- College Name -->
            <div>
                <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">
                    Institutional Designation <span class="text-rose-500">*</span>
                </label>
                <input type="text"
                       name="college_name"
                       value="{{ old('college_name', $collegeName) }}"
                       class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:border-brand-primary focus:ring-4 focus:ring-brand-primary/10 transition-all font-bold text-slate-700 placeholder:text-slate-300 shadow-sm"
                       placeholder="Enter formal college name"
                       required>
                @error('college_name')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- College Logo -->
            <div>
                <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-4">
                    Visual Identity (Logo)
                </label>

                @if($collegeLogo)
                <div class="mb-6 p-6 bg-slate-50/50 rounded-2xl border border-slate-200 flex items-center gap-6">
                    <div class="text-center">
                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-tighter mb-2">Active Asset</p>
                        <img src="{{ asset('storage/' . $collegeLogo) }}"
                             alt="College Logo"
                             class="h-24 w-24 object-contain rounded-2xl bg-white p-3 border border-slate-200 shadow-brand/10 shadow-xl">
                    </div>
                    <div class="flex-1">
                        <p class="text-xs font-bold text-slate-600">Institutional Seal</p>
                        <p class="text-[10px] text-slate-400 mt-1">This logo appears on headers, login pages, and official exports.</p>
                    </div>
                </div>
                @endif

                  <input type="file"
                      name="college_logo"
                      accept="image/jpeg,image/png,image/jpg,image/svg+xml,image/webp"
                       class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-600 hover:file:bg-indigo-100"
                       id="logo-input">
                <p class="text-xs text-slate-500 mt-2">Accepted formats: JPG, PNG, SVG (Max: 2MB)</p>
                @error('college_logo')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Dynamic Limits Section -->
            <div class="border-t border-slate-200 pt-8 mt-8">
                <h3 class="text-2xl font-black text-slate-800 mb-6 flex items-center gap-3">
                    <span class="material-icons-round text-brand-primary">tune</span>
                    <span>Dynamic System <span class="text-brand-primary">Limits</span></span>
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Faculty Limits -->
                    <div>
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">
                            Max Subjects Per Faculty <span class="text-rose-500">*</span>
                        </label>
                        <input type="number"
                               name="max_subjects_per_faculty"
                               value="{{ old('max_subjects_per_faculty', $maxSubjectsPerFaculty) }}"
                               min="1"
                               max="20"
                               class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:border-brand-primary focus:ring-4 focus:ring-brand-primary/10 transition-all font-bold text-slate-700 placeholder:text-slate-300 shadow-sm"
                               required>
                        <p class="text-xs text-slate-500 mt-2">Maximum subjects a faculty can select (1-20)</p>
                        @error('max_subjects_per_faculty')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">
                            Max Faculty Per Subject <span class="text-rose-500">*</span>
                        </label>
                        <input type="number"
                               name="max_faculty_per_subject"
                               value="{{ old('max_faculty_per_subject', $maxFacultyPerSubject) }}"
                               min="1"
                               max="20"
                               class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:border-brand-primary focus:ring-4 focus:ring-brand-primary/10 transition-all font-bold text-slate-700 placeholder:text-slate-300 shadow-sm"
                               required>
                        <p class="text-xs text-slate-500 mt-2">Maximum faculty that can teach one subject (1-20)</p>
                        @error('max_faculty_per_subject')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Subject Credits -->
                    <div>
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">
                            Default Subject Credits <span class="text-rose-500">*</span>
                        </label>
                        <input type="number"
                               name="default_subject_credits"
                               value="{{ old('default_subject_credits', $defaultSubjectCredits) }}"
                               min="1"
                               max="10"
                               class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:border-brand-primary focus:ring-4 focus:ring-brand-primary/10 transition-all font-bold text-slate-700 placeholder:text-slate-300 shadow-sm"
                               required>
                        <p class="text-xs text-slate-500 mt-2">Default credits for new subjects (1-10)</p>
                        @error('default_subject_credits')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">
                            Students Per Subject <span class="text-rose-500">*</span>
                        </label>
                        <input type="number"
                               name="default_students_per_subject"
                               value="{{ old('default_students_per_subject', $defaultStudentsPerSubject) }}"
                               min="1"
                               max="500"
                               class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:border-brand-primary focus:ring-4 focus:ring-brand-primary/10 transition-all font-bold text-slate-700 placeholder:text-slate-300 shadow-sm"
                               required>
                        <p class="text-xs text-slate-500 mt-2">Maximum students per subject (1-500)</p>
                        @error('default_students_per_subject')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">
                            Students Per Faculty-Subject <span class="text-rose-500">*</span>
                        </label>
                        <input type="number"
                               name="default_students_per_faculty_subject"
                               value="{{ old('default_students_per_faculty_subject', $defaultStudentsPerFacultySubject) }}"
                               min="1"
                               max="500"
                               class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:border-brand-primary focus:ring-4 focus:ring-brand-primary/10 transition-all font-bold text-slate-700 placeholder:text-slate-300 shadow-sm"
                               required>
                        <p class="text-xs text-slate-500 mt-2">Maximum students per faculty per subject (1-500)</p>
                        @error('default_students_per_faculty_subject')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Student Credit Limits -->
                    <div>
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">
                            Total Student Credit Limit <span class="text-rose-500">*</span>
                        </label>
                        <input type="number"
                               name="default_student_total_credits"
                               value="{{ old('default_student_total_credits', $defaultStudentTotalCredits) }}"
                               min="1"
                               max="500"
                               class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:border-brand-primary focus:ring-4 focus:ring-brand-primary/10 transition-all font-bold text-slate-700 placeholder:text-slate-300 shadow-sm"
                               required>
                        <p class="text-xs text-slate-500 mt-2">Total credits a student can earn (1-500)</p>
                        @error('default_student_total_credits')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">
                            Semester Credit Min <span class="text-rose-500">*</span>
                        </label>
                        <input type="number"
                               name="default_semester_credit_min"
                               value="{{ old('default_semester_credit_min', $defaultSemesterCreditMin) }}"
                               min="1"
                               class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:border-brand-primary focus:ring-4 focus:ring-brand-primary/10 transition-all font-bold text-slate-700 placeholder:text-slate-300 shadow-sm"
                               required>
                        <p class="text-xs text-slate-500 mt-2">Minimum credits per semester</p>
                        @error('default_semester_credit_min')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">
                            Semester Credit Max <span class="text-rose-500">*</span>
                        </label>
                        <input type="number"
                               name="default_semester_credit_max"
                               value="{{ old('default_semester_credit_max', $defaultSemesterCreditMax) }}"
                               min="1"
                               class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:border-brand-primary focus:ring-4 focus:ring-brand-primary/10 transition-all font-bold text-slate-700 placeholder:text-slate-300 shadow-sm"
                               required>
                        <p class="text-xs text-slate-500 mt-2">Maximum credits per semester</p>
                        @error('default_semester_credit_max')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end pt-8 border-t border-slate-100">
                <button type="submit" class="btn-primary flex items-center gap-3 px-8 py-4 shadow-brand shadow-xl hover:shadow-brand/20">
                    <span class="material-icons-round text-lg">verified</span>
                    <span class="font-black text-sm uppercase tracking-wider">Sync Specifications</span>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // Image preview
    document.getElementById('logo-input').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview-image').src = e.target.result;
                document.getElementById('logo-preview').classList.remove('hidden');
            }
            reader.readAsDataURL(file);
        }
    });

    // Color hex sync
    const primaryInput = document.querySelector('input[name="theme_primary_color"]');
    const secondaryInput = document.querySelector('input[name="theme_secondary_color"]');
    const primaryHex = document.getElementById('primary_hex');
    const secondaryHex = document.getElementById('secondary_hex');

    primaryInput.addEventListener('input', (e) => primaryHex.value = e.target.value);
    secondaryInput.addEventListener('input', (e) => secondaryHex.value = e.target.value);
</script>
@endsection