@extends('layouts.register')

@section('styles')
<style>
    /* Tipografi & Judul */
    h2, p, .form-check-label { color: #fff !important; }
    h2 { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
    p { font-size: 0.85rem; opacity: 0.8; }

    /* Iframe & PDF Container */
    .pdf-wrapper {
        position: relative;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 15px;
        overflow: hidden;
        min-height: 450px;
    }
    
    /* Loader saat PDF loading */
    .pdf-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
    }

    iframe {
        position: relative;
        z-index: 1;
        background: transparent;
    }

    /* Custom Checkbox Glassmorphism */
    .agreement-box {
        display: flex;
        align-items: flex-start;
        padding: 20px !important;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        transition: 0.3s all ease;
        cursor: pointer;
    }

    .agreement-box:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .form-check-input {
        width: 26px !important;
        height: 26px !important;
        margin-right: 15px;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border: 2px solid rgba(255, 255, 255, 0.4) !important;
        cursor: pointer;
        transition: 0.2s;
        flex-shrink: 0;
    }

    .form-check-input:checked {
        background-color: #22c55e !important;
        border-color: #4ade80 !important;
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.4) !important;
    }

    .form-check-label {
        cursor: pointer;
        user-select: none;
        font-size: 0.95rem;
        line-height: 1.4;
    }

    /* Shake Animation untuk validasi */
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }
    .shake { animation: shake 0.3s ease-in-out; border-color: #ff4d4d !important; }

    /* Buttons */
    .btn-glass {
        background: rgba(255, 255, 255, 0.1);
        color: #fff !important; /* Paksa putih */
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        padding: 12px 25px;
        border-radius: 12px;
        transition: 0.3s;
    }
    .btn-glass:hover { background: rgba(255, 255, 255, 0.2); color: #fff !important; }

    .btn-submit-custom {
        background: rgba(255, 255, 255, 0.1); /* Default redup */
        color: #fff !important; /* TEKS JADI PUTIH */
        font-weight: 700;
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 12px 30px;
        border-radius: 12px;
        transition: 0.3s;
        opacity: 0.5;
    }

    /* Saat checkbox dicentang (Aktif) */
    .btn-submit-custom.active { 
        opacity: 1; 
        background: #22c55e !important; /* Gue ganti jadi Hijau biar masuk tema "Setuju" */
        border-color: #4ade80;
        color: #fff !important; /* TEKS TETAP PUTIH */
        box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
    }
    
    .btn-submit-custom.active:hover { 
        transform: translateY(-2px); 
        background: #16a34a !important; /* Hijau agak gelap pas dihover */
    }
    .btn-submit-custom.active { opacity: 1; transform: translateY(0); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
    .btn-submit-custom.active:hover { transform: translateY(-2px); background: #f8fafc; }
</style>
@endsection

@section('content')
@include('auth.register.partials.progress', ['step' => 4])

<div class="text-center mb-4">
    <h2 class="mb-2">Konfirmasi & Persetujuan</h2>
    <p>Silakan baca Anggaran Dasar / Aturan Sinoman berikut sebelum melanjutkan.</p>
</div>

<div class="mb-4 pdf-wrapper shadow-lg">
    <div class="pdf-loader text-white text-center">
        <div class="spinner-border spinner-border-sm mb-2"></div>
        <div class="small opacity-50">Memuat Dokumen...</div>
    </div>
    <iframe src="{{ $pdfPath }}#toolbar=0" width="100%" height="480px" class="border-0 rounded-3" onload="this.previousElementSibling.style.display='none'"></iframe>
</div>

<form action="{{ route('register.step4.store') }}" method="POST" id="formStep4">
    @csrf

    <div class="form-check mb-4 agreement-box shadow-sm" id="agreementContainer">
        <input class="form-check-input ms-0" type="checkbox" name="setuju" id="setuju" value="1">
        <label class="form-check-label" for="setuju">
            Saya menyatakan telah membaca, memahami, dan <strong>SETUJU</strong> sepenuhnya dengan aturan Sinoman (Versi Dokumen: {{ $versiDokumen }}).
        </label>
    </div>

    <div class="d-flex justify-content-between gap-3">
        <a href="{{ route('register.step3') }}" class="btn btn-glass flex-fill text-center">
            <i class="bi bi-arrow-left me-2"></i> Kembali
        </a>
        <button type="submit" class="btn btn-submit-custom flex-fill text-center" id="btnSubmit" disabled>
            Setuju & Lanjut <i class="bi bi-credit-card ms-2"></i>
        </button>
    </div>
</form>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkbox = document.getElementById('setuju');
    const btnSubmit = document.getElementById('btnSubmit');
    const container = document.getElementById('agreementContainer');

    // Toggle Button State
    checkbox.addEventListener('change', function() {
        if (this.checked) {
            btnSubmit.disabled = false;
            btnSubmit.classList.add('active');
            container.classList.remove('shake');
            container.style.borderColor = 'rgba(74, 222, 128, 0.5)';
        } else {
            btnSubmit.disabled = true;
            btnSubmit.classList.remove('active');
            container.style.borderColor = 'rgba(255, 255, 255, 0.1)';
        }
    });

    // Validasi saat submit (ekstra guard)
    document.getElementById('formStep4').addEventListener('submit', function(e) {
        if (!checkbox.checked) {
            e.preventDefault();
            container.classList.add('shake');
            setTimeout(() => container.classList.remove('shake'), 400);
            return false;
        }

        // Loading State
        btnSubmit.disabled = true;
        btnSubmit.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Menyimpan...';
    });
});
</script>
@endsection