@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">Pendaftaran Murid dan Kad</li>
        </ol>
    </nav>
    <div class="col md-6">
        <div class="card shadow-sm border-0 rounded">
            <div class="card-body">
                <h5 class="card-title">Pendaftaran Murid dan Kad</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('card.addchild') }}" 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="studentname" class="form-label">Nama Murid<span style="color: red">*</span></label>
                                    <input type="text" class="form-control" name="students[0][studentname]" required data-parsley-pattern="^[A-Za-z\s]+$" 
                                    data-parsley-trigger="change" style="text-transform: uppercase" oninput="this.value = this.value.toUpperCase()">
                                    <small>Sila Semak Nama Murid</small>
                                </div>

                                <div class="mb-3">
                                    <label for="studentIC" class="form-label">MyKad / Passport Murid<span style="color: red">*</span></label>
                                    <input type="text" class="form-control" name="students[0][studentIC]" 
                                    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">
                                    <label for="school" class="form-label">Sekolah<span style="color: red">*</span></label>
                                    <select name="students[0][school]" class="form-control">
                                        <option selected disabled>Pilih Sekolah</option>
                                        @foreach ($schools as $s)
                                        <option value="{{ $s->kod_pusat }}">{{ $s->nama_mrsm }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Pilihan Gambar di Kad Murid:<span style="color: red">*</span></label>
                                    <div class="form-check">
                                        <input class="form-check-input upload-photo-radio" type="radio" name="students[0][upload_photo]" value="yes" required>
                                        <label class="form-check-label">Pilih Kad Murid dengan Cetakan Gambar</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input upload-photo-radio" type="radio" name="students[0][upload_photo]" value="no" required>
                                        <label class="form-check-label">Pilih Kad Murid tanpa Cetakan Gambar</label>
                                    </div>
                                </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="studentimage">Muatnaik Gambar Murid<span style="color: red">*</span></label>
                                    {{-- <input type="file" class="form-control" name="students[0][studentimage][]" required accept=".jpeg, .jpg, .png" placeholder="Tiada Fail Dipilih"> --}}
                                    <input type="file" 
                                    class="form-control" 
                                    name="students[0][studentimage][]" 
                                    required 
                                    accept=".jpeg, .jpg, .png" 
                                    data-max-size="10485760" 
                                    placeholder="Tiada Fail Dipilih"
                                    data-parsley-trigger="change">
                                <small class="text-muted">Saiz Gambar maksimum: 10MB</small>
                                </div>

                                <hr>
                            </div>
                        </div>

                        <!-- Button to Add More Children -->
                        <div class="text-end">
                            <button type="button" id="add-child-btn" class="btn btn-success btn-sm">Tambah Murid Lain</button>
                        </div>

                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" name="agreement" required>
                            <label class="form-check-label" for="agreement" style="max-width: 80%;">
                                Saya mengesahkan bahawa nama di atas adalah anak/anak jagaan saya yang sah. Jika didapati nama di atas
                                <strong>bukan</strong> anak/anak jagaan saya yang sah, penggunaan sistem OrijinSchool akan dibatalkan di bawah nama saya.
                                Dan tiada <strong>bayaran balik</strong> akan dikembalikan ke akaun bank saya.
                            </label>
                        </div>
                        <br>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" name="agreement2" required>
                            <label class="form-check-label" for="agreement2" style="max-width: 80%;">
                                Saya dengan ini bersetuju, mengakui dan/atau mengesahkan seperti berikut:
                                <ul><br>
                                    <li>a) Saya membenarkan Murid yang dinamakan di atas untuk menyertai Program Tanpa Tunai Sekolah Rendah
                                        (“Program”) anjuran Bank Simpanan Nasional dengan kerjasama rakan kolaborasinya CPro Solutions Sdn Bhd;</li><br>
                                    <li>b) Saya telah membaca dan memahami objektif Program yang boleh dirujuk di
                                        <a href="" target="_blank" style="color: blue"> Laman Objektif Program</a>; dan</li><br>
                                    <li>c) Saya telah membaca dan memahami serta bersetuju dengan Terma dan Syarat Program yang boleh diakses
                                        di <a href="{{ url('terms-of-use') }}" target="_blank" style="color: blue"> Laman Terma Dan Syarat</a>.</li>
                            </label>
                        </div>
                        <br>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" name="agreement3" required>
                            <label class="form-check-label" for="agreement3" style="max-width: 80%;">
                                Saya selanjutnya bersetuju, mengakui dan/atau mengesahkan seperti berikut:
                                <ul><br>
                                    <li>(i) Membenarkan CPro Solutions Sdn Bhd untuk mengakses dan menggunakan data peribadi Murid untuk tujuan
                                        pembukaan e-wallet Origin bagi pelaksanaan pembayaran tanpa tunai di Sekolah dengan tujuan memudahkan
                                        Murid membuat pembayaran tanpa tunai di Sekolah menggunakan kad pintar yang dihubungkan dengan
                                        e-wallet Origin, tertakluk kepada syarat-syarat privasi dan keselamatan data yang boleh diakses
                                        di <a href="{{ url('privacy-notice') }}" target="_blank" style="color: blue">Laman Notis Privasi</a>;</li><br>
                                    <li>(ii) Membenarkan CPro Solutions Sdn Bhd untuk mengakses dan menggunakan data peribadi Murid bagi
                                        tujuan pendaftaran dan penggunaan dalam sistem kehadiran (“attendance system”) yang akan dilaksanakan
                                        di Sekolah sebagai sebahagian daripada Program. Data ini akan membantu dalam memantau dan
                                        merekodkan kehadiran Murid di Sekolah, yang turut boleh diakses oleh saya untuk tujuan pemantauan;</li><br>
                                    <li>(iii) Membenarkan CPro Solutions Sdn Bhd untuk menggunakan data yang diberikan bagi sebarang aplikasi
                                        tambahan di masa hadapan di bawah Program tersebut. Ini termasuk aplikasi pintar atau kemudahan lain
                                        yang mungkin diperkenalkan dari semasa ke semasa untuk kemudahan Murid , ibu bapa, atau pentadbir Sekolah
                                        selagi aplikasi tersebut adalah sebahagian daripada Program berkenaan; dan</li><br>
                                    <li>(iv) Untuk tertakluk kepada lain-lain terma dan syarat yang dipaparkan di
                                        <a href="" target="_blank" style="color: blue">Laman Penggunaan eWallet</a> berkenaan penggunaan dan pengendalian
                                        e-wallet Origin.</li>
                            </label>
                        </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>
// File size validation function
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() {
    function setupImageUploadToggle(formDiv) {
        const radioButtons = formDiv.querySelectorAll('.upload-photo-radio');
        const imageUploadDiv = formDiv.querySelector('[name*="studentimage"]').closest('.mb-3');
        const fileInput = imageUploadDiv.querySelector('input[type="file"]');

        // Add file size validation
        fileInput.addEventListener('change', function() {
            validateFileSize(this);
        });

        imageUploadDiv.style.display = 'none';

        radioButtons.forEach(radio => {
            radio.addEventListener('change', function() {
                imageUploadDiv.style.display = this.value === 'yes' ? 'block' : 'none';
                fileInput.required = this.value === 'yes';
            });
        });
    }

    // Setup for initial form
    setupImageUploadToggle(document.querySelector('.child-registration-form'));

    // Add child button functionality
    const addChildBtn = document.getElementById('add-child-btn');
    addChildBtn.addEventListener('click', function() {
        const container = document.getElementById('child-registration-forms');
        const count = container.children.length;

        // Clone the first child registration form
        const template = document.querySelector('.child-registration-form').cloneNode(true);

        // Update the input names dynamically for Parsley validation
        template.querySelectorAll('input, select').forEach(input => {
            // Update the name attribute to match the new index
            input.name = input.name.replace(/\[\d+\]/, `[${count}]`);

            // Clear the value for input and select fields
            if (input.type === 'text' || input.type === 'file') {
                input.value = '';
            } else if (input.tagName === 'SELECT') {
                input.selectedIndex = 0;
            }
        });

        container.appendChild(template);

        // Set up the image upload toggle for the new form
        setTimeout(() => {
            const newForm = document.querySelector('.child-registration-form:last-child');
            setupImageUploadToggle(newForm);
            
            // Add file size validation to the new file input
            const newFileInput = newForm.querySelector('input[type="file"]');
            newFileInput.addEventListener('change', function() {
                validateFileSize(this);
            });
        }, 100);
    });
});
</script>
@endsection