вот основной код , добавь вкладку CP ,больше в основном коде не меняй не чего , в вкладку добавь скрипт cp.php  
//admin.php
<?php
session_start();

// Проверка, авторизован ли пользователь
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
    header('Location: index.php'); // Перенаправление на страницу входа, если не авторизован
    exit();
}

$servername = "localhost";
$username = "u2812027_mazhar";
$password = "strongPasswordReg$@";
$dbname = "u2812027_books";

// Создание соединения
$conn = new mysqli($servername, $username, $password, $dbname);

// Проверка соединения
if ($conn->connect_error) {
    die("Ошибка соединения: " . $conn->connect_error);
}

// Установка кодировки на utf8mb4
if (!$conn->set_charset("utf8mb4")) {
    die("Ошибка при установке кодировки: " . $conn->error);
}

// Если соединение успешно, можно продолжать выполнение кода

// Обработчик запросов
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    $action = $_POST['action'];

    if ($action === 'saveBook') {
        $bookTitle = $_POST['title'];
        $bookCover = $_POST['cover'];
        $prices1 = $_POST['prices1'];
        $prices2 = $_POST['prices2'];
        $prices3 = $_POST['prices3'];
        $chapters = json_decode($_POST['chapters'], true);
        // Установка времени создания
        $createTime = date('Y-m-d H:i:s'); // Формат 'YYYY-MM-DD HH:MM:SS'
        // Сохранение книги с временем создания
        $stmt = $conn->prepare("INSERT INTO books (title, create_time, svg_ico, One, Three, Six) VALUES (?, ?, ?, ?, ?, ?)");
        if (!$stmt) {
            die("SQL Error: {$conn->errno}");
        }
        $stmt->bind_param("ssssss", $bookTitle, $createTime, $bookCover, $prices1, $prices2, $prices3);
        $stmt->execute();
        $bookId = $stmt->insert_id;  // Получаем ID вставленной книги
        $stmt->close();

        // Сохранение глав с временем создания
        foreach ($chapters as $index => $chapter) {
            if (!empty($chapter['svg'])) 
            { // Проверка на наличие файла
                $stmt = $conn->prepare("INSERT INTO chapters (book_id, title, svg_file, sort_order, create_time , category, status, svg_name) VALUES (?, ?, ?, ?, ?, ?, ?, ?)");
                if (!$stmt) {
                    die("SQL Error: {$conn->errno}");
                }
                $stmt->bind_param("ississss", $bookId, $chapter['title'], $chapter['svg'], $index, $createTime, $chapter['category'], $chapter['status'], $chapter['svg_name']);
                $stmt->execute();
            }
        }
        echo json_encode(['status' => 'success']);
        exit();
    }

    if ($action === 'editBook') {
        $bookId = $_POST['bookId'];
        $bookTitle = $_POST['bookTitle'];
        $cover = $_POST['bookCover'];
        $chapters = json_decode($_POST['chapters'], true);


        // Обновление глав файла
        foreach ($chapters as $index => $chapter) {

            if (!empty($chapter['svg'])) { // Проверка на наличие файла
                if (isset($chapter['id'])) {
                    $stmt = $conn->prepare("UPDATE chapters SET title = ?, svg_file = ?, svg_name =?, sort_order = ? WHERE id = ?");
                    $stmt->bind_param("sssii", $chapter['title'], $chapter['svg'], $chapter['svg_name'] , $index, $chapter['id']);
                    $stmt->execute();
                } else { // Если глава добавлена недавно
                    $stmt = $conn->prepare("INSERT INTO chapters (book_id, title, svg_file, svg_name, category, status, sort_order) VALUES (?, ?, ?, ?, ?, ?, ?)");
                    $stmt->bind_param("isssssi", $bookId, $chapter['title'], $chapter['svg'], $chapter['svg_name'] , $chapter['category'], $chapter['status'],  $index);
                    $stmt->execute();
                }
            }


            // Если только заголовок, обновляем только его
            // Установка времени создания
            $createTime = date('Y-m-d H:i:s'); // Формат 'YYYY-MM-DD HH:MM:SS'
            // Если только заголовок, обновляем только его

            if (!empty($cover)) {
                $stmt = $conn->prepare("UPDATE books SET One = ?, Three = ?, Six = ?, create_time = ?, svg_ico = ? WHERE id = ?");
                $stmt->bind_param("sssssi", $chapter['oneMonthPrice'], $chapter['threeMonthsInput'], $chapter['sixMonthsInput'], $createTime, $cover, $chapter['bookId']);
                $stmt->execute();
            } else {
                $stmt = $conn->prepare("UPDATE books SET One = ?, Three = ?, Six = ?, create_time = ? WHERE id = ?");
                $stmt->bind_param("ssssi", $chapter['oneMonthPrice'], $chapter['threeMonthsInput'], $chapter['sixMonthsInput'], $createTime, $chapter['bookId']);
                $stmt->execute();
            }

            if ($bookTitle) {
                $stmt = $conn->prepare("UPDATE books SET title = ? WHERE id = ?");
                $stmt->bind_param("si", $bookTitle, $bookId);
                $stmt->execute();
            }

            // Если только заголовок, обновляем только его
            $stmt = $conn->prepare("UPDATE chapters SET title = ?, category = ?, status = ?, sort_order = ? WHERE id = ?");
            $stmt->bind_param("sssii", $chapter['title'], $chapter['category'], $chapter['status'], $index, $chapter['id']);
            $stmt->execute();
        }

        echo json_encode(['status' => 'success']);
        exit();
    }

    if ($action === 'deleteChapter') {
        $chapterId = $_POST['chapterId'];

        // Удаление главы
        $stmt = $conn->prepare("DELETE FROM chapters WHERE id = ?");
        $stmt->bind_param("i", $chapterId);
        $stmt->execute();

        echo json_encode(['status' => 'success']);
        exit();
    }

    if ($action === 'updateOrder') {
        $bookId = $_POST['bookId'];
        $order = json_decode($_POST['order'], true);

        // Обновление порядка глав
        foreach ($order as $index => $chapterId) {
            $stmt = $conn->prepare("UPDATE chapters SET sort_order = ? WHERE id = ?");
            $stmt->bind_param("ii", $index, $chapterId);
            $stmt->execute();
        }

        echo json_encode(['status' => 'success']);
        exit();
    }

    if ($action === 'deleteBook') {
        $bookId = $_POST['bookId'];

        // Удаление глав книги
        $stmt = $conn->prepare("DELETE FROM chapters WHERE book_id = ?");
        $stmt->bind_param("i", $bookId);
        $stmt->execute();

        // Удаление книги
        $stmt = $conn->prepare("DELETE FROM books WHERE id = ?");
        $stmt->bind_param("i", $bookId);
        $stmt->execute();

        echo json_encode(['status' => 'success']);
        exit();
    }

    if ($action === 'addChapter') {
        $bookId = $_POST['bookId'];
        $chapterTitle = $_POST['chapterTitle'];
        $chapterSvg = $_POST['chapterSvg'];

        if (!empty($chapterSvg)) { // Проверка на наличие файла
            // Определяем максимальный текущий порядок сортировки для новой главы
            $stmt = $conn->prepare("SELECT MAX(sort_order) as max_order FROM chapters WHERE book_id = ?");
            $stmt->bind_param("i", $bookId);
            $stmt->execute();
            $result = $stmt->get_result();
            $maxOrder = $result->fetch_assoc()['max_order'] ?? 0;
            $newOrder = $maxOrder + 1;
            $stmt->close();

            // Сохранение новой главы
            $stmt = $conn->prepare("INSERT INTO chapters (book_id, title, svg_file, sort_order) VALUES (?, ?, ?, ?)");
            $stmt->bind_param("issi", $bookId, $chapterTitle, $chapterSvg, $newOrder);
            if ($stmt->execute()) {
                echo json_encode(['status' => 'success']);
            } else {
                echo json_encode(['status' => 'error', 'message' => $stmt->error]);
            }
            $stmt->close();
        } else {
            echo json_encode(['status' => 'error', 'message' => 'SVG file is required for adding a chapter.']);
        }
        exit();
    }
}

// Получение списка книг и их глав
$books = [];
$result = $conn->query("SELECT * FROM books");

while ($book = $result->fetch_assoc()) {
    $bookId = $book['id'];
    $chaptersResult = $conn->query("SELECT * FROM chapters WHERE book_id = $bookId ORDER BY sort_order");
    $chapters = [];

    while ($chapter = $chaptersResult->fetch_assoc()) {
        $chapters[] = $chapter;
    }

    $book['chapters'] = $chapters;
    $books[] = $book;
}

$conn->close();
?>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book Chapter Editor</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link href="style.css" rel="stylesheet">

</head>

<body>
    <div class="container">
        <div class="tabs">
            <div class="tab active" data-tab="create">Создать справочник</div>
            <div class="tab" data-tab="existing">Существующие справочники</div>
            <a class="tab tab-link" data-tab="chat" href="chat.php">Клиентский чат</a>
            <form class="tab" method="POST" action="/shop23.08/cms/index.php">
                <button type="submit" name="logout" class="logout-button"><i class="fa-solid fa-arrow-right-from-bracket"></i></button>
            </form>
        </div>

        <div id="create" class="tab-content active">
            <h1>Создать справочник</h1>
            <div class="book-container">


                <label for="book-title">Название справочника:</label>
                <input type="text" id="book-title" placeholder="Введите название справочника">
                <div id="chapters-list"></div>
                <h2 class="existing-subscriptions__title">Виды подписок</h2>
                <div class="existing-subscriptions">
                    <div class="existing-subscription">
                        <p class="existing-subscription__title">1 Месяц</p>
                        <label class="existing-subscription__label">
                            <input class="existing-subscription__input" type="text" name="price-month" value="0">
                            <span class="existing-subscription__currency"><span>&#8381;</span></span>
                        </label>
                    </div>
                    <div class="existing-subscription">
                        <p class="existing-subscription__title">6 Месяцев</p>
                        <label class="existing-subscription__label">
                            <input class="existing-subscription__input" type="text" name="price-month" value="0">
                            <span class="existing-subscription__currency"><span>&#8381;</span></span>
                        </label>
                    </div>
                    <div class="existing-subscription">
                        <p class="existing-subscription__title">12 Месяцев</p>
                        <label class="existing-subscription__label">
                            <input class="existing-subscription__input" type="text" name="price-month" value="0">
                            <span class="existing-subscription__currency"><span>&#8381;</span></span>
                        </label>
                    </div>
                </div>
                <div class="create__buttons">
                    <button id="add-chapter-btn" class="create__button button">Добавить главу (SVG) <i class="fa-regular fa-file-lines"></i></button>
                    <!-- Видимая кнопка -->
                    <label class="create__button button" for="file-input-cover">
                        <span>Выбрать обложку <i class="fa-regular fa-image"></i></span>
                        <!-- Скрытый input элемент -->
                        <input type="file" class="create__button-input" accept=".svg" id="file-input-cover" style=" display: none;">
                    </label>
                    <button id="save-book-btn" class="create__button button">Сохранить справочник <i class="fa-solid fa-book"></i></button>
                </div>
            </div>
        </div>

        <div id="existing" class="tab-content">
            <h1>Редактирование справочников</h1>
            <div class="book-list" id="books-list">
                <?php foreach ($books as $book): ?>
                    <div class="book-item" data-book-id="<?= $book['id'] ?>">
                        <input class="book__title" value="<?= htmlspecialchars($book['title']) ?>" />
                        <div class="chapters-list">
                            <?php foreach ($book['chapters'] as $chapter): ?>
                                <div class="chapter-item" data-chapter-id="<?= $chapter['id'] ?>">
                                    <!-- Modal    <img src="<?= htmlspecialchars($chapter['svg_file']) ?>" alt="Chapter SVG" class="chapter-img">-->
                                    <div class="chapter-input-line">
                                        <input type="text" class="chapter-title-input" value="<?= htmlspecialchars($chapter['title']) ?>">
                                        <label class="chapter-file">
                                            <span class="chapter-file__button">Выбрать файл <i class="fa-regular fa-file-lines"></i></span>
                                            <input type="file" class="chapter-svg-input" accept=".svg">
                                        </label>
                                    </div>
                                    <div class="chapter-input-block">
                                        <input type="text" class="chapter-category-input" value="<?= htmlspecialchars($chapter['category'] ?? '') ?>">
                                        <select class="chapter-status-input" name="status">
                                            <option value="0" <?= ($chapter['status'] ?? null) == 0 ? 'selected' : '' ?>>Закрыт</option>
                                            <option value="1" <?= ($chapter['status'] ?? null) == 1 ? 'selected' : '' ?>>Открыт</option>
                                        </select>
                                    </div> <h5  class="svgname"><?= htmlspecialchars($chapter['svg_name']) ?></h5>
                                      
                                    <button class="delete-chapter-btn button">Удалить главу <i class="fa-regular fa-trash-can"></i></button>
                                </div>
                            <?php endforeach; ?>
                        </div>


                        <h2 class="existing-subscriptions__title">Виды подписок</h2>
                        <div class="existing-subscriptions">
                            <div class="existing-subscription">
                                <p class="existing-subscription__title">1 Месяц</p>
                                <label class="existing-subscription__label">
                                    <input class="existing-subscription__input" type="text" name="price-month" id='1' value='<?= htmlspecialchars($book['One']) ?>'>
                                    <span class="existing-subscription__currency"><span>&#8381;</span></span>
                                </label>
                            </div>
                            <div class="existing-subscription">
                                <p class="existing-subscription__title">6 Месяцев</p>
                                <label class="existing-subscription__label">
                                    <input class="existing-subscription__input" type="text" name="price-month" id='6' value='<?= htmlspecialchars($book['Three']) ?>'>
                                    <span class="existing-subscription__currency"><span>&#8381;</span></span>
                                </label>
                            </div>
                            <div class="existing-subscription">
                                <p class="existing-subscription__title">12 Месяцев</p>
                                <label class="existing-subscription__label">
                                    <input class="existing-subscription__input" type="text" name="price-month" id='12' value='<?= htmlspecialchars($book['Six']) ?>'>
                                    <span class="existing-subscription__currency"><span>&#8381;</span></span>
                                </label>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="add-chapter-btn button">Добавить главу (SVG) <i class="fa-regular fa-file-lines"></i></button>
                            <label class="cover__button button" for="file-input-cover-<?= $book['id'] ?>">
                                <span>Изменить обложку <i class="fa-regular fa-image"></i></span>
                                <!-- Скрытый input элемент -->
                                <input type="file" class="create__button-input" accept=".svg" id="file-input-cover-<?= $book['id'] ?>" style=" display: none;">
                            </label>
                            <button class="save-changes-btn button">Сохранить справочник <i class="fa-regular fa-floppy-disk"></i></button>
                            <button class="delete-book-btn button">Удалить справочник <i class="fa-solid fa-fire"></i></button>
                        </div>
                    </div>
                    <hr class="book-separator" style="width: 100%; border: 2px dashed #a161ff;" />
                    <!-- Modal -->
                    <div id="image-modal" class="modal">
                        <div class="modal-content">
                            <span class="close">&times;</span>
                            <img id="modal-image" src="" alt="Modal Image">
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.tab');
            const tabContents = document.querySelectorAll('.tab-content');

            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const target = this.getAttribute('data-tab');

                    tabs.forEach(t => t.classList.remove('active'));
                    tabContents.forEach(tc => tc.classList.remove('active'));

                    this.classList.add('active');
                    document.getElementById(target).classList.add('active');
                });
            });

            const chaptersList = document.getElementById('chapters-list');
            const addChapterBtns = document.querySelectorAll('.add-chapter-btn');
            const booksList = document.getElementById('books-list');

            /** Отдельно обработчик для новой главы во вкладке создание книги */
            const addChapterBtn = document.querySelector('#add-chapter-btn');
            addChapterBtn.addEventListener('click', () => {
                chapterCount++;
                const chapterItem = document.createElement('div');
                chapterItem.classList.add('chapter-item');
                chapterItem.dataset.id = chapterCount;

                const chapterContent = `
                    <div class="chapter-input-line">
                        <input type="text" class="chapter-title-input" placeholder="Глава">
                        <label class="chapter-file">
                            <span class="chapter-file__button">Выбрать файл <i class="fa-regular fa-file-lines"></i></span>
                            <input type="file" class="chapter-svg-input" accept=".svg">
                        </label>
                    </div>
                    <div class="chapter-input-block">
                        <input type="text" class="chapter-category-input" value="" placeholder="Раздел">
                        <select class="chapter-status-input" name="status">
                            <option value="0">Закрыт</option>
                            <option value="1">Открыт</option>
                        </select>
                    </div>
                    
                    <button class="delete-chapter-btn button">Удалить главу<i class="fa-regular fa-trash-can"></i></button>
                `;

                chapterItem.innerHTML = chapterContent;
                chaptersList.appendChild(chapterItem);

                // Удаление главы
                chapterItem.querySelector('.delete-chapter-btn').addEventListener('click', function() {
                    chapterItem.remove();
                })
            });


            let chapterCount = 0;

            // Инициализация SortableJS для изменения порядка глав
            new Sortable(chaptersList, {
                animation: 150,
            });

            // Добавление новой главы в разделе 
            addChapterBtns.forEach((addChapterBtn) => {
                addChapterBtn.addEventListener('click', function() {
                    const bookItem = addChapterBtn.closest('.book-item');
                    const chaptersList = bookItem.querySelector('.chapters-list');

                    chapterCount++;
                    const chapterItem = document.createElement('div');
                    chapterItem.classList.add('chapter-item');
                    chapterItem.dataset.id = chapterCount;

                    const chapterContent = `
                    <div class="chapter-input-line">
                        <input type="text" class="chapter-title-input" placeholder="Глава">
                        <label class="chapter-file">
                            <span class="chapter-file__button">Выбрать файл <i class="fa-regular fa-file-lines"></i></span>
                            <input type="file" class="chapter-svg-input" accept=".svg">
                        </label>
                    </div>
                    <div class="chapter-input-block">
                        <input type="text" class="chapter-category-input" value="" placeholder="Раздел">
                        <select class="chapter-status-input" name="status">
                            <option value="0">Закрыт</option>
                            <option value="1">Открыт</option>
                        </select>
                    </div>
                    
                    <button class="delete-chapter-btn button">Удалить главу<i class="fa-regular fa-trash-can"></i></button>
                `;

                    chapterItem.innerHTML = chapterContent;
                    chaptersList.appendChild(chapterItem);

                    // Удаление главы
                    chapterItem.querySelector('.delete-chapter-btn').addEventListener('click', function() {
                        chapterItem.remove();
                    });
                });
            })

            // Функция для асинхронного чтения файла
            const readFileAsDataURL = (file) => {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = (e) => resolve(e.target.result);
                    reader.onerror = () => reject('Ошибка чтения файла');
                    reader.readAsDataURL(file);
                });
            };



            // Сохранение новой книги
            document.getElementById('save-book-btn').addEventListener('click', async function() {
                const bookTitle = document.getElementById('book-title').value.trim();
                // Получаем все цены подписок
                let prices = document.querySelectorAll('.existing-subscription__input');

                // Добавление обложки книги
                const coverFileSVG = document.querySelector('#file-input-cover').files[0];

                let coverFileData = ''
                if (coverFileSVG) {
                    coverFileData = await readFileAsDataURL(coverFileSVG);
                }

                // Проверяем, что название книги не пустое
                if (!bookTitle) {
                    alert('Введите название книги!');
                    return;
                }

                const chapterItems = document.querySelectorAll('#chapters-list .chapter-item');
                const chapters = [];

                try {
                    for (const item of chapterItems) {
                        const title = item.querySelector('.chapter-title-input').value.trim();
                        let svgFile = item.querySelector('.chapter-svg-input').files[0];
                        
                        const item1 = item.querySelector('.chapter-status-input');
                        const status = item1 ? item1.value : 1;
                        const category = item.querySelector('.chapter-category-input').value;

                        let svgData = '';
                        let svg_name = '';
                        if (svgFile) 
                        {   
                            svgData = await readFileAsDataURL(svgFile);
                            svg_name = svgFile.name; // Получаем имя файла
                            console.log('Имя выбранного файла:', svg_name);
                        }

                        chapters.push({
                            title,
                            status,
                            category,
                            svg_name,
                            svg: svgData
                        });
                    }

                    // Логируем JSON перед отправкой
                    console.log("Отправляемый JSON:", JSON.stringify(chapters, null, 2));
                    // Вызов функции сохранения книги
                    saveBook(bookTitle, coverFileData, chapters, prices[0].value, prices[1].value, prices[2].value);
                } catch (error) {
                    console.error('Ошибка:', error);
                    alert('Произошла ошибка при сохранении книги. Попробуйте еще раз.');
                }

            });






            // Добавление новой главы в существующую книгу через AJAX
            function addChapter(bookId, chapterTitle, chapterSvg) {
                const formData = new FormData();
                formData.append('action', 'addChapter');
                formData.append('bookId', bookId);
                formData.append('chapterTitle', chapterTitle);
                formData.append('chapterSvg', chapterSvg);

                fetch('', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            alert('Глава успешно добавлена!');
                            window.location.reload();
                        } else {
                            alert('Глава не добавлена!.');
                        }
                    })
                    .catch(error => {
                        alert('Error for add chapter');
                        console.error('Error:', error);
                    });
            }
            // Сохранение книги через AJAX
            function saveBook(title, cover, chapters, prices1, prices2, prices3) {
                const formData = new FormData();
                formData.append('action', 'saveBook');
                formData.append('prices1', prices1);
                formData.append('prices2', prices2);
                formData.append('prices3', prices3);
                formData.append('title', title);
                formData.append('cover', cover);
                formData.append('chapters', JSON.stringify(chapters));
                fetch('', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            alert('справочник успешно сахранен!');
                            window.location.reload();
                        } else {
                            alert('справочник не сахранен!');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            }

            // Обработчики для существующих книг
            booksList.querySelectorAll('.book-item').forEach(bookItem => {
                console.log(bookItem);
                const chaptersList = bookItem.querySelector('.chapters-list');
                console.log(chaptersList);

                new Sortable(chaptersList, {
                    animation: 150,
                    onEnd: function() {
                        const order = Array.from(chaptersList.children).map(chapterItem => chapterItem.dataset.chapterId);
                        updateChapterOrder(bookItem.dataset.bookId, order);
                    }
                });
                booksList.querySelectorAll('.book-item').forEach(bookItem => {
                    const deleteBookBtn = bookItem.querySelector('.delete-book-btn');

                    deleteBookBtn.addEventListener('click', function() {

                        const bookId = bookItem.dataset.bookId;
                        deleteBook(bookId);
                        bookItem.remove();

                    });
                });

                function deleteBook(bookId) {
                    const formData = new FormData();
                    formData.append('action', 'deleteBook');
                    formData.append('bookId', bookId);

                    fetch('', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 'success') {} else {
                                alert('справочник не удален.');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                }

                bookItem.querySelector('.save-changes-btn').addEventListener('click', async function() {
                    const chapterItems = chaptersList.querySelectorAll('.chapter-item');
                    const chapters = [];

                    // Функция для асинхронного чтения файла
                    const readSVGFile = (file) => {
                        return new Promise((resolve, reject) => {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                resolve(e.target.result);
                            };
                            reader.onerror = function() {
                                reject('Ошибка чтения файла');
                            };
                            if (file) {
                                reader.readAsDataURL(file);
                            } else {
                                resolve(''); // Возвращаем пустую строку, если файла нет
                            }
                        });
                    };

                    // Добавление обложки книги
                    const coverFileSVG = bookItem.querySelector('.create__button-input').files[0];
                    console.info(coverFileSVG);

                    let coverFileData = '';
                    if (coverFileSVG) 
                    {
                        coverFileData = await readSVGFile(coverFileSVG);
                    }

                    console.warn(coverFileData);


                    for (const item of chapterItems) {
                        const chapterId = item.dataset.chapterId;
                        const title = item.querySelector('.chapter-title-input').value;

                        
                        
                        const item1 = item.querySelector('.chapter-status-input');
                        console.log(item1);

                        const status = item1 ? item1.value : null;
                        const category = item.querySelector('.chapter-category-input').value;
                        const svg = item.querySelector('.chapter-svg-input').files[0];
                        
                         //const svgNameElement = item.getElementById('svgname').innerText;
                         //console.log(svgNameElement);
                         
                        const bookItem = item.closest('.book-item');
                        const oneMonthPrice = bookItem.querySelector('input[name="price-month"][id="1"]').value;
                        const threeMonthsInput = bookItem.querySelector('input[name="price-month"][id="6"]').value;
                        const sixMonthsInput = bookItem.querySelector('input[name="price-month"][id="12"]').value;
                        const bookId = bookItem.dataset.bookId;
                    
                        let svg_name = '';

                        // Если файл SVG выбран, читаем его
                        if (svg) {
                            const svgData = await readSVGFile(svg);
                            svg_name = svg.name; // Получаем имя файла

                            chapters.push({
                                id: chapterId,
                                title,
                                category,
                                status,
                                oneMonthPrice,
                                threeMonthsInput,
                                sixMonthsInput,
                                bookId,
                                svg_name,
                                svg: svgData
                            });
                        } else {
                            chapters.push({
                                id: chapterId,
                                title,
                                category,
                                status,
                                oneMonthPrice,
                                threeMonthsInput,
                                sixMonthsInput,
                                bookId,
                                svg_name: '',
                                svg: ''
                            });
                        }
                    }

                    const bookTitle = bookItem.querySelector('.book__title').value;
                    console.log(bookTitle);

                    // Логируем JSON перед отправкой, если есть данные
                    if (chapters.length > 0) {
                        console.log("Отправляемый JSON:", JSON.stringify(chapters, null, 2));
                        saveChanges(bookItem.dataset.bookId, bookTitle, coverFileData, chapters);
                    }
                });





                bookItem.querySelectorAll('.delete-chapter-btn').forEach(deleteBtn => {
                    deleteBtn.addEventListener('click', function() {
                        const chapterItem = deleteBtn.closest('.chapter-item');
                        const chapterId = chapterItem.dataset.chapterId;

                        deleteChapter(chapterId);
                        chapterItem.remove();
                    });
                });
            });

            // Обновление порядка глав через AJAX
            function updateChapterOrder(bookId, order) {
                const formData = new FormData();
                formData.append('action', 'updateOrder');
                formData.append('bookId', bookId);
                formData.append('order', JSON.stringify(order));

                fetch('', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status !== 'success') {
                            alert('Глава не обновлена.');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            }

            // Сохранение изменений в главах через AJAX
            function saveChanges(bookId, bookTitle, bookCover, chapters) 
            {
                const formData = new FormData();
                formData.append('action', 'editBook');
                formData.append('bookId', bookId);
                formData.append('bookTitle', bookTitle);
                formData.append('bookCover', bookCover);
                formData.append('chapters', JSON.stringify(chapters));

                fetch('', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            alert('Сохранить справочник.');
                            window.location.reload();
                        } else {
                            alert('Глава не сахранена.');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            }

            // Удаление главы через AJAX
            function deleteChapter(chapterId) {
                const formData = new FormData();
                formData.append('action', 'deleteChapter');
                formData.append('chapterId', chapterId);

                fetch('', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status !== 'success') {
                            alert('Ошибка удалении главы.');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            }
        });


        const modal = document.querySelector('#image-modal');
        const modalImage = document.querySelector('#modal-image');
        const closeModal = document.querySelector('.close');

        // Функция открытия модального окна
        function openModal(imageSrc) {
            modal.style.display = 'block';
            modalImage.src = imageSrc;
        }

        // Функция закрытия модального окна
        if (closeModal) {
            closeModal.onclick = function() {
                modal.style.display = 'none';
            };
        }

        // Закрытие модального окна при клике вне его
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        };
        const images = document.querySelectorAll('.chapter-img');

        images.forEach(img => {
            img.addEventListener('click', function() {
                openModal(img.src);
            });
        });
    </script>
</body>

</html>

cp.php
<?php
session_start();

// Проверка, авторизован ли пользователь
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
    header('Location: index.php'); // Перенаправление на страницу входа, если не авторизован
    exit();
}

$host = 'localhost';
$db = 'u2812027_books';
$charset = 'utf8mb4';
$user = 'u2812027_mazhar';
$pass = 'strongPasswordReg$@';

$charset = 'utf8';
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";

// Настройка параметров PDO
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION, // Выброс исключений при ошибках
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,       // Массив с именованными ключами
    PDO::ATTR_EMULATE_PREPARES   => false,                  // Отключение эмуляции подготовленных выражений
];

try {
    $pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
    // Обработка ошибки подключения
    throw new \PDOException($e->getMessage(), (int)$e->getCode());
}

// Получение вкладки из параметров GET
$tab = isset($_GET['tab']) ? $_GET['tab'] : 'users';

// Обработка удаления пользователя
if ($tab == 'users' && isset($_GET['delete_id'])) {
    $delete_id = $_GET['delete_id'];

    // Удаление пользователя по ID
    $stmt = $pdo->prepare('DELETE FROM users WHERE id = ?');
    $stmt->execute([$delete_id]);

    // Перенаправление обратно на страницу пользователей
    header('Location: cp.php?tab=users');
    exit;
}

// Обработка добавления пользователя
if ($tab == 'users' && isset($_POST['add_user'])) {
    $email = $_POST['email'];
    $login = $_POST['login'];
    $password = password_hash($_POST['password'], PASSWORD_DEFAULT);

    // Добавление пользователя в базу данных
    $stmt = $pdo->prepare('INSERT INTO users (email, login, password) VALUES (?, ?, ?)');
    $stmt->execute([$email, $login, $password]);

    // Перенаправление на страницу пользователей
    header('Location: cp?tab=users');
    exit;
}

// Обработка редактирования пользователя
if ($tab == 'edit_user' && isset($_POST['edit_user'])) {
    $user_id = $_POST['user_id'];
    $email = $_POST['email'];
    $login = $_POST['login'];

    if (!empty($_POST['password'])) {
        $password = password_hash($_POST['password'], PASSWORD_DEFAULT);
        $stmt = $pdo->prepare('UPDATE users SET email = ?, login = ?, password = ? WHERE id = ?');
        $stmt->execute([$email, $login, $password, $user_id]);
    } else {
        $stmt = $pdo->prepare('UPDATE users SET email = ?, login = ? WHERE id = ?');
        $stmt->execute([$email, $login, $user_id]);
    }

    // Перенаправление на страницу пользователей
    header('Location: cp?tab=users');
    exit;
}

?>
<!doctype html>
<html lang="ru">
<head>
    <!-- Необходимые метатеги -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Панель управления</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Подключение Animate.css для анимаций -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

    <!-- Дополнительные стили -->
    <style>
                body {
            padding-top: 60px;
        }
        .nav-link.active {
            font-weight: bold;
        }
        .table-actions {
            white-space: nowrap;
        }
        /* Анимации для кнопок */
        .btn {
            transition: transform 0.2s;
        }
        .btn:hover {
            transform: scale(1.05);
        }
        /* Анимация для модального окна */
        .modal.fade .modal-dialog {
            transform: translate(0, -50px);
            transition: transform 0.3s ease-out;
               z-index: 1055;
        }
        .modal.show .modal-dialog {
            transform: translate(0, 0);
   z-index: 1055;
        }
        /* Установка фиксированной ширины для модальных окон */
        .modal-dialog-250 {
            max-width: 750px;
   z-index: 1055;
        }
      .modal {
 
}

.modal-backdrop {
    z-index: 0;
}
    </style>
</head>
<body>

<!-- Навигационная панель -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Панель управления</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Переключить навигацию">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse animate__animated animate__fadeInDown" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link <?= $tab == 'users' ? 'active' : '' ?>" href="?tab=users">Пользователи</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= $tab == 'paid_users' ? 'active' : '' ?>" href="?tab=paid_users">Оплаченные пользователи</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Основной контент -->
<div class="container">
    <?php
    switch ($tab) {
        case 'users':
            // Получение списка пользователей
            $stmt = $pdo->query('SELECT * FROM users');
            $users = $stmt->fetchAll();
            ?>

            <h2 class="my-4">Список пользователей</h2>
            <!-- Кнопка вызова модального окна для добавления пользователя -->
            <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addUserModal">
                Добавить пользователя
            </button>

            <!-- Таблица пользователей -->
            <div class="table-responsive animate__animated animate__fadeIn">
                <table class="table table-hover align-middle">
                    <thead class="table-dark">
                    <tr>
                        <th>ID</th>
                        <th>Email</th>
                        <th>Логин</th>
                        <th>Дата создания</th>
                        <th class="text-end">Действия</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php foreach ($users as $user): ?>
                        <tr>
                            <td><?= htmlspecialchars($user['id']) ?></td>
                            <td><?= htmlspecialchars($user['email']) ?></td>
                            <td><?= htmlspecialchars($user['login']) ?></td>
                            <td><?= htmlspecialchars($user['created_at']) ?></td>
                            <td class="text-end table-actions">
                                <!-- Кнопка редактировать -->
                                <a href="?tab=edit_user&id=<?= $user['id'] ?>" class="btn btn-sm btn-warning">Редактировать</a>

                                <!-- Кнопка токены -->
                                <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#tokensModal_<?= $user['id'] ?>">
                                    Токены
                                </button>

                                <!-- Модальное окно Токены -->
                                <div class="modal fade" id="tokensModal_<?= $user['id'] ?>" aria-labelledby="tokensModalLabel_<?= $user['id'] ?>" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered modal-dialog-250">                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="tokensModalLabel_<?= $user['id'] ?>">Токены пользователя #<?= htmlspecialchars($user['id']) ?></h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                                            </div>
                                            <div class="modal-body">
                                                <?php
                                                // Получение токенов пользователя
                                                $stmtTokens = $pdo->prepare('SELECT token, token_email, verf_email_code FROM users WHERE id = ?');
                                                $stmtTokens->execute([$user['id']]);
                                                $tokens = $stmtTokens->fetch();

                                                if ($tokens):
                                                ?>
                                                    <ul class="list-group">
                                                        <?php if (!empty($tokens['token'])): ?>
                                                        <li class="list-group-item">
                                                            <strong>Token:</strong>
                                                            <code><?= htmlspecialchars($tokens['token']) ?></code>
                                                        </li>
                                                        <?php endif; ?>
                                                        <?php if (!empty($tokens['token_email'])): ?>
                                                        <li class="list-group-item">
                                                            <strong>Token Email:</strong>
                                                            <code><?= htmlspecialchars($tokens['token_email']) ?></code>
                                                        </li>
                                                        <?php endif; ?>
                                                        <?php if (!empty($tokens['verf_email_code'])): ?>
                                                        <li class="list-group-item">
                                                            <strong>Verification Code:</strong>
                                                            <code><?= htmlspecialchars($tokens['verf_email_code']) ?></code>
                                                        </li>
                                                        <?php endif; ?>
                                                    </ul>
                                                <?php else: ?>
                                                    <p>Токены не найдены.</p>
                                                <?php endif; ?>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Кнопка удалить -->
                                <a href="?tab=users&delete_id=<?= $user['id'] ?>"
                                   class="btn btn-sm btn-danger"
                                   onclick="return confirm('Вы уверены, что хотите удалить этого пользователя?')">Удалить</a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <!-- Модальное окно для добавления пользователя -->
            <div class="modal fade" id="addUserModal" tabindex="22" aria-labelledby="addUserModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <form action="cp?tab=users" method="post">
                            <div class="modal-header">
                                <h5 class="modal-title" id="addUserModalLabel">Добавить пользователя</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Закрыть"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email:</label>
                                    <input type="email" id="email" name="email" class="form-control" required>
                                </div>
                                <div class="mb-3">
                                    <label for="login" class="form-label">Логин:</label>
                                    <input type="text" id="login" name="login" class="form-control" required>
                                </div>
                                <div class="mb-3">
                                    <label for="password" class="form-label">Пароль:</label>
                                    <input type="password" id="password" name="password" class="form-control" required>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                                <button type="submit" name="add_user" class="btn btn-primary">Добавить</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <?php
            break;

        case 'edit_user':
            // Получение ID пользователя из параметра GET
            if (!isset($_GET['id'])) {
                header('Location: cp?tab=users');
                exit;
            }
            $user_id = $_GET['id'];

            // Получение данных пользователя
            $stmt = $pdo->prepare('SELECT * FROM users WHERE id = ?');
            $stmt->execute([$user_id]);
            $user = $stmt->fetch();

            if (!$user) {
                echo "<div class='alert alert-danger'>Пользователь не найден.</div>";
                exit;
            }
            ?>

            <h2 class="my-4">Редактировать пользователя</h2>

            <form action="cp?tab=edit_user" method="post" class="mt-4 animate__animated animate__fadeInUp">
                <input type="hidden" name="user_id" value="<?= htmlspecialchars($user['id']) ?>">
                <div class="mb-3">
                    <label for="email" class="form-label">Email:</label>
                    <input type="email" id="email" name="email" value="<?= htmlspecialchars($user['email']) ?>"
                           class="form-control" required>
                </div>
                <div class="mb-3">
                    <label for="login" class="form-label">Логин:</label>
                    <input type="text" id="login" name="login" value="<?= htmlspecialchars($user['login']) ?>"
                           class="form-control" required>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">Пароль (оставьте пустым, если не хотите менять):</label>
                    <input type="password" id="password" name="password" class="form-control">
                </div>
                <button type="submit" name="edit_user" class="btn btn-success">Сохранить</button>
                <a href="cp?tab=users" class="btn btn-secondary">Отмена</a>
            </form>

            <?php
            break;

        case 'paid_users':
            // Получение списка оплаченных пользователей
            $stmt = $pdo->prepare('
            SELECT u.id, u.email, u.login, p.date_update AS payment_date, p.amount
            FROM users u
            INNER JOIN payments p ON u.id = p.user_id
            WHERE p.status = ?');
            $status_paid = 'paid'; // Замените на реальное значение статуса оплаты
            $stmt->execute([$status_paid]);
            $paid_users = $stmt->fetchAll();
            ?>

            <h2 class="my-4">Оплаченные пользователи</h2>

            <!-- Таблица оплаченных пользователей -->
            <div class="table-responsive animate__animated animate__fadeIn">
                <table class="table table-hover align-middle">
                    <thead class="table-dark">
                    <tr>
                        <th>ID пользователя</th>
                        <th>Email</th>
                        <th>Логин</th>
                        <th>Дата оплаты</th>
                        <th>Сумма</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php foreach ($paid_users as $user): ?>
                        <tr>
                            <td><?= htmlspecialchars($user['id']) ?></td>
                            <td><?= htmlspecialchars($user['email']) ?></td>
                            <td><?= htmlspecialchars($user['login']) ?></td>
                            <td><?= htmlspecialchars($user['payment_date']) ?></td>
                            <td><?= htmlspecialchars($user['amount']) ?></td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <?php
            break;

        default:
            echo "<p>Выберите вкладку.</p>";
            break;
    }
    ?>
</div>
<script type="text/javascript">// Функция для удаления подложки
function removeBackdrop() {
    const backdrops = document.querySelectorAll('.modal-backdrop');
    backdrops.forEach(backdrop => {
        backdrop.remove();
    });
}

// Запуск функции каждые 3 секунды (3000 миллисекунд)
setInterval(removeBackdrop, 30);</script>
<!-- Bootstrap JS и зависимости -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>