@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Attendance</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" />

@include('datepicker')

<style>
    .dtbl_dropdown .dataTables_length {
        width: 65px;
    }

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

    .error_span {
        flex: 0 0 100%;
        display: block;
        margin: 4px 0 0;
    }
</style>
@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-2 ms-2"><span class="text-muted fw-light">My Attendance History</span></h4>

            <div class="row d-flex m-2" id="main_target_div">
                <div class="card pb-5 p-3 mb-3">
                    <div class="form-group mb-3">
                        <label class="form-label" for="registered_email">Your Registered Email</label>
                        <div class="input-group">
                            <span id="basic-icon-default-gender" class="input-group-text"><i class="bx bx-paste"></i></span>
                            <input class="form-input form-control bg-white" placeholder="example@mail.com"
                                id="registered_email" autocomplete="off" oninput="showhide(this)" />
                            <div></div>
                        </div>
                    </div>
                    <div id="show_hide_div" style="display: none;width:100%">
                        <select class="form-select mt-1 mb-3 select_month">
                            <option selected disabled>Select Month</option>
                            <option value="1">January</option>
                            <option value="2">February</option>
                            <option value="3">March</option>
                            <option value="4">April</option>
                            <option value="5">May</option>
                            <option value="6">June</option>
                            <option value="7">July</option>
                            <option value="8">August</option>
                            <option value="9">September</option>
                            <option value="10">October</option>
                            <option value="11">November</option>
                            <option value="12">December</option>
                        </select>

                        <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" style="width:100%">
                                <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>
            </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 = "";
        var run = false;

        function showhide(inputElement) {
            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            const emailValue = inputElement.value;
            table.order([]).clear().draw();
            $("#show_hide_div").hide();
            if (emailValue === "" || !emailPattern.test(emailValue)) {
                $("#show_hide_div").hide();
            } else {
                $("#show_hide_div").show();
            }
        }
        $(document).ready(() => {
            table = $('#services').DataTable({
                pageLength: 50,
            });
        });

        let month = $(".select_month").val();
        const start_date = document.getElementById('start_date');
        const end_date = document.getElementById('end_date');
        let today = new Date();
        jQuery.noConflict();
        jQuery(document).ready(function($) {


            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: today,
                changeMonth: true,
                changeYear: true,
            }).on('click', function() {
                $(this).datepicker('show');
            }).on('change', function() {
                if (!$('#registered_email').val()) {
                    $(this).val('');
                    alert('first enter your registered email');
                    return;
                }
                $(".select_month").prop('disabled', true);
                $(".reset_dates").removeClass('d-none');
                s1 = $('#end_date').val();

                if (s1 != "") myAttendanceHistoryWithFilter();
            });

            $("#end_date").datepicker({
                dateFormat: "dd-mm-yy",
                defaultDate: new Date(),
                minDate: mini,
                maxDate: today,
                changeMonth: true,
                changeYear: true,
            }).on('click', function() {
                $(this).datepicker('show');
            }).on('change', function() {
                if (!$('#registered_email').val()) {
                    alert('first enter your registered email');
                    return;
                }
                $(".select_month").prop('disabled', true);
                $(".reset_dates").removeClass('d-none');
                s1 = $('#start_date').val();
                if (s1 != "") myAttendanceHistoryWithFilter();
            });
        });

        $(document).ready(function() {

            $(".select_month").on('change', function() {
                if (($(this).val()).length == 1) {
                    month = 0 + $(this).val();
                } else {
                    month = $(this).val();
                }

                if (month != "") myAttendanceHistoryWithFilter();
            });
        });



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

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

        function myAttendanceHistoryWithFilter() {
            run = true;
            $(".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("month", month);
            formData.append("year", currentYear);
            formData.append("start_date", start_date.value);
            formData.append("end_date", end_date.value);
            formData.append("registered_email", $('#registered_email').val());

            $.ajax({
                url: "/myAttendanceHistoryWithFilter",
                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));
                        });
                    } else {
                        $.each(resp.errors, function(field_name, error) {
                            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_span">' + 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