@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Student Attendance History</title>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

<style>
    .edit:hover {
        color: #fff !important;
        background-color: blue !important;
        border-color: #696cff !important;
        border-radius: 5px !important;
    }

    .delete:hover {
        color: #fff !important;
        background-color: #E3242B !important;
        border-color: #E3242B !important;
        border-radius: 5px !important;
    }

    .dtbl_dropdown .dataTables_length {
        width: 65px;
    }

    .dtbl_dropdown .dataTables_length label {
        width: 100%;
    }

    .select_student {
        display: inline-block !important;
        width: auto !important;
        margin-left: 5px;
        border-color: #697a8d;
    }

    .select2-selection {
        border-color: #dae0e7 !important;
    }

    /* Styles for the Select2 dropdown when focused or hovered */
    .select2-container--focus .select2-selection,
    .select2-selection:hover {
        border-color: #696cff !important;
    }

    /* Styles for the Select2 dropdown when active (clicked) */
    .select2-container--open .select2-selection {
        border-color: #696cff !important;
    }

    .select2-selection--single .select2-selection__rendered {
        color: #697a8d !important;
    }

    .custom_select12 {
        width: 100%;
    }

    .custom_select12 .select2-container .selection .select2-selection {
        height: 38px;
    }

    .custom_select12 .select2-container .selection .select2-selection .select2-selection__rendered {
        height: 100%;
        line-height: 2.3;
    }

    .custom_select12 .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 100%;
    }

    .pagination {
        margin-top: 30px;
    }
</style>

@include('datepicker')

@section('main-content')
        <div class="{{ Session::has('success') ? '' : 'd-none' }} hide_msg_class"
        style="position: absolute; top:15%; margin-left:1%;">
        <div id="alert">
            @if (Session::has('success'))
                <div class="alert {{ Session::get('success') == 'Teacher deleted successfully.' ? 'alert-danger' : 'alert-success' }}"
                    role="alert">
                    {{ Session::get('success') }}
                </div>
            @endif
        </div>
    </div>
    <!-- Content wrapper -->
    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Student Attendance History</span></h4>

            <div class="row d-flex" id="main_target_div">
                <div class="col-12 col-lg-7 ms-lg-3 card pb-5 p-2 mb-3">
                    <div class="d-flex">
                        <div class="custom_select12 mt-1 mb-3 pe-3">
                            <select class="form-select input form-control-line me-2 select_student w-100">
                                @if (count($student_details) > 0)
                                    <option disabled hidden selected>Select Student</option>
                                    @foreach ($student_details as $key => $val)
                                        <option value="{{ $key }}">{{ $val }}</option>
                                    @endforeach
                                @else
                                    <option selected disabled>No Student Found</option>
                                @endif
                            </select>
                            <div></div>
                        </div>

                        <div class="custom_select12">
                            <select
                                class="form-select mt-1 mb-3 {{ count($student_details) > 0 ? '' : 'disabled' }} select_month">
                                <option selected disabled hidden>Select Month</option>
                                <option value="1" {{ $month == '01' ? 'selected' : '' }}>January</option>
                                <option value="2" {{ $month == '02' ? 'selected' : '' }}>February</option>
                                <option value="3" {{ $month == '03' ? 'selected' : '' }}>March</option>
                                <option value="4" {{ $month == '04' ? 'selected' : '' }}>April</option>
                                <option value="5" {{ $month == '05' ? 'selected' : '' }}>May</option>
                                <option value="6" {{ $month == '06' ? 'selected' : '' }}>June</option>
                                <option value="7" {{ $month == '07' ? 'selected' : '' }}>July</option>
                                <option value="8" {{ $month == '08' ? 'selected' : '' }}>August</option>
                                <option value="9" {{ $month == '09' ? 'selected' : '' }}>September</option>
                                <option value="10" {{ $month == '10' ? 'selected' : '' }}>October</option>
                                <option value="11" {{ $month == '11' ? 'selected' : '' }}>November</option>
                                <option value="12" {{ $month == '12' ? 'selected' : '' }}>December</option>
                            </select>
                        </div>

                    </div>

                    <div class="form-control mt-2 show_date_filters ">
                        <div class="row text-center">
                            <span class="text-info">
                                ( Month selection will be disabled when start date or end date is selected )
                            </span>
                        </div>
                        <div class="d-flex justify-content-around flex-wrap mt-2">
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Start Date</label>
                                <input class="form-input form-control bg-white" placeholder="Start Date" id="start_date"
                                    autocomplete="off" readonly />
                                <div></div>
                            </div>
                            <div class="col-12 col-md-5 mb-3">
                                <label class="form-label">End Date</label>
                                <input class="form-control form-input bg-white" placeholder="End Date" id="end_date"
                                    autocomplete="off" readonly />
                                <div></div>
                            </div>
                            <button onclick="resetfilters()" class="btn btn-info mt-2 d-none reset_dates">
                                Reset Dates
                                <span class="ps-1" style="color: red;"> x</span>
                            </button>
                        </div>
                    </div>


                    <div class="table dataTable text-nowrap dtbl_dropdown">
                        <table class="table" id="services">
                            <thead>
                                <tr>
                                    <th class="d-none">#</th>
                                    <th class="ps-1">Date</th>
                                    <th class="ps-1">Status</th>
                                </tr>
                            </thead>
                            <tbody class="table-border-bottom-0">
                                <tr>
                                    <td class="d-none"></td>
                                    <td><span>{{ 'No record found' }}</span></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="col-md-6 col-lg-4 mb-3 d-none" id="additional_info">
                    <div class="card h-70">
                        <!-- Profile Image -->
                        <div class="text-center mt-3 userProfile_img">
                            <img src="" alt="student_image" id="student_image" class="rounded-circle" width="150"
                                height="150" />
                        </div>

                        <div class="card-body">
                            <h5 class="mb-3 bg-secondary text-white rounded p-2">Student Details</h5>
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td class="fs-6 bg-light" id="student_name">Student Name</td>
                                    </tr>
                                    <tr>
                                        <td class="fs-6 bg-light" id="student_gender">Student Gender</td>
                                    </tr>
                                    <tr>
                                        <td class="fs-6 bg-light" id="student_dob">Student Date Of Birth</td>
                                    </tr>
                                    <tr>
                                        <td class="fs-6 bg-light" id="student_address">Student Address</td>
                                    </tr>
                                    <tr>
                                        <td class="fs-6 bg-light" id="student_emergency_contact">Student Emergency Contact
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <h5 class="mb-3 mt-3 bg-secondary text-white rounded p-2">Parent Details</h5>
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td class="fs-6 bg-light" id="parent_name">Parent Name</td>
                                    </tr>
                                    <tr>
                                        <td class="fs-6 bg-light" id="parent_email">Email</td>
                                    </tr>
                                    <tr>
                                        <td class="fs-6 bg-light" id="parent_phone_number">Phone Number</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->


        <div class="content-backdrop fade"></div>
    </div>
    <!-- Content wrapper -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

    <script>
        var table = "";
        $(document).ready(() => {
            table = $('#services').DataTable({
                pageLength: 50,
            });
        });

        let student_id = "",
            month = $(".select_month").val();
        const start_date = document.getElementById('start_date');
        const end_date = document.getElementById('end_date');
        var send_month = true;
        var send_date = false;
        jQuery.noConflict();
        jQuery(document).ready(function($) {
            $('.select_student').select2({
                placeholder: 'Select Student',
            }).on('change', function() {
                $(".select_month").prop("disabled", false);
                student_id = $(this).val();
                month = $(".select_month").val();
                if (student_id != "" && month != "") {
                    $(".show_date_filters").removeClass('d-none');
                    getParticularStudentAttendance();
                }
            });

            let maxi = new Date(),
                mini = new Date();
            if (maxi.getMonth() >= 3) {
                mini.setMonth(3);
                mini.setDate(1);
                maxi.setFullYear(mini.getFullYear() + 1);
                maxi.setMonth(2);
                maxi.setDate(31);
            } else {
                mini.setMonth(6);
                mini.setDate(1);
                mini.setFullYear(maxi.getFullYear() - 1);
                maxi.setMonth(2);
                maxi.setDate(31);
            }

            $("#start_date").datepicker({
                dateFormat: "dd-mm-yy",
                defaultDate: new Date(),
                minDate: mini,
                maxDate: maxi,
                changeMonth: true,
                changeYear: true,
            }).on('click', function() {
                $(this).datepicker('show');
            }).on('change', function() {
                $(".select_month").prop('disabled', true);
                $(".reset_dates").removeClass('d-none');
                student_id = $('.select_student').val();
                s1 = $('#end_date').val();
                send_date = true;
                send_month = false;
                if (student_id != "" && s1 != "") getParticularStudentAttendance();
            });

            $("#end_date").datepicker({
                dateFormat: "dd-mm-yy",
                defaultDate: new Date(),
                minDate: mini,
                maxDate: maxi,
                changeMonth: true,
                changeYear: true,
            }).on('click', function() {
                $(this).datepicker('show');
            }).on('change', function() {
                $(".select_month").prop('disabled', true);
                $(".reset_dates").removeClass('d-none');
                student_id = $('.select_student').val();
                s1 = $('#start_date').val();
                send_date = true;
                send_month = false;
                if (student_id != "" && s1 != "") getParticularStudentAttendance();
            });
        });

        $(document).ready(function() {

            $(".select_month").on('change', function() {
                if (($(this).val()).length == 1) {
                    month = 0 + $(this).val();
                } else {
                    month = $(this).val();
                }
                send_date = false;
                send_month = true;
                if (student_id != "" && month != "") getParticularStudentAttendance();
            });
        });

        function resetfilters() {
            start_date.value = '';
            end_date.value = '';
            send_date =false;
            send_month =true;
            $(".reset_dates").addClass('d-none');
            $(".select_month").prop('disabled', false);
            $('.text-danger').remove();
            $('input').removeClass('is-invalid');
            $('select').removeClass('is-invalid');
            if (student_id && month != "") {
                getParticularStudentAttendance();
            }
        }

        const getAge = birthDate => Math.floor((new Date() - new Date(birthDate).getTime()) / 3.15576e+10);

        function convertDateFormat(dateString) {
            const parts = dateString.split('-');
            return `${parts[2]}-${parts[1]}-${parts[0]}`;
        }

        function getParticularStudentAttendance() {
            $(".select_student").prop("disabled", true);
            $(".select_month").prop("disabled", true);
            $('.text-danger').remove();
            $('input').removeClass('is-invalid');
            $('select').removeClass('is-invalid');

            const optionsYear = {
                year: 'numeric'
            };
            const optionsMonth = {
                month: '2-digit'
            }; // or 'numeric'

            let currentYear = new Date().toLocaleDateString('en-US', optionsYear);
            const currentMonth = new Date().toLocaleDateString('en-US', optionsMonth);

            if (currentMonth <= 3 && month > 3) {
                currentYear = parseInt(currentYear) - 1;
            } else if (currentMonth > 3 && month <= 3) {
                currentYear = parseInt(currentYear) + 1;
            }

            let formData = new FormData();
            formData.append("student_id", student_id);
            if (send_month) {
                formData.append("month", month);
                formData.append("year", currentYear);
            }
            if (send_date) {
                formData.append("start_date", start_date.value);
                formData.append("end_date", end_date.value);
            }

            $.ajax({
                url: "/getParticularStudentAttendance",
                type: 'POST',
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(resp) {
                    const status = resp["status"];
                    table.order([]).clear().draw();
                    if (status == 200) {
                        let i = 1;
                        $.each(resp["data"], function(date, status) {
                            var rowHtml = '<tr>' +
                                '<td class="d-none">1</td>' +
                                '<td class="ps-1">' + convertDateFormat(date) + '</td>' +
                                '<td class="ps-1">' + status + '</td>' +
                                '</tr>';
                            table.row.add($(rowHtml));
                        });

                        const student_details = resp["student_details"];
                        const date = new Date(student_details["dob"]);

                        const dob = new Intl.DateTimeFormat('en-GB', {
                            year: "numeric",
                            month: "short",
                            day: "2-digit"
                        }).format(date).split(" ").join("-");

                        $("#student_name").text(student_details["first_name"] + " " + student_details[
                            "last_name"]);
                        $("#student_gender").text(student_details["gender"]);
                        $("#student_dob").text(getAge(student_details["dob"]) + " y/o ( " + dob + " )");
                        $("#student_address").text(student_details["address"]);
                        $("#student_emergency_contact").text(student_details["emergency_contact"] +
                            " ( Emergency Contact No. )");
                        $("#student_image").attr("src", student_details["profile_photo_url"]);

                        const parent_details = resp["parent_details"];

                        $("#parent_name").text(parent_details["first_name"] + " " + student_details[
                            "last_name"]);
                        $("#parent_email").text(parent_details["email"]);
                        $("#parent_phone_number").text(parent_details["phone"]);

                        $("#additional_info").removeClass("d-none");
                        $("#main_target_div").addClass("justify-content-between");
                    } else {
                        $.each(resp.errors, function(field_name, error) {
                            if (field_name == "student_id") {
                                $(`.select_student`).addClass('is-invalid');
                                $(`.select_student`).siblings('div').after(
                                    '<span class="text-strong text-danger">' + error[0] + '</span>');
                            } else if (!$(`#${field_name}`).closest('div').next().hasClass(
                                    'text-danger')) {
                                $(`#${field_name}`).addClass('is-invalid');
                                $(`#${field_name}`).siblings('div').after(
                                    '<span class="text-strong text-danger">' + error[0] + '</span>');
                            }
                        });

                        $("#additional_info").addClass("d-none");
                        $("#main_target_div").removeClass("justify-content-between");
                    }

                    $(".select_student").prop("disabled", false);

                    if (start_date.value == '' && end_date.value == '') {
                        $(".select_month").prop("disabled", false);
                    } else {
                        $(".select_month").prop("disabled", true);
                    }
                    table.draw();
                },
                error: function(resp) {
                    $(".select_student").prop("disabled", false);
                    $(".select_month").prop("disabled", false);
                }
            });
        }
    </script>
@endsection