@extends('layouts.master')

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

    <div class="row">
        <!-- Student Information Section -->
        <div class="col-md-6">
            {{-- @foreach($students as $student) --}}
                <div class="card border-primary mb-4">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">Student Information</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled">
                            <li><strong>User Name:</strong> {{ $student->user->username ?? 'N/A' }}</li>
                            <li><strong>Academic Year:</strong> {{ $student->academicYear->academic_year ?? 'N/A' }}</li>
                            <li><strong>Academic Class:</strong> {{ $student->academicClass->academic_class ?? 'N/A' }}</li>
                            <li><strong>Section:</strong> {{ $student->section->section_name ?? 'N/A' }}</li>
                            <li><strong>Group:</strong> {{ $student->group->group_name ?? 'N/A' }}</li>
                        </ul>
                    </div>
                </div>
            {{-- @endforeach --}}
        </div>

        <!-- Attendance Summary Section -->
        <div class="col-md-6">
            {{-- @foreach($students as $student) --}}
                <div class="row mb-4">
                    <!-- Yearly Attendance -->
                    <div class="col-md-6">
                        <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>Total Working Days: {{ $studentSummaries[$student->user_id]['yearly']['total_working_days'] ?? 'N/A' }}</li>
                                    <li>Present: {{ $studentSummaries[$student->user_id]['yearly']['total_present'] ?? 'N/A' }}</li>
                                    <li>Absent: {{ $studentSummaries[$student->user_id]['yearly']['total_absent'] ?? 'N/A' }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Monthly Attendance -->
                    <div class="col-md-6">
                        <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>Total Working Days: {{ $studentSummaries[$student->user_id]['monthly']['total_working_days'] ?? 'N/A' }}</li>
                                    <li>Present: {{ $studentSummaries[$student->user_id]['monthly']['total_present'] ?? 'N/A' }}</li>
                                    <li>Absent: {{ $studentSummaries[$student->user_id]['monthly']['total_absent'] ?? 'N/A' }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            {{-- @endforeach --}}
        </div>
    </div>

    <!-- Filter Section -->
    <div class="row mb-4">
        <div class="col-md-8">
            <form class="form-inline" id="attendanceForm">
                <div class="form-group mb-2">
                    <label for="month-year" class="mr-2">Month - Year:</label>
                    <input type="month" class="form-control" id="month-year" name="month_year">
                </div>
                <button type="submit" class="btn btn-primary mb-2 ml-2">Search</button>
            </form>
        </div>
    </div>

    <!-- Attendance Table -->
    <div class="row">
        <div class="col-md-12">
            <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>
                        <th>Action</th>
                    </tr>
                </thead>

                <tbody>
                    <!-- Table rows will be populated here dynamically -->
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection

@push('script')
<script>
    document.getElementById('attendanceForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var monthYear = document.getElementById('month-year').value;
    var userId = "{{ $student->user_id }}"; // Use the correct way to get the user ID

    fetch(`{{ route('hrm.attendance.filter') }}?month_year=${monthYear}&user_id=${userId}`)
        .then(response => response.json())
        .then(data => {
            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>';
            }
        })
        .catch(error => console.log('Error:', error));
});

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

            $('#attendanceTable tbody').html(response.studentData);
        },
        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 {
        vertical-align: middle;
        text-align: center;
    }

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

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

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

    .card {
        transition: transform 0.2s;
    }

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

    .border-primary {
        border-color: #71787f !important;
    }

    /* Ensuring the table header color and text color are correct */
    #attendanceTable th {
        background-color: #29294d !important;
        color: white !important;
    }

    .table thead {
        font-weight: bold;
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
</style>