@extends('layouts.super-admin')

@section('title', 'Pengaturan Sistem')
@section('page-title', 'Pengaturan Sistem')

@push('styles')
    <style>
        .settings-shell { max-width: 980px; margin: 24px auto; }
        .settings-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 28px; box-shadow: 0 12px 30px rgba(15, 35, 95, .07); }
        .settings-header { margin-bottom: 24px; }
        .settings-header h1 { margin: 0 0 6px; color: #17233c; font-size: 1.5rem; }
        .settings-header p { margin: 0; color: #64748b; }
        .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
        .settings-field { display: flex; flex-direction: column; gap: 7px; }
        .settings-field.full { grid-column: 1 / -1; }
        .settings-field label { color: #334155; font-weight: 600; font-size: .9rem; }
        .settings-field input, .settings-field textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 9px; padding: 11px 12px; color: #17233c; background: #fff; }
        .settings-field textarea { min-height: 105px; resize: vertical; }
        .settings-field input:focus, .settings-field textarea:focus { outline: 2px solid rgba(37, 99, 235, .18); border-color: #2563eb; }
        .settings-help { color: #64748b; font-size: .78rem; }
        .settings-preview { display: flex; align-items: center; gap: 14px; margin-top: 4px; min-height: 70px; }
        .settings-preview img { max-width: 180px; max-height: 80px; object-fit: contain; border-radius: 8px; border: 1px solid #e2e8f0; padding: 4px; }
        .settings-actions { display: flex; justify-content: flex-end; margin-top: 26px; }
        .settings-submit { border: 0; border-radius: 9px; padding: 12px 20px; background: #2563eb; color: white; font-weight: 700; cursor: pointer; }
        .settings-alert { border-radius: 9px; padding: 11px 13px; margin-bottom: 18px; font-size: .9rem; }
        .settings-alert.success { background: #ecfdf5; color: #047857; }
        .settings-alert.error { background: #fef2f2; color: #b91c1c; }
        @media (max-width: 700px) { .settings-grid { grid-template-columns: 1fr; } .settings-field.full { grid-column: auto; } .settings-card { padding: 20px; } }
    </style>
@endpush

@section('content')
    <div class="settings-shell">
        <div class="settings-card">
            <div class="settings-header">
                <h1>Pengaturan Sistem</h1>
                <p>Kelola identitas kampus dan tampilan halaman login dari satu tempat.</p>
            </div>

            @if (session('success'))
                <div class="settings-alert success">{{ session('success') }}</div>
            @endif

            @if ($errors->any())
                <div class="settings-alert error">{{ $errors->first() }}</div>
            @endif

            <form method="POST" action="{{ route('superadmin.settings.system.update') }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="settings-grid">
                    <div class="settings-field full">
                        <label for="campus_name">Nama Kampus</label>
                        <input id="campus_name" name="campus_name" value="{{ old('campus_name', $settings->campus_name) }}" required>
                    </div>

                    <div class="settings-field full">
                        <label for="login_title">Judul Login</label>
                        <input id="login_title" name="login_title" value="{{ old('login_title', $settings->login_title) }}" required>
                    </div>

                    <div class="settings-field">
                        <label for="login_subtitle">Subjudul Login</label>
                        <input id="login_subtitle" name="login_subtitle" value="{{ old('login_subtitle', $settings->login_subtitle) }}" required>
                    </div>

                    <div class="settings-field">
                        <label for="logo">Logo Kampus</label>
                        <input id="logo" type="file" name="logo" accept="image/jpeg,image/png,image/webp">
                        <span class="settings-help">JPG, PNG, WEBP maksimal 2 MB.</span>
                        <div class="settings-preview"><img src="{{ $settings->logo_url }}" alt="Logo saat ini"></div>
                    </div>

                    <div class="settings-field full">
                        <label for="login_description">Deskripsi Login</label>
                        <textarea id="login_description" name="login_description">{{ old('login_description', $settings->login_description) }}</textarea>
                    </div>

                    <div class="settings-field">
                        <label for="login_background">Background Halaman Login</label>
                        <input id="login_background" type="file" name="login_background" accept="image/jpeg,image/png,image/webp">
                        <span class="settings-help">Gambar di belakang card login, maksimal 5 MB.</span>
                        <div class="settings-preview"><img src="{{ $settings->login_background_url }}" alt="Background login saat ini"></div>
                    </div>

                    <div class="settings-field">
                        <label for="login_card_image">Gambar Dalam Card Login</label>
                        <input id="login_card_image" type="file" name="login_card_image" accept="image/jpeg,image/png,image/webp">
                        <span class="settings-help">Gambar panel informasi login, maksimal 5 MB.</span>
                        <div class="settings-preview"><img src="{{ $settings->login_card_image_url }}" alt="Gambar card login saat ini"></div>
                    </div>
                </div>

                <div class="settings-actions">
                    <button class="settings-submit" type="submit"><i class="fa-solid fa-floppy-disk"></i> Simpan Pengaturan</button>
                </div>
            </form>
        </div>
    </div>
@endsection