@extends('layouts.sidebar')
@section('title', 'Attendance')
@section('content')


    <div><a href="{{ route('attendance.index') }}">
            < Back</a>
    </div>
    <div class="mx-auto mt-20 cotainer max-w-screen-2xl">
        <div class="py-2 text-xl font-bold text-center border-2 border-b-4 border-black">
            EMPLOYEE ATTENDANCE LOG
        </div>
        <div class="flex items-center gap-10 mx-10 mt-5">
            <div class="flex flex-col items-center gap-3 md:flex-row">
                <div class="px-2 w-[4.5rem] text-white bg-black rounded-md">ID No:</div>
                <div>{{ $dtr->dtr_id }}</div>
            </div>
            <div class="flex flex-col items-center gap-3 md:flex-row">
                <div class="px-2 w-[4.5rem] text-white bg-black rounded-md">Dept:</div>
                <div>{{ $department->department_name }}</div>
            </div>
        </div>
        <div class="flex flex-col items-center gap-3 mx-10 mt-5 md:flex-row">
            <div class="px-2 w-[4.5rem] text-white bg-black rounded-md">Name:</div>
            <div>{{ $employee->last_name }}</div>
        </div>
        <div class="mt-5">
            <div class="flex items-center justify-end mb-5 mr-3">
                <form id="approveAttendanceForm">
                    @csrf


                    <input type="hidden" id="employee_id" name="employee_id" value="{{ $employee->id }}" required>

                    <input type="hidden" id="department_id" name="department_id" value="{{ $department->id }}" required>

                    <button type="submit" class="w-[10rem] rounded-md py-2 bg-blue-600 text-white">Approve All</button>
                </form>
                <script>
                    document.getElementById("approveAttendanceForm").addEventListener("submit", function(event) {
                        event.preventDefault();

                        let employeeId = document.getElementById("employee_id").value;
                        let departmentId = document.getElementById("department_id").value;

                        axios.post("{{ route('attendance.approve') }}", {
                                employee_id: employeeId,
                                department_id: departmentId,
                                _token: "{{ csrf_token() }}"
                            })
                            .then(response => {
                                $('#agencyTable').DataTable().ajax.reload(null, false);
                            })
                            .catch(error => {
                                alert(error.response?.data?.message || "An error occurred.");
                            });
                    });
                </script>
            </div>
            <table id="agencyTable" class="min-w-full bg-white border border-gray-200 rounded shadow-md ">
                <thead>
                    <tr class="text-sm leading-normal text-white  bg-[#1d1d1d]">

                        <th>Date</th>
                        <th>Time In</th>
                        <th>Break Out</th>
                        <th>Break In</th>
                        <th>Time Out</th>
                        <th>Hours</th>

                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="text-sm font-light text-center text-gray-600">
                    <!-- DataTables will populate this body -->
                </tbody>
                <tfoot>
                    <tr class="text-sm font-medium text-gray-800 bg-gray-100">
                        <td colspan="5" class="font-bold text-right">Total Hours Worked:</td>
                        <td class="text-center" id="totalHoursWorked">0</td>
                        <td colspan="1" class="font-bold text-right"></td>

                    </tr>
                </tfoot>
            </table>
        </div>

    </div>
    <script>
        $(document).ready(function() {
            var employeeId = "{{ $employee->id ?? '' }}";
            var departmentId = "{{ $department->id ?? '' }}";

            if (!employeeId || !departmentId) {
                console.error("Missing employee_id or department_id");
                return;
            }

            var table = $('#agencyTable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 20,
                ajax: "{{ route('summaryattendance', ['employee_id' => '__EMPLOYEE_ID__', 'department_id' => '__DEPARTMENT_ID__']) }}"
                    .replace('__EMPLOYEE_ID__', employeeId)
                    .replace('__DEPARTMENT_ID__', departmentId),
                columns: [{
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'time_in',
                        name: 'time_in',
                        render: function(data, type, row) {
                            let value = data ? data : '';
                            return `<input type="time" class="editable-input time-in" data-id="${row.id}" value="${value}">`;
                        }
                    },
                    {
                        data: 'break_out',
                        name: 'break_out',
                        render: function(data, type, row) {
                            let value = data ? data : '';
                            return `<input type="time" class="editable-input break-out" data-id="${row.id}" value="${value}">`;
                        }
                    },
                    {
                        data: 'break_in',
                        name: 'break_in',
                        render: function(data, type, row) {
                            let value = data ? data : '';
                            return `<input type="time" class="editable-input break-in" data-id="${row.id}" value="${value}">`;
                        }
                    },
                    {
                        data: 'time_out',
                        name: 'time_out',
                        render: function(data, type, row) {
                            let value = data ? data : '';
                            return `<input type="time" class="editable-input time-out" data-id="${row.id}" value="${value}">`;
                        }
                    },

                    {
                        data: 'hours_worked',
                        name: 'hours_worked'
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                footerCallback: function(row, data, start, end, display) {
                    var api = this.api();
                    var totalMinutes = api
                        .column(5, {
                            page: 'current'
                        }) // Target the "Hours Worked" column (index 3)
                        .data()
                        .reduce(function(acc, val) {
                            // Extract hours and minutes from the string
                            var match = val.match(/(\d+)\s*hrs\s*(\d*)\s*mins?/);
                            var hours = match ? parseInt(match[1]) : 0;
                            var minutes = match && match[2] ? parseInt(match[2]) : 0;

                            return acc + (hours * 60) + minutes; // Convert to total minutes
                        }, 0);

                    // Convert total minutes back to hours and minutes
                    var totalHours = Math.floor(totalMinutes / 60);
                    var remainingMinutes = totalMinutes % 60;

                    // Update the footer with the total hours and minutes
                    $('#totalHoursWorked').html(totalHours + ' hrs ' + remainingMinutes + ' mins');
                }
            });

            // Handle inline edit and save changes
            $(document).on('change', '.editable-input', function() {
                var recordId = $(this).data('id'); // Get the row ID
                var field = ''; // Variable to hold the field name
                var newValue = $(this).val(); // Get the new value

                // Determine which field is being edited based on class
                if ($(this).hasClass('time-in')) {
                    field = 'time_in';
                } else if ($(this).hasClass('time-out')) {
                    field = 'time_out';
                } else if ($(this).hasClass('break-in')) {
                    field = 'break_in';
                } else if ($(this).hasClass('break-out')) {
                    field = 'break_out';
                }

                // CSRF token setup (in case meta tag is missing)
                var csrfToken = $('meta[name="csrf-token"]').attr('content');

                // Send AJAX request to update the value
                $.ajax({
                    url: "{{ route('update.attendance') }}", // Adjust to your update route
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': csrfToken // Set CSRF token in request header
                    },
                    data: {
                        _token: csrfToken,
                        id: recordId,
                        field: field,
                        value: newValue
                    },
                    success: function(response) {
                        console.log("✅ Success:", response.message);
                        table.ajax.reload(null, false); // Reload the table data
                    },
                    error: function(xhr) {
                        console.error("❌ Error updating record:", xhr.responseText);
                    }
                });
            });

        });
    </script>

    <div id="approveModal" class="fixed inset-0 z-50 flex items-start justify-center hidden bg-black bg-opacity-50">
        <div class="p-6 mt-20 bg-white rounded-lg shadow-lg">
            <h2 class="mb-4 text-lg font-bold">Approve DTR</h2>
            <p>Are you sure you want to approve this DTR?</p>
            <div class="flex justify-end gap-4 mt-4">
                <button onclick="closeApproveModal('approveModal')"
                    class="px-4 py-2 text-white bg-gray-500 rounded-md">Cancel</button>
                <button id="confirmApproveBtn" class="px-4 py-2 text-white bg-green-600 rounded-md">Approve</button>
            </div>
        </div>
    </div>
    <script>
        let selectedAttendanceId = null;

        // Open modal and store attendanceId
        function openApproveModal(attendanceId) {
            selectedAttendanceId = attendanceId;
            document.getElementById('approveModal').classList.remove('hidden');
        }

        // Close modal
        function closeApproveModal(id) {
            document.getElementById(id).classList.add('hidden');
            selectedAttendanceId = null;
        }

        // Approve function with axios
        function approveDTR() {
            if (!selectedAttendanceId) return;

            axios.post("{{ route('attendance.approve') }}", {
                    id: selectedAttendanceId,
                    _token: "{{ csrf_token() }}"
                })
                .then(response => {

                    document.getElementById('approveModal').classList.add('hidden');
                    $('#agencyTable').DataTable().ajax.reload(null, false);
                    $('#successapprove').removeClass('hidden'); // Show success modal
                })
                .catch(error => {
                    alert(error.response?.data?.message || "An error occurred.");
                });
        }

        // Attach approveDTR function to confirm button
        document.getElementById('confirmApproveBtn').addEventListener('click', approveDTR);
    </script>

    <div id="successapprove" class="fixed inset-0 z-50 flex items-start justify-center hidden bg-black bg-opacity-50">
        <div class="p-5 mt-20 bg-white rounded-lg shadow-lg w-96">
            <h2 class="text-lg font-bold text-center">Success</h2>
            <p class="mt-2 text-center text-gray-700">successfully Approved!</p>
            <div class="mt-4 text-center">
                <button onclick="closeApproveModal('successapprove')"
                    class="px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-700">
                    OK
                </button>
            </div>
        </div>
    </div>


@endsection