@extends('admin.masterv2')
@section('styleSheet')
    <!-- BEGIN PAGE LEVEL STYLES -->
    <style>
        .splash-image {
          max-width: 100%;
          max-height: 100%;
          border-radius: 10px;
          position: relative;
        }
        .modal-backdrop {
          background-color: rgba(0, 0, 0, 0.7) !important;  /*Transparent black background */
        }
        .modal-content {
          border: none;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          padding:20px;
        }
        .btn-close {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 1055; /* Ensure it is above the image */
          color: white;
          background-color: #fff; /* Add a semi-transparent background for better visibility */
          border-radius: 50%;
          padding: 5px;
          opacity: 0.8;
        }
        .btn-close:hover {
          background-color: rgba(0, 0, 0, 0.8);
        }
      </style>
    <!-- END PAGE LEVEL STYLES -->
@endsection
@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="{{route('home')}}">Dashboard</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{route('coursesPage')}}">Courses</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{ route('editCoursesProgram', ['id' => $course->id]) }}">{{$course->short_name}}</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>Course Students </li>
                </ul>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->
            <div class="row">
                <div class="col-md-12">
                   
                        <div class="portlet">
                            <div class="portlet-title mb-3">
                                <div class="caption">
                                    <div class="row">
                                        <div class="col">
                                            <i class="fa fa-user"></i> <strong>Admit students and assign subjects</strong>
                                        </div>
                                        <div class="col">
                                            <a href="{{ route('editCourseFees', ['id' => $course->id]) }}" target="_blank" class="btn btn-primary pull-right"><i class="fa fa-user"></i> Course Related Fees</a>
                                        </div>
                                    
                                    </div>
                                    
                                </div>
                            </div>
                            <div class="portlet-body">
                                @include('admin.includesV2.backendAlert')




<div class="row">
    <div class="col studentDashboardTab">
        <nav class="row">
            <div class="col nav nav-tabs" id="nav-tab" role="tablist">
                
                <button class="nav-link active" id="nav-admittedStudents-tab" data-bs-toggle="tab" data-bs-target="#nav-admittedStudents" type="button" role="tab" aria-controls="nav-admittedStudents" aria-selected="true">Admitted Student</button>
                <button class="nav-link" id="nav-appliedStudents-tab" data-bs-toggle="tab" data-bs-target="#nav-appliedStudents" type="button" role="tab" aria-controls="nav-appliedStudents" aria-selected="false">Applied Students</button>
                <button class="nav-link" id="nav-courseSubjects-tab" data-bs-toggle="tab" data-bs-target="#nav-courseSubjects" type="button" role="tab" aria-controls="nav-courseSubjects" aria-selected="false">Subjects</button>
            </div>
        </nav>

        <div class="row tab-content" id="nav-tabContent">
            <div class="col p-3 tab-pane fade show active" id="nav-admittedStudents" role="tabpanel" aria-labelledby="nav-admittedStudents-tab">
                <div class="row">
                    <div class="col">
                        
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th scope="col">Id</th>
                                <th scope="col">Organizational ID</th>
                                <th scope="col">Name</th>
                                <th scope="col">Email</th>
                                <th scope="col" class="text-end">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach($admittedStudents as $student)
                                <tr>
                                    <td>{{$student->id}}</td>
                                    <td>{{$student->id_number}}</td>
                                    <td>{{$student->first_name}} {{$student->last_name}}</td>
                                    <td>
                                        {{$student->email}}
@if($student->subjectsFormData)
<p style="font-size:11px">
    @foreach($student->subjectsFormData as $semesterId => $subjects)
        <br /><strong>Semester {{ $semesterId }}</strong><br />

            @foreach($subjects as $subject)
                {{ $subject['name'] }},
            @endforeach
    @endforeach
</p>
@endif

                                    </td>
                                    
                                    <td class="text-end">
                                        <button
                                            class="btn btn-primary ssfs_edit_btn"
                                            data-ssfs_student_id="{{ $student->id }}"
                                            data-ssfs_course_id="{{ $course->id }}"
                                        >
                                            View Subjects
                                        </button>

                                </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <div class="modal fade" id="ssfs_modal" tabindex="-1">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    
                                    <form class="container custom form needs-validation" id="ssfs_form" method="POST">
                                        @csrf
                                        <input type="hidden" name="_method" id="ssfs_form_method">
                                        <input type="hidden" name="ssfs_student_id" id="ssfs_student_id">
                                        <input type="hidden" name="ssfs_course_id" id="ssfs_course_id">
                    
                                        
                    
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="ssfs_modal_title">Select/Edit Subjects</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                    
                                        <div class="modal-body">
                                            <div class="row">
                                            <div id="course_subject_list"></div>
                                                
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                
                                            <button 
                                                type="submit" 
                                                class="btn btn-primary" 
                                                id="ssfs_submit_btn"
                                            >
                                                Save
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col p-3 tab-pane fade" id="nav-appliedStudents" role="tabpanel" aria-labelledby="nav-appliedStudents-tab">
                <div class="row">
                    <div class="col">
                        
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th scope="col">Id</th>
                                <th scope="col">Organizational ID</th>
                                <th scope="col">Name</th>
                                <th scope="col">Email</th>
                                <th scope="col">Payment</th>
                                <th scope="col">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach($students as $student)
                                <tr>
                                    <td>{{$student->id}}</td>
                                    <td>{{$student->id_number}}</td>
                                    <td>{{$student->first_name}} {{$student->last_name}}</td>
                                    <td>{{$student->email}}</td>
                                    <td>
                                        @if($student->paid_status == 'd')
                                            DUE
                                        @else
                                            PAID
                                        @endif
                                    </td>
                                    <td>
                                        <button
                                            class="btn {{ $student->paid_status === 'p' ? 'btn-success' : 'btn-warning' }} edit-btn"
                                            data-student_id="{{ $student->id }}"
                                            data-course_id="{{ $course->id }}"
                                            data-id_number="{{ $student->id_number}}"
                                            data-email="{{ $student->email }}"
                                            data-first_name="{{ $student->first_name }}"
                                            data-last_name="{{ $student->last_name }}"
                                            @if($student->paid_status === 'd') disabled @endif
                                        >
                                            Admit
                                        </button>
                                </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>


                        <div class="modal fade" id="pageModal" tabindex="-1">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <form class="custom form needs-validation" id="pageForm" method="POST">
                                        @csrf
                                        <input type="hidden" name="_method" id="formMethod">
                                        <input type="hidden" name="student_id" id="student_id">
                                        <input type="hidden" name="course_id" id="course_id">
                    
                    
                    
                                        <div class="modal-header">
                                        <h5 class="modal-title" id="modalTitle">Add Course Fee</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                    
                                        <div class="modal-body">
                                            <div class="row">
                    
                                                <div class="col form-group">
                                                    <label class="form-label">Organizational ID<span class="required"> *</span></label>
                                                    <input 
                                                        type="text"
                                                        name="id_number" 
                                                        id="id_number"  
                                                        class="form-control" 
                                                        placeholder="MAF-XX-YYY" 
                                                        autocomplete="off" 
                                                        oninput="this.value = this.value.toUpperCase().replace(/\s+/g,'')"
                                                        required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                                Admin Student under the course
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>



            <div class="col p-3 tab-pane fade" id="nav-courseSubjects" role="tabpanel" aria-labelledby="nav-courseSubjects-tab">
                <div class="row">
                    <div class="col">
                        <div class="row">
                            <div class="col">
                                <button 
                                    class="btn btn-primary" 
                                    id="subjectCourseAddBtn" 
                                    data-subject_course_course_id="{{ $course->id }}">
                                    Add Subject
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th scope="col">Id</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Fee (BDT)</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($courseSubjects as $courseSubject)
                                            <tr>
                                                <td>{{$courseSubject->id}}</td>
                                                <td>{{$courseSubject->name}}</td>
                                                <td>{{$courseSubject->fee}}</td>
                                                <td>
                                                    <button
                                                        id="subjectCourseEditBtn"
                                                        class="btn btn-primary subjectCourseEditBtn"
                                                        data-subject_course_id="{{$courseSubject->id}}"
                                                        data-subject_course_course_id="{{ $course->id }}"
                                                        data-subject_course_name="{{ $courseSubject->name }}"
                                                        data-subject_course_fee="{{ $courseSubject->fee }}"
                                                    >
                                                        Edit
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>





                                <div class="modal fade" id="subjectCourseModal" tabindex="-1">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            
                                            <form class="custom form needs-validation" id="subjectCourseForm" method="POST">
                                                @csrf
                                                <input type="hidden" name="_method" id="subjectCourseFormMethod">
                                                <input type="hidden" name="subject_course_id" id="subject_course_id">
                                                <input type="hidden" name="subject_course_course_id" id="subject_course_course_id">
                                                <input type="hidden" name="subject_course_parent_id" id="subject_course_parent_id">
                            
                                                
                            
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="subjectCoursModalTitle">Add Course Fee</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                </div>
                            
                                                <div class="modal-body">
                                                    <div class="row">
                            
                                                        <div class="col form-group">
                                                            <label class="form-label">Name<span class="required"> *</span></label>
                                                            <input 
                                                                type="text"
                                                                name="subject_course_name" 
                                                                id="subject_course_name"  
                                                                class="form-control" 
                                                                placeholder="Subject" 
                                                                autocomplete="off" 
                                                                required>
                                                        </div>
                                                        <div class="col form-group">
                                                            <label class="form-label">Subject Fee<span class="required"> *</span></label>
                                                            <input 
                                                                type="text"
                                                                name="subject_course_fee" 
                                                                id="subject_course_fee"  
                                                                class="form-control" 
                                                                placeholder="1500" 
                                                                autocomplete="off" 
                                                                required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                        
                                                    <button 
                                                        type="submit" 
                                                        class="btn btn-primary" 
                                                        id="subjectCourseSubmitBtn"
                                                    >
                                                        Save
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- end of nav-courseSubjects --}}





        </div> 
        {{-- end of tab-content --}}
    </div>
</div>
<div class="container my-5">
    

</div>
                                






                            </div><!-- END Portlet -->
                        </div>
                    
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>
    </div>
@endsection

@section('customJs') 
<script>

$(document).ready(function() {

    

    // Check if there's a saved tab in localStorage
    var savedTab = localStorage.getItem('activeTab');

    if (savedTab) {
        // Remove 'active' class from all tabs and tab panes
        $('#nav-tab .nav-link').removeClass('active');
        $('.tab-pane').removeClass('show active');

        // Add 'active' class to the saved tab and its corresponding tab pane
        $('#' + savedTab).addClass('active');
        $($('#' + savedTab).data('bs-target')).addClass('show active');
    }

    // Add click event listener to each tab button
    $('#nav-tab .nav-link').on('click', function() {
        // Save the active tab ID in localStorage
        localStorage.setItem('activeTab', $(this).attr('id'));
    });
});

$(document).ready(function () {

    $('#id_number').on('input', function () {
    let value = $(this).val()
        .replace(/\s+/g, '')
        .toUpperCase()
        .replace(/[^A-Z0-9-]/g, '');

    $(this).val(value);
});


$.validator.addMethod(
    "idNumberFormat",
    function (value, element) {
        return this.optional(element) || /^[A-Z0-9-]+$/.test(value);
    },
    "Only capital letters, digits and hyphens are allowed"
);


    function initPageFormValidation() {
    const $form = $('#pageForm');

    // Destroy any previous validator instance
    if ($form.data('validator')) {
        $form.removeData('validator');
        $form.off('.validate');
    }

    // Initialize validator
    $form.validate({
        rules: {
            id_number: {
                required: true,
                idNumberFormat: true,
                minlength: 10,
                maxlength: 10,
            },
        },
        messages: {
            id_number: { 
                required: "required", 
                minlength: "Minimum 10 chracters",
                maxlength: "Maximum 10 chracters" 
            },
        },
        ignore: [], // validate hidden fields in modal
        errorClass: "is-invalid",
        validClass: "is-valid",
        errorElement: "div",
        errorPlacement: function (error, element) {
            var feedbackElement = element.siblings('.invalid-feedback');
            if (feedbackElement.length) {
                feedbackElement.html(error.html());
            } else {
                error.addClass("invalid-feedback");
                element.closest(".form-group").append(error);
            }
        },
        highlight: function (element) { $(element).addClass("is-invalid").removeClass("is-valid"); },
        unhighlight: function (element) { $(element).addClass("is-valid").removeClass("is-invalid"); },
        submitHandler: function (form) { form.submit(); }
    });
}

const modal = new bootstrap.Modal($('#pageModal')[0]);
    const form = $('#pageForm');
    const formMethod = $('#formMethod');

    const modalTitle = $('#modalTitle');
    const submitBtn = $('#submitBtn');

    const id_number = $('#id_number');
    const course_id = $('#course_id');
    const student_id = $('#student_id');

$('.edit-btn').on('click', function () {

const btn = $(this);
//"{{ route('updateCourseFees', ':id') }}".replace(':id', btn.data('id'))
form.attr(
    'action',
    "{{ route('admitStudentUnderCourse') }}"
);

formMethod.val('POST');

modalTitle.text('Student Admission');
submitBtn.text('Admin Student under the course');
student_id.val(String(btn.data('student_id')));
course_id.val(btn.data('course_id'));
id_number.val(btn.data('id_number'));     

$("#pageForm").validate().resetForm();
$("#pageForm .form-control").removeClass("is-valid is-invalid");
initPageFormValidation(false); // ✅ reinitialize validator after populating form
$('#pageModal').modal('show');
});



    // ---------- subjectCourseModal ----------
    const subjectCourseModal = new bootstrap.Modal($('#subjectCourseModal')[0]);
    const subjectCourseForm = $('#subjectCourseForm');
    const subjectCourseFormMethod = $('#subjectCourseFormMethod');

    const subjectCoursModalTitle = $('#subjectCoursModalTitle');
    const subjectCourseSubmitBtn = $('#subjectCourseSubmitBtn');

    const subjectCourseEditBtn = $('#subjectCourseEditBtn');
    const subjectCourseAddBtn = $('#subjectCourseAddBtn');

    //const subjectCourseId = $('#subjectCourseId');
    const subject_course_id = $('#subject_course_id');
    const subject_course_course_id = $('#subject_course_course_id');
    const subject_course_name = $('#subject_course_name');
    const subject_course_fee = $('#subject_course_fee');
    //const subjectCourseParentId = $('#subjectCourseParentId');


function initsubjectCourseFormValidation(isAdd=true) {
    const $form = $('#subjectCourseForm');

    // Destroy any previous validator instance
    if (isAdd && $form.data('validator')) {
        $form.removeData('validator');
        $form.off('.validate');
    }

    // Initialize validator
    $form.validate({
        rules: {
            name: {
                required: true,
                maxlength: 10,
            },
            fee: {
                required: true,
                digits: true,
            },
        },
        messages: {
            name: { 
                required: "required minimum 10 characters", 
            },
            fee: { 
                required: "required minimum only digits", 
            },
        },
        ignore: [], // validate hidden fields in modal
        errorClass: "is-invalid",
        validClass: "is-valid",
        errorElement: "div",
        errorPlacement: function (error, element) {
            var feedbackElement = element.siblings('.invalid-feedback');
            if (feedbackElement.length) {
                feedbackElement.html(error.html());
            } else {
                error.addClass("invalid-feedback");
                element.closest(".form-group").append(error);
            }
        },
        highlight: function (element) { $(element).addClass("is-invalid").removeClass("is-valid"); },
        unhighlight: function (element) { $(element).addClass("is-valid").removeClass("is-invalid"); },
        submitHandler: function (form) { form.submit(); }
    });

    // Reset form validation and field states
    if (isAdd) {
        $form[0].reset();
        $form.validate().resetForm();
        $form.find('.form-control').removeClass("is-valid is-invalid");
    }
}
    
    $('#subjectCourseAddBtn').on('click', function () {
        const btn = $(this);
        subjectCourseForm.attr('action', "{{ route('addCourseSubject') }}");
        subjectCourseFormMethod.val('POST');
    
        subjectCoursModalTitle.text('Add Subject');
        subjectCourseAddBtn.text('Add Subject');

        subject_course_course_id.val(btn.data('subject_course_course_id'));

        $("#subjectCourseForm").validate().resetForm();
        $("#subjectCourseForm .form-control").removeClass("is-valid is-invalid");
            
            initsubjectCourseFormValidation(true);   // ✅ initialize validator
            subjectCourseForm[0].reset();               // reset values
            //setNationality();              // ✅ update nationality & NID/Passport
            $('#subjectCourseModal').modal('show');
           // modal.show();
        });

$('#subjectCourseEditBtn').on('click', function () {

    const btn = $(this);
//"{{ route('updateCourseFees', ':id') }}".replace(':id', btn.data('id'))
    subjectCourseForm.attr(
        'action',
        "{{ route('updateCourseSubject') }}"
    );

    subjectCourseFormMethod.val('POST');

    subjectCoursModalTitle.text('Edit Subject');
    subjectCourseSubmitBtn.text('Update');


    subject_course_id.val(btn.data('subject_course_id'));
    subject_course_course_id.val(btn.data('subject_course_course_id'));
    subject_course_name.val(btn.data('subject_course_name'));
    subject_course_fee.val(btn.data('subject_course_fee'));

    //$("#subjectCourseForm").validate().resetForm();
    $("#subjectCourseForm .form-control").removeClass("is-valid is-invalid");
    initsubjectCourseFormValidation(false); // ✅ reinitialize validator after populating form
    $('#subjectCourseModal').modal('show');
});
    
        // ---------- EDIT ----------
        

        
    // ---------- select subjets for student modal ssfs ----------
    const ssfs_modal = new bootstrap.Modal($('#ssfs_modal')[0]);
    const ssfs_form = $('#ssfs_form');
    const ssfs_form_method = $('#ssfs_form_method');

    const ssfs_modal_title = $('#ssfs_modal_title');
    const ssfs_submit_btn = $('#ssfs_submit_btn');

    const ssfs_edit_btn = $('.ssfs_edit_btn');

    const ssfs_student_id = $('#ssfs_student_id');
    const ssfs_course_id = $('#ssfs_course_id');
    // const subject_course_course_id = $('#subject_course_course_id');
    // const subject_course_name = $('#subject_course_name');
    // const subject_course_fee = $('#subject_course_fee');


$('.ssfs_edit_btn').on('click', function () {

    const btn = $(this);
    ssfs_form.attr(
        'action',
        "{{ route('updateSubjectsForStudent') }}"
    );

    ssfs_form_method.val('POST');

    ssfs_student_id.val(btn.data('ssfs_student_id'));
    ssfs_course_id.val(btn.data('ssfs_course_id'));



    //ssfs_student_course_subject_list.val(btn.data('ssfs_student_course_subject_list'));

    //$("#subjectCourseForm").validate().resetForm();
    $("#ssfs_form .form-control").removeClass("is-valid is-invalid");
    //initsubjectCourseFormValidation(false); // ✅ reinitialize validator after populating form
    $('#ssfs_modal').modal('show');

    loadCourseSubjects(ssfs_student_id.val(), ssfs_course_id.val())
    .done(renderCourseSubjects)
    .fail(handleCourseSubjectError);

    
});
        
function loadCourseSubjects(studentId, courseId) {
    return $.ajax({
        url: "{{ route('getCourseSubjectForStudent') }}",
        type: "POST",
        data: { student_id: studentId, course_id: courseId, _token: "{{ csrf_token() }}" }
    });
}

function renderCourseSubjects(response) {
    $('#course_subject_list').html(response.html);
}

function handleCourseSubjectError() {
    $('#course_subject_list').html('<p class="text-danger">Failed to load subjects.</p>');
}

$('#ssfs_submit_btn').on('click', function () {
        const btn = $(this);
        ssfs_form.attr('action', "{{ route('updateSubjectsForStudent') }}");
        ssfs_form_method.val('POST');
    
        //subjectCoursModalTitle.text('Add Subject');
        //subjectCourseAddBtn.text('Add Subject');

        //subject_course_course_id.val(btn.data('subject_course_course_id'));

        $("#ssfs_form").validate().resetForm();
        $("#ssfs_form .form-control").removeClass("is-valid is-invalid");
            
            //initsubjectCourseFormValidation(true);   // ✅ initialize validator
            //ssfs_form[0].reset();               // reset values
            //setNationality();              // ✅ update nationality & NID/Passport
            $('#ssfs_modal').modal('show');
           // modal.show();
        });
    });

    $('#ssfs_modal').on('change', 'input[name="courseSubjectsSemesterId"]', function () {
    const selectedSemester = $(this).val();

    $('input[name="courseSubjectId[]"]').each(function () {
        const subjectSemester = $(this).data('semester');

        if (String(subjectSemester) === String(selectedSemester)) {
            $(this).prop('checked', true);
        } else {
            $(this).prop('checked', false);
        }
    });
});

</script>

@endsection

@section('documentJquery')

@endsection