@extends('layouts.anggota')

@section('title', 'Pengaturan Sistem - Pustaka Nawasena')

@section('content')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
    /* --- MENYEMBUNYIKAN SCROLLBAR BROWSER (SISI KANAN LAYAR) --- */
    html, body {
        /* Untuk Chrome, Safari, dan Opera */
        -webkit-overflow-scrolling: touch;
    }
    
    html::-webkit-scrollbar, 
    body::-webkit-scrollbar {
        display: none !important; /* Hilangkan batangan scrollbar */
        width: 0 !important;
        height: 0 !important;
    }

    html, body {
        -ms-overflow-style: none !important;  /* Untuk Internet Explorer dan Edge lama */
        scrollbar-width: none !important;     /* Untuk Firefox */
    }

    /* --- ARSITEKTUR DESAIN FORMAL KEDINASAN --- */
    .system-settings-container {
        font-family: 'Poppins', sans-serif;
        color: #111827; /* Hitam Pekat untuk kontras maksimal */
    }

    /* Judul halaman formal */
    .bakorwil-page-title {
        font-size: 1.6rem;
        font-weight: 700;
        color: #111827;
        letter-spacing: 0.5px;
    }

    /* Panel Solid State */
    .formal-card-panel {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
        margin-bottom: 30px;
    }

    /* Sub-Header Sektor Administrasi */
    .panel-administrative-title {
        font-size: 1rem;
        font-weight: 700;
        color: #0072b1; /* Biru Utama Bakorwil III */
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 22px;
        padding-bottom: 8px;
        border-bottom: 2px solid #edf2f7;
    }

    /* Form Komponen Minimalis */
    .form-label-kedinasan {
        font-size: 0.85rem;
        font-weight: 600;
        color: #111827; /* Hitam Pekat */
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Pembersihan Total Ikon Dropdown */
    .select-clean-input {
        width: 100%;
        padding: 12px 16px !important;
        font-size: 0.92rem;
        color: #111827;
        background-color: #f9fafb;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        outline: none;
        box-sizing: border-box;
        
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        
        transition: all 0.15s ease-in-out;
    }

    .select-clean-input::-ms-expand {
        display: none !important;
    }

    /* Kondisi Input Terfokus */
    .select-clean-input:focus {
        background-color: #ffffff;
        border-color: #0072b1;
        box-shadow: 0 0 0 1px #0072b1;
    }

    /* Tombol Eksekusi Birokrasi */
    .btn-formal-execute {
        background-color: #0072b1;
        color: #ffffff;
        border: 1px solid #005f94;
        padding: 12px 24px;
        font-weight: 600;
        font-size: 0.9rem;
        border-radius: 6px;
        letter-spacing: 0.5px;
        transition: all 0.15s ease;
        height: 100%;
    }

    .btn-formal-execute:hover {
        background-color: #005f94;
        color: #ffffff;
        border-color: #004b75;
    }

    /* Struktur Tabel Presisi Tinggi */
    .table-responsive-formal {
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #e5e7eb;
    }

    .table-formal-data {
        margin-bottom: 0;
        background: #ffffff;
    }

    .table-formal-data thead {
        background-color: #f8fafc;
        border-bottom: 2px solid #e2e8f0;
    }

    .table-formal-data th {
        font-weight: 700;
        font-size: 0.82rem;
        color: #334155;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        padding: 14px 20px !important;
    }

    .table-formal-data td {
        padding: 14px 20px !important;
        font-size: 0.9rem;
        color: #111827;
        border-bottom: 1px solid #f1f5f9;
    }

    .table-formal-data tbody tr:hover {
        background-color: #f8fafc !important;
    }

    /* Badges Otoritas & Status Minimalis Flat */
    .badge-flat-admin {
        background-color: #e0f2fe;
        color: #0369a1;
        font-weight: 600;
        font-size: 0.78rem;
        padding: 4px 10px;
        border-radius: 4px;
        border: 1px solid #bae6fd;
    }

    .badge-flat-user {
        background-color: #f1f5f9;
        color: #475569;
        font-weight: 600;
        font-size: 0.78rem;
        padding: 4px 10px;
        border-radius: 4px;
        border: 1px solid #e2e8f0;
    }

    .badge-flat-active {
        background-color: #dcfce7;
        color: #15803d;
        font-weight: 600;
        font-size: 0.78rem;
        padding: 4px 10px;
        border-radius: 4px;
        border: 1px solid #bbf7d0;
    }

    .badge-flat-blocked {
        background-color: #fee2e2;
        color: #b91c1c;
        font-weight: 600;
        font-size: 0.78rem;
        padding: 4px 10px;
        border-radius: 4px;
        border: 1px solid #fca5a5;
    }

    /* Tombol Aksi Kerja Dalam Tabel */
    .btn-action-flat {
        padding: 6px 14px;
        font-size: 0.8rem;
        font-weight: 600;
        border-radius: 4px;
        transition: all 0.15s;
        border: 1px solid #d1d5db;
        background-color: #ffffff;
        color: #374151;
    }

    .btn-action-flat:hover {
        background-color: #f9fafb;
        border-color: #9ca3af;
        color: #111827;
    }

    .btn-action-danger-flat {
        color: #b91c1c;
        border-color: #fca5a5;
        background-color: #fff1f1;
    }

    .btn-action-danger-flat:hover {
        background-color: #fee2e2;
        border-color: #ef4444;
        color: #991b1b;
    }
</style>

<div class="container py-4 system-settings-container">
    
    <div class="mb-4">
        <h2 class="bakorwil-page-title">PENGATURAN SISTEM</h2>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4" role="alert" style="border-left: 4px solid #15803d !important; background: #ffffff;">
            <span class="text-success fw-semibold" style="font-size: 0.9rem;"><i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm mb-4" role="alert" style="border-left: 4px solid #b91c1c !important; background: #ffffff;">
            <span class="text-danger fw-semibold" style="font-size: 0.9rem;"><i class="bi bi-exclamation-triangle-fill me-2"></i>{{ session('error') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="formal-card-panel">
        <h3 class="panel-administrative-title">Otorisasi Administrator</h3>
        
        <form action="{{ route('admin.system.add') }}" method="POST" class="row g-3 align-items-end">
            @csrf
            <div class="col-md-9">
                <label for="user_id" class="form-label-kedinasan">Pilih Akun Anggota</label>
                <div>
                    <select name="user_id" id="user_id" class="select-clean-input" required>
                        <option value="" selected disabled>-- Pilih Pengguna Untuk Diberikan Hak Akses Admin --</option>
                        @foreach($users as $user)
                            @if($user->role !== 'admin')
                                <option value="{{ $user->id }}">
                                    {{ $user->name }} &nbsp;|&nbsp; {{ $user->email }}
                                </option>
                            @endif
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn btn-formal-execute w-100">
                    Tetapkan Otoritas
                </button>
            </div>
        </form>
    </div>

    <div class="formal-card-panel">
        <h3 class="panel-administrative-title">Direktori Pengguna & Otoritas Sistem</h3>

        <div class="table-responsive-formal">
            <table class="table table-formal-data align-middle">
                <thead>
                    <tr>
                        <th>Nama Lengkap</th>
                        <th>Alamat Email</th>
                        <th>Peran</th>
                        <th>Status</th>
                        <th class="text-center">Tindakan Otoritas</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($users as $user)
                    <tr>
                        <td class="fw-semibold">{{ $user->name }}</td>
                        <td class="text-secondary">{{ $user->email }}</td>

                        <td>
                            @if($user->role === 'admin')
                                <span class="badge-flat-admin">ADMINISTRATOR</span>
                            @else
                                <span class="badge-flat-user">USER</span>
                            @endif
                        </td>

                        <td>
                            @if($user->blocked_at)
                                <span class="badge-flat-blocked">DIBATASI</span>
                            @else
                                <span class="badge-flat-active">AKTIF</span>
                            @endif
                        </td>

                        <td class="text-center">
                            <div class="d-flex justify-content-center gap-2">
                                @if($user->role === 'admin')
                                    @if($user->id !== auth()->id())
                                        <form action="{{ route('admin.system.remove') }}" method="POST" class="d-inline">
                                            @csrf
                                            <input type="hidden" name="user_id" value="{{ $user->id }}">
                                            <button type="submit" class="btn btn-action-flat btn-action-danger-flat"
                                                onclick="return confirm('Cabut status kedinasan admin untuk {{ $user->name }}?')">
                                                Cabut Admin
                                            </button>
                                        </form>
                                    @else
                                        <span class="text-muted fst-italic" style="font-size: 0.8rem; padding: 6px 12px; display: inline-block;">Sesi Aktif Anda</span>
                                    @endif
                                @else
                                    <form action="{{ route('admin.system.add') }}" method="POST" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="user_id" value="{{ $user->id }}">
                                        <button type="submit" class="btn btn-action-flat">
                                            Jadikan Admin
                                        </button>
                                    </form>
                                @endif

                                @if($user->id !== auth()->id())
                                    @if(!$user->blocked_at)
                                        <form action="{{ route('admin.system.block') }}" method="POST" class="d-inline">
                                            @csrf
                                            <input type="hidden" name="user_id" value="{{ $user->id }}">
                                            <button type="submit" class="btn btn-action-flat btn-action-danger-flat"
                                                onclick="return confirm('Tangguhkan akun {{ $user->name }}? Akses log-in dan IoT perpustakaan akan dibekukan sementara.')">
                                                Batasi Akses
                                            </button>
                                        </form>
                                    @else
                                        <form action="{{ route('admin.system.unblock') }}" method="POST" class="d-inline">
                                            @csrf
                                            <input type="hidden" name="user_id" value="{{ $user->id }}">
                                            <button type="submit" class="btn btn-action-flat" style="color: #15803d; border-color: #bbf7d0; background-color: #dcfce7;"
                                                onclick="return confirm('Pulihkan kembali hak akses penuh untuk {{ $user->name }}?')">
                                                Pulihkan
                                            </button>
                                        </form>
                                    @endif
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection