
<?php $__env->startSection('content'); ?>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">

<style>
    .select2-container--default .select2-selection--single {
        height: 58px; padding: 12px; border-radius: 16px; border: 1px solid #f3f4f6; background-color: #f9fafb;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 56px; }
    .select2-container { width: 100% !important; }
</style>

<div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
    <div class="flex justify-between items-center mb-6">
        <h3 class="font-black text-xl text-gray-800">ছাত্র-ছাত্রী তালিকা</h3>
        <button onclick="openFullModal()" class="bg-red-600 text-white px-6 py-2 rounded-xl font-bold hover:bg-red-700 transition shadow-lg shadow-red-200">
            + নতুন ভর্তি
        </button>
    </div>

    <table id="studentTable" class="w-full text-left display">
        <thead>
            <tr class="text-gray-400 text-sm border-b">
                <th>ছবি</th>
                <th>ভর্তি নং</th>
                <th>নাম (EN)</th>
                <th>শ্রেণি</th>
                <th>রোল</th>
                <th class="text-right">অ্যাকশন</th>
            </tr>
        </thead>
        <tbody>
            <?php $__currentLoopData = $students; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $student): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <tr class="border-b hover:bg-gray-50 transition">
                <td class="py-2">
                    <img src="<?php echo e($student->student_photo ? asset('storage/'.$student->student_photo) : asset('default-user.png')); ?>" class="w-10 h-10 rounded-full object-cover border">
                </td>
                <td class="py-4 font-mono"><?php echo e($student->admission_no); ?></td>
                <td class="py-4 font-bold text-gray-800"><?php echo e($student->student_name_en); ?></td>
                <td class="py-4"><?php echo e($student->schoolClass->class_name ?? 'N/A'); ?> (<?php echo e($student->section->section_name ?? 'N/A'); ?>)</td>
                <td class="py-4"><?php echo e($student->roll_no); ?></td>
                <td class="py-4 text-right">
                    <button onclick="editStudent('<?php echo e($student->id); ?>')" class="text-blue-500 mr-2">
						<i class="fas fa-edit"></i>
					</button>
					<a href="<?php echo e(route('admin.students.print', $student->id)); ?>"
					   target ="_blank" class="text-green-500 mr-2">
						<i class="fas fa-print"></i>
					</a>
                    <button onclick="deleteStudent('<?php echo e($student->id); ?>')" class="text-red-400">
						<i class="fas fa-trash"></i>
					</button>
                </td>
            </tr>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </tbody>
    </table>
</div>

<div id="studentModal" class="fixed inset-0 bg-white z-[100] hidden overflow-y-auto p-4 md:p-10">
    <div class="max-w-6xl mx-auto pb-20">
        <div class="flex justify-between items-center mb-10 border-b pb-5">
            <div>
                <h2 class="text-3xl font-black text-gray-800">নতুন ছাত্র ভর্তি ফরম</h2>
                <p class="text-gray-500">নির্ভুলভাবে সকল তথ্য পূরণ করুন</p>
            </div>
            <button onclick="closeFullModal()" class="text-gray-400 hover:text-red-600 text-5xl">&times;</button>
        </div>

        <form id="admissionForm" enctype="multipart/form-data" novalidate>
            <?php echo csrf_field(); ?>
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-10">
                
                <div class="lg:col-span-1">
                    <div class="sticky top-10">
                        <div class="w-full h-64 bg-gray-50 rounded-3xl border-2 border-dashed border-gray-200 flex items-center justify-center overflow-hidden relative group">
                            <img id="previewImg" class="hidden w-full h-full object-cover">
                            <div id="placeholderText" class="text-center p-4">
                                <i class="fas fa-cloud-upload-alt text-4xl text-gray-300 mb-2"></i>
                                <p class="text-gray-400 font-bold text-sm">ছবি সিলেক্ট করুন</p>
                            </div>
                            <input type="file" name="student_photo" id="photoInput" class="absolute inset-0 opacity-0 cursor-pointer" accept="image/*">
                        </div>
                        <p class="mt-4 text-xs text-center text-gray-400">সর্বোচ্চ ২ মেগাবাইট (JPG/PNG)</p>
                    </div>
                </div>

                <div class="lg:col-span-3 space-y-10">
                    
                    <div>
                        <h4 class="text-red-600 font-bold mb-4 flex items-center"><span class="w-8 h-8 bg-red-50 rounded-full flex items-center justify-center mr-2 text-xs">01</span> ব্যক্তিগত তথ্য</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <input type="text" name="student_name_en" placeholder="ছাত্রের নাম (English)" class="p-4 bg-gray-50 border rounded-2xl w-full">
                            <input type="text" name="student_name_bn" placeholder="ছাত্রের নাম (বাংলা)" class="p-4 bg-gray-50 border rounded-2xl w-full">
                            <input type="text" name="birth_reg_no" placeholder="জন্ম নিবন্ধন নম্বর" class="p-4 bg-gray-50 border rounded-2xl w-full">
                            <div class="relative">
                                <label class="absolute text-[10px] uppercase font-bold text-gray-400 top-2 left-4">জন্ম তারিখ</label>
                                <input type="date" name="dob" class="p-4 pt-6 bg-gray-50 border rounded-2xl w-full">
                            </div>
                            <select name="gender" class="p-4 bg-gray-50 border rounded-2xl w-full">
                                <option value="Male">ছেলে (Male)</option>
                                <option value="Female">মেয়ে (Female)</option>
                                <option value="Other">অন্যান্য</option>
                            </select>
                            <input type="text" name="blood_group" placeholder="রক্তের গ্রুপ (যেমন: A+)" class="p-4 bg-gray-50 border rounded-2xl w-full">
                        </div>
                    </div>

                    <div>
                        <h4 class="text-blue-600 font-bold mb-4 flex items-center"><span class="w-8 h-8 bg-blue-50 rounded-full flex items-center justify-center mr-2 text-xs">02</span> একাডেমিক তথ্য</h4>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="relative">
								<label class="absolute text-[10px] uppercase font-bold text-gray-400 top-2 left-4">ভর্তি নম্বর (Auto)</label>
								<input type="text" name="admission_no" value="<?php echo e($generatedNo); ?>" class="p-4 pt-6 bg-gray-100 border rounded-2xl w-full font-mono font-bold" readonly>
							</div>
                            <div class="relative">
                                <label class="absolute text-[10px] uppercase font-bold text-gray-400 top-2 left-4">ভর্তির তারিখ</label>
                                <input type="date" name="admission_date" value="<?php echo e(date('Y-m-d')); ?>" class="p-4 pt-6 bg-gray-50 border rounded-2xl w-full">
                            </div>
                            <input type="number" name="roll_no" placeholder="রোল নম্বর" class="p-4 bg-gray-50 border rounded-2xl">
                            
                            <div class="md:col-span-1">
                                <select name="class_id" class="select2-init">
                                    <option value="">শ্রেণি নির্বাচন করুন</option>
                                    <?php $__currentLoopData = $classes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $c): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <option value="<?php echo e($c->id); ?>"><?php echo e($c->class_name); ?></option> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>
                            <div class="md:col-span-1">
                                <select name="section_id" class="select2-init">
                                    <option value="">সেকশন নির্বাচন করুন</option>
                                    <?php $__currentLoopData = $sections; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <option value="<?php echo e($s->id); ?>"><?php echo e($s->section_name); ?></option> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>
                            <select name="status" class="p-4 bg-gray-50 border rounded-2xl w-full">
                                <option value="Active">Active</option>
                                <option value="Inactive">Inactive</option>
                                <option value="TC">TC</option>
                                <option value="Graduated">Graduated</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <h4 class="text-green-600 font-bold mb-4 flex items-center"><span class="w-8 h-8 bg-green-50 rounded-full flex items-center justify-center mr-2 text-xs">03</span> পিতামাতার তথ্য</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <input type="text" name="father_name_en" placeholder="পিতার নাম (English)" class="p-4 bg-gray-50 border rounded-2xl">
							<input type="text" name="father_name_bn" placeholder="পিতার নাম (বাংলা)" class="p-4 bg-gray-50 border rounded-2xl">
							<input type="text" name="father_occupation" placeholder="পিতার পেশা" class="p-4 bg-gray-50 border rounded-2xl">
                            <input type="text" name="father_mobile" placeholder="পিতার মোবাইল নম্বর" class="p-4 bg-gray-50 border rounded-2xl">
                            <input type="text" name="mother_name_en" placeholder="মাতার নাম (English)" class="p-4 bg-gray-50 border rounded-2xl">
							<input type="text" name="mother_name_bn" placeholder="মাতার নাম (বাংলা)" class="p-4 bg-gray-50 border rounded-2xl">
							<input type="text" name="mother_occupation" placeholder="মাতার পেশা" class="p-4 bg-gray-50 border rounded-2xl">
                            <input type="text" name="mother_mobile" placeholder="মাতার মোবাইল নম্বর" class="p-4 bg-gray-50 border rounded-2xl">
                        </div>
                    </div>

                    <div>
                        <h4 class="text-purple-600 font-bold mb-4 flex items-center"><span class="w-8 h-8 bg-purple-50 rounded-full flex items-center justify-center mr-2 text-xs">04</span> ঠিকানার তথ্য</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <textarea name="present_address" placeholder="বর্তমান ঠিকানা" class="p-4 bg-gray-50 border rounded-2xl h-32"></textarea>
                            <textarea name="permanent_address" placeholder="স্থায়ী ঠিকানা" class="p-4 bg-gray-50 border rounded-2xl h-32"></textarea>
                        </div>
                    </div>

                    <div class="sticky bottom-0 left-0 right-0 bg-white py-6 mt-10 border-t flex justify-end gap-6 z-50">
						<button type="button" onclick="closeFullModal()" class="text-gray-500 font-bold hover:text-gray-700 transition">বাতিল করুন</button>
						<button type="submit" class="px-12 py-4 bg-red-600 text-white rounded-2xl font-black shadow-2xl shadow-red-200 hover:scale-105 active:scale-95 transition">
							ভর্তি নিশ্চিত করুন
						</button>
					</div>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).ready(function() {
        // ডাটা টেবিল ইনিশিয়ালাইজ
        $('#studentTable').DataTable({ 
            "language": { "search": "খুঁজুন:" },
            "order": [[1, "desc"]] 
        });
        
        // সিলেক্ট-২ ইনিশিয়ালাইজ
        $('.select2-init').select2({
            dropdownParent: $('#studentModal'),
            placeholder: "নির্বাচন করুন",
            allowClear: true
        });
    });

    // ছবি প্রিভিউ লজিক
    $('#photoInput').on('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                $('#previewImg').attr('src', event.target.result).removeClass('hidden');
                $('#placeholderText').addClass('hidden');
            }
            reader.readAsDataURL(file);
        }
    });

    // মডাল ওপেন (নতুন ভর্তির জন্য)
    function openFullModal() { 
        // ১. মডাল টাইটেল এবং বাটন রিসেট
        $('#studentModal h2').text('নতুন ছাত্র ভর্তি ফরম');
        $('#admissionForm').find('button[type="submit"]').text('ভর্তি নিশ্চিত করুন');

        // ২. এডিট মোড রিমুভ (যদি থাকে)
        $('#studentIdInput, #methodInput').remove();

        // ৩. ফর্ম ক্লিন করা
        $('#admissionForm')[0].reset();
        $('.select2-init').val(null).trigger('change');
        
        // ৪. ছবি রিসেট
        $('#previewImg').addClass('hidden').attr('src', '');
        $('#placeholderText').removeClass('hidden');

        // ৫. মডাল দেখানো
        $('#studentModal').removeClass('hidden'); 
        $('body').addClass('overflow-hidden'); 
    }

    // মডাল ক্লোজ
    function closeFullModal() { 
        $('#studentModal').addClass('hidden'); 
        $('body').removeClass('overflow-hidden'); 
    }

    // এডিট ফাংশন (ডাটা ফেচ এবং মডাল ওপেন)
    function editStudent(id) {
		// লোডিং দেখানো
		Swal.fire({ title: 'ডাটা লোড হচ্ছে...', allowOutsideClick: false, didOpen: () => { Swal.showLoading(); } });

		// আপনার রাউট অনুযায়ী URL ঠিক করা হয়েছে
		$.get("<?php echo e(url('students/edit')); ?>/" + id, function(data) {
			Swal.close();

			// মডাল টাইটেল এবং বাটন টেক্সট পরিবর্তন
			$('#studentModal h2').text('ছাত্রের তথ্য পরিবর্তন করুন');
			$('#admissionForm').find('button[type="submit"]').text('তথ্য আপডেট করুন');

			// এডিট মোডের জন্য হিডেন ইনপুট ফিল্ড (যদি না থাকে)
			if ($('#studentIdInput').length === 0) {
				$('#admissionForm').append(`<input type="hidden" name="student_id" id="studentIdInput" value="${id}">`);
			} else {
				$('#studentIdInput').val(id);
			}

			// ফর্মে ডাটা বসানো (মডেলের কলাম নাম অনুযায়ী)
			$('[name="student_name_en"]').val(data.student_name_en);
			$('[name="student_name_bn"]').val(data.student_name_bn);
			$('[name="birth_reg_no"]').val(data.birth_reg_no);
			$('[name="dob"]').val(data.dob);
			$('[name="gender"]').val(data.gender);
			$('[name="blood_group"]').val(data.blood_group);
			$('[name="admission_no"]').val(data.admission_no);
			$('[name="admission_date"]').val(data.admission_date);
			$('[name="roll_no"]').val(data.roll_no);
			$('[name="class_id"]').val(data.class_id).trigger('change');
			$('[name="section_id"]').val(data.section_id).trigger('change');
			$('[name="father_name_en"]').val(data.father_name_en);
			$('[name="father_name_bn"]').val(data.father_name_bn);
			$('[name="father_occupation"]').val(data.father_occupation);
			$('[name="father_mobile"]').val(data.father_mobile);
			$('[name="mother_name_en"]').val(data.mother_name_en);
			$('[name="mother_name_bn"]').val(data.mother_name_bn);
			$('[name="mother_occupation"]').val(data.mother_occupation);
			$('[name="mother_mobile"]').val(data.mother_mobile);
			$('[name="present_address"]').val(data.present_address);
			$('[name="permanent_address"]').val(data.permanent_address);
			$('[name="status"]').val(data.status);

			// ছবি প্রিভিউ
			if (data.student_photo) {
				$('#previewImg').attr('src', "<?php echo e(asset('storage')); ?>/" + data.student_photo).removeClass('hidden');
				$('#placeholderText').addClass('hidden');
			}

			// মডাল ওপেন
			$('#studentModal').removeClass('hidden');
			$('body').addClass('overflow-hidden');
		}).fail(function() {
			Swal.fire('Error!', 'সার্ভার থেকে ডাটা পাওয়া যায়নি।', 'error');
		});
	}

    // ফর্ম সাবমিট (Store এবং Update উভয়ের জন্য)
    $('#admissionForm').on('submit', function(e) {
        e.preventDefault();

        // ১. ভ্যালিডেশন চেক
        const requiredFields = {
            'student_name_en': 'ছাত্রের ইংরেজি নাম লিখুন',
            'class_id': 'শ্রেণি নির্বাচন করুন',
            'father_mobile': 'পিতার মোবাইল নম্বর দিন'
        };

        for (let field in requiredFields) {
            let element = $(`[name="${field}"]`);
            if (!element.val() || element.val().trim() === "") {
                Swal.fire({ title: 'তথ্য বাকি আছে!', text: requiredFields[field], icon: 'warning', confirmButtonColor: '#ef4444' });
                return false;
            }
        }

        // ২. ডাইনামিক URL এবং ডাটা প্রিপারেশন
        let studentId = $('#studentIdInput').val();
        let postUrl = studentId ? "<?php echo e(url('students/update')); ?>" : "<?php echo e(route('students.store')); ?>";
        let formData = new FormData(this);
        let submitBtn = $(this).find('button[type="submit"]');

        submitBtn.prop('disabled', true).text('প্রসেসিং...');

        $.ajax({
            url: postUrl,
            method: "POST", // Laravel PUT মেথড হিডেন ইনপুট দিয়ে হ্যান্ডেল হবে
            data: formData,
            contentType: false,
            processData: false,
            success: function(res) {
                Swal.fire({ title: 'সফল!', text: res.message, icon: 'success', timer: 2000 })
                .then(() => location.reload());
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false).text(studentId ? 'তথ্য আপডেট করুন' : 'ভর্তি নিশ্চিত করুন');
                if(xhr.status === 422) {
                    let firstError = Object.values(xhr.responseJSON.errors)[0][0];
                    Swal.fire('থামুন!', firstError, 'error');
                } else {
                    Swal.fire('এরর!', 'সার্ভারে সমস্যা হয়েছে।', 'error');
                }
            }
        });
    });

    // ডিলিট ফাংশন
    function deleteStudent(id) {
		Swal.fire({
			title: 'আপনি কি নিশ্চিত?',
			text: "এই ছাত্রের সকল তথ্য মুছে যাবে!",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#d33',
			confirmButtonText: 'হ্যাঁ, মুছুন!',
			cancelButtonText: 'না'
		}).then((result) => {
			if (result.isConfirmed) {
				$.ajax({
					// রাউট ফাইলের সাথে মিল রেখে URL এবং Method ঠিক করা হলো
					url: `<?php echo e(url('students/delete')); ?>/${id}`, 
					method: 'POST', 
					data: { 
						_token: "<?php echo e(csrf_token()); ?>" 
					},
					success: function(res) {
						Swal.fire('মুছে ফেলা হয়েছে!', res.message, 'success')
						.then(() => location.reload());
					},
					error: function(xhr) {
						Swal.fire('এরর!', 'ডিলিট করা সম্ভব হয়নি।', 'error');
					}
				});
			}
		});
	}
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\kgschool\resources\views/admin/students/index.blade.php ENDPATH**/ ?>