@extends('layouts.admin')

@section('title', __('admin.menu.classes'))

@section('content')
<div class="page-header">
    <div>
        <h1>{{ __('admin.classes.management.title') }}</h1>
        <p>{{ __('admin.classes.management.subtitle') }}</p>
    </div>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newClassModal">
        <i class="bi bi-plus-circle me-2"></i>{{ __('admin.classes.management.new_class') }}
    </button>
</div>

<!-- Filters -->
<div class="card mb-3">
    <div class="card-body p-3">
        <div class="row g-3">
            <div class="col-md-4">
                <select class="form-select" id="status-filter">
                    <option value="">{{ __('admin.classes.management.filters.all_status') }}</option>
                    <option value="active">{{ __('admin.classes.management.filters.active') }}</option>
                    <option value="inactive">{{ __('admin.classes.management.filters.inactive') }}</option>
                </select>
            </div>
            <div class="col-md-4">
                <select class="form-select" id="students-filter">
                    <option value="">{{ __('admin.classes.management.filters.all_students') }}</option>
                    <option value="high">{{ __('admin.classes.management.filters.high_students') }} (≥500)</option>
                    <option value="medium">{{ __('admin.classes.management.filters.medium_students') }} (100-499)</option>
                    <option value="low">{{ __('admin.classes.management.filters.low_students') }} (<100)</option>
                </select>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control" id="search-input" placeholder="{{ __('admin.classes.management.search_placeholder') }}">
            </div>
        </div>
    </div>
</div>

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>{{ __('admin.classes.management.table.class_name') }}</th>
                <th>{{ __('admin.classes.management.table.students_count') }}</th>
                <th>{{ __('admin.classes.management.table.subjects_count') }}</th>
                <th>{{ __('admin.classes.management.table.status') }}</th>
                <th>{{ __('admin.classes.management.table.actions') }}</th>
            </tr>
        </thead>
        <tbody>
            <tr class="class-row" data-class-id="1" data-status="active">
                <td>
                    <div class="d-flex align-items-center">
                        <i class="bi bi-mortarboard-fill text-primary fs-4 me-3"></i>
                        <div>
                            <strong>{{ __('admin.classes.management.examples.terminale_c') }}</strong>
                            <div class="text-muted small">{{ __('admin.classes.management.examples.science_series') }}</div>
                        </div>
                    </div>
                </td>
                <td>487</td>
                <td>5</td>
                <td><span class="badge bg-success">{{ __('admin.classes.management.status.active') }}</span></td>
                <td>
                    <button class="action-btn edit" title="{{ __('admin.classes.management.actions.edit') }}" data-class-name="Terminale C">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button class="action-btn toggle" title="{{ __('admin.classes.management.actions.deactivate') }}" data-status="active">
                        <i class="bi bi-toggle-on"></i>
                    </button>
                </td>
            </tr>
            <tr class="class-row" data-class-id="2" data-status="active">
                <td>
                    <div class="d-flex align-items-center">
                        <i class="bi bi-mortarboard-fill text-success fs-4 me-3"></i>
                        <div>
                            <strong>{{ __('admin.classes.management.examples.terminale_d') }}</strong>
                            <div class="text-muted small">{{ __('admin.classes.management.examples.science_series') }}</div>
                        </div>
                    </div>
                </td>
                <td>392</td>
                <td>4</td>
                <td><span class="badge bg-success">{{ __('admin.classes.management.status.active') }}</span></td>
                <td>
                    <button class="action-btn edit" title="{{ __('admin.classes.management.actions.edit') }}" data-class-name="Terminale D">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button class="action-btn toggle" title="{{ __('admin.classes.management.actions.deactivate') }}" data-status="active">
                        <i class="bi bi-toggle-on"></i>
                    </button>
                </td>
            </tr>
            <tr class="class-row" data-class-id="3" data-status="active">
                <td>
                    <div class="d-flex align-items-center">
                        <i class="bi bi-mortarboard-fill text-warning fs-4 me-3"></i>
                        <div>
                            <strong>{{ __('admin.classes.management.examples.premiere_c') }}</strong>
                            <div class="text-muted small">{{ __('admin.classes.management.examples.science_series') }}</div>
                        </div>
                    </div>
                </td>
                <td>541</td>
                <td>5</td>
                <td><span class="badge bg-success">{{ __('admin.classes.management.status.active') }}</span></td>
                <td>
                    <button class="action-btn edit" title="{{ __('admin.classes.management.actions.edit') }}" data-class-name="Première C">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button class="action-btn toggle" title="{{ __('admin.classes.management.actions.deactivate') }}" data-status="active">
                        <i class="bi bi-toggle-on"></i>
                    </button>
                </td>
            </tr>
            <tr class="class-row" data-class-id="4" data-status="inactive">
                <td>
                    <div class="d-flex align-items-center">
                        <i class="bi bi-mortarboard-fill text-secondary fs-4 me-3"></i>
                        <div>
                            <strong>{{ __('admin.classes.management.examples.seconde_a') }}</strong>
                            <div class="text-muted small">{{ __('admin.classes.management.examples.literary_series') }}</div>
                        </div>
                    </div>
                </td>
                <td>78</td>
                <td>3</td>
                <td><span class="badge bg-secondary">{{ __('admin.classes.management.status.inactive') }}</span></td>
                <td>
                    <button class="action-btn edit" title="{{ __('admin.classes.management.actions.edit') }}" data-class-name="Seconde A">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button class="action-btn toggle" title="{{ __('admin.classes.management.actions.activate') }}" data-status="inactive">
                        <i class="bi bi-toggle-off"></i>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<!-- New Class Modal -->
<div class="modal fade" id="newClassModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('admin.classes.management.modal.new_class_title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin.classes.management.modal.name') }}</label>
                        <input type="text" class="form-control" placeholder="{{ __('admin.classes.management.modal.name_placeholder') }}">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin.classes.management.modal.cancel') }}</button>
                <button type="button" class="btn btn-primary">{{ __('admin.classes.management.modal.create') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Class Modal -->
<div class="modal fade" id="editClassModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('admin.classes.management.modal.edit_class_title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin.classes.management.modal.name') }}</label>
                        <input type="text" class="form-control" id="edit-class-name">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin.classes.management.modal.cancel') }}</button>
                <button type="button" class="btn btn-primary">{{ __('admin.classes.management.modal.save') }}</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const statusFilter = document.getElementById('status-filter');
    const studentsFilter = document.getElementById('students-filter');
    const searchInput = document.getElementById('search-input');
    const editModal = new bootstrap.Modal(document.getElementById('editClassModal'));
    
    // Filtering functionality
    function filterTable() {
        const rows = document.querySelectorAll('.class-row');
        
        rows.forEach(row => {
            const className = row.querySelector('strong').textContent.toLowerCase();
            const status = row.dataset.status;
            const studentsCount = parseInt(row.cells[1].textContent);
            
            let showRow = true;
            
            // Filter by status
            if (statusFilter.value && status !== statusFilter.value) {
                showRow = false;
            }
            
            // Filter by students count
            if (studentsFilter.value) {
                switch(studentsFilter.value) {
                    case 'high':
                        if (studentsCount < 500) showRow = false;
                        break;
                    case 'medium':
                        if (studentsCount < 100 || studentsCount >= 500) showRow = false;
                        break;
                    case 'low':
                        if (studentsCount >= 100) showRow = false;
                        break;
                }
            }
            
            // Filter by search
            if (searchInput.value && !className.includes(searchInput.value.toLowerCase())) {
                showRow = false;
            }
            
            row.style.display = showRow ? '' : 'none';
        });
    }
    
    // Event listeners for filters
    statusFilter.addEventListener('change', filterTable);
    studentsFilter.addEventListener('change', filterTable);
    searchInput.addEventListener('input', filterTable);
    
    // Click on row to view class details
    document.querySelectorAll('.class-row').forEach(row => {
        row.addEventListener('click', function(e) {
            // Don't navigate if clicking on action buttons
            if (e.target.closest('.action-btn')) return;
            
            const classId = this.dataset.classId;
            const className = this.querySelector('strong').textContent;

            // Navigate to class details (to be implemented)
            window.location.href = "{{ route('admin.classes.subjects', ':classId') }}".replace(':classId', classId);
        });
    });
    
    // Edit class functionality
    document.querySelectorAll('.action-btn.edit').forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            const className = this.dataset.className;
            document.getElementById('edit-class-name').value = className;
            editModal.show();
        });
    });
    
    // Toggle class status
    document.querySelectorAll('.action-btn.toggle').forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            const row = this.closest('tr');
            const currentStatus = this.dataset.status;
            const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
            
            // Update UI
            row.dataset.status = newStatus;
            const badge = row.querySelector('.badge');
            const icon = this.querySelector('i');
            
            if (newStatus === 'active') {
                badge.className = 'badge bg-success';
                badge.textContent = '{{ __("admin.classes.management.status.active") }}';
                icon.className = 'bi bi-toggle-on';
                this.title = '{{ __("admin.classes.management.actions.deactivate") }}';
            } else {
                badge.className = 'badge bg-secondary';
                badge.textContent = '{{ __("admin.classes.management.status.inactive") }}';
                icon.className = 'bi bi-toggle-off';
                this.title = '{{ __("admin.classes.management.actions.activate") }}';
            }
            
            this.dataset.status = newStatus;
            
            alert(`Statut mis à jour: ${newStatus === 'active' ? 'Activé' : 'Désactivé'}\n[Mode démonstration]`);
        });
    });
});
</script>

<style>
.class-row {
    cursor: pointer;
    transition: background-color 0.2s;
}

.class-row:hover {
    background-color: var(--gray-100);
}

.action-btn {
    margin: 0 2px;
}
</style>
@endsection