@extends('layouts.admin')
@section('title', 'Pengaturan Sistem')
@section('header', 'Pengaturan')

@section('content')
<style>
    /* ── Settings page styles ── */
    .settings-card {
        background: white;
        border: 1px solid #eef0f3;
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 20px;
    }
    .settings-card-header {
        padding: 16px 20px;
        border-bottom: 1px solid #f3f4f6;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .settings-card-header .card-icon {
        width: 32px; height: 32px;
        border-radius: 9px;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
    }
    .settings-card-body { padding: 20px; }

    .form-group { margin-bottom: 18px; }
    .form-group:last-child { margin-bottom: 0; }

    .form-label {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
    }
    .form-hint {
        font-size: 11.5px;
        color: #9ca3af;
        margin-top: 4px;
    }

    .form-input {
        width: 100%;
        padding: 9px 13px;
        border: 1.5px solid #e5e7eb;
        border-radius: 10px;
        font-size: 13.5px;
        color: #111827;
        font-family: 'Plus Jakarta Sans', sans-serif;
        transition: border-color .15s, box-shadow .15s;
        outline: none;
        background: white;
    }
    .form-input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,.1);
    }
    .form-input::placeholder { color: #d1d5db; }

    textarea.form-input { resize: vertical; min-height: 80px; line-height: 1.6; }

    /* Toggle switch */
    .toggle-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 0;
        border-bottom: 1px solid #f3f4f6;
    }
    .toggle-row:last-child { border-bottom: none; padding-bottom: 0; }
    .toggle-row:first-child { padding-top: 0; }

    .toggle-label { font-size: 13.5px; font-weight: 500; color: #111827; }
    .toggle-desc  { font-size: 12px; color: #9ca3af; margin-top: 2px; }

    .toggle {
        position: relative;
        width: 40px;
        height: 22px;
        flex-shrink: 0;
        margin-top: 1px;
    }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
        position: absolute;
        inset: 0;
        background: #e5e7eb;
        border-radius: 99px;
        cursor: pointer;
        transition: background .2s;
    }
    .toggle-slider:before {
        content: '';
        position: absolute;
        width: 16px; height: 16px;
        left: 3px; top: 3px;
        background: white;
        border-radius: 50%;
        transition: transform .2s;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    .toggle input:checked + .toggle-slider { background: #3b82f6; }
    .toggle input:checked + .toggle-slider:before { transform: translateX(18px); }

    /* Logo upload area */
    .logo-upload-area {
        border: 2px dashed #e5e7eb;
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        cursor: pointer;
        transition: border-color .2s, background .2s;
        position: relative;
    }
    .logo-upload-area:hover {
        border-color: #3b82f6;
        background: #f8faff;
    }
    .logo-upload-area input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }
    .logo-preview {
        width: 72px; height: 72px;
        border-radius: 14px;
        object-fit: contain;
        border: 1px solid #e5e7eb;
        background: #f9fafb;
        padding: 4px;
        display: block;
        margin: 0 auto 12px;
    }

    /* Save button */
    .btn-save {
        background: #1d4ed8;
        color: white;
        font-size: 13.5px;
        font-weight: 600;
        padding: 10px 22px;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background .15s, transform .1s;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .btn-save:hover { background: #1e40af; }
    .btn-save:active { transform: scale(.99); }

    .btn-secondary {
        background: white;
        color: #374151;
        font-size: 13.5px;
        font-weight: 500;
        padding: 10px 18px;
        border-radius: 10px;
        border: 1.5px solid #e5e7eb;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background .15s, border-color .15s;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .btn-secondary:hover { background: #f9fafb; border-color: #d1d5db; }

    /* Tab nav */
    .tab-nav {
        display: flex;
        gap: 2px;
        background: #f3f4f6;
        border-radius: 11px;
        padding: 4px;
        margin-bottom: 20px;
    }
    .tab-btn {
        flex: 1;
        padding: 8px 14px;
        border-radius: 8px;
        border: none;
        background: transparent;
        font-size: 13px;
        font-weight: 500;
        color: #6b7280;
        cursor: pointer;
        transition: all .15s;
        font-family: 'Plus Jakarta Sans', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .tab-btn.active {
        background: white;
        color: #111827;
        box-shadow: 0 1px 3px rgba(0,0,0,.08);
    }

    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* Grid layout */
    .form-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    @media (max-width: 640px) {
        .form-grid-2 { grid-template-columns: 1fr; }
    }

    /* Status badge di header */
    .status-badge {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 99px;
    }
</style>

{{-- Page Header --}}
<div class="flex items-center justify-between mb-5">
    <div>
        <h1 class="text-lg font-bold text-gray-900">Pengaturan Sistem</h1>
        <p class="text-xs text-gray-400 mt-0.5">Kelola konfigurasi platform LMS</p>
    </div>
    <span class="status-badge" style="background:#f0fdf4;color:#15803d;">
        <i class="fa fa-circle" style="font-size:7px;margin-right:4px"></i> Sistem Aktif
    </span>
</div>

{{-- Tab Navigation --}}
<div class="tab-nav">
    <button class="tab-btn active" onclick="switchTab('umum', this)">
        <i class="fa fa-school" style="font-size:12px"></i> Umum
    </button>
    <button class="tab-btn" onclick="switchTab('tampilan', this)">
        <i class="fa fa-palette" style="font-size:12px"></i> Tampilan
    </button>
    <button class="tab-btn" onclick="switchTab('sistem', this)">
        <i class="fa fa-cog" style="font-size:12px"></i> Sistem
    </button>
</div>

{{-- ═══ TAB: UMUM ═══ --}}
<div id="tab-umum" class="tab-panel active">
    <form method="POST" action="{{ route('admin.settings.update') }}">
        @csrf

        {{-- Identitas Sekolah --}}
        <div class="settings-card">
            <div class="settings-card-header">
                <div class="card-icon" style="background:#eff6ff;color:#3b82f6;">
                    <i class="fa fa-school"></i>
                </div>
                <div>
                    <p class="text-sm font-semibold text-gray-800">Identitas Sekolah</p>
                    <p class="text-xs text-gray-400">Informasi dasar sekolah yang ditampilkan di platform</p>
                </div>
            </div>
            <div class="settings-card-body">
                <div class="form-group">
                    <label class="form-label">Nama Sekolah <span class="text-red-500">*</span></label>
                    <input type="text" name="school_name" class="form-input"
                           value="{{ old('school_name', $settings['school_name']) }}"
                           placeholder="contoh: SMK Muhammadiyah 1 Bantul" required>
                </div>

                <div class="form-group">
                    <label class="form-label">Tagline / Motto</label>
                    <input type="text" name="school_tagline" class="form-input"
                           value="{{ old('school_tagline', $settings['school_tagline']) }}"
                           placeholder="contoh: Belajar Untuk Menggapai Impian">
                    <p class="form-hint">Ditampilkan di halaman beranda publik</p>
                </div>

                <div class="form-grid-2">
                    <div class="form-group">
                        <label class="form-label">Email Sekolah</label>
                        <input type="email" name="school_email" class="form-input"
                               value="{{ old('school_email', $settings['school_email']) }}"
                               placeholder="info@smkmuh1bantul.sch.id">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Nomor Telepon</label>
                        <input type="text" name="school_phone" class="form-input"
                               value="{{ old('school_phone', $settings['school_phone']) }}"
                               placeholder="0274-xxxxxx">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Alamat Sekolah</label>
                    <textarea name="school_address" class="form-input"
                              placeholder="Jl. Contoh No. 1, Bantul, Yogyakarta">{{ old('school_address', $settings['school_address']) }}</textarea>
                </div>
            </div>
        </div>

        {{-- Enrollment --}}
        <div class="settings-card">
            <div class="settings-card-header">
                <div class="card-icon" style="background:#f0fdf4;color:#22c55e;">
                    <i class="fa fa-users"></i>
                </div>
                <div>
                    <p class="text-sm font-semibold text-gray-800">Pendaftaran Siswa</p>
                    <p class="text-xs text-gray-400">Atur batas maksimum dan kebijakan enrollment</p>
                </div>
            </div>
            <div class="settings-card-body">
                <div class="form-group" style="max-width:200px">
                    <label class="form-label">Maks. Siswa per Kursus</label>
                    <input type="number" name="max_enrollments" class="form-input"
                           value="{{ old('max_enrollments', $settings['max_enrollments']) }}"
                           min="1" max="999" placeholder="30">
                    <p class="form-hint">0 = tidak dibatasi</p>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <button type="submit" class="btn-save">
                <i class="fa fa-check" style="font-size:12px"></i>
                Simpan Perubahan
            </button>
            <button type="reset" class="btn-secondary">
                <i class="fa fa-rotate-left" style="font-size:12px"></i>
                Reset
            </button>
        </div>
    </form>
</div>

{{-- ═══ TAB: TAMPILAN ═══ --}}
<div id="tab-tampilan" class="tab-panel">

    {{-- Upload Logo --}}
    <div class="settings-card">
        <div class="settings-card-header">
            <div class="card-icon" style="background:#faf5ff;color:#a855f7;">
                <i class="fa fa-image"></i>
            </div>
            <div>
                <p class="text-sm font-semibold text-gray-800">Logo Sekolah</p>
                <p class="text-xs text-gray-400">Format PNG/JPG/SVG, maksimum 2MB</p>
            </div>
        </div>
        <div class="settings-card-body">
            <form method="POST" action="{{ route('admin.settings.logo') }}" enctype="multipart/form-data">
                @csrf
                <div class="logo-upload-area" id="logoArea">
                    <input type="file" name="logo" accept="image/*" onchange="previewLogo(this)">
                    @if(!empty($settings['logo_path']))
                        <img src="{{ Storage::url($settings['logo_path']) }}"
                             class="logo-preview" id="logoPreview" alt="Logo">
                    @else
                        <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600
                                    flex items-center justify-center mx-auto mb-3" id="logoPlaceholder">
                            <span class="text-white font-bold text-lg">LMS</span>
                        </div>
                        <img id="logoPreview" class="logo-preview hidden" alt="Logo Preview">
                    @endif
                    <p class="text-sm font-medium text-gray-600" id="logoText">Klik atau drag untuk upload logo</p>
                    <p class="text-xs text-gray-400 mt-1">PNG, JPG, SVG hingga 2MB</p>
                </div>

                <div class="flex items-center gap-3 mt-4">
                    <button type="submit" class="btn-save">
                        <i class="fa fa-upload" style="font-size:12px"></i>
                        Upload Logo
                    </button>
                    @if(!empty($settings['logo_path']))
                    <span class="text-xs text-green-600">
                        <i class="fa fa-check-circle mr-1"></i>Logo terpasang
                    </span>
                    @endif
                </div>
            </form>
        </div>
    </div>

    {{-- Info warna (static, bisa dikembangkan) --}}
    <div class="settings-card">
        <div class="settings-card-header">
            <div class="card-icon" style="background:#fff7ed;color:#f59e0b;">
                <i class="fa fa-palette"></i>
            </div>
            <div>
                <p class="text-sm font-semibold text-gray-800">Tema Warna</p>
                <p class="text-xs text-gray-400">Pilih skema warna utama platform</p>
            </div>
        </div>
        <div class="settings-card-body">
            <div style="display:flex;gap:10px;flex-wrap:wrap">
                @foreach([
                    ['name'=>'Biru',   'color'=>'#3b82f6', 'active'=>true],
                    ['name'=>'Indigo', 'color'=>'#6366f1', 'active'=>false],
                    ['name'=>'Hijau',  'color'=>'#22c55e', 'active'=>false],
                    ['name'=>'Ungu',   'color'=>'#a855f7', 'active'=>false],
                ] as $theme)
                <button type="button"
                        style="display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;
                               border:{{ $theme['active'] ? '2px solid #3b82f6' : '1.5px solid #e5e7eb' }};
                               background:{{ $theme['active'] ? '#eff6ff' : 'white' }};
                               cursor:pointer;font-size:13px;font-family:inherit;color:#374151;
                               transition:all .15s;"
                        onclick="selectTheme(this)">
                    <span style="width:16px;height:16px;border-radius:50%;background:{{ $theme['color'] }};display:inline-block;"></span>
                    {{ $theme['name'] }}
                </button>
                @endforeach
            </div>
            <p class="form-hint mt-3">
                <i class="fa fa-info-circle mr-1 text-blue-400"></i>
                Pengaturan tema warna akan segera tersedia di versi berikutnya.
            </p>
        </div>
    </div>
</div>

{{-- ═══ TAB: SISTEM ═══ --}}
<div id="tab-sistem" class="tab-panel">
    <form method="POST" action="{{ route('admin.settings.update') }}">
        @csrf

        <div class="settings-card">
            <div class="settings-card-header">
                <div class="card-icon" style="background:#fff1f2;color:#ef4444;">
                    <i class="fa fa-shield-alt"></i>
                </div>
                <div>
                    <p class="text-sm font-semibold text-gray-800">Mode & Akses Sistem</p>
                    <p class="text-xs text-gray-400">Kontrol akses dan ketersediaan platform</p>
                </div>
            </div>
            <div class="settings-card-body">

                <div class="toggle-row">
                    <div>
                        <p class="toggle-label">Mode Pemeliharaan</p>
                        <p class="toggle-desc">Saat aktif, hanya admin yang bisa mengakses platform</p>
                    </div>
                    <label class="toggle">
                        <input type="checkbox" name="maintenance_mode" value="1"
                               {{ $settings['maintenance_mode'] ? 'checked' : '' }}
                               onchange="this.form.submit()">
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <div class="toggle-row">
                    <div>
                        <p class="toggle-label">Izinkan Pendaftaran</p>
                        <p class="toggle-desc">Siswa dapat mendaftarkan diri ke kursus secara mandiri</p>
                    </div>
                    <label class="toggle">
                        <input type="checkbox" name="allow_registration" value="1"
                               {{ $settings['allow_registration'] ? 'checked' : '' }}
                               onchange="this.form.submit()">
                        <span class="toggle-slider"></span>
                    </label>
                </div>

            </div>
        </div>

        {{-- Info sistem --}}
        <div class="settings-card">
            <div class="settings-card-header">
                <div class="card-icon" style="background:#f5f6fa;color:#6b7280;">
                    <i class="fa fa-info-circle"></i>
                </div>
                <div>
                    <p class="text-sm font-semibold text-gray-800">Informasi Sistem</p>
                    <p class="text-xs text-gray-400">Versi dan environment platform saat ini</p>
                </div>
            </div>
            <div class="settings-card-body">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
                    @foreach([
                        ['label' => 'Versi Laravel',  'value' => app()->version()],
                        ['label' => 'Versi PHP',       'value' => PHP_VERSION],
                        ['label' => 'Environment',     'value' => app()->environment()],
                        ['label' => 'Debug Mode',      'value' => config('app.debug') ? 'Aktif' : 'Nonaktif'],
                    ] as $info)
                    <div style="background:#f9fafb;border-radius:10px;padding:12px 14px;border:1px solid #f3f4f6;">
                        <p style="font-size:11px;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.06em;">
                            {{ $info['label'] }}
                        </p>
                        <p style="font-size:14px;font-weight:600;color:#111827;margin-top:3px;">
                            {{ $info['value'] }}
                        </p>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

    </form>
</div>

@endsection

@push('scripts')
<script>
// Tab switching
function switchTab(name, btn) {
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.getElementById('tab-' + name).classList.add('active');
    btn.classList.add('active');
}

// Logo preview sebelum upload
function previewLogo(input) {
    if (!input.files || !input.files[0]) return;
    const reader = new FileReader();
    reader.onload = e => {
        const preview = document.getElementById('logoPreview');
        const placeholder = document.getElementById('logoPlaceholder');
        const text = document.getElementById('logoText');
        preview.src = e.target.result;
        preview.classList.remove('hidden');
        if (placeholder) placeholder.classList.add('hidden');
        if (text) text.textContent = input.files[0].name;
    };
    reader.readAsDataURL(input.files[0]);
}

// Drag & drop logo
const logoArea = document.getElementById('logoArea');
if (logoArea) {
    logoArea.addEventListener('dragover', e => { e.preventDefault(); logoArea.style.borderColor = '#3b82f6'; });
    logoArea.addEventListener('dragleave', () => { logoArea.style.borderColor = '#e5e7eb'; });
    logoArea.addEventListener('drop', e => {
        e.preventDefault();
        logoArea.style.borderColor = '#e5e7eb';
        const file = e.dataTransfer.files[0];
        if (file) {
            const input = logoArea.querySelector('input[type="file"]');
            const dt = new DataTransfer();
            dt.items.add(file);
            input.files = dt.files;
            previewLogo(input);
        }
    });
}
</script>
@endpush