@extends('pmb.layout')

@section('title', 'Upload Pas Foto')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
        <div class="pmb-card">
            <div class="pmb-card-header">
                <h5><i class="fas fa-camera me-2"></i>Upload Pas Foto</h5>
            </div>
            <div class="pmb-card-body">
                <div class="alert alert-undarma alert-undarma-info mb-4">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Ketentuan Foto:</strong> Format JPG/PNG, ukuran maksimal 2MB, latar belakang merah/biru, menggunakan pakaian formal.
                </div>

                <form method="POST" action="{{ route('pmb.step.update', 'pas_foto') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-4">
                        <div class="upload-area" onclick="document.getElementById('pas_foto').click()">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p class="mb-1 fw-bold">Klik untuk upload foto</p>
                            <p class="text-muted mb-0" style="font-size: 0.85rem;">atau drag & drop file di sini</p>
                        </div>
                        <input type="file" name="pas_foto" id="pas_foto" class="d-none" accept="image/*" required
                               onchange="previewImage(this)">
                    </div>

                    <div id="preview-container" class="text-center mb-4 {{ $pendaftaran->pas_foto ? '' : 'd-none' }}">
                        <img id="preview-img" src="{{ $pendaftaran->pas_foto ? asset('storage/' . $pendaftaran->pas_foto) : '' }}" 
                             class="img-fluid rounded" style="max-height: 250px; border: 3px solid var(--undarma-gold);">
                        <p class="mt-2 text-muted" style="font-size: 0.85rem;">Preview foto</p>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('pmb.dashboard') }}" class="btn btn-undarma-outline">
                            <i class="fas fa-arrow-left me-2"></i>Kembali
                        </a>
                        <button type="submit" class="btn btn-undarma-gold">
                            <i class="fas fa-save me-2"></i>Simpan & Lanjutkan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function previewImage(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('preview-img').src = e.target.result;
            document.getElementById('preview-container').classList.remove('d-none');
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush