```html
@extends('dashlayouts.app')
@section('content')
    <style>
        /* Overlay */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        /* Popup content */
        .popup-content {
            position: relative;
            background: #fff;
            border-radius: 10px;
            text-align: center;
            padding: 20px;
            width: 90%;
            max-width: 400px;
            height: auto;
        }

        /* Popup image */
        .popup-content img {
            width: 100%;
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }

        /* Close button */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: red;
            color: white;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            cursor: pointer;
            font-size: 16px;
            line-height: 30px;
            text-align: center;
        }
    </style>
    <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">Gantian 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">Gantian Kad</h5>
                    <p class="text-muted" style="margin-bottom: 20px;">Buat pembayaran untuk murid yang di daftarkan.</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

                        <div class="m-4 text-center">
                            <h4 class="text-muted">Fi Gantian Kad setiap Murid</h4>
                            <p class="fs-2 text-success"><strong>RM {{ $fees->amount }}</strong></p>
                        </div>
                        <div class="container d-flex justify-content-center align-items-center" style="min-height: 20;">
                            <div class="card mb-3" style="max-width: 30rem;">
                                <div class="row no-gutters">
                                    <div class="col-md-4">
                                        @if ($student->logo_path)
                                            <img src="{{ asset($student->logo_path) }}" alt="Student Image"
                                                class="img-fluid rounded-start" style="border: 1px solid #dee2e6;">
                                        @else
                                            <img src="{{ asset('img/defaultphoto.png') }}" alt="Student Image"
                                                class="img-fluid rounded-start">
                                        @endif
                                    </div>
                                    <div class="col-md-8">
                                        <div class="card-body">
                                            <h5 class="card-title">Maklumat Murid</h5>
                                            <p class="card-text"><strong>ID Murid:</strong> {{ $student->student_id }}</p>
                                            <p class="card-text"><strong>Nama Murid:</strong> {{ $student->student_name }}
                                            </p>
                                            <p class="card-text"><strong>Sekolah:</strong> {{ $student->nama_pusat }}</p>
                                            @if ($student->upload_photo == 0)
                                                <p class="card-text"><strong>Gambar:</strong> Tiada</p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <br>

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

                                <!-- File Upload Form -->
                                <form action="{{ route('upload.student.image') }}" method="POST" enctype="multipart/form-data" id="uploadImageForm" data-parsley-validate>
                                    @csrf
                                    <div class="mb-3">
                                        <label for="studentimage" class="form-label">Muat Naik Gambar Murid</label>
                                        <input type="file" class="form-control" id="studentimage" name="studentimage"
                                               accept="image/jpeg,image/jpg"
                                               data-parsley-max-file-size="10" 
                                               data-parsley-filemimetypes="image/jpeg,image/jpg,image/png"
                                               required>
                                        <small class="form-text text-muted">Hanya fail JPG/JPEG dibenarkan, maksimum 10MB.</small>
                                    </div>
                                    <input type="hidden" name="student_id" value="{{ $student->student_id }}">
                                    <button type="submit" class="btn btn-primary">Muat Naik</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{{ asset('js/parsley.min.js') }}"></script>
    <script src="{{ asset('js/ms.js') }}"></script>
    <script>
        // Initialize Parsley validation
        $(document).ready(function () {
            $('#uploadImageForm').parsley();
    
            // Custom Parsley validator for file size (in MB)
            window.Parsley.addValidator('maxFileSize', {
                validateString: function (_value, maxSize, parsleyInstance) {
                    var files = parsleyInstance.$element[0].files;
                    if (files.length === 0) return true;
                    return files[0].size <= maxSize * 1024 * 1024; // Convert MB to bytes
                },
                messages: { en: 'File size must not exceed %s MB.' }
            });
    
            // Custom Parsley validator for file MIME types
            window.Parsley.addValidator('filemimetypes', {
                validateString: function (_value, requirement, parsleyInstance) {
                    var files = parsleyInstance.$element[0].files;
                    if (files.length === 0) return true;
                    var allowedTypes = requirement.split(',');
                    return allowedTypes.includes(files[0].type);
                },
                messages: { en: 'Only JPG/JPEG files are allowed.' }
            });
    
            // Add an event listener to the file input
            $('#studentimage').on('change', function () {
                var file = this.files[0];
                if (file && file.size > 10 * 1024 * 1024) { // Check if file size exceeds 10MB
                    alert('Fail melebihi saiz maksimum 10MB. Sila pilih fail lain.'); // Show popup
                    this.value = ''; // Clear the input field
                }
            });
        });
    </script>
@endsection