@extends('adminlte::page')

@section('title', 'Pengaturan SPMB | Smart Cendekia')

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pt-4 pb-3 px-3">
        <div>
            <h1 class="font-weight-bolder text-dark mb-1" style="font-family: 'Inter', sans-serif; font-size: 1.8rem; letter-spacing: -0.5px;">
                <i class="fas fa-sliders-h text-primary mr-2"></i> Konfigurasi SPMB
            </h1>
            <p class="text-muted font-weight-500 mb-0" style="font-size: 0.95rem;">
                Pusat kendali visual, copywriting, kontak CS, dan operasional pendaftaran.
            </p>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid px-3 pb-5">

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show modern-alert shadow-sm border-0 mb-4" role="alert">
            <div class="d-flex align-items-center">
                <div class="alert-icon bg-white text-success rounded-circle d-flex align-items-center justify-content-center mr-3 shadow-sm">
                    <i class="fas fa-check"></i>
                </div>
                <strong class="text-white" style="font-size: 0.95rem;">{{ session('success') }}</strong>
            </div>
            <button type="button" class="close text-white" data-dismiss="alert" aria-label="Close" style="padding-top: 13px;">
                <span aria-hidden="true">×</span>
            </button>
        </div>
    @endif

    <form action="{{ route('admin.spmb.settings.update') }}" method="POST" enctype="multipart/form-data" id="spmbSettingForm">
        @csrf
        <div class="row">
            
            {{-- KOLOM KIRI: TEKS, LOKASI, UNIT & JALUR --}}
            <div class="col-lg-8 mb-4">
                
                {{-- 1. KONTEN COPYWRITING --}}
                <div class="card modern-card mb-4">
                    <div class="card-header modern-card-header">
                        <h5 class="font-weight-bold text-dark mb-0 d-flex align-items-center">
                            <span class="icon-square bg-primary-light text-primary mr-3"><i class="fas fa-heading"></i></span>
                            Konten Copywriting Hero
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="form-group mb-4">
                            <label class="modern-label">Judul Utama Pendaftaran</label>
                            <input type="text" name="spmb_title" class="form-control modern-input" 
                                   value="{{ $settings['spmb_title'] ?? 'Mulai Perjalanan [accent]Terbaik[/accent] Mereka' }}"
                                   placeholder="Contoh: Pendaftaran Santri Baru 2026">
                            <small class="text-muted mt-2 d-block"><i class="fas fa-magic text-warning mr-1"></i> Format <code>[accent]kata[/accent]</code> untuk memberi efek warna emas pada teks.</small>
                        </div>
                        <div class="form-group mb-0">
                            <label class="modern-label">Sub-Judul (Deskripsi Singkat)</label>
                            <textarea name="spmb_subtitle" class="form-control modern-input" rows="3" placeholder="Deskripsi singkat portal pendaftaran...">{{ $settings['spmb_subtitle'] ?? 'Bergabunglah bersama keluarga besar Smart School Cendekia. Proses pendaftaran digital yang mudah, transparan, dan modern.' }}</textarea>
                        </div>
                    </div>
                </div>

                {{-- 2. INFORMASI KONTAK PUSAT --}}
                <div class="card modern-card mb-4">
                    <div class="card-header modern-card-header">
                        <h5 class="font-weight-bold text-dark mb-0 d-flex align-items-center">
                            <span class="icon-square bg-info-light text-info mr-3"><i class="fas fa-map-marked-alt"></i></span>
                            Informasi Kontak & Lokasi Panitia
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="row">
                            <div class="col-md-12 form-group mb-4">
                                <label class="modern-label">Alamat Lengkap</label>
                                <textarea name="spmb_alamat" class="form-control modern-input" rows="2" placeholder="Cth: Jl. HM. Yasin Limpo No. 42, Gowa">{{ $settings['spmb_alamat'] ?? '' }}</textarea>
                            </div>
                            
                            {{-- WA PUSAT --}}
                            <div class="col-md-6 form-group mb-4">
                                <label class="modern-label">No. WhatsApp Pusat (Admin)</label>
                                <div class="input-group modern-input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light text-success"><i class="fab fa-whatsapp fa-lg"></i></span>
                                    </div>
                                    <input type="number" name="spmb_wa_pusat" class="form-control border-left-0" value="{{ $settings['spmb_wa_pusat'] ?? '6281234567890' }}" placeholder="Awali dengan 62...">
                                </div>
                            </div>

                            <div class="col-md-6 form-group mb-4">
                                <label class="modern-label">Jam Layanan Operasional</label>
                                <input type="text" name="spmb_jam_layanan" class="form-control modern-input" value="{{ $settings['spmb_jam_layanan'] ?? '' }}" placeholder="Cth: Senin - Sabtu: 08.00 - 15.00 WITA">
                            </div>

                            <div class="col-md-12 form-group mb-4">
                                <label class="modern-label">Link Google Maps (URL)</label>
                                <input type="url" name="spmb_link_maps" class="form-control modern-input" value="{{ $settings['spmb_link_maps'] ?? '' }}" placeholder="http://googleusercontent.com/maps.google.com/...">
                            </div>
                            <div class="col-md-12 form-group mb-0">
                                <label class="modern-label">Embed Peta (Iframe HTML)</label>
                                <textarea name="spmb_iframe_maps" class="form-control modern-input text-monospace" rows="3" placeholder='<iframe src="..." width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>'>{{ $settings['spmb_iframe_maps'] ?? '' }}</textarea>
                                <small class="text-muted mt-2 d-block"><i class="fas fa-info-circle text-info mr-1"></i> Dapatkan dari Google Maps Desktop -> Bagikan -> Sematkan Peta -> Salin HTML.</small>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 3. MANAJEMEN UNIT PENDIDIKAN --}}
                @php $sekolahs = \App\Models\Sekolah::all(); @endphp
                @if($sekolahs->count() > 0)
                <div class="card modern-card mb-4">
                    <div class="card-header modern-card-header">
                        <h5 class="font-weight-bold text-dark mb-0 d-flex align-items-center">
                            <span class="icon-square bg-purple-light text-purple mr-3"><i class="fas fa-layer-group"></i></span>
                            Pengaturan Per Unit Pendidikan
                        </h5>
                    </div>
                    <div class="card-body p-4 bg-light">
                        <p class="text-muted small mb-4 font-weight-500">Sesuaikan brosur, nomor CS, dan deskripsi promosi untuk masing-masing jenjang yang akan tampil di Beranda.</p>
                        
                        <div class="row">
                            @foreach($sekolahs as $sek)
                                @php 
                                    $bKey = 'brosur_sekolah_' . $sek->id;
                                    $dKey = 'deskripsi_sekolah_' . $sek->id;
                                    $wKey = 'wa_sekolah_' . $sek->id;

                                    $bPath = $settings[$bKey] ?? '';
                                    $bExists = !empty($bPath) && file_exists(public_path($bPath));
                                    $bImg = $bExists ? asset($bPath) : 'https://placehold.co/600x400/E2E8F0/64748B?text=Brosur+'.urlencode($sek->nama_sekolah);
                                    
                                    $descVal = $settings[$dKey] ?? $sek->deskripsi ?? '';
                                    $waVal = $settings[$wKey] ?? $sek->no_telp ?? '';
                                @endphp
                                
                                <div class="col-12 mb-4">
                                    <div class="bg-white rounded-xl border p-4 shadow-sm unit-card transition-all">
                                        <div class="d-flex align-items-center mb-4 border-bottom pb-3">
                                            <div class="bg-primary-light text-primary rounded-circle d-flex align-items-center justify-content-center mr-3" style="width: 40px; height: 40px;">
                                                <i class="fas fa-university"></i>
                                            </div>
                                            <div>
                                                <h6 class="font-weight-bolder text-dark mb-0" style="font-size: 1.1rem;">{{ $sek->nama_sekolah }}</h6>
                                                <span class="badge badge-light border text-muted mt-1">{{ strtoupper($sek->jenjang) }}</span>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            {{-- Input Brosur --}}
                                            <div class="col-md-4 mb-4 mb-md-0 border-right-md">
                                                <label class="modern-label text-xs">Gambar Brosur Kartu</label>
                                                <div class="d-flex flex-column align-items-center mt-2">
                                                    <div class="img-preview-wrapper mb-3">
                                                        <img src="{{ $bImg }}" class="img-fluid rounded" alt="Preview Brosur">
                                                    </div>
                                                    <div class="custom-file modern-file-input w-100">
                                                        <input type="file" name="{{ $bKey }}" class="custom-file-input" id="brosur_{{ $sek->id }}" accept="image/png, image/jpeg, image/jpg" onchange="handleImagePreview(this, true)">
                                                        <label class="custom-file-label text-center text-muted" for="brosur_{{ $sek->id }}">Ganti Gambar</label>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            {{-- Input WA & Deskripsi --}}
                                            <div class="col-md-8 pl-md-4">
                                                <div class="form-group mb-4">
                                                    <label class="modern-label text-xs">No. WhatsApp Info Pendaftaran</label>
                                                    <div class="input-group modern-input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text bg-light text-success"><i class="fab fa-whatsapp fa-lg"></i></span>
                                                        </div>
                                                        <input type="number" name="{{ $wKey }}" class="form-control border-left-0" value="{{ $waVal }}" placeholder="Format: 62812345...">
                                                    </div>
                                                </div>
                                                <div class="form-group mb-0">
                                                    <label class="modern-label text-xs">Deskripsi Keunggulan Unit (Maks 3 Baris)</label>
                                                    <textarea name="{{ $dKey }}" class="form-control modern-input" rows="3" placeholder="Tuliskan teks promosi singkat...">{{ $descVal }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif

                {{-- 4. KONTROL JALUR PENDAFTARAN --}}
                <div class="card modern-card mb-4">
                    <div class="card-header modern-card-header">
                        <h5 class="card-title font-weight-bold text-dark d-flex align-items-center mb-0">
                            <span class="icon-square bg-success-light text-success mr-3"><i class="fas fa-toggle-on"></i></span>
                            Kontrol Jalur Pendaftaran
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="row">
                            @php
                                $jalurList = [
                                    'zonasi' => ['label' => 'Jalur Zonasi', 'desc' => 'Seleksi jarak rumah', 'icon' => 'fa-map-marker-alt', 'color' => 'text-primary', 'bg' => 'bg-primary-light'],
                                    'prestasi' => ['label' => 'Jalur Prestasi', 'desc' => 'Akademik & Non-Akademik', 'icon' => 'fa-medal', 'color' => 'text-warning', 'bg' => 'bg-warning-light'],
                                    'afirmasi' => ['label' => 'Jalur Afirmasi', 'desc' => 'Bantuan Pra-Sejahtera', 'icon' => 'fa-hands-helping', 'color' => 'text-success', 'bg' => 'bg-success-light'],
                                    'perpindahan' => ['label' => 'Jalur Perpindahan', 'desc' => 'Mutasi orang tua', 'icon' => 'fa-briefcase', 'color' => 'text-purple', 'bg' => 'bg-purple-light'],
                                ];
                            @endphp

                            @foreach($jalurList as $key => $data)
                            <div class="col-md-6 mb-3">
                                <div class="bg-light rounded-lg border p-3 d-flex align-items-center justify-content-between h-100 transition-all hover-border-primary">
                                    <div class="d-flex align-items-center">
                                        <div class="icon-circle {{ $data['bg'] }} {{ $data['color'] }} mr-3">
                                            <i class="fas {{ $data['icon'] }}"></i>
                                        </div>
                                        <div>
                                            <h6 class="font-weight-bold text-dark mb-0">{{ $data['label'] }}</h6>
                                            <span class="text-muted" style="font-size: 11px;">{{ $data['desc'] }}</span>
                                        </div>
                                    </div>
                                    <div class="ml-2">
                                        <select name="enable_{{ $key }}" class="form-control modern-select font-weight-bold shadow-sm border-0 bg-white" style="width: auto; min-width: 100px;">
                                            <option value="yes" {{ ($settings["enable_$key"] ?? 'yes') == 'yes' ? 'selected' : '' }}>Aktif</option>
                                            <option value="no" {{ ($settings["enable_$key"] ?? 'yes') == 'no' ? 'selected' : '' }}>Tutup</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>

            </div>

            {{-- KOLOM KANAN: VISUAL & STICKY PANEL --}}
            <div class="col-lg-4">
                <div class="sticky-top" style="top: 20px; z-index: 100;">
                    
                    {{-- TOMBOL SUBMIT UTAMA --}}
                    <button type="submit" id="btnSubmit" class="btn btn-primary btn-block shadow-lg py-3 font-weight-bold text-uppercase tracking-wide mb-4 rounded-xl d-flex align-items-center justify-content-center" onclick="showSavingState()" style="font-size: 1rem;">
                        <i class="fas fa-save mr-2"></i> Terapkan Perubahan
                    </button>

                    {{-- TEMA WARNA --}}
                    <div class="card modern-card mb-4">
                        <div class="card-header modern-card-header">
                            <h5 class="card-title font-weight-bold text-dark d-flex align-items-center mb-0">
                                <span class="icon-square bg-warning-light text-warning mr-3"><i class="fas fa-palette"></i></span>
                                Identitas Warna
                            </h5>
                        </div>
                        <div class="card-body p-4">
                            <div class="color-picker-row mb-4">
                                <div>
                                    <h6 class="font-weight-bold text-dark mb-1">Brand Green</h6>
                                    <p class="text-muted mb-0 small">Warna dominan (Primary)</p>
                                </div>
                                <div class="color-input-wrapper">
                                    <input type="color" name="spmb_primary_color" class="color-picker-input" value="{{ $settings['spmb_primary_color'] ?? '#0b4f35' }}">
                                </div>
                            </div>
                            <hr class="border-light mb-4">
                            <div class="color-picker-row">
                                <div>
                                    <h6 class="font-weight-bold text-dark mb-1">Brand Gold</h6>
                                    <p class="text-muted mb-0 small">Warna sorotan (Accent)</p>
                                </div>
                                <div class="color-input-wrapper">
                                    <input type="color" name="spmb_accent_color" class="color-picker-input" value="{{ $settings['spmb_accent_color'] ?? '#FFC805' }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- GAMBAR HERO --}}
                    <div class="card modern-card mb-4">
                        <div class="card-header modern-card-header">
                            <h5 class="card-title font-weight-bold text-dark d-flex align-items-center mb-0">
                                <span class="icon-square bg-info-light text-info mr-3"><i class="fas fa-image"></i></span>
                                Media Banner Hero
                            </h5>
                        </div>
                        <div class="card-body p-4 text-center">
                            <div class="hero-preview-box mb-4 position-relative">
                                <div id="image-loader" class="loader-overlay d-none">
                                    <div class="spinner-border text-primary mb-2" role="status"></div>
                                    <span class="font-weight-bold text-primary small">Memproses...</span>
                                </div>

                                @php
                                    $dbPath = $settings['spmb_hero_image'] ?? '';
                                    $imageExists = !empty($dbPath) && file_exists(public_path($dbPath));
                                    $heroImg = $imageExists ? asset($dbPath) : asset('assets/img/landing/header.jpeg');
                                @endphp

                                <img id="preview-image" src="{{ $heroImg }}" class="hero-img-fluid" alt="Hero Banner" onerror="this.onerror=null; this.src='{{ asset('assets/img/landing/header.jpeg') }}';">
                            </div>
                            
                            <div class="custom-file text-left modern-file-input">
                                <input type="file" name="spmb_hero_image" class="custom-file-input" id="heroImage" accept="image/png, image/jpeg, image/jpg" onchange="handleImagePreview(this, false)">
                                <label class="custom-file-label font-weight-500" for="heroImage">Pilih Gambar Banner...</label>
                            </div>
                            <small class="text-muted mt-3 d-block text-left"><i class="fas fa-info-circle text-info mr-1"></i> Rekomendasi rasio 16:9 Landscape. Maksimal ukuran file 2MB.</small>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </form>
</div>
@stop

@section('css')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
    
    body { font-family: 'Inter', sans-serif; background-color: #F8FAFC; }

    /* COLORS UTILITY */
    .bg-primary-light { background-color: #EFF6FF !important; }
    .text-primary { color: #3B82F6 !important; }
    .bg-success-light { background-color: #F0FDF4 !important; }
    .text-success { color: #10B981 !important; }
    .bg-warning-light { background-color: #FFFBEB !important; }
    .text-warning { color: #F59E0B !important; }
    .bg-info-light { background-color: #EFF6FF !important; }
    .text-info { color: #0EA5E9 !important; }
    .bg-purple-light { background-color: #F5F3FF !important; }
    .text-purple { color: #8B5CF6 !important; }
    .border-light { border-color: #E2E8F0 !important; }

    /* TYPOGRAPHY */
    .tracking-wide { letter-spacing: 0.5px; }
    .font-weight-500 { font-weight: 500; }
    .font-weight-600 { font-weight: 600; }
    .text-xs { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; color: #64748b !important; }

    /* MODERN CARDS */
    .modern-card {
        border-radius: 16px;
        border: 1px solid #E2E8F0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
        background-color: #FFFFFF;
    }
    .modern-card-header {
        background-color: #FFFFFF;
        border-bottom: 1px solid #F1F5F9;
        border-radius: 16px 16px 0 0 !important;
        padding: 1.25rem 1.5rem;
    }

    /* ICONS */
    .icon-square {
        width: 38px; height: 38px; border-radius: 10px;
        display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
    }
    .icon-circle {
        width: 42px; height: 42px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    }

    /* MODERN INPUTS */
    .modern-label {
        font-weight: 600; color: #475569; margin-bottom: 0.5rem; display: block;
    }
    .modern-input {
        border-radius: 10px; border: 1px solid #CBD5E1; background-color: #F8FAFC;
        padding: 0.75rem 1rem; font-size: 0.95rem; color: #1E293B; transition: all 0.2s;
    }
    .modern-input:focus {
        background-color: #FFFFFF; border-color: #3B82F6; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); outline: none;
    }
    
    /* INPUT GROUP CUSTOM */
    .modern-input-group .input-group-text {
        border-radius: 10px 0 0 10px; border: 1px solid #CBD5E1; border-right: none;
    }
    .modern-input-group .form-control {
        border-radius: 0 10px 10px 0; border: 1px solid #CBD5E1; background-color: #F8FAFC;
    }
    .modern-input-group .form-control:focus {
        background-color: #FFFFFF; border-color: #3B82F6; box-shadow: none;
    }
    .modern-input-group:focus-within { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); border-radius: 10px;}
    .modern-input-group:focus-within .input-group-text, .modern-input-group:focus-within .form-control { border-color: #3B82F6; }

    /* SELECT */
    .modern-select {
        border-radius: 8px; border: 1px solid #E2E8F0; padding: 0.4rem 0.8rem; height: auto;
        color: #334155;
    }
    .modern-select:focus { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

    /* HOVER UTILITIES */
    .transition-all { transition: all 0.3s ease; }
    .hover-border-primary:hover { border-color: #93C5FD !important; background-color: #FFFFFF !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
    .unit-card:hover { border-color: #CBD5E1 !important; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }

    @media (min-width: 768px) { .border-right-md { border-right: 1px dashed #E2E8F0; } }

    /* COLOR PICKER (CLEAN UI) */
    .color-picker-row { display: flex; align-items: center; justify-content: space-between; }
    .color-input-wrapper {
        width: 50px; height: 50px; border-radius: 50%; overflow: hidden;
        border: 3px solid #F1F5F9; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        display: flex; align-items: center; justify-content: center; background: #fff;
    }
    .color-picker-input {
        -webkit-appearance: none; border: none; width: 60px; height: 60px; padding: 0; margin: 0; cursor: pointer;
    }
    .color-picker-input::-webkit-color-swatch-wrapper { padding: 0; }
    .color-picker-input::-webkit-color-swatch { border: none; }

    /* PREVIEW GAMBAR HERO */
    .hero-preview-box {
        width: 100%; height: 180px; border: 2px dashed #CBD5E1; border-radius: 12px;
        background-color: #F8FAFC; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 4px;
    }
    .hero-img-fluid { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; transition: opacity 0.3s ease; }
    
    /* PREVIEW GAMBAR UNIT */
    .img-preview-wrapper {
        width: 100%; height: 110px; border-radius: 10px; border: 1px solid #E2E8F0; padding: 3px; background: #F8FAFC;
    }
    .img-preview-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

    .loader-overlay {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.9);
        z-index: 10; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px;
    }

    /* CUSTOM FILE INPUT */
    .modern-file-input .custom-file-label {
        border: 1px solid #CBD5E1; border-radius: 8px; padding: 0.6rem 1rem; height: auto;
        background: #FFFFFF; color: #475569; font-weight: 500; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .modern-file-input .custom-file-label::after { display: none; } /* Hilangkan tombol browse bawaan bootstrap */
    .modern-file-input:hover .custom-file-label { background: #F8FAFC; border-color: #94A3B8; }

    /* BUTTON UTAMA */
    .btn-primary {
        background-color: #2563EB; border-color: #2563EB; border-radius: 12px; transition: all 0.3s ease;
    }
    .btn-primary:hover {
        background-color: #1D4ED8; border-color: #1D4ED8; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3) !important;
    }
    
    /* ALERT SUCCESS */
    .modern-alert { background-color: #10B981; border-radius: 12px; color: white; padding: 1rem 1.25rem; }
    .alert-icon { width: 30px; height: 30px; font-size: 0.9rem; }
</style>
@stop

@section('js')
<script>
    // --- 1. SCRIPT PREVIEW GAMBAR MULTIFUNGSI (Hero & Brosur Unit) ---
    function handleImagePreview(input, isMini = false) {
        var file = input.files[0];
        
        if (file) {
            // Update label text
            let labelText = file.name;
            if(labelText.length > 25) labelText = labelText.substring(0, 22) + '...';
            $(input).next('.custom-file-label').html(labelText).css('color', '#2563EB').css('border-color', '#BFDBFE').css('background', '#EFF6FF');
            
            // Effect loading
            if(!isMini) {
                $('#image-loader').removeClass('d-none').addClass('d-flex');
                $('#preview-image').css('opacity', '0.3');
            } else {
                var img = $(input).closest('.d-flex').find('img');
                img.css('opacity', '0.3');
            }
            
            var reader = new FileReader();
            reader.onload = function(e) {
                setTimeout(function() {
                    if(!isMini) {
                        $("#preview-image").attr("src", e.target.result).css('opacity', '1');
                        $('#image-loader').removeClass('d-flex').addClass('d-none');
                    } else {
                        var img = $(input).closest('.d-flex').find('img');
                        img.attr("src", e.target.result).css('opacity', '1');
                    }
                }, 400); 
            }
            reader.readAsDataURL(file);
        }
    }

    // --- 2. SCRIPT LOADING TOMBOL SIMPAN ---
    function showSavingState() {
        var form = document.getElementById('spmbSettingForm');
        var btn = document.getElementById('btnSubmit');
        
        if(form.checkValidity()) {
            btn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Menyimpan Sistem...';
            btn.classList.add('disabled');
            btn.style.pointerEvents = 'none';
            
            // Tambahkan overlay tipis ke seluruh halaman
            $('body').append('<div style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.7); z-index:9999; display:flex; align-items:center; justify-content:center;"><div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status"></div></div>');
            
            form.submit();
        } else {
            form.reportValidity();
        }
    }
</script>
@stop