@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')
    @include('successMsg')
    <style>
        .hide-calendar .ui-datepicker-calendar {
            display: none;
        }
    </style>
    <div class="row add-data-form">
        <div class="col-md-10 col-md-offset-1" style="padding-bottom: 2%">
            <div class="viewTitle">
                <div class="panel-heading" style="padding-bottom:0; ">
                    <div class="panel-title"> {{ $pageTitle }}</div>
                </div>
            </div>
            <div class=" panel panel-default panel-border">

                <div class="panel-body">
                    {{Form::open(['url' => '/','id' => 'studentAttendanceForm', 'autocomplete' => 'off'])}}

                    {{Form::hidden('student_id', $student->id)}}

                    <div class="row">
                        {{-- Student Id No --}}
                        <div class="col-md-6">
                            <div class="form-group row">
                                <div class="col-md-3">Student Id No</div>
                                <div class="col-md-9">{{$student->student_id_no}}</div>
                            </div>
                        </div>

                        {{--Student Name--}}
                        <div class="col-md-6">
                            <div class="form-group row">
                                <div class="col-md-3">Student Name</div>
                                <div class="col-md-9">{{$student->name}}</div>
                            </div>
                        </div>

                        {{-- Medium/Version --}}
                        <div class="col-md-6">
                            <div class="form-group row">
                                <div class="col-md-3">{{$programMediumLabel}}</div>
                                <div class="col-md-9">{{$student?->eims_program?->name}}</div>
                            </div>
                        </div>

                        {{-- {{ $companyType === 'UNV' ? 'Semester' : 'Class' }}--}}
                        <div class="col-md-6">
                            <div class="form-group row">
                                <div class="col-md-3">{{$semesterClassLabel}}</div>
                                <div class="col-md-9">{{$student?->eims_semester_class?->name}}</div>
                            </div>
                        </div>

                        {{-- Shift --}}
                        <div class="col-md-6">
                            <div class="form-group row">
                                <div class="col-md-3">Shift</div>
                                <div class="col-md-9">{{$student?->eims_shift?->name}}</div>
                            </div>
                        </div>

                        {{-- Section --}}
                        <div class="col-md-6">
                            <div class="form-group row">
                                <div class="col-md-3">Section</div>
                                <div class="col-md-9">{{$student?->eims_section?->name}}</div>
                            </div>
                        </div>

                        {{-- Session --}}
                        <div class="col-md-6">
                            <div class="form-group row">
                                <div class="col-md-3">Session</div>
                                <div class="col-md-9">{{$student?->eims_session?->name}}</div>
                            </div>
                        </div>

                        @if($companyType != 'UNV')
                            {{-- Semester Group --}}
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <div class="col-md-3">Class Group</div>
                                    <div class="col-md-9">{{$student?->eims_semester_class_group?->name}}</div>
                                </div>
                            </div>
                        @endif

                        {{-- roll --}}
                        <div class="col-md-6">
                            <div class="form-group row">
                                <div class="col-md-3">Roll No</div>
                                <div class="col-md-9">{{$student->roll_no}}</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        {{-- monthwise or weekwise --}}
                        <div class="col-md-6">
                            <div class="form-group row">

                                {{Form::label('attendance_type', 'Attendance Type', ['class' => 'col-md-3 form-control-label'])}}

                                <div class="col-md-9">
                                    {{ Form::select('attendance_type', [
                                    '' => 'Select Attendance Type',
                                    'weekwise' => 'Week wise',
                                    'monthwise' => 'Month wise'
                                    ], null, ['class' => 'form-control', 'id' => "attendance_type"]) }}
                                </div>
                            </div>
                        </div>

                        {{-- select either year-mm or select year--week --}}
                        <div class="col-md-6">
                            <div class="form-group row">
                                {{Form::label('attendance_selector', '', ['class' => 'col-md-3 form-control-label'])}}
                                <div class="col-md-9">
                                    {{ Form::text('attendance_selector', null, ['class' => 'form-control', 'id' => "attendance_selector"]) }}
                                </div>
                            </div>
                        </div>


                    </div>

                    <div id="attendanceHolder"></div>

                    {{Form::close()}}
                </div>
            </div>
            <div class="viewTitle"></div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="timeModal" tabindex="-1" role="dialog" aria-labelledby="timeModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="timeModalLabel">Set Common Entry and Exit Time</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="commonEntryTime">Common Entry Time</label>
                        <input type="text" class="form-control" id="commonEntryTime"
                               placeholder="Entry Time" readonly>
                    </div>
                    <div class="form-group">
                        <label for="commonExitTime">Common Exit Time</label>
                        <input type="text" class="form-control" id="commonExitTime" placeholder="Exit Time" readonly>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="setCommonTime">Set Time</button>
                </div>
            </div>
        </div>
    </div>


    <script src="{{asset('js/moment.min.js')}}"></script>
    <script type="text/javascript">
        "use strict";

        const getDaysArray = function (start, end) {
            const arr = [];
            for (const dt = new Date(start); dt <= new Date(end); dt.setDate(dt.getDate() + 1)) {
                if (dt.getDay() !== 5) { // 5 represents Friday
                    arr.push(new Date(dt));
                }
            }
            return arr;
        };


        $(document).ready(function () {
            // based on attendance type configure datepicker to select either week or month
            $('#attendance_type').change(function () {
                const attendanceType = $(this).val();
                if (attendanceType === 'weekwise') {
                    $("#attendance_selector").datepicker("destroy").datepicker({
                        dateFormat: "dd-mm-yy",
                        showWeek: true,
                        firstDay: 6,
                        beforeShow: function (input, inst) {
                            $(input).datepicker("widget").removeClass("month-year-picker");
                            $("#ui-datepicker-div").removeClass("hide-calendar");
                        }
                    });
                } else if (attendanceType === 'monthwise') {
                    $("#attendance_selector").datepicker("destroy").datepicker({
                        dateFormat: "mm-yy",
                        changeMonth: true,
                        changeYear: true,
                        onClose: function (dateText, inst) {
                            const month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                            const year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                            $(this).val($.datepicker.formatDate('mm-yy', new Date(year, month, 1))).change();
                        },
                        beforeShow: function (input, inst) {
                            $(input).datepicker("widget").addClass("month-year-picker");
                            $("#ui-datepicker-div").addClass("hide-calendar");
                        }
                    });
                } else {
                    $("#attendance_selector").datepicker("destroy");
                }
            });

            // on attendance_type and attendance_selector change append attendance data in attendanceHolder
            $("#attendance_selector").change(function () {
                const attendanceType = $('#attendance_type').val();
                const attendanceSelector = $('#attendance_selector').val();

                // show a modal to get a common entry-time and end-time

                const studentId = '{{ $student->id }}';
                const url = `{{ route('eims_student_attendance') }}/${studentId}/attendance`;

                if (attendanceType && attendanceSelector) {
                    let startDate, endDate;
                    if (attendanceType === 'weekwise') {
                        const [date, month, year] = attendanceSelector.split('-');
                        startDate = moment(`${year}-${month}-${date}`).format('YYYY-MM-DD');
                        endDate = moment(`${year}-${month}-${date}`).add(6, 'days').format('YYYY-MM-DD');
                    } else if (attendanceType === 'monthwise') {
                        const [month, year] = attendanceSelector.split('-');
                        startDate = moment(`${year}-${month}-01`).startOf('month').format('YYYY-MM-DD');
                        endDate = moment(`${year}-${month}-01`).endOf('month').format('YYYY-MM-DD');
                    }

                    const days = getDaysArray(startDate, endDate);

                    const attendanceHolder = $('#attendanceHolder').empty();
                    const table = `
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Date</th>
                                    <th>Entry Time</th>
                                    <th>Exit Time</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody style="color: #0c0c0c">
                                ${days.map((date, index) => `
                                    <tr>
                                        <td>${index + 1}</td>
                                        <td>
                                            <input
                                                type="text"
                                                class="form-control"
                                                name="dates[]"
                                                value="${moment(date).format('DD-MM-YYYY')}"
                                                readonly>
                                        </td>
                                        <td>
                                            <input
                                                type="text"
                                                class="form-control timepicker entry-time"
                                                name="entry_times[]"
                                                value=""
                                                placeholder="Entry Time"
                                                readonly>
                                        </td>

                                        <td>
                                            <input
                                                type="text"
                                                class="form-control timepicker exit-time"
                                                name="exit_times[]"
                                                value=""
                                                placeholder="Exit Time"
                                                readonly>
                                        </td>

                                        <td>
                                            @foreach($attendanceStatuses as $attendanceStatus)
                    <label class="radio-inline" for="attendance_statuses_{{$attendanceStatus}}_${index}">
                                                    <input type="radio" class="attendance-status" name="attendance_status[${index}]" id="attendance_statuses_{{$attendanceStatus}}_${index}" value="{{$attendanceStatus}}" @checked( $attendanceStatus == "Present") required> {{$attendanceStatus}}
                    </label>
@endforeach
                    </td>
                </tr>
`).join('')}
                            </tbody>
                        </table>

                        <div class="form-group row">
                            <div class="col-md-12 text-right">
                                <button type="submit" class="btn btn-primary" >Submit</button>
                            </div>
                        </div>
                    `;
                    attendanceHolder.html(table);

                    $('#timeModal').modal('show');
                }
            });

            // Set common entry and exit times
            $('#setCommonTime').click(function () {
                const commonEntryTime = $('#commonEntryTime').val();
                const commonExitTime = $('#commonExitTime').val();

                if (commonEntryTime && commonExitTime) {
                    $('.entry-time').val(commonEntryTime);
                    $('.exit-time').val(commonExitTime);
                    $('#timeModal').modal('hide');
                } else {
                    alert('Please set both entry and exit times.');
                }
            });

            // Initialize timepicker on elements with class 'timepicker'
            $('#commonEntryTime, #commonExitTime').timepicker({
                showMeridian: true, // Enables AM/PM format
                defaultTime: '12:00 AM', // Sets the default time
                minuteStep: 1, // Adjusts the step for minutes
                showInputs: false // Optional: hides manual input
            }).on('changeTime.timepicker', function(e) {
                const hours = e.time.hours.toString().padStart(2, '0'); // Add leading zero
                const minutes = e.time.minutes.toString().padStart(2, '0'); // Add leading zero
                const meridian = e.time.meridian; // AM/PM
                const formattedTime = hours + ':' + minutes + ' ' + meridian;

                // Update the input field with the formatted time
                $(this).val(formattedTime);
            });

            // on timepicker set timepicker
            $(document).on('focus', '.timepicker', function () {
                $(this).timepicker({
                    showMeridian: true, // Enables AM/PM format
                    defaultTime: '12:00 AM', // Sets the default time
                    minuteStep: 1, // Adjusts the step for minutes
                    showInputs: false // Optional: hides manual input
                }).on('changeTime.timepicker', function(e) {
                    const hours = e.time.hours.toString().padStart(2, '0'); // Add leading zero
                    const minutes = e.time.minutes.toString().padStart(2, '0'); // Add leading zero
                    const meridian = e.time.meridian; // AM/PM
                    const formattedTime = hours + ':' + minutes + ' ' + meridian;

                    // Update the input field with the formatted time
                    $(this).val(formattedTime);
                });
            });

            // same row .entry-time must be greater than .exit-time
            $(document).on('change', '.entry-time', function () {
                const entryTime = $(this).val();
                const exitTime = $(this).closest('tr').find('.exit-time').val();
                if (entryTime && exitTime && entryTime > exitTime) {
                    $(this).val('');
                    Swal.fire({
                        title: 'Error!',
                        text: 'Entry Time must be less than Exit Time',
                        icon: 'error',
                        confirmButtonText: 'Ok'
                    });
                }
            });

            // if attendance-status is absent then entry-time and exit-time must be empty
            $(document).on('change', '.attendance-status', function () {
                const attendanceStatus = $(this).val();
                const entryTime = $(this).closest('tr').find('.entry-time');
                const exitTime = $(this).closest('tr').find('.exit-time');

                if (attendanceStatus === 'Absent' || attendanceStatus === 'Leave') {
                    entryTime.val('').removeClass('timepicker');
                    exitTime.val('').removeClass('timepicker');
                } else {
                    entryTime.val('').addClass('timepicker');
                    exitTime.val('').addClass('timepicker');
                }
            });

            // on studentAttendanceForm submit ajax request
            $('#studentAttendanceForm').submit(function (e) {
                e.preventDefault();
                const programIdHiddenField = $('#program_medium_id_hidden').empty();
                const sessionIdHiddenField = $('#session_id_hidden').empty();
                const semesterClassIdHiddenField = $('#semester_class_id_hidden').empty();
                const semesterClassGroupIdHiddenField = $('#semester_class_group_id_hidden').empty();
                const shiftIdHiddenField = $('#shift_id_hidden').empty();
                const sectionIdHiddenField = $('#section_id_hidden').empty();

                const academicExamResultGenerationTable = $('#academicExamResultGenerationTable').empty();


                $.post(`{{ route('eims_student_attendance_store')  }}`, $(this).serialize())
                    .done(function (response) {
                        programIdHiddenField.val($('#program_medium_id').val());
                        sessionIdHiddenField.val($('#session_id').val());
                        semesterClassIdHiddenField.val($('#semester_class_id').val());
                        semesterClassGroupIdHiddenField.val($('#semester_class_group_id').val());
                        shiftIdHiddenField.val($('#shift_id').val());
                        sectionIdHiddenField.val($('#section_id').val());


                        const {students} = response.data;


                        const table = students.length
                            ? `
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>SL</th>
                                        <th>Shift</th>
                                        <th>Section</th>
                                        <th>Student</th>
                                        <th>Student ID</th>
                                        <th>Roll No</th>
                                        <th class="text-small">Status</th>
                                    </tr>
                                </thead>
                                <tbody style="color: #0c0c0c">
                            ${students.map((student, index) => {
                                // failed course cubjects names
                                return `
                                    <tr>
                                        <td>${index + 1} <input type="hidden" name="student_ids[]" value="${student.id}"></td>
                                        <td>${student.shift_name}</td>
                                        <td>${student.section_name}</td>
                                        <td>${student.name}</td>
                                        <td>${student.student_id_no}</td>
                                        <td>${student.roll_no}</td>
                                        <td>
                                            <a href="{{route("eims_student_attendance")}}/${student.encoded_id}" class="btn btn-primary btn-sm">
                                                Take Attendance
                                            </a>
                                        </td>
                                    </tr>
                                    `;
                            }).join('')}
                                </tbody>
                            </table>
                            `
                            : `<div class="alert alert-warning">No data found</div>`;

                        academicExamResultGenerationTable.html(table);
                        academicExamStudentPromotionForm.removeClass('hidden');

                    })
                    .catch(function (error) {
                        academicExamStudentPromotionForm.addClass('hidden');
                        const {responseTitle, responseText, responseStatus} = error.responseJSON;

                        Swal.fire({
                            title: responseTitle,
                            text: responseText,
                            icon: responseStatus,

                        });
                    });
            });
        });
    </script>

@endsection