@extends('layouts.master')

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

    <!-- Teacher Information and Attendance Summary -->
    <div class="row">
        <!-- Teacher Information on the Left -->
        <div class="col-md-6">
            <div class="card border-primary mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">Teacher Information</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><strong>User Name:</strong> {{ $teacher->user->username ?? 'N/A' }}</li>
                        <li><strong>Department:</strong> {{ $teacher->information->department->department_name ?? 'N/A' }}</li>
                        <li><strong>Designation:</strong> {{ $teacher->information->designation->designation_name ?? 'N/A' }}</li>
                        <li><strong>Preferred Subject:</strong> {{ $teacher->information->preferenceSubject->subject ?? 'N/A' }}</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Attendance Summary on the Right -->
        <div class="col-md-6">
            <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: {{ $teacherSummaries['yearly']['total_working_days'] ?? 'N/A' }}</li>
                                <li>Present: {{ $teacherSummaries['yearly']['total_present'] ?? 'N/A' }}</li>
                                <li>Absent: {{ $teacherSummaries['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: {{ $teacherSummaries['monthly']['total_working_days'] ?? 'N/A' }}</li>
                                <li>Present: {{ $teacherSummaries['monthly']['total_present'] ?? 'N/A' }}</li>
                                <li>Absent: {{ $teacherSummaries['monthly']['total_absent'] ?? 'N/A' }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter and Attendance Table -->
    <form id="attendanceTeacher" 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="{{ $teacher->user->id ?? '' }}"> <!-- Hidden field for user ID -->
        <button type="submit" class="btn btn-primary mb-2 ml-2">Search</button>
    </form>


    <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>
   $('#attendanceTeacher').on('submit', function(e) {
    e.preventDefault();
    var monthYear = $('#month-years').val();
    var userId = $('#user_id').val();

    fetch(`{{ route('hrm.attendance.filter.teacher') }}?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) {

            $('#attendanceTeacher tbody').html(response.teacherData);
        },
        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;
    }
</style>