@extends('layouts.app')

@section('title', 'Teacher Classes - ' . $teacher->user->name)

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-chalkboard-teacher text-primary me-2"></i>
                        Classes - {{ $teacher->user->name }}
                    </h1>
                    <p class="text-muted mb-0">
                        Employee Code: {{ $teacher->employee_code }}
                        @if($teacher->department)
                            | Department: {{ $teacher->department }}
                        @endif
                    </p>
                </div>
                <div>
                    {{-- <a href="{{ route('teachers.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i> Back to Teachers
                    </a> --}}
                </div>
            </div>

            <!-- Statistics Cards -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="mb-0">{{ $classes->total() }}</h4>
                                    <small>Total Classes</small>
                                </div>
                                <i class="fas fa-chalkboard fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="mb-0">{{ $classes->where('status', 'active')->count() }}</h4>
                                    <small>Active Classes</small>
                                </div>
                                <i class="fas fa-check-circle fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="mb-0">{{ $classes->unique('batch_id')->count() }}</h4>
                                    <small>Different Batches</small>
                                </div>
                                <i class="fas fa-users fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-dark">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="mb-0">{{ $classes->unique('subject_id')->count() }}</h4>
                                    <small>Different Subjects</small>
                                </div>
                                <i class="fas fa-book fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Classes Table -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-list me-2"></i> Assigned Classes
                    </h5>
                </div>
                <div class="card-body">
                    @if($classes->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>Batch</th>
                                    <th>Subject</th>
                                    <th>Schedule</th>
                                    <th>Room</th>
                                    <th>Weekly Hours</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($classes as $class)
                                <tr>
                                    <td>
                                        <strong>{{ $class->batch->name }}</strong>
                                        @if($class->batch->code)
                                            <br><small class="text-muted">{{ $class->batch->code }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ $class->subject->code ?? '' }}</strong>
                                        <br>{{ $class->subject->title }}
                                    </td>
                                    <td>
                                        @if($class->schedule)
                                            {{ $class->schedule }}
                                        @else
                                            <span class="text-muted">Not set</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($class->room)
                                            {{ $class->room->name }}
                                            @if($class->room->number)
                                                <br><small class="text-muted">({{ $class->room->number }})</small>
                                            @endif
                                        @else
                                            <span class="text-muted">Not assigned</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-primary">{{ $class->weekly_hours ?? 0 }} hrs/week</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $class->status === 'active' ? 'success' : 'secondary' }}">
                                            {{ ucfirst($class->status) }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm m-3" role="group">
                                            <!-- Video Call Button -->
                                            {{-- @if($class->status === 'active') --}}
                                            {{-- <a href="{{ route('video-call.join', ['class' => $class->id]) }}" --}}
                                             <a href="#"
                                               class="btn btn-primary me-1"
                                               title="Join Video Call"
                                               target="_blank">
                                                <i class="fas fa-video"></i> Join Call
                                            </a>
                                            {{-- @endif --}}

                                            <!-- Take Attendance Button -->
                                            <button type="button"
                                                    class="btn btn-success take-attendance me-1"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#attendanceModal"
                                                    data-class-id="{{ $class->id }}"
                                                    data-batch-name="{{ $class->batch->name }}"
                                                    data-subject-name="{{ $class->subject->title }}"
                                                    title="Take Attendance">
                                                <i class="fas fa-calendar-check"></i> Attendance
                                            </button>

                                            <!-- View Attendance Button -->
                                            <a href="{{ route('attendance.class', $class->id) }}"
                                               class="btn btn-info" title="View Attendance">
                                                <i class="fas fa-eye"></i> View
                                            </a>

                                            <!-- View Details Button -->
                                            {{-- <a href="{{ route('classes.show', $class->id) }}"
                                               class="btn btn-secondary" title="View Details">
                                                <i class="fas fa-info-circle"></i>
                                            </a> --}}
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <div class="text-muted">
                            Showing {{ $classes->firstItem() }} to {{ $classes->lastItem() }} of {{ $classes->total() }} classes
                        </div>
                        {{ $classes->links() }}
                    </div>
                    @else
                    <div class="text-center py-4">
                        <i class="fas fa-chalkboard-teacher fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No classes assigned</h5>
                        <p class="text-muted">This teacher doesn't have any classes assigned yet.</p>
                        <a href="{{ route('classes.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i> Assign Class
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Attendance Modal -->
<div class="modal fade" id="attendanceModal" tabindex="-1" aria-labelledby="attendanceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="attendanceModalLabel">Take Attendance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="attendanceForm" method="POST">
                @csrf
                <div class="modal-body">
                    <!-- Class Info -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Batch</label>
                                <input type="text" class="form-control" id="batchName" readonly>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Subject</label>
                                <input type="text" class="form-control" id="subjectName" readonly>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="session_date" class="form-label">Attendance Date *</label>
                                <input type="date" class="form-control" id="session_date" name="session_date"
                                       value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                    </div>

                    <!-- Students List -->
                    <div class="students-section">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0">Students Attendance</h6>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="selectAllPresent">
                                <label class="form-check-label" for="selectAllPresent">Mark All Present</label>
                            </div>
                        </div>
                        <div id="studentsList" class="table-responsive">
                            <!-- Students will be loaded here via AJAX -->
                            <div class="text-center py-4">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading students...</span>
                                </div>
                                <p class="mt-2 text-muted">Loading students...</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="saveAttendance">
                        <i class="fas fa-save me-1"></i> Save Attendance
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let currentClassId = null;

    // When attendance button is clicked
    $('.take-attendance').on('click', function() {
        currentClassId = $(this).data('class-id');
        const batchName = $(this).data('batch-name');
        const subjectName = $(this).data('subject-name');

        // Update modal header and form action
        $('#batchName').val(batchName);
        $('#subjectName').val(subjectName);
        $('#attendanceModalLabel').text(`Take Attendance - ${batchName} - ${subjectName}`);
        $('#attendanceForm').attr('action', `/attendance/class/${currentClassId}/take`);

        // Load students for this class
        loadStudents(currentClassId);
    });

    // Function to load students via AJAX
    function loadStudents(classId) {
        $.ajax({
            url: '{{ route("attendance.get-students") }}',
            type: 'GET',
            data: {
                class_id: classId
            },
            beforeSend: function() {
                $('#studentsList').html(`
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading students...</span>
                        </div>
                        <p class="mt-2 text-muted">Loading students...</p>
                    </div>
                `);
            },
            success: function(response) {
                if (response.success) {
                    $('#studentsList').html(response.html);
                } else {
                    $('#studentsList').html(`
                        <div class="alert alert-danger text-center">
                            <i class="fas fa-exclamation-triangle"></i>
                            ${response.message}
                        </div>
                    `);
                }
            },
            error: function(xhr) {
                let errorMessage = 'Failed to load students. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                $('#studentsList').html(`
                    <div class="alert alert-danger text-center">
                        <i class="fas fa-exclamation-triangle"></i>
                        ${errorMessage}
                    </div>
                `);
            }
        });
    }

    // Select all present functionality
    $(document).on('change', '#selectAllPresent', function() {
        const isChecked = $(this).is(':checked');
        $('select.attendance-status').val(isChecked ? 'present' : 'absent');
        updateStatusBadges();
    });

    // Update status badges when selection changes
    $(document).on('change', 'select.attendance-status', function() {
        updateStatusBadge($(this));
    });

    function updateStatusBadge(selectElement) {
        const status = selectElement.val();
        const badge = selectElement.closest('tr').find('.status-badge');

        badge.removeClass('bg-success bg-danger bg-warning bg-info')
             .addClass(getStatusBadgeClass(status))
             .text(status.charAt(0).toUpperCase() + status.slice(1));
    }

    function updateStatusBadges() {
        $('select.attendance-status').each(function() {
            updateStatusBadge($(this));
        });
    }

    function getStatusBadgeClass(status) {
        const classes = {
            'present': 'bg-success',
            'absent': 'bg-danger',
            'late': 'bg-warning',
            'excused': 'bg-info'
        };
        return classes[status] || 'bg-secondary';
    }

    // Handle form submission
    $('#attendanceForm').on('submit', function(e) {
        e.preventDefault();

        if (!currentClassId) {
            showAlert('error', 'Please select a class first');
            return;
        }

        // Disable submit button
        $('#saveAttendance').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Saving...');

        // Submit the form
        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                showAlert('success', response.message || 'Attendance saved successfully!');
                $('#attendanceModal').modal('hide');
                $('#attendanceForm')[0].reset();
            },
            error: function(xhr) {
                let errorMessage = 'Failed to save attendance. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                    errorMessage = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                }
                showAlert('error', errorMessage);
            },
            complete: function() {
                $('#saveAttendance').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Save Attendance');
            }
        });
    });

    // Function to show alert messages
    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        `;
        $('.container-fluid').prepend(alertHtml);

        // Auto remove alert after 5 seconds
        setTimeout(() => {
            $('.alert').alert('close');
        }, 5000);
    }
});
</script>
@endpush

<style>
.attendance-table th, .attendance-table td {
    vertical-align: middle;
}
.student-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.status-badge {
    font-size: 0.75em;
}
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #007bff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}
.btn-group .btn {
    border-radius: 0.25rem;
}
</style>