@extends('layouts.institution')

@section('content')
<div class="container-fluid px-4 py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">নতুন শিক্ষার্থী সরাসরি ভর্তি (কম্প্রিহেনসিভ ফর্ম)</h4>
            <p class="text-muted small mb-0">শিক্ষার্থীর একাডেমিক, ব্যক্তিগত, পারিবারিক ও অন্যান্য সকল তথ্য একসাথে ইনপুট দিন।</p>
        </div>
        <a href="{{ route('institution.students.index') }}" class="btn btn-light rounded-pill px-4 shadow-sm border">
            <i class="fa-solid fa-arrow-left me-2"></i> তালিকায় ফিরে যান
        </a>
    </div>

    {{-- Server-side error alert সরানো হয়েছে (শুধু frontend validation) --}}

    <form action="{{ route('institution.students.store.direct') }}" method="POST" enctype="multipart/form-data" id="studentForm" novalidate>
        @csrf

        <!-- সেকশন ১: একাডেমিক তথ্য -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <h5 class="fw-bold text-primary mb-3"><i class="fa-solid fa-school me-2"></i> ১. একাডেমিক তথ্য (অ্যাসাইনমেন্ট)</h5>
                <hr>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">শিক্ষাবর্ষ (Academic Session) <span class="text-danger">*</span></label>
                        <select name="academic_session_id" class="form-select rounded-3" required>
                            <option value="">-- সেশন নির্বাচন করুন --</option>
                            @foreach($sessions as $session)
                                <option value="{{ $session->id }}">{{ $session->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">শ্রেণি (Class) <span class="text-danger">*</span></label>
                        <select name="institution_class_id" class="form-select rounded-3" required>
                            <option value="">-- শ্রেণি নির্বাচন করুন --</option>
                            @foreach($classes as $class)
                                <option value="{{ $class->id }}">{{ $class->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">সেকশন (Section)</label>
                        <select name="section_id" class="form-select rounded-3">
                            <option value="">-- সেকশন নির্বাচন করুন --</option>
                            @foreach($sections as $section)
                                <option value="{{ $section->id }}">{{ $section->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">গ্রুপ (Group)</label>
                        <select name="group_id" class="form-select rounded-3">
                            <option value="">-- গ্রুপ নির্বাচন করুন --</option>
                            @foreach($groups as $group)
                                <option value="{{ $group->id }}">{{ $group->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">শিফট (Shift)</label>
                        <select name="shift_id" class="form-select rounded-3">
                            <option value="">-- শিফট নির্বাচন করুন --</option>
                            @foreach($shifts as $shift)
                                <option value="{{ $shift->id }}">{{ $shift->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">ক্লাস রোল নম্বর</label>
                        <input type="text" name="roll_number" class="form-control rounded-3 number-only" placeholder="যেমন: 01">
                    </div>
                </div>
            </div>
        </div>

        <!-- সেকশন ২: সাধারণ তথ্য -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <h5 class="fw-bold text-primary mb-3"><i class="fa-solid fa-user me-2"></i> ২. শিক্ষার্থীর সাধারণ তথ্য</h5>
                <hr>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">নাম (বাংলা) <span class="text-danger">*</span></label>
                        <input type="text" name="name_bangla" class="form-control rounded-3 bangla-only" placeholder="যেমন: মোছাঃ মিম আক্তার" required>
                        <span class="text-danger small error-msg" style="display:none;">শুধুমাত্র বাংলা অক্ষর লিখুন</span>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">নাম (ইংরেজি)</label>
                        <input type="text" name="name_english" class="form-control rounded-3 english-only" placeholder="e.g. Mst. Mim Akter">
                        <span class="text-danger small error-msg" style="display:none;">Only English letters allowed</span>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">লিঙ্গ (Gender) <span class="text-danger">*</span></label>
                        <select name="gender" class="form-select rounded-3" required>
                            <option value="">-- নির্বাচন করুন --</option>
                            <option value="male">ছাত্র (Male)</option>
                            <option value="female">ছাত্রী (Female)</option>
                            <option value="others">অন্যান্য</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">ধর্ম (Religion) <span class="text-danger">*</span></label>
                        <select name="religion" class="form-select rounded-3" required>
                            <option value="">-- নির্বাচন করুন --</option>
                            <option value="1">ইসলাম</option>
                            <option value="2">হিন্দুধর্ম</option>
                            <option value="3">বৌদ্ধধর্ম</option>
                            <option value="4">খ্রিস্টধর্ম</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">জন্মতারিখ <span class="text-danger">*</span></label>
                        <input type="date" name="date_of_birth" class="form-control rounded-3" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">জন্ম নিবন্ধন নম্বর (১৭ ডিজিট)</label>
                        <input type="text" name="birth_regi_number" class="form-control rounded-3 number-only" maxlength="17" placeholder="১৭ ডিজিটের নম্বর">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">মোবাইল নম্বর (১১ ডিজিট)</label>
                        <input type="text" name="phone_number" class="form-control rounded-3 bd-phone" maxlength="11" placeholder="017xxxxxxxx">
                        <span class="text-danger small phone-error" style="display:none;">১১ ডিজিটের সঠিক মোবাইল নম্বর দিন</span>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">রক্তের গ্রুপ</label>
                        <select name="blood_group" class="form-select rounded-3">
                            <option value="">-- নির্বাচন করুন --</option>
                            <option value="a+">A+</option><option value="a-">A-</option>
                            <option value="b+">B+</option><option value="b-">B-</option>
                            <option value="ab+">AB+</option><option value="ab-">AB-</option>
                            <option value="o+">O+</option><option value="o-">O-</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">উপজাতি?</label>
                        <select name="tribal" class="form-select rounded-3" required>
                            <option value="no">না</option>
                            <option value="yes">হ্যাঁ</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">বিশেষ চাহিদা সম্পন্ন (Autistic)?</label>
                        <select name="autistic" class="form-select rounded-3" required>
                            <option value="no">না</option>
                            <option value="yes">হ্যাঁ</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- সেকশন ৩: পিতা ও মাতার তথ্য -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <h5 class="fw-bold text-primary mb-3"><i class="fa-solid fa-users me-2"></i> ৩. পিতা ও মাতার তথ্য</h5>
                <hr>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">পিতার নাম (বাংলা)</label>
                        <input type="text" name="f_name_bangla" class="form-control rounded-3 bangla-only" placeholder="পিতার নাম লিখুন">
                        <span class="text-danger small error-msg" style="display:none;">শুধুমাত্র বাংলা অক্ষর লিখুন</span>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">পিতার নাম (ইংরেজি)</label>
                        <input type="text" name="f_name_english" class="form-control rounded-3 english-only" placeholder="Father's Name">
                        <span class="text-danger small error-msg" style="display:none;">Only English letters allowed</span>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">পিতার এনআইডি নম্বর (১০ বা ১৭ ডিজিট)</label>
                        <input type="text" name="f_nid" class="form-control rounded-3 nid-validation" maxlength="17" placeholder="NID Number">
                        <span class="text-danger small nid-error" style="display:none;">এনআইডি ১০ অথবা ১৭ ডিজিটের হতে হবে</span>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">পিতার মোবাইল নম্বর (১১ ডিজিট)</label>
                        <input type="text" name="f_phone_number" class="form-control rounded-3 bd-phone" maxlength="11" placeholder="017xxxxxxxx">
                        <span class="text-danger small phone-error" style="display:none;">১১ ডিজিটের সঠিক মোবাইল নম্বর দিন</span>
                    </div>

                    <div class="col-md-6 mt-4">
                        <label class="form-label fw-bold small">মাতার নাম (বাংলা)</label>
                        <input type="text" name="m_name_bangla" class="form-control rounded-3 bangla-only" placeholder="মাতার নাম লিখুন">
                        <span class="text-danger small error-msg" style="display:none;">শুধুমাত্র বাংলা অক্ষর লিখুন</span>
                    </div>
                    <div class="col-md-6 mt-4">
                        <label class="form-label fw-bold small">মাতার নাম (ইংরেজি)</label>
                        <input type="text" name="m_name_english" class="form-control rounded-3 english-only" placeholder="Mother's Name">
                        <span class="text-danger small error-msg" style="display:none;">Only English letters allowed</span>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">মাতার এনআইডি নম্বর (১০ বা ১৭ ডিজিট)</label>
                        <input type="text" name="m_nid" class="form-control rounded-3 nid-validation" maxlength="17" placeholder="NID Number">
                        <span class="text-danger small nid-error" style="display:none;">এনআইডি ১০ অথবা ১৭ ডিজিটের হতে হবে</span>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">মাতার মোবাইল নম্বর (১১ ডিজিট)</label>
                        <input type="text" name="m_phone_number" class="form-control rounded-3 bd-phone" maxlength="11" placeholder="017xxxxxxxx">
                        <span class="text-danger small phone-error" style="display:none;">১১ ডিজিটের সঠিক মোবাইল নম্বর দিন</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- সেকশন ৪: ঠিকানা ও অভিভাবক -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <h5 class="fw-bold text-primary mb-3"><i class="fa-solid fa-map-location-dot me-2"></i> ৪. ঠিকানা ও অভিভাবক</h5>
                <hr>
                <div class="row g-3">
                    <div class="col-12"><h6 class="fw-bold text-secondary">বর্তমান ঠিকানা</h6></div>
                    <div class="col-md-3"><input type="text" name="present_village" id="present_village" class="form-control rounded-3" placeholder="গ্রাম/মহল্লা"></div>
                    <div class="col-md-3"><input type="text" name="present_post" id="present_post" class="form-control rounded-3" placeholder="ডাকঘর"></div>
                    <div class="col-md-3"><input type="text" name="present_thana" id="present_thana" class="form-control rounded-3" placeholder="উপজেলা/থানা"></div>
                    <div class="col-md-3"><input type="text" name="present_dist" id="present_dist" class="form-control rounded-3" placeholder="জেলা"></div>

                    <div class="col-12 mt-4 d-flex justify-content-between align-items-center">
                        <h6 class="fw-bold text-secondary mb-0">স্থায়ী ঠিকানা</h6>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="sameAsPresent">
                            <label class="form-check-label fw-bold text-primary small" for="sameAsPresent">বর্তমান ও স্থায়ী ঠিকানা একই</label>
                        </div>
                    </div>
                    <div class="col-md-3"><input type="text" name="permanent_village" id="permanent_village" class="form-control rounded-3" placeholder="গ্রাম/মহল্লা"></div>
                    <div class="col-md-3"><input type="text" name="permanent_post" id="permanent_post" class="form-control rounded-3" placeholder="ডাকঘর"></div>
                    <div class="col-md-3"><input type="text" name="permanent_thana" id="permanent_thana" class="form-control rounded-3" placeholder="উপজেলা/থানা"></div>
                    <div class="col-md-3"><input type="text" name="permanent_dist" id="permanent_dist" class="form-control rounded-3" placeholder="জেলা"></div>

                    <div class="col-md-4 mt-4">
                        <label class="form-label fw-bold small">অভিভাবক (Guardian)</label>
                        <select name="guardian" id="guardianSelect" class="form-select rounded-3">
                            <option value="father">পিতা</option>
                            <option value="mother">মাতা</option>
                            <option value="others" selected>অন্যান্য</option>
                        </select>
                    </div>

                    <!-- অন্যান্য সিলেক্ট করলে নিচের দুটি ফিল্ড শো করবে -->
                    <div class="col-md-4 mt-4" id="guardianNameField">
                        <label class="form-label fw-bold small">অভিভাবকের নাম (বাংলা)</label>
                        <input type="text" name="guardian_name_bangla" class="form-control rounded-3 bangla-only" placeholder="নাম">
                        <span class="text-danger small error-msg" style="display:none;">শুধুমাত্র বাংলা অক্ষর লিখুন</span>
                    </div>
                    <div class="col-md-4 mt-4" id="guardianMobileField">
                        <label class="form-label fw-bold small">অভিভাবকের মোবাইল নম্বর (১১ ডিজিট)</label>
                        <input type="text" name="guardian_mobile_no" class="form-control rounded-3 bd-phone" maxlength="11" placeholder="017xxxxxxxx">
                        <span class="text-danger small phone-error" style="display:none;">১১ ডিজিটের সঠিক মোবাইল নম্বর দিন</span>
                    </div>

                    <div class="col-md-6 mt-4">
                        <label class="form-label fw-bold small">শিক্ষার্থীর ছবি (Passport Size)</label>
                        <input type="file" name="photo" class="form-control rounded-3" accept="image/*">
                    </div>
                </div>

                <div class="mt-5 text-end">
                    <button type="submit" class="btn btn-primary rounded-pill px-5 py-2 shadow-sm">
                        <i class="fa-solid fa-check me-2"></i> সম্পূর্ণ তথ্য সংরক্ষণ করুন
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // ---- Guardian fields toggle ----
    toggleGuardianFields();
    $('#guardianSelect').on('change', toggleGuardianFields);

    function toggleGuardianFields() {
        let v = $('#guardianSelect').val();
        if (v === 'others') {
            $('#guardianNameField, #guardianMobileField').show();
        } else {
            $('#guardianNameField, #guardianMobileField').hide();
            clearFieldError($('input[name="guardian_name_bangla"]'));
            clearFieldError($('input[name="guardian_mobile_no"]'));
        }
    }

    // ---- লাইভ টাইপিং ভ্যালিডেশন ----
    $(document).on('input', '.bangla-only', function() {
        let regex = /^[\u0980-\u09FF\s\.-]*$/;
        let val = $(this).val();
        let err = $(this).siblings('.error-msg');
        if (!regex.test(val)) {
            $(this).val(val.replace(/[^\u0980-\u09FF\s\.-]/g, ''));
            err.text('শুধুমাত্র বাংলা অক্ষর লিখুন').show().delay(2000).fadeOut();
        } else {
            err.hide();
        }
        clearFieldError($(this));
    });

    $(document).on('input', '.english-only', function() {
        let regex = /^[a-zA-Z\s\.-]*$/;
        let val = $(this).val();
        let err = $(this).siblings('.error-msg');
        if (!regex.test(val)) {
            $(this).val(val.replace(/[^a-zA-Z\s\.-]/g, ''));
            err.text('Only English letters allowed').show().delay(2000).fadeOut();
        } else {
            err.hide();
        }
        clearFieldError($(this));
    });

    $(document).on('input', '.number-only', function() {
        this.value = this.value.replace(/[^0-9]/g, '');
        clearFieldError($(this));
    });

    $(document).on('input', '.bd-phone', function() {
        this.value = this.value.replace(/[^0-9]/g, '');
        let v = this.value;
        let err = $(this).siblings('.phone-error');
        if (v.length > 0 && (v.length !== 11 || !v.startsWith('01'))) {
            err.text('১১ ডিজিটের সঠিক মোবাইল নম্বর দিন').show();
        } else {
            err.hide();
        }
        clearFieldError($(this));
    });

    $(document).on('blur', '.nid-validation', function() {
        this.value = this.value.replace(/[^0-9]/g, '');
        let len = this.value.length;
        let err = $(this).siblings('.nid-error');
        if (len > 0 && len !== 10 && len !== 17) {
            err.text('এনআইডি ১০ অথবা ১৭ ডিজিটের হতে হবে').show();
        } else {
            err.hide();
        }
        clearFieldError($(this));
    });

    // ---- ঠিকানা sync ----
    $('#sameAsPresent').on('change', function() {
        if ($(this).is(':checked')) {
            $('#permanent_village').val($('#present_village').val());
            $('#permanent_post').val($('#present_post').val());
            $('#permanent_thana').val($('#present_thana').val());
            $('#permanent_dist').val($('#present_dist').val());
        } else {
            $('#permanent_village, #permanent_post, #permanent_thana, #permanent_dist').val('');
        }
    });

    $('#present_village, #present_post, #present_thana, #present_dist').on('input', function() {
        if ($('#sameAsPresent').is(':checked')) {
            $('#permanent_village').val($('#present_village').val());
            $('#permanent_post').val($('#present_post').val());
            $('#permanent_thana').val($('#present_thana').val());
            $('#permanent_dist').val($('#present_dist').val());
        }
    });

    // ---- Error helpers ----
    function setFieldError($input, message) {
        $input.addClass('is-invalid');
        // পুরানো field-error সরাও
        $input.siblings('.field-error').remove();
        // নতুন error বসাও
        $input.after('<div class="text-danger small mt-1 field-error">' + message + '</div>');
    }

    function clearFieldError($input) {
        $input.removeClass('is-invalid');
        $input.siblings('.field-error').remove();
    }

    function scrollToFirstError() {
        let $first = $('.is-invalid:visible').first();
        if ($first.length) {
            $('html, body').animate({ scrollTop: $first.offset().top - 100 }, 400);
            $first.focus();
        }
    }

    function getFieldLabel($el) {
        let label = $el.closest('.col-md-4, .col-md-3, .col-md-6, .col-12')
                       .find('label').first().text()
                       .replace('*', '').replace(/\s+/g, ' ').trim();
        return label || 'এই ফিল্ড';
    }

    // ---- Validate ----
    function validateForm() {
        let valid = true;

        // পুরানো সব এরর ক্লিয়ার
        $('.is-invalid').removeClass('is-invalid');
        $('.field-error').remove();

        // 1) Required fields (শুধু এই ফর্মের)
        $('#studentForm [required]').each(function() {
            let $el = $(this);
            let v = $el.val();

            if (v === null || String(v).trim() === '') {
                setFieldError($el, getFieldLabel($el) + ' পূরণ করা আবশ্যক।');
                valid = false;
            }
        });

        // 2) বাংলা নাম
        let nameBn = $('input[name="name_bangla"]');
        if (nameBn.val().trim() !== '' && !/^[\u0980-\u09FF\s\.-]+$/.test(nameBn.val())) {
            setFieldError(nameBn, 'শুধুমাত্র বাংলা অক্ষর লিখুন');
            valid = false;
        }

        // 3) ইংরেজি নাম
        let nameEn = $('input[name="name_english"]');
        if (nameEn.val().trim() !== '' && !/^[a-zA-Z\s\.-]+$/.test(nameEn.val())) {
            setFieldError(nameEn, 'Only English letters allowed');
            valid = false;
        }

        // 4) জন্ম নিবন্ধন ১৭ ডিজিট
        let birth = $('input[name="birth_regi_number"]');
        if (birth.val().trim() !== '' && birth.val().length !== 17) {
            setFieldError(birth, 'জন্ম নিবন্ধন নম্বর ১৭ ডিজিটের হতে হবে');
            valid = false;
        }

        // 5) সব ফোন (bd-phone)
        $('.bd-phone').each(function() {
            let $el = $(this);
            let v = $el.val().trim();
            if (v !== '' && (v.length !== 11 || !v.startsWith('01'))) {
                setFieldError($el, '১১ ডিজিটের সঠিক মোবাইল নম্বর দিন');
                valid = false;
            }
        });

        // 6) সব NID
        $('.nid-validation').each(function() {
            let $el = $(this);
            let v = $el.val().trim();
            if (v !== '' && v.length !== 10 && v.length !== 17) {
                setFieldError($el, 'এনআইডি ১০ অথবা ১৭ ডিজিটের হতে হবে');
                valid = false;
            }
        });

        // 7) Guardian = others হলে guardian name ও mobile ফরম্যাট
        if ($('#guardianSelect').val() === 'others') {
            let gName = $('input[name="guardian_name_bangla"]');
            let gMobile = $('input[name="guardian_mobile_no"]');

            if (gName.val().trim() !== '' && !/^[\u0980-\u09FF\s\.-]+$/.test(gName.val())) {
                setFieldError(gName, 'শুধুমাত্র বাংলা অক্ষর লিখুন');
                valid = false;
            }
            if (gMobile.val().trim() !== '' && (gMobile.val().length !== 11 || !gMobile.val().startsWith('01'))) {
                setFieldError(gMobile, '১১ ডিজিটের সঠিক মোবাইল নম্বর দিন');
                valid = false;
            }
        }

        return valid;
    }

    // ---- Submit ----
    $('#studentForm').on('submit', function(e) {
        if (!validateForm()) {
            e.preventDefault();
            scrollToFirstError();
            return false;
        }
        // frontend সব ঠিক → normal POST যাবে Laravel-এ
    });
});
</script>
@endpush