@extends('layouts.app')
@section('content')
<script src="{{ asset('js/parsley.min.js') }}"></script>
<div>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.alt') }}">Utama</a></li>
            <li class="breadcrumb-item active">Edit Gambar Murid</li>
        </ol>
    </nav>
    <div class="col md-6">
        <div class="card shadow-sm border-0 rounded">
            <div class="card-body">
                <h5 class="card-title">Edit Gambar Murid</h5>
                {{-- <p class="text-muted" style="margin-bottom: 20px;">Daftar murid dan aktifkan kad untuk akses faedah.</p> --}}

                <div class="mb-4">
                    @include('errors')

                    @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show col-md-8" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif

                    @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show col-md-8" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif

                    <form action="{{ route('admin.students.storeeditphoto') }}" method="POST" enctype="multipart/form-data" data-parsley-validate>
                        @csrf
                        <div id="child-registration-forms">
                            <!-- Child Registration Form Template -->
                            <div class="child-registration-form">
                                <h6>Info Murid</h6>
                                <div class="mb-3">
                                    <label for="student_ic" class="form-label">MyKad / Passport Murid<span style="color: red">*</span></label>
                                    <input type="text" class="form-control" name="student_ic" 
                                    data-parsley-pattern="^(([0-9]{2})(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01]))([0-9]{2})([0-9]{4})$"
                                    required data-parsley-type="digits" data-parsley-trigger="change">
                                    <small>Sila Semak No Ic Murid</small>
                                </div>

                                 <div class="mb-3">
                                     <!-- Rules Section -->
                                        <div class="rules bg-light p-3 mb-3 border rounded">
                                            <h5 class="fw-bold">Panduan Gambar</h5>
                                            <ul>
                                                <li><strong>Lelaki:</strong>
                                                    <ul>
                                                        <li>Pakaian: Seragam Sekolah</li>
                                                        <li>Rambut: Pendek dan kemas, tidak melebihi kolar. Gaya rambut tidak boleh berlebihan dan harus sesuai sebagai pelajar.</li>
                                                    </ul>
                                                </li>
                                                <li><strong>Perempuan:</strong>
                                                    <ul>
                                                        <li>Pakaian: Seragam Sekolah</li>
                                                        <li>Pelajar muslim tidak dibenarkan memakai niqab/purdah yang menutup sebahagian muka.</li>
                                                    </ul>
                                                </li>
                                                <li>Latarkan gambar: Diambil di hadapan latar putih polos sahaja (seperti gambar pasport/VISA). Disyorkan mengambil gambar di studio untuk kualiti yang lebih baik.</li>
                                                <li>Saiz gambar pasport: 35 x 50 mm (1.38 x 1.97 inci)</li>
                                                <li><strong>Contoh Kad Murid</strong><br>
                                                    <img style="width: 15%" src="{{ asset('img/photo-sample.jpg') }}" alt="Contoh Gambar">
                                                </li>
                                            </ul>
                                        </div>


                                         <label for="student_image" class="form-label">Muatnaik Gambar Murid<span class="text-danger">*</span></label>
                                <input type="file"
                                       class="form-control"
                                       id="student_image"
                                       name="student_image"
                                       required
                                       accept=".jpeg,.jpg,.png"
                                       data-parsley-max-file-size="10240"
                                       data-parsley-required-message="Sila pilih gambar murid."
                                       data-parsley-max-file-size-message="Saiz gambar tidak boleh melebihi 10MB."
                                       data-parsley-trigger="change">
                                <small class="text-muted">Saiz Gambar maksimum: 10MB. Format: JPEG, JPG, PNG</small>

                                <hr>
                            </div>
                        </div>
                        <br>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg px-4 py-2 mt-2 rounded-pill shadow-sm">Daftar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="contohGambarModal" tabindex="-1" aria-labelledby="contohGambarModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="contohGambarModalLabel">Contoh Gambar</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img src="{{ asset('img/photo-sample.jpg') }}" alt="Contoh Gambar" class="img-fluid rounded">
                <p class="mt-3">Ini adalah contoh gambar untuk muat naik. <br> Sila rujuk panduan di atas.</p>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('js/parsley.min.js') }}"></script>
<script src="{{ asset('js/ms.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    // ===== PARSLEY VALIDATION SETUP =====
    // Custom validator for file size
    window.Parsley.addValidator('maxFileSize', {
        validateString: function (_value, maxSizeKB, parsleyInstance) {
            const files = parsleyInstance.$element[0].files;
            if (files.length === 0) return true; // No file, let required handle it
            
            const file = files[0];
            const maxSizeBytes = maxSizeKB * 1024; // Convert KB to bytes
            
            return file.size <= maxSizeBytes;
        },
        requirementType: 'integer',
        messages: {
            en: 'File size must not exceed %s KB.',
            ms: 'Saiz fail tidak boleh melebihi 10MB.'
        }
    });

    // Custom validator for file type
    window.Parsley.addValidator('fileType', {
        validateString: function (_value, allowedTypes, parsleyInstance) {
            const files = parsleyInstance.$element[0].files;
            if (files.length === 0) return true;
            
            const file = files[0];
            const allowedTypesArray = allowedTypes.split(',');
            
            return allowedTypesArray.some(type => 
                file.type === `image/${type.trim()}` || 
                file.name.toLowerCase().endsWith(`.${type.trim()}`)
            );
        },
        requirementType: 'string',
        messages: {
            en: 'File must be of type: %s.',
            ms: 'Gambar mestilah dalam format yang dibenarkan.'
        }
    });

    // Initialize Parsley on the form
    if ($('form[data-parsley-validate]').length) {
        $('form[data-parsley-validate]').parsley();
    }

    // ===== IMAGE PREVIEW FUNCTIONALITY =====
    const studentImageInput = document.getElementById('student_image');
    if (studentImageInput) {
        studentImageInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    // Remove existing preview
                    const existingPreview = document.getElementById('image-preview');
                    if (existingPreview) {
                        existingPreview.remove();
                    }
                    
                    // Add new preview
                    const previewDiv = document.createElement('div');
                    previewDiv.id = 'image-preview';
                    previewDiv.className = 'mt-2';
                    previewDiv.innerHTML = `
                        <img src="${e.target.result}" style="max-width: 200px; max-height: 200px; border: 1px solid #ddd; padding: 5px;">
                        <p class="small text-muted mb-0">
                            ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)
                        </p>
                    `;
                    
                    studentImageInput.parentNode.insertBefore(previewDiv, studentImageInput.nextSibling);
                    
                    // Trigger validation update
                    if (window.Parsley) {
                        $(studentImageInput).parsley().validate();
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    }
});
</script>
@endsection