@extends('layouts.master')

@section('main_content')
<div class="container">
    <div class="row mb-4">
        <div class="col-12 text-center">
            <h2 class="text-primary">Employee Attendance Report</h2>
        </div>
    </div>

    <div class="row">
        <!-- Employee Information on the Left Side -->
        <div class="col-md-6">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">Employee Details</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><strong>User Name:</strong> {{ $employee->user->username ?? 'N/A' }}</li>
                            <li><strong>Department:</strong> {{ $employee->information->department->department_name ?? 'N/A' }}</li>
                            <li><strong>Designation:</strong> {{ $employee->information->designation->designation_name ?? 'N/A' }}</li>

                    </ul>
                </div>
            </div>
        </div>

        <!-- Attendance Summary on the Right Side -->
        <div class="col-md-6">
            <div class="row">
                <!-- Yearly Attendance -->
                <div class="col-md-6 mb-3">
                    <div class="card border-primary mb-3">
                        <div class="card-header bg-primary text-white">
                            <h5>Yearly Attendance</h5>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled">
                                <li><strong>Total Working Days:</strong> {{ $employeeSummaries[$employee->user_id]['yearly']['total_working_days'] ?? 'N/A' }}</li>
                                <li><strong>Present:</strong> {{ $employeeSummaries[$employee->user_id]['yearly']['total_present'] ?? 'N/A' }}</li>
                                <li><strong>Absent:</strong> {{ $employeeSummaries[$employee->user_id]['yearly']['total_absent'] ?? 'N/A' }}</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Monthly Attendance -->
                <div class="col-md-6 mb-3">
                    <div class="card border-secondary mb-3">
                        <div class="card-header bg-secondary text-white">
                            <h5>Monthly Attendance</h5>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled">
                                <li><strong>Total Working Days:</strong> {{ $employeeSummaries[$employee->user_id]['monthly']['total_working_days'] ?? 'N/A' }}</li>
                                <li><strong>Present:</strong> {{ $employeeSummaries[$employee->user_id]['monthly']['total_present'] ?? 'N/A' }}</li>
                                <li><strong>Absent:</strong> {{ $employeeSummaries[$employee->user_id]['monthly']['total_absent'] ?? 'N/A' }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Form for Month/Year -->
     <!-- Filter and Attendance Table -->
     <form id="attendanceEmployee" class="form-inline">
        <div class="form-group mb-2">
            <label for="month-years" class="mr-2">Month - Year:</label>
            <input type="month" class="form-control" id="month-years" name="month_years">
        </div>
        <input type="hidden" id="user_id" name="user_id" value="{{ $employee->user->id ?? '' }}"> <!-- Hidden field for user ID -->
        <button type="submit" class="btn btn-primary mb-2 ml-2">Search</button>
    </form>

    <!-- Attendance Table -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Attendance Date</th>
                        <th>In Time</th>
                        <th>Out Time</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Data will be populated dynamically -->
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
    $('#attendanceEmployee').on('submit', function(e) {
     e.preventDefault();
     var monthYear = $('#month-years').val();
     var userId = $('#user_id').val();

     fetch(`{{ route('hrm.attendance.filter.employee') }}?month_years=${monthYear}&user_id=${userId}`)
         .then(response => response.json())
         .then(data => {
             var tbody = $('tbody');
             tbody.empty();

             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.append(row);
                 });
             } else {
                 tbody.append('<tr><td colspan="5" class="text-center">No records found for the selected month and year.</td></tr>');
             }
         })
         .catch(error => {
             console.error('Error:', error);
             $('tbody').empty().append('<tr><td colspan="5" class="text-center text-danger">An error occurred while fetching data.</td></tr>');
         });
 });

 </script>








<script>


    // Open edit form
    $(document).on('click', '.edit', function(e) {
        e.preventDefault();
        $.ajax({
            method: 'GET',
            url: $(this).attr('href'),
            success: function(response) {
                // Dynamically load response data into the modal
                $("#editModal .modal-body").html(response);
                editSubmit(); // Reinitialize editSubmit for new content
            },
            error: function(response) {
                $("#editModal .modal-body").html('Something went wrong, Please try again later.');
            }
        });
    });

    // Submit edit form
    function editSubmit() {
        $('#editSubmit').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                method: 'POST',
                url: $(this).attr('action'),
                data: $(this).serialize(),
                success: function(response) {
                    if (response.success) {
                        $('#editModal').modal('hide');
                        loadData(); // Reload data after successful edit
                    } else {
                        // Handle unsuccessful response if needed
                    }
                },
                error: function(response) {
                    console.log(response);
                }
            });
        });
    }

    // Update functionality
    var updateUrl = '';
    $(document).on('click', '.update', function(e) {
        e.preventDefault();
        updateUrl = $(this).attr('href');
        $('#confirm-update').data('update-url', updateUrl); // Store the update URL for confirmation
    });

    // Confirm update modal
    $(document).on('click', '#confirm-update', function() {
        updateUrl = $(this).data('update-url'); // Retrieve update URL from the confirmation button
        $.ajax({
            method: 'PUT',
            url: updateUrl,
            success: function(response) {
                $('#updateModal').modal('hide');
                loadData(); // Reload data after successful update
            },
            error: function(response) {
                console.log(response);
            }
        });
    });




    function loadData() {
    $.ajax({
        method: 'GET',
        url: "{{ route('user_attendances.index') }}",
        success: function(response) {

            $('#attendanceEmployee tbody').html(response.employeeData);
        },
        error: function(response) {
            console.log('Error:', response);
            alert('Failed to load data. Please try again.');
        }
    });
}

// Initial load
loadData();

    </script>
@endpush

<style>
    .table th, .table td {
        text-align: center;
        vertical-align: middle;
    }

    .card {
        transition: transform 0.2s ease-in-out;
    }

    .card:hover {
        transform: scale(1.02);
    }

    .form-inline .form-group {
        display: flex;
        align-items: center;
    }

    .form-inline .form-group label {
        margin-right: 10px;
    }

    .form-inline button {
        margin-left: 10px;
    }

    .card-header h5 {
        margin-bottom: 0;
    }
</style>