@extends('layouts.register')

@section('styles')
<style>
    /* Paksa teks judul dan label jadi putih */
    h3, .form-label, p { color: #fff !important; }
    h3 { font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

    /* Input & Select Glass Style */
    .form-control, .form-select { 
        background: rgba(255, 255, 255, 0.08) !important; 
        border: 1px solid rgba(255, 255, 255, 0.2) !important; 
        color: #fff !important; 
    }
    .form-control[readonly] { 
        background: rgba(255, 255, 255, 0.03) !important; 
        color: #00ff88 !important; /* Hijau neon buat nominal biar kontras */
        border: 1px solid rgba(0, 255, 136, 0.2) !important;
    }
    .form-control:focus, .form-select:focus { 
        background: rgba(255, 255, 255, 0.15) !important; 
        border-color: #fff !important; 
        box-shadow: none !important; 
    }

    /* Option select agar tidak hitam */
    select option { background: #1e3a8a; color: #fff; }

    /* Alert Glass Mode */
    .alert-glass { 
        background: rgba(220, 53, 69, 0.2); 
        border: 1px solid rgba(220, 53, 69, 0.3); 
        color: #fff !important; 
        border-radius: 12px;
    }

    /* Tombol Selesai */
    .btn-finish {
        background: #fff;
        color: #1e3a8a;
        border: none;
        border-radius: 12px;
        padding: 12px;
        font-weight: 700;
        text-transform: uppercase;
        transition: 0.3s;
    }
    .btn-finish:hover {
        background: rgba(255, 255, 255, 0.9);
        transform: translateY(-2px);
        color: #1e3a8a;
    }

    /* Preview Box */
    .img-thumbnail {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 5px;
        border-radius: 10px;
    }
</style>
@endsection

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

<div class="text-center mb-4">
    <h3 class="mb-2">Step 5 – Pembayaran Registrasi</h3>
    <p class="small opacity-75">Selesaikan pembayaran untuk mengaktifkan akun Anda</p>
</div>

{{-- ERROR GLOBAL - Style Glass --}}
@if ($errors->any())
    <div class="alert alert-glass mb-4 shadow-sm">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ route('register.step5.store') }}" method="POST" enctype="multipart/form-data" id="formStep5">
    @csrf

    <div class="mb-3">
        <label class="form-label">Metode pembayaran</label>
        <select name="metode" class="form-select" required id="metode-pembayaran">
            <option value="">PILIH METODE</option>
            <option value="transfer" {{ old('metode')=='transfer'?'selected':'' }}>
                TRANSFER (REK: {{ $user->rw->rekening ?? '-' }})
            </option>
            <option value="cash" {{ old('metode')=='cash'?'selected':'' }}>CASH / TUNAI</option>
        </select>
    </div>

    <div class="mb-3">
        <label class="form-label">Nominal yang harus dibayar</label>
        <input type="text"
               class="form-control fw-bold fs-5"
               value="Rp {{ number_format($nominal, 0, ',', '.') }}"
               readonly>
    </div>

    <div class="mb-3">
        <label class="form-label">Upload bukti pembayaran sah <span class="text-danger">*</span></label>
        <input type="file"
               name="bukti_transfer"
               class="form-control"
               accept="image/*"
               required>
        <p class="small mt-2 opacity-50" style="font-size: 0.7rem;">Format: JPG, PNG, JPEG (Maks. 2MB)</p>
    </div>

    {{-- PREVIEW --}}
    <div class="mb-4 text-center" id="preview-container" style="display:none;">
        <p class="mb-2 small fw-bold">PREVIEW BUKTI:</p>
        <img id="preview-img" class="img-thumbnail" style="max-width:100%; height: 200px; object-fit: contain;">
    </div>

    <button type="submit" class="btn btn-finish w-100 shadow-lg" id="btnSubmit">
        Selesai & Kirim Pembayaran
    </button>
</form>
@endsection

@section('scripts')
<script>
// Preview Bukti Upload
document.querySelector('input[name="bukti_transfer"]').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(ev) {
        document.getElementById('preview-img').src = ev.target.result;
        document.getElementById('preview-container').style.display = 'block';
    };
    reader.readAsDataURL(file);
});

// Loading state saat submit
document.getElementById('formStep5').addEventListener('submit', function () {
    const btn = document.getElementById('btnSubmit');
    if(btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> MENGIRIM...';
    }
});
</script>
@endsection