@extends('layouts.master')

@section('title', __('Attendance Report'))
@section('content_title', __('Attendance Report'))
@section('content_summary', 'Attendance Report')


@section('main_content')
    <div class="main-card mb-3">
        <div class="card mb-3">
            <div class="card-body">
                <form action="{{ route('hrm.report.user_attendance_report.monthly') }}" id="searchUserAttendanceReport"
                    method="post">
                    <div class="row">
                        <div class="col-12 col-md-4 mb-3">
                            <label for="student_user_id" class="form-label">Select Student</label>
                            <select class="form-select form-select-sm" name="student_user_id" required id="student_user_id">
                                @foreach ($student_list as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-4 mb-3">
                            <label for="employee_user_id" class="form-label">Select employee</label>
                            <select class="form-select form-select-sm" name="teacher_user_id" required id="teacher_user_id">
                                @foreach ($teacher_list as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-4 mb-3">
                            <label for="employee_user_id" class="form-label">Select employee</label>
                            <select class="form-select form-select-sm" name="employee_user_id" required
                                id="employee_user_id">
                                @foreach ($employee_list as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-4 mb-3">
                            <label for="month-year" class="mr-2">Month - Year:</label>
                            <input type="month" class="form-control" required id="month-year" name="month_year"
                                value="{{ date('Y-m') }}">
                        </div>

                    </div>
                </form>

            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="card-title">User Information</div>
            </div>
        </div>
        <div class="card mb-3">
            <div class="card-body">
                <table class="table table-hover table-striped table-bordered" id="attendanceTable">
                    <thead class="thead-dark">
                        <tr>
                            <th>Attendance Date</th>
                            <th>In Time</th>
                            <th>Out Time</th>
                            <th>Status</th>
                            @if (!isset($action_hide))
                                <th>Action</th>
                            @endif
                        </tr>
                    </thead>

                    <tbody id="attendanceTableData">
                        <!-- Table rows will be populated here dynamically -->
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection


@push('script')
    <script>
        $(document).ready(function() {
            $($('.modal-triger').attr('data-bs-target')).find(".modal-dialog").html('');

            // modal open close
            $(document).on("click", ".modal-triger", function(e) {
                e.preventDefault(); // Prevent default anchor behavior

                let modal_selector = $(this).attr("data-bs-target");
                let modal = $(modal_selector);
                modal.modal('hide');
                // Load new content dynamically
                $.ajax({
                    method: 'GET',
                    url: $(this).attr('href'),
                    beforeSend: function() {
                        // Show a loading indicator inside the modal (optional)
                        modal.find(".modal-dialog").html(
                            '<div class="text-center p-4">Loading...</div>');
                    },
                    success: function(response) {
                        // Replace modal content
                        modal.html(response);

                        // Open the modal AFTER content is fully loaded
                    },
                    error: function() {
                        modal.find(".modal-dialog").html(
                            '<div class="modal-content"><div class="modal-header"></div><div class="modal-body"><div class="text-center p-4">Something went wrong. Please try again.</div></div><div><div class="modal-footer"><button class="btn btn-default" data-bs-dismiss="modal">{{ __('core.close') }}</button></div>'
                        );

                    }
                });
                modal.modal('show');
            });

            $(document).on('submit', 'form#edit_form', function(e) {
                e.preventDefault();
                var form = this;
                var formData = new FormData(form);

                // Disable submit button to prevent double submission
                // $(form).find('button[type="submit"]').attr('disabled', true);

                $.ajax({
                    method: $(form).attr('method'),
                    url: $(form).attr('action'),
                    data: formData,
                    contentType: false, // Needed for file upload
                    processData: false, // Needed for file upload
                    dataType: "json",
                    success: function(result) {
                        if (result.success == true) {
                            $("#edit_form").parent().closest('.modal').modal("hide");
                            toastr.success(result.msg);
                            $("#searchUserAttendanceReport").submit()
                        } else {
                            toastr.error(result.msg);
                        }
                    },
                    error: function(response) {
                        // Clear previous error messages
                        $("#edit_form").find('.text-danger').remove();

                        if (response.status === 422) {
                            // Validation errors
                            var errors = response.responseJSON.errors;
                            for (var field in errors) {
                                // Find the input field and add the error message
                                let key = field;
                                let parts = key.split('.');
                                let input_name = parts[0]; // "input field name value"
                                let index = parts[1];
                                if (index) {
                                    var $input = $('[name="' + input_name + '[]"]')[index];
                                    let span = document.createElement("span");
                                    span.classList.add("text-danger");
                                    span.innerText = errors[field][0];
                                    $input.parentElement.appendChild(span);
                                } else {
                                    var $input = $('[name="' + field + '"]');
                                    let span = document.createElement("span");
                                    span.classList.add("text-danger");
                                    span.innerText = errors[field][0];
                                    $input[0].parentElement.appendChild(span);
                                }
                                toastr.error(errors[field][0]);

                            }
                        } else {
                            toastr.error('An unexpected error occurred.');
                        }

                        // Re-enable submit button
                    }
                });
            });



            $("#student_user_id").on("change", function() {
                if ($(this).val()) {
                    $("#employee_user_id, #teacher_user_id").val("").attr("disabled", true).removeAttr(
                        "required");
                    $(this).attr("required", true).removeAttr("disabled");
                } else {
                    $("#employee_user_id, #teacher_user_id").removeAttr("disabled");
                    $(this).removeAttr("required");
                }
                $("#searchUserAttendanceReport").submit()
            });

            $("#employee_user_id").on("change", function() {
                if ($(this).val()) {
                    $("#student_user_id, #teacher_user_id").val("").attr("disabled", true).removeAttr(
                        "required");
                    $(this).attr("required", true).removeAttr("disabled");
                } else {
                    $("#student_user_id, #teacher_user_id").removeAttr("disabled");
                    $(this).removeAttr("required");
                }
                $("#searchUserAttendanceReport").submit()

            });

            $("#month-year").on("change", function() {
                $("#searchUserAttendanceReport").submit()
            })

            $("#teacher_user_id").on("change", function() {
                if ($(this).val()) {
                    $("#student_user_id, #employee_user_id").val("").attr("disabled", true).removeAttr(
                        "required");
                    $(this).attr("required", true).removeAttr("disabled");
                } else {
                    $("#student_user_id, #employee_user_id").removeAttr("disabled");
                    $(this).removeAttr("required");
                }
                $("#searchUserAttendanceReport").submit()
            });



            $(document).on("submit", "#searchUserAttendanceReport", function(e) {

                e.preventDefault();
                console.log("this is working");

                let method = $(this).attr("method");
                let url = $(this).attr("action");
                let data = $(this).serialize();
                formdata = data;
                loadData(method, url, data);

            })

            const urlParams = new URLSearchParams(window.location.search);

            // Get the values from the URL
            const studentUserId = urlParams.get("student_user_id");
            const teacherUserId = urlParams.get("teacher_user_id");

            let data = null;

            if (studentUserId) {
                data = {
                    "student_user_id": studentUserId
                };
            }

            if (teacherUserId) {
                data = {
                    "teacher_user_id": teacherUserId
                };
            }

            // Ensure data is not null before making the request
            if (data) {
                loadData("post", "{{ route('hrm.report.user_attendance_report.monthly') }}", data);
            }


            function loadData(method, url, data) {
                $.ajax({
                    method: method,
                    url: url,
                    data: data,
                    success: function(data) {
                        console.log(data.report);
                        $("#attendanceTableData").empty();
                        $("#attendanceTableData").html(data.report);

                        // var tbody = document.querySelector('#attendanceTable tbody');
                        // tbody.innerHTML = ''; // Clear previous data

                        //     if (data.attendances.length > 0) {
                        //         data.attendances.forEach(attendance => {
                        //             var row = `
                    //     <tr>
                    //         <td>${attendance.attendance_date ? new Date(attendance.attendance_date).toLocaleDateString() : 'N/A'}</td>
                    //         <td>${attendance.intime ? new Date('1970-01-01T' + attendance.intime).toLocaleTimeString() : 'N/A'}</td>
                    //         <td>${attendance.outime ? new Date('1970-01-01T' + attendance.outime).toLocaleTimeString() : 'N/A'}</td>
                    //         <td>${attendance.attendance_status == 1 ? 'Pending' : attendance.attendance_status == 2 ? 'Approved' : attendance.attendance_status == 3 ? 'Cancelled' : 'N/A'}</td>
                    //         <td>
                    //             <a href="/user_attendances/${attendance.id}/edit" class="edit" data-bs-toggle="modal" data-bs-target="#editModal">
                    //                 <i class="fa fa-lg fa-edit text-primary"></i>
                    //             </a>
                    //             <a href="{{ route('user_attendances.index') }}" class="btn btn-warning btn-sm">
                    //             <i class="fa fa-arrow-left fa-sm"></i>
                    //             </a>
                    //         </td>
                    //     </tr>
                    // `;
                        //             tbody.innerHTML += row;
                        //         });
                        //     } else {
                        //         tbody.innerHTML =
                        //             '<tr><td colspan="5" class="text-center">No records found for the selected month and year.</td></tr>';
                        //     }
                    },
                    error: function(error) {
                        console.log(error);

                    }
                })
            }
        })
    </script>
@endpush