@extends('layouts.teacher')

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

    input[type="checkbox"].attendence_checkbox {
        width: 15px;
        height: 15px;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: whitesmoke;
        border: 2px solid #949494;
        border-radius: 4px;
        outline: none;
        transition: background-color 0.3s ease;
    }

    input[type="checkbox"]:checked.attendence_checkbox {
        background-color: #696cff;
        border-color: #696cff;
    }

    input[type="checkbox"].attendence_checkbox:checked::before {
        content: '\2714';
        display: block;
        color: white;
        font-size: 10px;
        text-align: center;
        line-height: 12px;
    }

    input[type="checkbox"].stud_OnLeave {
        background-color: red !important;
        border-color: red !important;
    }
</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 -->

        {{-- <input type="hidden" id="present_student_list"/> --}}
        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Mark Attendance</span></h4>

            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-4">
                        <!-- Account -->

                        <div class="card">
                            <h5 class="card-header">Students List</h5>
                            <div class="table dataTable text-nowrap dtbl_dropdown">
                                <table class="table" id="services">
                                    <thead>
                                        <tr>
                                            <th class="d-none">#</th>
                                            <th class="text-center">User</th>
                                            <th class="ps-1">First Name</th>
                                            <th class="ps-1">Last Name</th>
                                            <th class="ps-1">Email</th>
                                            <th class="ps-1">Phone</th>
                                            <th class="ps-1">Status</th>
                                            <th class="text-center">Attendance</th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-border-bottom-0">
                                        @if (isset($users) && count($users) != 0)
                                            @foreach ($users as $key => $user)
                                                <!-- {{ $pic = $user->profile_photo_path }} -->
                                                <tr id="row_{{ $user->id }}">
                                                    <td class="d-none">{{ $key + 1 }}</td>
                                                    @if (isset($user->profile_photo_path))
                                                        <td class="text-center">
                                                            <img src="{{ $user->profile_photo_path }}" alt="user"
                                                                width="50" height="50" class="rounded-circle" />
                                                        </td>
                                                    @else
                                                        <td class="text-center">
                                                            <img src="{{ URL::asset('assets/images/users/avatar.jpg') }}"
                                                                alt="user" width="50" height="50"
                                                                class="rounded-circle" />
                                                        </td>
                                                    @endif
                                                    <td class="ps-1 name_{{ $user->id }}">
                                                        {{ ucwords($user->first_name) }}</td>
                                                    <td class="ps-1 name_{{ $user->id }}">
                                                        {{ ucwords($user->last_name) }}</td>
                                                    <td class="ps-1 email_{{ $user->id }}">
                                                        @if ($user->parent_id !== null && $user->parent->email !== null)
                                                            {{ ucwords($user->parent->email) }}
                                                        @else
                                                            {{ ucwords($user->email) }}
                                                        @endif
                                                    </td>

                                                    <td class="ps-1 phone_{{ $user->id }}">
                                                        @if ($user->parent_id !== null)
                                                            {{ $user->parent->phone }}
                                                        @else
                                                            {{ $user->phone }}
                                                        @endif
                                                    </td>
                                                    <td class="ps-1 email_{{ $user->id }}">
                                                        @if ($user->status == 'active')
                                                            <span class="text-success">Active</span>
                                                        @else
                                                            <span class="text-danger">In-Active</span>
                                                        @endif
                                                    </td>
                                                    <td class="text-center">
                                                        @if ($user->status == 'active')
                                                            @if (isset($leaves) && count($leaves) > 0 && in_array($user->id, $leaves))
                                                                <input type="checkbox" value="{{ $user->id }}"
                                                                    class="attendence_checkbox stud_OnLeave"
                                                                    style="cursor: pointer;"
                                                                    {{ isset($present_students) && in_array($user->id, $present_students) ? 'checked' : '' }} />
                                                            @else
                                                                <input type="checkbox" value="{{ $user->id }}"
                                                                    class="attendence_checkbox {{ (isset($present_students) && in_array($user->id, $present_students)) || count($present_students) == 0 ? 'attendence_checkbox_1' : '' }} "
                                                                    style="cursor: pointer;"
                                                                    {{ isset($present_students) && in_array($user->id, $present_students) ? 'checked' : '' }} />
                                                                <br />
                                                            @endif
                                                        @else
                                                            <span>N.A.</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td><span>{{ 'No record found' }}</span></td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                            <div class="d-flex justify-content-between align-items-center m-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="selectAllStudents">
                                    <label class="form-check-label" for="selectAllStudents">
                                        Select All Students
                                    </label>
                                </div>
                                <div class="text-end">
                                    <button href="javascript:void(0);"
                                        class="btn btn-primary text-white submitStudentAttendance">Submit
                                        Attendance</button>
                                </div>
                            </div>
                        </div>
                        <!-- /Account -->
                    </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>
        $(document).ready(function() {
            // Initialize DataTable
            var table = $('#services').DataTable({
                pageLength: 50, 
            });

            // Store the state of checkboxes
            var checkboxState = {};

            // Handle 'Select All Students' checkbox change
            $('#selectAllStudents').on('change', function() {
                var isChecked = $(this).is(':checked');
                // Update state for all rows in DataTable
                let arr = [];
                table.rows().every(function() {
                    var rowId = this.index();
                    checkboxState[rowId] = isChecked;
                    $(this.node()).find('.attendence_checkbox').prop('checked', isChecked);
                    arr.push($(this.node()).find('.attendence_checkbox').val());
                });

                if (isChecked === true) selectAllStudents(arr);
                else removeAllStudents();
            });

            // When page changes, apply the saved checkbox state
            table.on('draw', function() {
                table.rows().every(function() {
                    var rowId = this.index();
                    var isChecked = checkboxState[rowId] || false;
                    $(this.node()).find('.attendence_checkbox').prop('checked', isChecked);
                });
            });

            // Handle individual row checkbox changes
            $('#services tbody').on('change', '.attendence_checkbox', function() {
                console.log('dsadsa');

                var row = table.row($(this).closest('tr'));
                var rowId = row.index();
                checkboxState[rowId] = $(this).is(':checked');
                const id = $(this).val();
                if ($(this).prop('checked') === true) {
                    addStudentId(id);
                } else {
                    removeStudentId(id);
                    $("#selectAllStudents").prop("checked", false);
                }

                if ("{{ count($users) }}" == studentIdArray().length) {
                    $("#selectAllStudents").prop("checked", true);
                }
            });

            function callMeIntially() {
                let student_arr = [];

                let temp_arr = "{{ $present_students_str }}"
                if ("{{ isset($present_students_str) }}") {
                    student_arr = temp_arr.split(',');
                }

                function addStudentId(id) {
                    student_arr.push(id);
                }

                function removeStudentId(id) {
                    student_arr = student_arr.filter(val => val != id);
                }

                function studentIdArray() {
                    return student_arr;
                }

                function selectAllStudents(arr) {
                    student_arr = arr;
                }

                function removeAllStudents() {
                    student_arr = [];
                }

                return [addStudentId, removeStudentId, studentIdArray, selectAllStudents, removeAllStudents];

            }

            // $('.attendence_checkbox').on("click",function(e){
            //     const id=$(this).val();
            //     console.log("hell");
            //     if($(this).prop("checked")===true){
            //         addStudentId(id);
            //     console.log("hell0");

            //     }else{
            //         removeStudentId(id);
            //         $("#selectAllStudents").prop("checked",false);
            //     console.log("hell1");
            //     }
            //     console.log("hell2");
            // });

            // $(".attendence_checkbox").click(function(e){
            //     const id=$(this).val();
            //     console.log("hell");
            //     if($(this).prop("checked")===true){
            //         addStudentId(id);
            //     console.log("hell0");

            //     }else{
            //         removeStudentId(id);
            //         $("#selectAllStudents").prop("checked",false);
            //     console.log("hell1");
            //     }
            //     console.log("hell2");
            // });

            $(".submitStudentAttendance").click(function(e) {
                e.preventDefault();
                var result = confirm("Are you sure you want to submit this attendance?");
                if (result === true) {
                    submitStudentAttendance()
                }
            });

            function submitStudentAttendance() {

                $(".submitStudentAttendance").prop("disabled", true);
                let formData = new FormData();
                formData.append('student_arr', studentIdArray());
                $.ajax({
                    url: '/submitStudentAttendance',
                    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"];

                        if (status === 200) {
                            console.log("Attendance marked successfully.");
                            const exp = resp["exception"];

                            if (exp === "record not found") {

                            }
                            $(".submitStudentAttendance").prop("disabled", false);
                            window.location.href =
                                "{{ url('/todayStudentAttendanceMarked?educator_id=' . Auth::user()->id) }}";
                        } else if (status === 400) {
                            console.log("Bad request.");
                        } else if (status === 401) {
                            console.log("Unauthorized access.");
                        } else if (status === 404) {
                            console.log("Unauthorized access.");
                        }
                        $(".submitStudentAttendance").prop("disabled", false);
                    },
                    error: function(resp) {
                        $(".submitStudentAttendance").prop("disabled", false);
                    }
                });
            }

            const [addStudentId, removeStudentId, studentIdArray, selectAllStudents, removeAllStudents] =
            callMeIntially();
            // Check if the selectAllStudents checkbox is initially checked
            var isChecked = true;

            // Update state for all rows in DataTable
            let arr = [];
            table.rows().every(function() {
                var rowId = this.index();
                checkboxState[rowId] = isChecked;
                if ($(this.node()).find('.attendence_checkbox_1').length > 0) {
                    $(this.node()).find('.attendence_checkbox_1').prop('checked', isChecked);
                    console.log($(this.node()).find('.attendence_checkbox_1'));
                    arr.push($(this.node()).find('.attendence_checkbox_1').val());
                }
            });

            // Call appropriate function based on initial checkbox state
            if (isChecked === true) {
                selectAllStudents(arr);
            } else {
                removeAllStudents();
            }

        });
    </script>
@endsection