@extends('layouts.app')

@section('title', 'Заполнения задним числом')

@php
    $statusLabels = [
        'approved' => ['Одобрено', 'success'],
        'rejected' => ['Отклонено', 'danger'],
    ];
@endphp

@section('content')
    <div class="container-fluid">
        <div class="ax-page-header">
            <h1 class="mb-0">Заполнения задним числом</h1>
        </div>

        <div class="d-flex align-items-center gap-2 mb-3">
            <h2 class="mb-0">Ожидают согласования</h2>
            <span id="backfillPendingBadge" class="badge bg-danger {{ empty($pending) ? 'd-none' : '' }}">{{ count($pending) }}</span>
        </div>

        <div class="ax-card p-0 mb-4">
            <div id="backfillsAlert" class="px-2 pt-2"></div>
            <div id="backfillPendingEmpty" class="p-3 text-muted {{ empty($pending) ? '' : 'd-none' }}">Нет заявок на согласование.</div>
            <ul id="backfillPendingList" class="list-group list-group-flush {{ empty($pending) ? 'd-none' : '' }}">
                @foreach ($pending as $req)
                    @php
                        $payload = json_decode($req->payload, true) ?: [];
                        $studentsCount = count($payload['students'] ?? []);
                    @endphp
                    <li id="backfill-row-{{ (int) $req->id }}" class="list-group-item">
                        <div class="d-flex flex-wrap justify-content-between align-items-start gap-2">
                            <div>
                                <div class="fw-semibold">
                                    {{ $req->group_name ?? 'Без группы' }}
                                </div>
                                <div class="text-muted small mt-1">
                                    {{ date('d.m.Y', strtotime($req->lesson_date)) }},
                                    {{ substr($req->begin_time, 0, 5) }}–{{ substr($req->end_time, 0, 5) }}
                                </div>
                                <div class="mt-1">
                                    Преподаватель: <strong>{{ $req->teacher_name ?? '—' }}</strong>
                                </div>
                                <div class="text-muted small mt-1">
                                    Учеников в списке: {{ $studentsCount }} ·
                                    Отправлено: {{ date('d.m.Y H:i', strtotime($req->created_at)) }}
                                </div>
                            </div>

                            <div class="d-flex flex-wrap align-items-center gap-2">
                                <form action="/admin/approve_backfill.php" method="POST"
                                      class="d-inline js-ajax-form"
                                      data-remove-target="#backfill-row-{{ (int) $req->id }}" data-alert-target="#backfillsAlert"
                                      onsubmit="return confirm('Одобрить заявку? Урок будет засчитан преподавателю.');">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ (int) $req->id }}">
                                    <button type="submit" class="btn btn-sm btn-success">Одобрить</button>
                                </form>

                                <button type="button" class="btn btn-sm btn-outline-danger"
                                        data-bs-toggle="modal" data-bs-target="#rejectModal-{{ (int) $req->id }}">
                                    Отклонить
                                </button>
                            </div>
                        </div>
                    </li>

                    <div class="modal fade" id="rejectModal-{{ (int) $req->id }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form action="/admin/reject_backfill.php" method="POST"
                                      class="js-ajax-form"
                                      data-remove-target="#backfill-row-{{ (int) $req->id }}" data-alert-target="#backfillsAlert">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ (int) $req->id }}">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Отклонить заявку</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">
                                        <label class="form-label">Причина (необязательно)</label>
                                        <input type="text" name="note" maxlength="500" class="form-control" placeholder="Причина отклонения">
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                                        <button type="submit" class="btn btn-danger">Отклонить</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </ul>
        </div>

        <h2 class="mb-3">История рассмотренных заявок</h2>
        <div class="ax-card p-0 mb-4">
            @if (empty($reviewed))
                <div class="p-3 text-muted">Пока нет рассмотренных заявок.</div>
            @else
                <div class="table-responsive">
                    <table class="table table-striped mb-0">
                        <thead>
                            <tr>
                                <th>Группа</th>
                                <th>Дата урока</th>
                                <th>Преподаватель</th>
                                <th>Статус</th>
                                <th>Рассмотрено</th>
                                <th>Комментарий</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($reviewed as $req)
                                @php($statusInfo = $statusLabels[$req->status] ?? [$req->status, 'secondary'])
                                <tr>
                                    <td>{{ $req->group_name ?? 'Без группы' }}</td>
                                    <td>{{ date('d.m.Y', strtotime($req->lesson_date)) }}</td>
                                    <td>{{ $req->teacher_name ?? '—' }}</td>
                                    <td><span class="badge text-bg-{{ $statusInfo[1] }}">{{ $statusInfo[0] }}</span></td>
                                    <td>
                                        {{ $req->reviewed_at ? date('d.m.Y H:i', strtotime($req->reviewed_at)) : '—' }}
                                        @if (!empty($req->reviewed_by_name))
                                            <div class="text-muted small">{{ $req->reviewed_by_name }}</div>
                                        @endif
                                    </td>
                                    <td>{{ $req->review_note ?? '—' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.getElementById('backfillPendingList').addEventListener('ajax-form:success', function (e) {
    const form = e.target;

    // Reject forms live inside a Bootstrap modal — close it, the row removal
    // itself is handled generically by the shared .js-ajax-form handler.
    const modalEl = form.closest('.modal');
    if (modalEl) {
        bootstrap.Modal.getInstance(modalEl)?.hide();
    }

    if (typeof e.detail.pending_count !== 'number') return;

    const badge = document.getElementById('backfillPendingBadge');
    if (badge) {
        badge.textContent = e.detail.pending_count;
        badge.classList.toggle('d-none', e.detail.pending_count === 0);
    }

    if (e.detail.pending_count === 0) {
        document.getElementById('backfillPendingEmpty')?.classList.remove('d-none');
        document.getElementById('backfillPendingList')?.classList.add('d-none');
    }
});
</script>
@endpush