@extends('layouts.app')

@section('title', 'Kode Akses Pendataan')

@section('style')
<style>
    body {
        background: #e8e4d9;
        color: #4a3728;
    }

    .container-main {
        min-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Card Styling */
    .card-office-code {
        background: rgba(255, 255, 255, 0.9); /* Slate 800 with transparency */
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(212, 160, 23, 0.2);
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .card-office-code:hover {
        border-color: rgba(212, 160, 23, 0.4);
    }

    .office-code-header {
        background: linear-gradient(135deg, #e6ddc5 0%, #f6e5b3 100%);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding: 2.5rem 2rem;
        text-align: center;
    }

    .office-code-header h2 {
        margin: 0;
        font-weight: 800;
        color: #4a3728;
        font-size: 1.75rem;
    }

    .office-code-header p {
        color: #94a3b8; /* Slate 400 */
        margin-top: 0.5rem;
        font-size: 0.925rem;
    }

    .office-code-body {
        padding: 2.5rem 2rem;
    }

    /* Info Alert Box */
    .info-box {
        background: rgba(212, 160, 23, 0.08);
        border-left: 4px solid #d4a017;
        border-radius: 6px;
        padding: 1rem 1.25rem;
        margin-bottom: 2rem;
        font-size: 0.9rem;
        color: #4a3728;
    }

    .info-box i {
        color: #d4a017;
    }

    /* Forms */
    .form-label {
        font-weight: 600;
        color: #4a3728;
        margin-bottom: 0.5rem;
    }

    .form-control-dark {
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        color: #4a3728 !important;
        border-radius: 12px;
        padding: 0.875rem 1.25rem;
        font-size: 1.1rem;
        letter-spacing: 0.05em;
        transition: all 0.3s ease;
    }

    .form-control-dark:focus {
        background: #ffffff !important;
        border-color: #d4a017 !important;
        box-shadow: 0 0 0 0.25rem rgba(32, 95, 150, 0.2) !important;
        outline: none;
    }

    .form-control-dark::placeholder {
        color: #adb5bd !important; /* Slate 600 */
    }

    .btn-submit-code {
        background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%);
        border: none;
        border-radius: 12px;
        padding: 0.875rem 1.5rem;
        font-weight: 700;
        color: #4a3728;
        width: 100%;
        box-shadow: 0 8px 20px rgba(212, 160, 23, 0.25);
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .btn-submit-code:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(212, 160, 23, 0.45);
        color: #4a3728;
    }

    .btn-submit-code:active {
        transform: translateY(0);
    }

    /* Glow blobs in background */
    .bg-glow-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.1;
        z-index: 0;
        pointer-events: none;
    }

    .blob-code-1 {
        top: 20%;
        left: 15%;
        width: 400px;
        height: 400px;
        background: #d4a017;
    }

    .blob-code-2 {
        bottom: 20%;
        right: 15%;
        width: 450px;
        height: 450px;
        background: #c9930a;
    }

    .required::after {
        content: "*";
        color: #ef4444;
        margin-left: 0.25rem;
    }
</style>
@endsection

@section('content')
<div class="bg-glow-blob blob-code-1"></div>
<div class="bg-glow-blob blob-code-2"></div>

<div class="row justify-content-center position-relative w-100 py-5" style="z-index: 10;">
    <div class="col-md-8 col-lg-5">
        <div class="text-center mb-4">
            <span class="badge px-3 py-2 rounded-pill fw-semibold border" style="background-color: rgba(212,160,23,0.1); color: #d4a017; border-color: rgba(212,160,23,0.2) !important;">
                <i class="fas fa-shield-halved me-1"></i> VERIFIKASI IDENTITAS UNIT
            </span>
        </div>

        <div class="card card-office-code">
            <div class="office-code-header">
                <h2><i class="fas fa-key me-2" style="color: #d4a017;"></i> Kode Akses Pendataan</h2>
                <p>Silakan masukkan kode kantor untuk membuka formulir pendataan pegawai.</p>
            </div>
            
            <div class="office-code-body">
                <div class="info-box">
                    <div class="d-flex gap-2">
                        <i class="fas fa-info-circle fs-5 mt-0.5"></i>
                        <div>
                            Kode akses diperoleh dari pengelola kepegawaian unit kerja Anda dan berfungsi untuk menetapkan unit penugasan data Anda secara otomatis.
                        </div>
                    </div>
                </div>

                <form action="{{ route('pegawai.access.verify') }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label for="kode" class="form-label required">Kode Kantor</label>
                        <input type="text" id="kode" name="kode"
                            class="form-control form-control-dark text-uppercase @error('kode') is-invalid @enderror"
                            value="{{ old('kode') }}" placeholder="Contoh: SKB-AB12CD" maxlength="32"
                            autocomplete="off" autofocus required>
                        @error('kode')
                            <div class="invalid-feedback mt-2">{{ $message }}</div>
                        @enderror
                    </div>

                    <button type="submit" class="btn btn-submit-code">
                        <span>Lanjut ke Pendataan</span> <i class="fas fa-arrow-right"></i>
                    </button>
                </form>
            </div>
        </div>

        <div class="text-center mt-4">
            <a href="{{ route('home') }}" class="text-secondary text-decoration-none small transition-all hover:text-dark" style="transition: color 0.2s;">
                <i class="fas fa-arrow-left me-1"></i> Kembali ke Beranda
            </a>
        </div>
    </div>
</div>
@endsection