@extends('layouts.app')

@section('title', 'Pengaturan Situs')

@push('css')
<style>
.admin-layout { display: flex; min-height: calc(100vh - 70px); }
.admin-sidebar { width: 250px; background: #0d1117; border-right: 1px solid #1e293b; padding: 1rem 0; position: fixed; top: 64px; left: 0; bottom: 0; overflow-y: auto; }
.admin-sidebar-header { padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid #1e293b; margin-bottom: 0.5rem; color: #10b981; font-weight: 700; }
.admin-logo { width: 32px; height: 32px; background: #10b981; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #0a0f1a; font-weight: 900; font-size: 14px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 0.5rem; }
.admin-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; color: #94a3b8; text-decoration: none; border-radius: 8px; font-size: 0.875rem; transition: all 0.2s; }
.admin-nav-item:hover { background: #1e293b; color: #e2e8f0; }
.admin-nav-item.active { background: rgba(16, 185, 129, 0.1); color: #10b981; font-weight: 600; }
.nav-icon { font-size: 16px; width: 20px; text-align: center; }
.admin-main { margin-left: 250px; flex: 1; padding: 1.5rem; }

.admin-card { background: #111827; border: 1px solid #1e293b; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.admin-card-header { margin-bottom: 1.25rem; }
.admin-card-header h2 { color: #f1f5f9; font-size: 1.25rem; font-weight: 700; margin: 0; }
.btn-primary { background: #10b981; color: #fff; border: none; padding: 0.6rem 1.5rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.btn-primary:hover { background: #059669; }

.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; color: #94a3b8; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; }
.form-control { width: 100%; padding: 0.5rem 0.75rem; background: #0f172a; border: 1px solid #334155; border-radius: 8px; color: #e2e8f0; font-size: 0.875rem; transition: border-color 0.2s; box-sizing: border-box; }
.form-control:focus { outline: none; border-color: #10b981; }
textarea.form-control { resize: vertical; min-height: 100px; }
.form-check { display: flex; align-items: center; gap: 0.5rem; }
.form-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: #10b981; }
.form-check label { margin-bottom: 0; color: #e2e8f0; font-size: 0.875rem; cursor: pointer; }
.form-help { color: #64748b; font-size: 0.75rem; margin-top: 0.25rem; }

.flash-message { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.875rem; }
.flash-success { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.flash-error { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }

.settings-section { margin-bottom: 2rem; }
.settings-section-title { color: #10b981; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #1e293b; }
</style>
@endpush

@section('content')
<div class="admin-layout">
    <aside class="admin-sidebar">
        <div class="admin-sidebar-header">
            <span class="admin-logo">SP</span>
            <span>Admin Panel</span>
        </div>
        <nav class="admin-nav">
            <a href="/admin" class="admin-nav-item"><span class="nav-icon">&#9638;</span> Dashboard</a>
            <a href="/admin/streams" class="admin-nav-item"><span class="nav-icon">&#9654;</span> Streams</a>
            <a href="/admin/ads" class="admin-nav-item"><span class="nav-icon">&#9672;</span> Iklan</a>
            <a href="/admin/settings" class="admin-nav-item active"><span class="nav-icon">&#9881;</span> Pengaturan</a>
            <a href="/admin/worldcup/groups" class="admin-nav-item"><span class="nav-icon">&#9733;</span> Klasemen WC</a>
            <a href="/admin/worldcup/matches" class="admin-nav-item"><span class="nav-icon">&#9998;</span> Jadwal WC</a>
            <a href="/admin/seed" class="admin-nav-item" onclick="return confirm('Seed ulang data?')"><span class="nav-icon">&#8635;</span> Seed Data</a>
        </nav>
    </aside>
    <main class="admin-main">
        @if(session('success'))
            <div class="flash-message flash-success">
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="flash-message flash-error">
                {{ session('error') }}
            </div>
        @endif

        <div class="admin-card">
            <div class="admin-card-header">
                <h2>Pengaturan Situs</h2>
            </div>

            <form method="POST" action="/admin/settings">
                @csrf
                @method('PUT')

                <div class="settings-section">
                    <div class="settings-section-title">Umum</div>

                    <div class="form-group">
                        <label for="setting_site_name">Nama Situs</label>
                        <input type="text"
                               id="setting_site_name"
                               name="settings[site_name]"
                               class="form-control"
                               value="{{ $settings->where('key', 'site_name')->first()->value ?? config('app.name', 'Sport Stream') }}">
                    </div>

                    <div class="form-group">
                        <label for="setting_site_description">Deskripsi Situs</label>
                        <textarea id="setting_site_description"
                                  name="settings[site_description]"
                                  class="form-control"
                                  rows="3">{{ $settings->where('key', 'site_description')->first()->value ?? '' }}</textarea>
                    </div>
                </div>

                <div class="settings-section">
                    <div class="settings-section-title">Iklan</div>

                    <div class="form-group">
                        <label for="setting_adsense_client_id">AdSense Client ID</label>
                        <input type="text"
                               id="setting_adsense_client_id"
                               name="settings[adsense_client_id]"
                               class="form-control"
                               placeholder="ca-pub-XXXXXXXXXXXXXXXX"
                               value="{{ $settings->where('key', 'adsense_client_id')->first()->value ?? '' }}">
                        <div class="form-help">Masukkan Client ID Google AdSense Anda (contoh: ca-pub-1234567890).</div>
                    </div>
                </div>

                <div class="settings-section">
                    <div class="settings-section-title">Pemutar</div>

                    <div class="form-group">
                        <label for="setting_auto_refresh_interval">Auto Refresh Interval (detik)</label>
                        <input type="number"
                               id="setting_auto_refresh_interval"
                               name="settings[auto_refresh_interval]"
                               class="form-control"
                               min="0"
                               step="1"
                               value="{{ $settings->where('key', 'auto_refresh_interval')->first()->value ?? '30' }}">
                        <div class="form-help">Interval auto refresh halaman stream dalam detik. Set 0 untuk menonaktifkan.</div>
                    </div>

                    <div class="form-group">
                        <label for="setting_max_retries">Max Retry Player</label>
                        <input type="number"
                               id="setting_max_retries"
                               name="settings[max_retries]"
                               class="form-control"
                               min="0"
                               step="1"
                               value="{{ $settings->where('key', 'max_retries')->first()->value ?? '3' }}">
                        <div class="form-help">Jumlah maksimum percobaan ulang jika pemutar gagal memuat.</div>
                    </div>
                </div>

                <div class="settings-section">
                    <div class="settings-section-title">Fitur</div>

                    <div class="form-group">
                        <div class="form-check">
                            <input type="checkbox"
                                   id="setting_enable_chat"
                                   name="settings[enable_chat]"
                                   value="1"
                                   {{ ($settings->where('key', 'enable_chat')->first()->value ?? '1') === '1' ? 'checked' : '' }}>
                            <label for="setting_enable_chat">Aktifkan Chat</label>
                        </div>
                        <div class="form-help" style="margin-left: 1.625rem;">Tampilkan fitur obrolan di halaman stream.</div>
                    </div>

                    <div class="form-group">
                        <div class="form-check">
                            <input type="checkbox"
                                   id="setting_maintenance_mode"
                                   name="settings[maintenance_mode]"
                                   value="1"
                                   {{ ($settings->where('key', 'maintenance_mode')->first()->value ?? '0') === '1' ? 'checked' : '' }}>
                            <label for="setting_maintenance_mode">Mode Maintenance</label>
                        </div>
                        <div class="form-help" style="margin-left: 1.625rem;">Aktifkan mode maintenance. Situs hanya dapat diakses oleh admin.</div>
                    </div>
                </div>

                <div style="text-align: right; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #1e293b;">
                    <button type="submit" class="btn-primary">Simpan Pengaturan</button>
                </div>
            </form>
        </div>
    </main>
</div>
@endsection