@extends('layouts.cbt')
@section('page-title', 'Pengaturan Sistem')
@section('sidebar')@include('components.admin-sidebar')@endsection
@section('content')
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6 max-w-6xl">
    <div class="card-sdn">
        <h2 class="text-lg font-bold mb-4">Informasi Sekolah</h2>
        <form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data" class="space-y-4" id="settings-form">
            @csrf @method('PUT')
            <div><label class="form-label">Nama Sekolah</label><input name="school_name" class="form-input" value="{{ old('school_name', $settings['school_name']) }}" required></div>
            <div><label class="form-label">Alamat</label><input name="school_address" class="form-input" value="{{ old('school_address', $settings['school_address']) }}"></div>
            <div class="grid grid-cols-2 gap-4">
                <div><label class="form-label">Akreditasi</label><input name="school_accreditation" class="form-input" value="{{ old('school_accreditation', $settings['school_accreditation']) }}"></div>
                <div><label class="form-label">Tahun Berdiri</label><input name="school_established" class="form-input" value="{{ old('school_established', $settings['school_established']) }}"></div>
            </div>
            <div><label class="form-label">KKM Default</label><input name="default_kkm" type="number" class="form-input" value="{{ old('default_kkm', $settings['default_kkm']) }}"></div>
            <div><label class="flex gap-2 items-center"><input type="checkbox" name="maintenance_mode" value="1" @checked(old('maintenance_mode', $settings['maintenance_mode'])=='1')> Mode Maintenance</label></div>

            <hr class="border-gray-200 my-6">
            <h2 class="text-lg font-bold mb-2">Tampilan & Branding</h2>
            <p class="text-sm text-gray-500 mb-4">Kustomisasi warna dan logo untuk seluruh sistem (beranda, login, dashboard).</p>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                @foreach([
                    'brand_color_primary' => 'Warna Utama',
                    'brand_color_secondary' => 'Warna Sekunder',
                    'brand_color_accent' => 'Warna Aksen',
                ] as $field => $label)
                <div>
                    <label class="form-label">{{ $label }}</label>
                    <div class="flex gap-2 items-center">
                        <input type="color" class="w-12 h-10 rounded-lg border border-gray-200 cursor-pointer color-picker"
                            data-target="{{ $field }}" value="{{ old($field, $settings[$field]) }}">
                        <input type="text" name="{{ $field }}" id="{{ $field }}" class="form-input font-mono text-sm hex-input"
                            value="{{ old($field, $settings[$field]) }}" pattern="^#[0-9A-Fa-f]{6}$" maxlength="7">
                    </div>
                </div>
                @endforeach
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="form-label">Teks logo (jika tanpa gambar)</label>
                    <input name="brand_logo_text" class="form-input" maxlength="8" value="{{ old('brand_logo_text', $settings['brand_logo_text']) }}" placeholder="08">
                </div>
                <div>
                    <label class="form-label">Tagline sidebar</label>
                    <input name="brand_tagline" class="form-input" value="{{ old('brand_tagline', $settings['brand_tagline']) }}" placeholder="CBT System">
                </div>
            </div>

            <div>
                <label class="form-label">Upload logo (PNG/JPG/WebP, max 2 MB)</label>
                @if($branding['logo_url'])
                <div class="flex items-center gap-4 mb-3 p-3 bg-gray-50 rounded-xl">
                    <img src="{{ $branding['logo_url'] }}" alt="Logo saat ini" class="h-14 w-14 object-contain rounded-lg bg-white border">
                    <p class="text-sm text-gray-600">Logo custom aktif</p>
                </div>
                @endif
                <input type="file" name="brand_logo" accept="image/jpeg,image/png,image/webp" class="form-input">
            </div>

            <div class="flex flex-wrap gap-2 pt-2">
                <button type="submit" class="btn-sdn-primary">Simpan Pengaturan</button>
            </div>
        </form>

        <div class="flex flex-wrap gap-2 mt-4 pt-4 border-t">
            <form method="POST" action="{{ route('admin.settings.update') }}" class="inline">
                @csrf @method('PUT')
                <input type="hidden" name="reset_brand_colors" value="1">
                <button type="submit" class="btn-sdn-secondary text-sm" onclick="return confirm('Kembalikan warna ke default?')">Reset Warna Default</button>
            </form>
            @if($branding['logo_url'])
            <form method="POST" action="{{ route('admin.settings.update') }}" class="inline">
                @csrf @method('PUT')
                <input type="hidden" name="remove_brand_logo" value="1">
                <button type="submit" class="btn-sdn-danger text-sm py-2 px-4" onclick="return confirm('Hapus logo custom?')">Hapus Logo</button>
            </form>
            @endif
        </div>
    </div>

    <div class="card-sdn">
        <h2 class="text-lg font-bold mb-4">Pratinjau Branding</h2>
        <div class="rounded-2xl overflow-hidden border border-gray-100 shadow-sm">
            <div class="p-6 bg-sdn-gradient text-white">
                <div class="flex items-center gap-3 mb-4">
                    <x-brand-logo size="md" />
                    <div>
                        <p class="font-extrabold text-sm">{{ $settings['school_name'] ?: 'Nama Sekolah' }}</p>
                        <p class="text-xs opacity-90">{{ $settings['brand_tagline'] }}</p>
                    </div>
                </div>
                <button type="button" class="btn-sdn-primary text-sm">Tombol Contoh</button>
            </div>
            <div class="p-4 bg-white space-y-2">
                <p class="text-xs text-gray-500">Sidebar link aktif</p>
                <div class="sidebar-link active">Menu Contoh</div>
                <p class="text-xs text-gray-500 mt-3">Badge warna</p>
                <span class="text-sm font-bold" style="color: var(--sdn-red)">Teks merah brand</span>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-4">Perubahan warna langsung terlihat di pratinjau setelah disimpan. Logo baru muncul setelah upload.</p>
    </div>
</div>

@push('scripts')
<script>
document.querySelectorAll('.color-picker').forEach(picker => {
    const hex = document.getElementById(picker.dataset.target);
    if (!hex) return;
    picker.addEventListener('input', () => { hex.value = picker.value.toUpperCase(); });
    hex.addEventListener('input', () => {
        if (/^#[0-9A-Fa-f]{6}$/.test(hex.value)) picker.value = hex.value;
    });
});
</script>
@endpush
@endsection