@extends('layout.app')

@section('title', 'Pengaturan Dashboard - Sistem Manajemen ISP')

@php
use Illuminate\Support\Facades\Storage;
@endphp

@section('content')
<x-material-page-header 
    title="Pengaturan Dashboard" 
    :breadcrumbs="[
        ['name' => 'Dashboard', 'url' => route('dashboard')],
        ['name' => 'Pengaturan', 'url' => route('pengaturan.dashboard')]
    ]"
    :action="route('dashboard')" 
    actionLabel="Kembali" 
    actionIcon="arrow_back"
>
    <button type="button" class="btn btn-sm bg-gradient-secondary mb-0 me-2" onclick="exportSettings()">
        <i class="material-symbols-rounded me-1" style="font-size: 16px; line-height: 1;">download</i> Export
    </button>
    <button type="button" class="btn btn-sm bg-gradient-secondary mb-0 me-2" data-bs-toggle="modal" data-bs-target="#importModal">
        <i class="material-symbols-rounded me-1" style="font-size: 16px; line-height: 1;">upload</i> Import
    </button>
    <button type="button" class="btn btn-sm bg-gradient-secondary mb-0" onclick="resetSettings()">
        <i class="material-symbols-rounded me-1" style="font-size: 16px; line-height: 1;">refresh</i> Reset
    </button>
</x-material-page-header>

<div class="container-fluid py-4">
    @if(session('success'))
        <div class="alert alert-success text-white alert-dismissible fade show" role="alert">
            <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">check_circle</i></span>
            <span class="alert-text">{{ session('success') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger text-white alert-dismissible fade show" role="alert">
            <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i></span>
            <span class="alert-text">{{ session('error') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Total Pelanggan</p>
                            <h4 class="mb-0" id="stat-total-customers">
                                <div class="spinner-border spinner-border-sm" role="status"></div>
                            </h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-primary shadow text-center border-radius-lg">
                            <i class="material-symbols-rounded opacity-10">person</i>
                        </div>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-2 ps-3">
                    <p class="mb-0 text-sm text-success">Semua pelanggan</p>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Pelanggan Aktif</p>
                            <h4 class="mb-0" id="stat-active-customers">
                                <div class="spinner-border spinner-border-sm" role="status"></div>
                            </h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-success shadow text-center border-radius-lg">
                            <i class="material-symbols-rounded opacity-10">check_circle</i>
                        </div>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-2 ps-3">
                    <p class="mb-0 text-sm text-success">Pelanggan aktif</p>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Total Area</p>
                            <h4 class="mb-0" id="stat-total-areas">
                                <div class="spinner-border spinner-border-sm" role="status"></div>
                            </h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-info shadow text-center border-radius-lg">
                            <i class="material-symbols-rounded opacity-10">map</i>
                        </div>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-2 ps-3">
                    <p class="mb-0 text-sm text-info">Semua area</p>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Total Paket</p>
                            <h4 class="mb-0" id="stat-total-packages">
                                <div class="spinner-border spinner-border-sm" role="status"></div>
                            </h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-warning shadow text-center border-radius-lg">
                            <i class="material-symbols-rounded opacity-10">wifi</i>
                        </div>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-2 ps-3">
                    <p class="mb-0 text-sm text-warning">Paket internet</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="row">
        <div class="col-lg-8">
            <form method="POST" action="{{ route('pengaturan.dashboard.update') }}" enctype="multipart/form-data">
                @csrf
                
                <!-- Dashboard Appearance -->
                <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                    <div class="card-header pb-3">
                        <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">palette</i> Penampilan Dashboard
                        </h6>
                    </div>
                    <div class="card-body pt-3">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Judul Dashboard <span class="text-danger">*</span></label>
                                    <input type="text" 
                                           class="form-control @error('dashboard_title') is-invalid @enderror" 
                                           id="dashboard_title" 
                                           name="dashboard_title" 
                                           value="{{ old('dashboard_title', $settings['dashboard_title']) }}" 
                                           placeholder="Masukkan judul dashboard"
                                           required>
                                    @error('dashboard_title')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Warna Tema <span class="text-danger">*</span></label>
                                    <select class="form-control @error('theme_color') is-invalid @enderror" 
                                            id="theme_color" 
                                            name="theme_color"
                                            required>
                                        <option value="primary" {{ old('theme_color', $settings['theme_color']) == 'primary' ? 'selected' : '' }}>Primary (Biru)</option>
                                        <option value="secondary" {{ old('theme_color', $settings['theme_color']) == 'secondary' ? 'selected' : '' }}>Secondary (Abu)</option>
                                        <option value="success" {{ old('theme_color', $settings['theme_color']) == 'success' ? 'selected' : '' }}>Success (Hijau)</option>
                                        <option value="danger" {{ old('theme_color', $settings['theme_color']) == 'danger' ? 'selected' : '' }}>Danger (Merah)</option>
                                        <option value="warning" {{ old('theme_color', $settings['theme_color']) == 'warning' ? 'selected' : '' }}>Warning (Kuning)</option>
                                        <option value="info" {{ old('theme_color', $settings['theme_color']) == 'info' ? 'selected' : '' }}>Info (Biru Muda)</option>
                                    </select>
                                    @error('theme_color')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group mb-3">
                            <label class="form-label">Subtitle Dashboard</label>
                            <textarea class="form-control @error('dashboard_subtitle') is-invalid @enderror" 
                                      id="dashboard_subtitle" 
                                      name="dashboard_subtitle" 
                                      rows="2" 
                                      placeholder="Masukkan subtitle dashboard">{{ old('dashboard_subtitle', $settings['dashboard_subtitle']) }}</textarea>
                            @error('dashboard_subtitle')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Dashboard Components -->
                <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                    <div class="card-header pb-3">
                        <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">dashboard</i> Komponen Dashboard
                        </h6>
                    </div>
                    <div class="card-body pt-3">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_statistics" value="1" 
                                           id="show_statistics" {{ old('show_statistics', $settings['show_statistics']) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_statistics">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">bar_chart</i>Tampilkan Statistik
                                    </label>
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_recent_activities" value="1" 
                                           id="show_recent_activities" {{ old('show_recent_activities', $settings['show_recent_activities']) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_recent_activities">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">history</i>Aktivitas Terbaru
                                    </label>
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_quick_actions" value="1" 
                                           id="show_quick_actions" {{ old('show_quick_actions', $settings['show_quick_actions']) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_quick_actions">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">flash_on</i>Aksi Cepat
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_charts" value="1" 
                                           id="show_charts" {{ old('show_charts', $settings['show_charts']) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_charts">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">pie_chart</i>Tampilkan Grafik
                                    </label>
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_notifications" value="1" 
                                           id="show_notifications" {{ old('show_notifications', $settings['show_notifications']) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_notifications">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">notifications</i>Notifikasi
                                    </label>
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="sidebar_collapsed" value="1" 
                                           id="sidebar_collapsed" {{ old('sidebar_collapsed', $settings['sidebar_collapsed']) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="sidebar_collapsed">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">menu</i>Sidebar Collapsed
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Chart Settings -->
                <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                    <div class="card-header pb-3">
                        <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">show_chart</i> Pengaturan Grafik
                        </h6>
                    </div>
                    <div class="card-body pt-3">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Tipe Grafik <span class="text-danger">*</span></label>
                                    <select class="form-control @error('chart_type') is-invalid @enderror" 
                                            id="chart_type" 
                                            name="chart_type"
                                            required>
                                        <option value="line" {{ old('chart_type', $settings['chart_type']) == 'line' ? 'selected' : '' }}>Line Chart</option>
                                        <option value="bar" {{ old('chart_type', $settings['chart_type']) == 'bar' ? 'selected' : '' }}>Bar Chart</option>
                                        <option value="pie" {{ old('chart_type', $settings['chart_type']) == 'pie' ? 'selected' : '' }}>Pie Chart</option>
                                        <option value="doughnut" {{ old('chart_type', $settings['chart_type']) == 'doughnut' ? 'selected' : '' }}>Doughnut Chart</option>
                                    </select>
                                    @error('chart_type')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Interval Refresh (detik)</label>
                                    <input type="number" 
                                           class="form-control @error('refresh_interval') is-invalid @enderror" 
                                           id="refresh_interval" 
                                           name="refresh_interval" 
                                           value="{{ old('refresh_interval', $settings['refresh_interval']) }}" 
                                           min="30" 
                                           max="3600" 
                                           placeholder="300">
                                    <small class="text-muted">Interval refresh otomatis untuk data real-time</small>
                                    @error('refresh_interval')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Display Settings -->
                <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                    <div class="card-header pb-3">
                        <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">settings</i> Pengaturan Tampilan
                        </h6>
                    </div>
                    <div class="card-body pt-3">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Item per Halaman</label>
                                    <input type="number" 
                                           class="form-control @error('items_per_page') is-invalid @enderror" 
                                           id="items_per_page" 
                                           name="items_per_page" 
                                           value="{{ old('items_per_page', $settings['items_per_page']) }}" 
                                           min="5" 
                                           max="100" 
                                           placeholder="10">
                                    @error('items_per_page')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="auto_refresh" value="1" 
                                           id="auto_refresh" {{ old('auto_refresh', $settings['auto_refresh']) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="auto_refresh">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">refresh</i>Auto Refresh
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Timezone</label>
                                    <select class="form-control @error('timezone') is-invalid @enderror" 
                                            id="timezone" 
                                            name="timezone">
                                        <option value="Asia/Jakarta" {{ old('timezone', $settings['timezone']) == 'Asia/Jakarta' ? 'selected' : '' }}>Asia/Jakarta</option>
                                        <option value="Asia/Makassar" {{ old('timezone', $settings['timezone']) == 'Asia/Makassar' ? 'selected' : '' }}>Asia/Makassar</option>
                                        <option value="Asia/Jayapura" {{ old('timezone', $settings['timezone']) == 'Asia/Jayapura' ? 'selected' : '' }}>Asia/Jayapura</option>
                                        <option value="UTC" {{ old('timezone', $settings['timezone']) == 'UTC' ? 'selected' : '' }}>UTC</option>
                                    </select>
                                    @error('timezone')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_clock" value="1" 
                                           id="show_clock" {{ old('show_clock', $settings['show_clock']) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_clock">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">schedule</i>Tampilkan Jam
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Weather Settings -->
                <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                    <div class="card-header pb-3">
                        <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">cloud</i> Pengaturan Cuaca
                        </h6>
                    </div>
                    <div class="card-body pt-3">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_weather" value="1" 
                                           id="show_weather" {{ old('show_weather', $settings['show_weather']) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_weather">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">cloud</i>Tampilkan Cuaca
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Lokasi Cuaca</label>
                                    <input type="text" 
                                           class="form-control @error('weather_location') is-invalid @enderror" 
                                           id="weather_location" 
                                           name="weather_location" 
                                           value="{{ old('weather_location', $settings['weather_location']) }}" 
                                           placeholder="Jakarta">
                                    @error('weather_location')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Logo & Branding Settings -->
                <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                    <div class="card-header pb-3">
                        <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">image</i> Logo & Branding
                        </h6>
                    </div>
                    <div class="card-body pt-3">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Logo Perusahaan</label>
                                    <input type="file" 
                                           class="form-control @error('logo') is-invalid @enderror" 
                                           id="logo" 
                                           name="logo" 
                                           accept="image/*">
                                    <small class="text-muted">Format: JPG, PNG, GIF, SVG (Max: 2MB)</small>
                                    @if($settings['logo_path'])
                                        <div class="mt-2">
                                            @php
                                                $logoUrl = getStorageUrl($settings['logo_path']);
                                            @endphp
                                            <img src="{{ $logoUrl }}" alt="Current Logo" class="img-thumbnail" style="max-width: 150px; max-height: 100px;" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                            <p class="text-danger small mt-1" style="display: none;">Logo tidak dapat dimuat. Pastikan symbolic link storage sudah dibuat dengan menjalankan: <code>php artisan storage:link</code></p>
                                            <p class="text-muted small mt-1">Logo saat ini</p>
                                        </div>
                                    @endif
                                    @error('logo')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Favicon</label>
                                    <input type="file" 
                                           class="form-control @error('favicon') is-invalid @enderror" 
                                           id="favicon" 
                                           name="favicon" 
                                           accept="image/*,.ico">
                                    <small class="text-muted">Format: ICO, PNG, JPG (Max: 512KB)</small>
                                    @if($settings['favicon_path'])
                                        <div class="mt-2">
                                            @php
                                                $faviconUrl = getStorageUrl($settings['favicon_path']);
                                            @endphp
                                            <img src="{{ $faviconUrl }}" alt="Current Favicon" class="img-thumbnail" style="max-width: 32px; max-height: 32px;" onerror="this.style.display='none';">
                                            <p class="text-muted small mt-1">Favicon saat ini</p>
                                        </div>
                                    @endif
                                    @error('favicon')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn bg-gradient-primary mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i> Simpan Pengaturan
                    </button>
                    <button type="button" class="btn bg-gradient-secondary mb-0" onclick="resetForm()">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">refresh</i> Reset Form
                    </button>
                </div>
            </form>
        </div>
        
        <div class="col-lg-4">
            <!-- Preview Dashboard -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold" style="font-size: 0.875rem; color: #344767;">Preview Dashboard</h6>
                </div>
                <div class="card-body pt-3">
                    <div class="text-center">
                        <i class="material-symbols-rounded" style="font-size: 64px; color: #6c757d; margin-bottom: 1rem;">dashboard</i>
                        <h6>Preview Dashboard</h6>
                        <p class="text-muted">Lihat perubahan pengaturan dashboard secara real-time</p>
                        <button type="button" class="btn bg-gradient-info mb-0" onclick="previewDashboard()">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">open_in_new</i> Preview
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Quick Actions -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold" style="font-size: 0.875rem; color: #344767;">Aksi Cepat</h6>
                </div>
                <div class="card-body pt-3">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="exportSettings()">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">download</i> Export Settings
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm" data-bs-toggle="modal" data-bs-target="#importModal">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">upload</i> Import Settings
                        </button>
                        <button type="button" class="btn btn-outline-warning btn-sm" onclick="resetSettings()">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">refresh</i> Reset Default
                        </button>
                        <button type="button" class="btn btn-outline-info btn-sm" onclick="previewDashboard()">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">open_in_new</i> Preview Dashboard
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);">
            <div class="modal-header border-bottom">
                <h5 class="modal-title font-weight-bold" id="importModalLabel" style="color: #344767;">
                    <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">upload</i> Import Pengaturan Dashboard
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('pengaturan.dashboard.import') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body py-4">
                    <div class="alert alert-info text-white mb-3">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i>
                        <strong>Petunjuk Import:</strong> Pilih file JSON yang berisi pengaturan dashboard yang telah diekspor sebelumnya.
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">File Pengaturan (JSON) <span class="text-danger">*</span></label>
                        <input type="file" 
                               class="form-control @error('settings_file') is-invalid @enderror" 
                               id="settings_file" 
                               name="settings_file" 
                               accept=".json" 
                               required>
                        <small class="text-muted">Format yang didukung: JSON (.json)</small>
                        @error('settings_file')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">close</i> Batal
                    </button>
                    <button type="submit" class="btn bg-gradient-primary mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">upload</i> Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Load stats on page load
document.addEventListener('DOMContentLoaded', function() {
    loadStats();
});

function loadStats() {
    fetch('{{ route("pengaturan.dashboard.stats") }}', {
        credentials: 'same-origin',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        // Update stats using specific IDs
        const totalCustomersEl = document.getElementById('stat-total-customers');
        const activeCustomersEl = document.getElementById('stat-active-customers');
        const totalAreasEl = document.getElementById('stat-total-areas');
        const totalPackagesEl = document.getElementById('stat-total-packages');
        
        if (totalCustomersEl) {
            totalCustomersEl.textContent = data.total_customers ?? '0';
        }
        if (activeCustomersEl) {
            activeCustomersEl.textContent = data.active_customers ?? '0';
        }
        if (totalAreasEl) {
            totalAreasEl.textContent = data.total_areas ?? '0';
        }
        if (totalPackagesEl) {
            totalPackagesEl.textContent = data.total_packages ?? '0';
        }
    })
    .catch(error => {
        console.error('Error loading stats:', error);
        // Set fallback values
        const totalCustomersEl = document.getElementById('stat-total-customers');
        const activeCustomersEl = document.getElementById('stat-active-customers');
        const totalAreasEl = document.getElementById('stat-total-areas');
        const totalPackagesEl = document.getElementById('stat-total-packages');
        
        if (totalCustomersEl) totalCustomersEl.textContent = '0';
        if (activeCustomersEl) activeCustomersEl.textContent = '0';
        if (totalAreasEl) totalAreasEl.textContent = '0';
        if (totalPackagesEl) totalPackagesEl.textContent = '0';
    });
}

// Reset form function
function resetForm() {
    if (confirm('Apakah Anda yakin ingin mereset semua pengaturan ke nilai default?')) {
        const form = document.querySelector('form[action="{{ route("pengaturan.dashboard.update") }}"]');
        if (form) {
            form.reset();
            // Reset checkboxes
            const checkboxes = form.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach(checkbox => {
                checkbox.checked = false;
            });
        }
    }
}

// Export settings function
function exportSettings() {
    window.location.href = '{{ route("pengaturan.dashboard.export") }}';
}

// Reset settings function
function resetSettings() {
    if (confirm('Apakah Anda yakin ingin mereset semua pengaturan dashboard ke nilai default?')) {
        window.location.href = '{{ route("pengaturan.dashboard.reset") }}';
    }
}

// Preview dashboard function
function previewDashboard() {
    window.open('{{ route("dashboard") }}', '_blank');
}

// File preview functionality
document.addEventListener('DOMContentLoaded', function() {
    const logoInput = document.getElementById('logo');
    const faviconInput = document.getElementById('favicon');
    
    if (logoInput) {
        logoInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    let preview = document.getElementById('logo-preview');
                    if (!preview) {
                        const previewDiv = document.createElement('div');
                        previewDiv.className = 'mt-2';
                        previewDiv.innerHTML = `
                            <img id="logo-preview" src="${e.target.result}" alt="Logo Preview" class="img-thumbnail" style="max-width: 150px; max-height: 100px;">
                            <p class="text-muted small mt-1">Preview logo baru</p>
                        `;
                        logoInput.parentNode.appendChild(previewDiv);
                    } else {
                        preview.src = e.target.result;
                        preview.style.display = 'block';
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    }
    
    if (faviconInput) {
        faviconInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    let preview = document.getElementById('favicon-preview');
                    if (!preview) {
                        const previewDiv = document.createElement('div');
                        previewDiv.className = 'mt-2';
                        previewDiv.innerHTML = `
                            <img id="favicon-preview" src="${e.target.result}" alt="Favicon Preview" class="img-thumbnail" style="max-width: 32px; max-height: 32px;">
                            <p class="text-muted small mt-1">Preview favicon baru</p>
                        `;
                        faviconInput.parentNode.appendChild(previewDiv);
                    } else {
                        preview.src = e.target.result;
                        preview.style.display = 'block';
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    }
});
</script>
@endsection