@extends('dashlayouts.app')
@section('content')
    <script src="{{ asset('js/parsley.min.js') }}"></script>
    <div>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Utama</a></li>
                <li class="breadcrumb-item active">Kemaskini 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">Kemaskini Gambar Murid</h5>

                    <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>

                    <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('photo.update') }}" 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>
                                    @foreach($childrenBadPhoto as $child)
                                        <div class="mb-3">
                                            <label for="studentname" class="form-label">Nama Murid</label>
                                            <input readonly type="text" class="form-control" name="students[{{ $loop->index }}][student_name]" value="{{ $child->student_name }}" required data-parsley-pattern="^[A-Za-z\s]+$" data-parsley-trigger="change" style="text-transform: uppercase" oninput="this.value = this.value.toUpperCase()">
                                        </div>
                                        <div class="mb-3">
                                            <label for="studentIC" class="form-label">MyKad / Passport Murid</label>
                                            <input readonly type="text" class="form-control" name="students[{{ $loop->index }}][student_id]" value="{{ $child->student_id }}" required data-parsley-type="digits" data-parsley-trigger="change">
                                        </div>
                                        <div class="mb-3">
                                            <label for="studentimage-{{ $loop->index }}">Muatnaik Gambar Murid<span style="color: red">*</span></label>
                                            <input type="file"
                                                   class="form-control"
                                                   id="studentimage-{{ $loop->index }}"
                                                   name="students[{{ $loop->index }}][student_image][]"
                                                   required
                                                   accept=".jpeg, .jpg, .png"
                                                   data-parsley-max-file-size="10240" 
                                                   data-parsley-trigger="change"
                                                   data-parsley-error-message="Saiz fail tidak boleh melebihi 10MB">
                                            <small class="text-muted">Saiz Gambar maksimum: 10MB</small>
                                        </div>
                                    @endforeach
                                    <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">Kemaskini</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{{ asset('js/parsley.min.js') }}"></script>
    <script src="{{ asset('js/ms.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Initialize Parsley on the form
            $('form[data-parsley-validate]').parsley();
    
            window.Parsley.addValidator('maxFileSize', {
                validateString: function (_value, maxSize, parsleyInstance) {
                    const files = parsleyInstance.$element[0].files;
                    if (files.length === 0) return true; // No file, let required handle it
                    return files[0].size <= maxSize * 1024; 
                },
                requirementType: 'integer',
                messages: {
                    en: 'File size must not exceed %s KB.',
                    ms: 'Saiz fail tidak boleh melebihi 10MB',
                }
            });
        });
    </script>
    {{-- <script>
       function validateFileSize(input) {
    const maxSize = 10 * 1024 * 1024; // 10MB in bytes
    if (input.files && input.files[0]) {
        if (input.files[0].size > maxSize) {
            alert('Saiz fail tidak boleh melebihi 10MB');
            input.value = ''; // Clear the input
            return false;
        }
    }
    return true;
}

// Main document ready function
document.addEventListener('DOMContentLoaded', function () {
    // Select all file inputs dynamically
    const fileInputs = document.querySelectorAll('input[type="file"]');

    // Attach event listeners to each file input
    fileInputs.forEach(fileInput => {
        fileInput.addEventListener('change', function () {
            validateFileSize(this);
        });
    });

    // Optional: Handle dynamically added file inputs (if applicable)
    const observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            mutation.addedNodes.forEach(function (node) {
                if (node.tagName === 'INPUT' && node.type === 'file') {
                    node.addEventListener('change', function () {
                        validateFileSize(this);
                    });
                }
            });
        });
    });

    // Observe changes in the DOM to handle dynamically added file inputs
    const formContainer = document.getElementById('child-registration-forms');
    if (formContainer) {
        observer.observe(formContainer, { childList: true, subtree: true });
    }
});
    </script> --}}
@endsection