@extends('admin_layout')

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

@section('main_view')
<div class="container py-3 ">
    <h2 class="mb-4">Админ-панель</h2>
    <!-- Форма логина -->
    <div id="login-block" class="row justify-content-center mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">Вход для администратора</div>
                <div class="card-body">
                    <form id="doctor-login-form">
                        <div class="mb-3">
                            <label for="login-login" class="form-label">Логин</label>
                            <input type="text" class="form-control" id="login-login" name="login" required>
                        </div>
                        <div class="mb-3">
                            <label for="login-password" class="form-label">Пароль</label>
                            <input type="password" class="form-control" id="login-password" name="password" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Войти</button>
                    </form>
                    <div id="login-result" class="mt-3"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Конец формы логина -->
    <!-- Блок панели администратора -->
    <div id="admin-panel-block" style="display:none;">
        <button id="logout-btn" class="btn btn-danger mb-3">Выйти</button>
        <!-- Спойлер для формы регистрации врача -->
        <div class="accordion mb-4" id="adminAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingDoctorRegister">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDoctorRegister" aria-expanded="false" aria-controls="collapseDoctorRegister">
                        Регистрация врача
                    </button>
                </h2>
                <div id="collapseDoctorRegister" class="accordion-collapse collapse" aria-labelledby="headingDoctorRegister" data-bs-parent="#adminAccordion">
                    <div class="accordion-body">
                        <form id="doctor-register-form">
                            <div class="mb-3">
                                <label for="login" class="form-label">Логин</label>
                                <input type="text" class="form-control" id="login" name="login" required>
                            </div>
                            <div class="mb-3">
                                <label for="password" class="form-label">Пароль</label>
                                <input type="password" class="form-control" id="password" name="password" required>
                            </div>
                            <button type="submit" class="btn btn-primary">Зарегистрировать</button>
                        </form>
                        <div id="register-result" class="mt-3"></div>
                    </div>
                </div>
            </div>
            <!-- Спойлер для добавления упражнения -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingAddTask">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAddTask" aria-expanded="false" aria-controls="collapseAddTask">
                        Добавить упражнение
                    </button>
                </h2>
                <div id="collapseAddTask" class="accordion-collapse collapse" aria-labelledby="headingAddTask" data-bs-parent="#adminAccordion">
                    <div class="accordion-body">
                        <form id="add-task-form">
                            <div class="mb-3">
                                <label for="task-name" class="form-label">Название упражнения</label>
                                <input type="text" class="form-control" id="task-name" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="task-description" class="form-label">Описание</label>
                                <textarea class="form-control" id="task-description" name="description" required></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="task-id-image" class="form-label">ID изображения</label>
                                <input type="number" class="form-control" id="task-id-image" name="id_image" required>
                            </div>
                            <button type="submit" class="btn btn-success">Добавить упражнение</button>
                        </form>
                        <div id="add-task-result" class="mt-3"></div>
                    </div>
                </div>
            </div>
            <!-- Конец спойлера для добавления упражнения -->
            <!-- Спойлер для загрузки изображения -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingAddImage">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAddImage" aria-expanded="false" aria-controls="collapseAddImage">
                        Загрузить изображение
                    </button>
                </h2>
                <div id="collapseAddImage" class="accordion-collapse collapse" aria-labelledby="headingAddImage" data-bs-parent="#adminAccordion">
                    <div class="accordion-body">
                        <form id="add-image-form" enctype="multipart/form-data">
                            <div class="mb-3">
                                <label for="image-name" class="form-label">Название</label>
                                <input type="text" class="form-control" id="image-name" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="image-file" class="form-label">Изображение</label>
                                <input type="file" class="form-control" id="image-file" name="url_image" accept="image/*">
                            </div>
                            <div class="mb-3">
                                <label for="image-count" class="form-label">Количество</label>
                                <input type="number" class="form-control" id="image-count" name="count" required>
                            </div>
                            <button type="submit" class="btn btn-info">Загрузить</button>
                        </form>
                        <div id="add-image-result" class="mt-3"></div>
                    </div>
                </div>
            </div>
            <!-- Конец спойлера для загрузки изображения -->
        </div>
        <!-- Конец спойлера -->
        <!-- Здесь можно добавить другие функции -->
    </div>
</div>
@endsection

@section('script')
<script>
    // Проверка токена при загрузке страницы
    document.addEventListener('DOMContentLoaded', function() {
        if (localStorage.getItem('doctor_token')) {
            document.getElementById('login-block').style.display = 'none';
            document.getElementById('admin-panel-block').style.display = '';
        } else {
            document.getElementById('login-block').style.display = '';
            document.getElementById('admin-panel-block').style.display = 'none';
        }
    });

    // Логин
    document.getElementById('doctor-login-form').addEventListener('submit', async function(e) {
        e.preventDefault();
        const login = document.getElementById('login-login').value;
        const password = document.getElementById('login-password').value;
        const resultDiv = document.getElementById('login-result');
        resultDiv.innerHTML = 'Отправка...';
        try {
            const response = await fetch('/api/LoginDoctor', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ login, password })
            });
            const data = await response.json();
            if (response.ok && data.token) {
                localStorage.setItem('doctor_token', data.token);
                document.getElementById('login-block').style.display = 'none';
                document.getElementById('admin-panel-block').style.display = '';
                resultDiv.innerHTML = '';
            } else {
                resultDiv.innerHTML = '<div class="alert alert-danger">Ошибка: ' + (data.message || 'Неверный логин или пароль') + '</div>';
            }
        } catch (error) {
            resultDiv.innerHTML = '<div class="alert alert-danger">Ошибка сети или сервера</div>';
        }
    });

    // Логаут
    document.getElementById('logout-btn').addEventListener('click', function() {
        localStorage.removeItem('doctor_token');
        document.getElementById('login-block').style.display = '';
        document.getElementById('admin-panel-block').style.display = 'none';
    });

    // Хелпер для добавления токена в запросы
    function getAuthHeaders() {
        const token = localStorage.getItem('doctor_token');
        return token ? { 'Authorization': 'Bearer ' + token } : {};
    }

    document.getElementById('doctor-register-form').addEventListener('submit', async function(e) {
        e.preventDefault();
        const login = document.getElementById('login').value;
        const password = document.getElementById('password').value;
        const resultDiv = document.getElementById('register-result');
        resultDiv.innerHTML = 'Отправка...';
        try {
            const response = await fetch('/api/CreateAccountDoctor', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    ...getAuthHeaders()
                },
                body: JSON.stringify({ login, password })
            });
            const data = await response.json();
            if (response.ok) {
                resultDiv.innerHTML = '<div class="alert alert-success">Врач успешно зарегистрирован!</div>';
            } else {
                resultDiv.innerHTML = '<div class="alert alert-danger">Ошибка: ' + (data.message || 'Не удалось зарегистрировать врача') + '</div>';
            }
        } catch (error) {
            resultDiv.innerHTML = '<div class="alert alert-danger">Ошибка сети или сервера</div>';
        }
    });

    document.getElementById('add-task-form').addEventListener('submit', async function(e) {
        e.preventDefault();
        const name = document.getElementById('task-name').value;
        const description = document.getElementById('task-description').value;
        const id_image = document.getElementById('task-id-image').value;
        const count = 0;
        const resultDiv = document.getElementById('add-task-result');
        resultDiv.innerHTML = 'Отправка...';
        try {
            const response = await fetch('/api/AddSportTasks', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    ...getAuthHeaders()
                },
                body: JSON.stringify({ name, description, count, id_image })
            });
            const data = await response.json();
            if (response.ok) {
                resultDiv.innerHTML = '<div class="alert alert-success">Упражнение успешно добавлено!</div>';
            } else {
                let errors = '';
                if (data && data.errors) {
                    for (const key in data.errors) {
                        errors += data.errors[key].join('<br>') + '<br>';
                    }
                }
                resultDiv.innerHTML = '<div class="alert alert-danger">Ошибка: ' + (data.message || errors || 'Не удалось добавить упражнение') + '</div>';
            }
        } catch (error) {
            resultDiv.innerHTML = '<div class="alert alert-danger">Ошибка сети или сервера</div>';
        }
    });

    document.getElementById('add-image-form').addEventListener('submit', async function(e) {
        e.preventDefault();
        const form = document.getElementById('add-image-form');
        const formData = new FormData(form);
        const resultDiv = document.getElementById('add-image-result');
        resultDiv.innerHTML = 'Отправка...';
        try {
            const response = await fetch('/api/AddImage', {
                method: 'POST',
                body: formData,
                headers: {
                    ...getAuthHeaders()
                }
            });
            const data = await response.json();
            if (response.ok) {
                resultDiv.innerHTML = '<div class="alert alert-success">Фотография успешно добавлена!</div>';
            } else {
                let errors = '';
                if (data && data.error && data.error.errors) {
                    for (const key in data.error.errors) {
                        errors += data.error.errors[key].join('<br>') + '<br>';
                    }
                }
                resultDiv.innerHTML = '<div class="alert alert-danger">Ошибка: ' + (data.error?.message || errors || 'Не удалось добавить фотографию') + '</div>';
            }
        } catch (error) {
            resultDiv.innerHTML = '<div class="alert alert-danger">Ошибка сети или сервера</div>';
        }
    });
</script>
@endsection