@extends('layouts.app')

@section('title', 'Mode Maintenance - SIAKAD')
@section('page-title', 'Pengaturan Mode Maintenance')

@push('styles')
<style>
    .maintenance-card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }

    .maintenance-header {
        background: linear-gradient(135deg, var(--primary) 0%, #5a5fe0 100%);
        color: white;
        padding: 1.5rem;
    }

    .maintenance-header.active {
        background: linear-gradient(135deg, #dc3545 0%, #ff3535 100%);
    }

    .maintenance-body {
        padding: 2rem;
    }

    .status-indicator {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        border-radius: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .status-indicator.active {
        background: rgba(255, 75, 75, 0.1);
        border: 1px solid rgba(255, 75, 75, 0.3);
    }

    .status-indicator.inactive {
        background: rgba(2, 195, 154, 0.1);
        border: 1px solid rgba(2, 195, 154, 0.3);
    }

    .status-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

    .status-dot.active {
        background: var(--danger);
    }

    .status-dot.inactive {
        background: var(--success);
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    .toggle-card {
        background: var(--gray-100);
        border-radius: 0.75rem;
        padding: 1.25rem 1.5rem;
        margin-bottom: 1rem;
    }

    .form-switch .form-check-input {
        width: 3rem;
        height: 1.5rem;
        cursor: pointer;
    }

    .form-switch .form-check-input:checked {
        background-color: var(--danger);
        border-color: var(--danger);
    }

    .form-switch .form-check-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    }

    .info-box {
        background: rgba(105, 108, 255, 0.1);
        border-radius: 0.75rem;
        padding: 1rem;
        display: flex;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .info-box i {
        color: var(--primary);
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .info-box p {
        margin: 0;
        font-size: 0.85rem;
        color: var(--gray-700);
    }

    .warning-box {
        background: rgba(255, 75, 75, 0.1);
        border: 1px solid rgba(255, 75, 75, 0.3);
        border-radius: 0.75rem;
        padding: 1rem;
        display: flex;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .warning-box i {
        color: var(--danger);
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .warning-box p {
        margin: 0;
        font-size: 0.85rem;
        color: var(--gray-700);
    }

    .role-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .role-badge.admin {
        background: rgba(105, 108, 255, 0.1);
        color: var(--primary);
    }

    .role-badge.mahasiswa {
        background: rgba(2, 195, 154, 0.1);
        color: var(--success);
    }

    .role-badge.dosen {
        background: rgba(252, 176, 44, 0.1);
        color: var(--warning);
    }

    .preview-box {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 1rem;
        padding: 2rem;
        text-align: center;
        color: white;
    }

    .preview-icon {
        width: 80px;
        height: 80px;
        background: rgba(255,255,255,0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
    }

    .preview-icon i {
        font-size: 2rem;
    }
</style>
@endpush

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="maintenance-card">
            <div class="maintenance-header {{ $maintenanceMode === '1' ? 'active' : '' }}">
                <div class="d-flex align-items-center gap-3">
                    <div style="width: 56px; height: 56px; background: rgba(255,255,255,0.2); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center;">
                        <i class="bi bi-shield-check fs-4"></i>
                    </div>
                    <div>
                        <h5 class="mb-0">Mode Maintenance</h5>
                        <small class="opacity-75">Pengaturan akses website</small>
                    </div>
                </div>
            </div>

            <div class="maintenance-body">
                <!-- Status Indicator -->
                <div class="status-indicator {{ $maintenanceMode === '1' ? 'active' : 'inactive' }}">
                    <div class="status-dot {{ $maintenanceMode === '1' ? 'active' : 'inactive' }}"></div>
                    <div>
                        <strong>Status:</strong>
                        <span class="ms-2">
                            @if($maintenanceMode === '1')
                                <span class="text-danger fw-bold">AKTIF</span>
                            @else
                                <span class="text-success fw-bold">NONAKTIF - Website bisa diakses normal</span>
                            @endif
                        </span>
                    </div>
                </div>

                <form action="{{ route('admin.maintenance.update') }}" method="POST">
                    @csrf

                    <!-- Main Toggle -->
                    <div class="toggle-card">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <h6 class="mb-1">Aktifkan Mode Maintenance</h6>
                                <p class="mb-0 text-muted small">Aktifkan untuk membatasi akses website</p>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="maintenance_mode" value="1" id="maintenanceSwitch" {{ $maintenanceMode === '1' ? 'checked' : '' }}>
                            </div>
                        </div>
                    </div>

                    @if($maintenanceMode === '1')
                    <!-- Role-specific Toggles -->
                    <div class="toggle-card" style="background: white; border: 1px solid var(--gray-200);">
                        <h6 class="mb-3"><i class="bi bi-people me-2"></i>Terapkan Maintenance Untuk:</h6>

                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <div class="d-flex align-items-center gap-2">
                                <span class="role-badge admin"><i class="bi bi-shield-check me-1"></i>Admin</span>
                                <span class="text-muted small">Selalu bisa akses</span>
                            </div>
                            <span class="badge bg-secondary">Bypass Otomatis</span>
                        </div>

                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <div class="d-flex align-items-center gap-2">
                                <span class="role-badge mahasiswa"><i class="bi bi-mortarboard me-1"></i>Mahasiswa</span>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="maintenance_for_mahasiswa" value="1" id="mahasiswaSwitch" {{ $maintenanceForMahasiswa === '1' ? 'checked' : '' }}>
                            </div>
                        </div>

                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center gap-2">
                                <span class="role-badge dosen"><i class="bi bi-person-badge me-1"></i>Dosen</span>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="maintenance_for_dosen" value="1" id="dosenSwitch" {{ $maintenanceForDosen === '1' ? 'checked' : '' }}>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Warning Box -->
                    <div class="warning-box">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        <div>
                            <strong>Informasi:</strong>
                            <ul class="mb-0 mt-1">
                                <li>Admin selalu bisa mengakses website</li>
                                <li>Halaman login tetap bisa diakses</li>
                                <li>Pilih role yang akan diblokir saat maintenance aktif</li>
                            </ul>
                        </div>
                    </div>

                    <!-- Message -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Pesan Maintenance</label>
                        <textarea name="maintenance_message" class="form-control" rows="3" placeholder="Masukkan pesan yang akan ditampilkan...">{{ $maintenanceMessage }}</textarea>
                        <small class="text-muted">Pesan ini akan ditampilkan kepada pengguna saat website dalam mode maintenance.</small>
                    </div>

                    <!-- Submit -->
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-2"></i>Simpan Pengaturan
                        </button>
                        <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left me-2"></i>Kembali
                        </a>
                    </div>
                </form>

                @if($maintenanceMode === '1')
                <!-- Preview -->
                <hr class="my-4">
                <h6 class="mb-3"><i class="bi bi-eye me-2"></i>Preview Halaman Maintenance</h6>

                <div class="preview-box">
                    <div class="preview-icon">
                        <i class="bi bi-tools"></i>
                    </div>
                    <h5 style="color: white;">Website Sedang Diperbaiki</h5>
                    <p style="opacity: 0.9; font-size: 0.9rem;">{{ $maintenanceMessage }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection