@extends('layouts.master')

@section('title', __('user_portal.my_attendance'))
@section('content_title', __('user_portal.my_attendance'))

@section('main_content')

    <div class="main-card" id="main-content">
        <div class="card mb-3">
            <div class="card-body">
                <form action="{{ route('user_portal.my-attendance.index') }}" id="searchUserAttendanceReport" method="post">
                    <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                    <div class="row">
                        <div class="col-12 col-md-4 mb-3">
                            <label for="month-year" class="form-label 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 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>
                        </tr>
                    </thead>

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

    </div>
@endsection


@push('script')
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.0/jszip.min.js"></script>

    <script>
        $(document).ready(function() {

            $('#attendanceTable').DataTable({
                processing: true,
                responsive: false,
                dom: '<"row align-items-center mb-3"<"col-md-6 d-flex gap-2"lB><"col-md-6"f>>rtip',
                buttons: [{
                    extend: 'excelHtml5',
                    text: 'Export to Excel',
                    title: 'DataExport'
                }],
                lengthMenu: [10, 25, 50, 100],
                pageLength: 10
            });


            $(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);

            })



            let data = {
                "user_id": "{{ auth()->user()->id }}"
            };




            $("#month-year").on("change", function() {
                $("#searchUserAttendanceReport").submit()
            })
            // Ensure data is not null before making the request
            if (data) {
                loadData("post", "{{ route('user_portal.my-attendance.index') }}", data);
            }


            function loadData(method, url, data) {
                $.ajax({
                    method: method,
                    url: url,
                    data: data,
                    success: function(data) {
                        console.log(data.report);
                        if ($.fn.DataTable.isDataTable('#attendanceTable')) {
                            $('#attendanceTable').DataTable().destroy();
                        }
                        $("#attendanceTableData").empty();
                        $("#attendanceTableData").html(data.report);

                        // Reinitialize the DataTable
                        $('#attendanceTable').DataTable({
                            processing: true,
                            responsive: false,
                            dom: '<"row align-items-center mb-3"<"col-md-6 d-flex gap-2"lB><"col-md-6"f>>rtip',
                            buttons: [{
                                extend: 'excelHtml5',
                                text: 'Export to Excel',
                                title: 'DataExport'
                            }],
                            lengthMenu: [10, 25, 50, 100],
                            pageLength: 10
                        });

                        // 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