@extends('layouts.app')

@section('title', 'Админ панель')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
@endpush

@section('content')
    <div class="container-fluid">
        <div class="ax-page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
            <h1>Админ панель</h1>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#dashboardSettingsPanel" aria-controls="dashboardSettingsPanel">
                <i class="bi bi-sliders"></i> Настроить панель
            </button>
        </div>

        <h2 class="mb-3">Общая статистика</h2>
        <div class="row g-3 mb-4" id="dashboardWidgetGrid">
            @foreach ($widgets as $w)
                <div class="{{ $w['colClass'] }}{{ $w['visible'] ? '' : ' d-none' }}"
                     data-widget-key="{{ $w['key'] }}"
                     data-widget-size="{{ $w['size'] }}">
                    <div class="ax-stat-tile ax-stat-tile--{{ $w['color'] }}">
                        <span class="widget-drag-handle" title="Перетащить"><i class="bi bi-grip-vertical"></i></span>
                        <div class="widget-clickable-area d-flex align-items-center gap-3 flex-grow-1"
                            @if ($w['key'] === 'students_today')
                                data-bs-toggle="modal" data-bs-target="#studentsTodayModal" role="button"
                            @endif
                        >
                            <div class="ax-stat-icon"><i class="bi {{ $w['icon'] }}"></i></div>
                            <div class="ax-stat-body">
                                <div class="ax-stat-value">{{ $w['value'] }}</div>
                                <div class="ax-stat-label">{{ $w['title'] }}</div>
                            </div>
                        </div>
                        <button type="button" class="widget-hide-btn" data-widget-key="{{ $w['key'] }}" title="Скрыть блок">
                            <i class="bi bi-eye-slash"></i>
                        </button>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="dashboardSettingsPanel" aria-labelledby="dashboardSettingsLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="dashboardSettingsLabel">Настроить панель</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
        </div>
        <div class="offcanvas-body">
            <p class="text-muted small">Отметьте блоки, которые нужно показывать, выберите размер. Порядок блоков можно менять перетаскиванием прямо на панели.</p>
            @foreach ($widgets as $w)
                <div class="d-flex align-items-center justify-content-between border-bottom py-2 gap-2">
                    <div class="form-check">
                        <input class="form-check-input widget-visible-toggle" type="checkbox"
                               id="widgetToggle_{{ $w['key'] }}"
                               data-widget-key="{{ $w['key'] }}"
                               {{ $w['visible'] ? 'checked' : '' }}>
                        <label class="form-check-label" for="widgetToggle_{{ $w['key'] }}">
                            {{ $w['title'] }}
                        </label>
                    </div>
                    <select class="form-select form-select-sm widget-size-select" style="width: auto;"
                            data-widget-key="{{ $w['key'] }}">
                        <option value="sm" {{ $w['size'] === 'sm' ? 'selected' : '' }}>Маленький</option>
                        <option value="md" {{ $w['size'] === 'md' ? 'selected' : '' }}>Средний</option>
                        <option value="lg" {{ $w['size'] === 'lg' ? 'selected' : '' }}>Большой</option>
                    </select>
                </div>
            @endforeach
        </div>
    </div>

    <div class="modal fade" id="studentsTodayModal" tabindex="-1" aria-labelledby="studentsTodayModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="studentsTodayModalLabel">Ученики за сегодня</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs mb-3" id="studentsTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="present-tab" data-bs-toggle="tab" data-bs-target="#present" type="button" role="tab">Присутствующие</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="absent-tab" data-bs-toggle="tab" data-bs-target="#absent" type="button" role="tab">Неприсутствующие</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="studentsTabContent">
                        <div class="tab-pane fade show active" id="present" role="tabpanel">
                            @if ($presentStudents)
                                <ul class="list-group">
                                    @foreach ($presentStudents as $s)
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <a href="/student_admin_info.php?student_id={{ $s->id }}" target="_blank">
                                                {{ ($s->first_name ?? 'Без имени').' '.($s->last_name ?? 'Без фамилии') }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            @else
                                <p class="text-muted">Присутствующих нет</p>
                            @endif
                        </div>
                        <div class="tab-pane fade" id="absent" role="tabpanel">
                            @if ($absentStudents)
                                <ul class="list-group">
                                    @foreach ($absentStudents as $s)
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <a href="/student_admin_info.php?student_id={{ $s->id }}" target="_blank">
                                                {{ ($s->first_name ?? 'Без имени').' '.($s->last_name ?? 'Без фамилии') }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            @else
                                <p class="text-muted">Неприсутствующих нет</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
    <script>
    (function () {
        const csrfToken = @json(csrf_token());
        const grid = document.getElementById('dashboardWidgetGrid');

        const sizeColClasses = {
            sm: ['col-sm-6', 'col-lg-3'],
            md: ['col-sm-6', 'col-lg-4'],
            lg: ['col-lg-6'],
        };
        const allSizeColClasses = Object.values(sizeColClasses).flat();

        function currentState() {
            return Array.from(grid.children).map(function (tile, index) {
                return {
                    key: tile.dataset.widgetKey,
                    position: index,
                    visible: !tile.classList.contains('d-none'),
                    size: tile.dataset.widgetSize,
                };
            });
        }

        function saveLayout() {
            fetch('/admin/update_dashboard_layout.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: new URLSearchParams({
                    _token: csrfToken,
                    widgets: JSON.stringify(currentState()),
                }),
            });
        }

        function setTileVisible(key, visible) {
            const tile = grid.querySelector('[data-widget-key="' + key + '"]');
            if (tile) {
                tile.classList.toggle('d-none', !visible);
            }
            const checkbox = document.querySelector('.widget-visible-toggle[data-widget-key="' + key + '"]');
            if (checkbox) {
                checkbox.checked = visible;
            }
        }

        new Sortable(grid, {
            animation: 150,
            handle: '.widget-drag-handle',
            ghostClass: 'sortable-ghost',
            onEnd: saveLayout,
        });

        grid.querySelectorAll('.widget-hide-btn').forEach(function (btn) {
            btn.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                setTileVisible(btn.dataset.widgetKey, false);
                saveLayout();
            });
        });

        document.querySelectorAll('.widget-visible-toggle').forEach(function (checkbox) {
            checkbox.addEventListener('change', function () {
                setTileVisible(checkbox.dataset.widgetKey, checkbox.checked);
                saveLayout();
            });
        });

        document.querySelectorAll('.widget-size-select').forEach(function (select) {
            select.addEventListener('change', function () {
                const key = select.dataset.widgetKey;
                const tile = grid.querySelector('[data-widget-key="' + key + '"]');
                if (!tile) {
                    return;
                }
                tile.classList.remove(...allSizeColClasses);
                tile.classList.add(...sizeColClasses[select.value]);
                tile.dataset.widgetSize = select.value;
                saveLayout();
            });
        });
    })();
    </script>
@endsection