<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsCRM - Автопилот + Tilda + Бизон 365 + GetCurse</title>

    <!-- Подключение библиотек -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script>
    <script src="https://vk.com/js/api/openapi.js?169"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator.min.css" rel="stylesheet">
    <script src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>

    <!-- Стили -->
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        h1 {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 0;
            border-bottom: 2px solid #388E3C;
            font-size: 28px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        button, #filter-clear, #download-json, #take-for-yourself {
            color: white;
            background-color: #4CAF50;
            border: none;
            cursor: pointer;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            margin: 5px;
            transition: background-color 0.3s ease;
        }
        button:hover, #filter-clear:hover, #download-json:hover, #take-for-yourself:hover {
            background-color: #388E3C;
        }
        select, input {
            padding: 10px;
            font-size: 16px;
            margin: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        select:focus, input:focus {
            border-color: #4CAF50;
            box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
        }
        #filter-field option, #filter-type option, #filter-field2 option {
            background-color: #f0f0f0;
            color: #333;
        }
        #mediaContainer {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            max-width: 100%;
            height: auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            padding: 20px;
            background-color: white;
        }
        #mediaContainer img, #mediaContainer video {
            max-width: 100%;
            height: auto;
            object-fit: contain;
            border-radius: 10px;
        }
        #imageUrl {
            margin-top: 20px;
            font-size: 16px;
            color: #333;
            cursor: pointer;
            text-decoration: underline;
            transition: color 0.3s ease;
        }
        #imageUrl:hover {
            color: #4CAF50;
        }
        #progressBarContainer {
            width: 80%;
            margin: 20px auto;
            background-color: #ddd;
            border-radius: 13px;
            padding: 3px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        #progressBar {
            width: 0%;
            height: 20px;
            background-color: #4CAF50;
            border-radius: 10px;
            text-align: center;
            line-height: 20px;
            color: white;
            transition: width 0.3s ease;
        }
        .swal-button-custom {
            background-color: #4CAF50;
            font-size: 16px;
            padding: 10px 20px;
        }
        .swal-title-custom {
            font-size: 24px;
            color: #333;
        }
        .swal-content-custom {
            font-size: 16px;
            color: #666;
        }
    </style>
</head>
<body>
    <header>
        <h1>WhatsCRM - Автопилот + Tilda + Бизон 365 + GetCurse</h1>
    </header>
    
    <main>
        <div>
            <select id="filter-field">
                <option value="">Выберите поле</option>
                <option value="id">Номер в списке</option>
                <option value="name">Имя</option>
                <option value="phone">WhatsApp</option>
                <option value="email">Email</option>
                <option value="b_mess">Реплики</option>          
                <option value="curator">Куратор</option>
                <option value="shop_st">Статус покупки</option>
                <option value="ad_url">Ссылка на пользователя в GC</option>
                <option value="vk_id">Ссылка на VK</option>
                <option value="chat_id">Ссылка на Tg</option>
                <option value="ws_stop">Статус подписки</option>
                <option value="web_st">Вебинары</option>
                <option value="fin_prog">Прогресс по воронке</option>
                <option value="pr1">pr1</option>
                <option value="pr2">pr2</option>
                <option value="pr3">pr3</option>
                <option value="pr4">Канал трафика</option>
                <option value="pr5">Дата</option>
                <option value="key_pr">Ключ PR</option>
                <option value="canal">Канал</option>
                <option value="data_t">Дата</option>
            </select>

            <select id="filter-type">
                <option value="=">=</option>
                <option value="<"><</option>
                <option value="<="><=</option>
                <option value=">">></option>
                <option value=">=">>=</option>
                <option value="!=">!=</option>
                <option value="like">like</option>
            </select>

            <input id="filter-value" type="text" placeholder="Значение фильтра">

            <select id="filter-field2">
                <option value="">Выберите поле</option>
                <option value="id">Номер в списке</option>
                <option value="name">Имя</option>
                <option value="phone">WhatsApp</option>
                <option value="email">Email</option>
                <option value="b_mess">Реплики</option>          
                <option value="curator">Куратор</option>
                <option value="shop_st">Статус покупки</option>
                <option value="ad_url">Ссылка на пользователя в GC</option>
                <option value="vk_id">Ссылка на VK</option>
                <option value="chat_id">Ссылка на Tg</option>
                <option value="ws_stop">Статус подписки</option>
                <option value="web_st">Вебинары</option>
                <option value="fin_prog">Прогресс по воронке</option>
                <option value="pr1">pr1</option>
                <option value="pr2">pr2</option>
                <option value="pr3">pr3</option>
                <option value="pr4">Канал трафика</option>
                <option value="pr5">Дата</option>
                <option value="key_pr">Ключ PR</option>
                <option value="canal">Канал</option>
                <option value="data_t">Дата</option>
            </select>

            <input id="filter-value2" type="text" placeholder="Значение фильтра 2">

            <button id="filter-clear">Очистить фильтр</button>
            <button id="download-json">Скачать JSON</button>
            <button id="take-for-yourself">Возьми для себя</button>
        </div>

        <div id="mediaContainer">
            <!-- Место для изображения или видео -->
            <div id="mediaWrapper">
                <!-- Изображение по умолчанию -->
                <img id="media" src="" alt="Media" style="display: none;">
                <!-- Видео по умолчанию -->
                <video id="mediaVideo" controls style="display: none;">
                    <source id="mediaSource" src="" type="video/mp4">
                    Ваш браузер не поддерживает видео.
                </video>
            </div>
            <div id="imageUrl"></div>
        </div>

        <div id="progressBarContainer">
            <div id="progressBar">0%</div>
        </div>

        <!-- Таблица данных -->
        <div id="data-table"></div>
    </main>

    <script>
        $(document).ready(function() {
            let data = [];
            let table = new Tabulator("#data-table", {
                data: data,
                layout: "fitColumns",
                columns: [
                    { title: "ID", field: "id" },
                    { title: "Имя", field: "name" },
                    { title: "WhatsApp", field: "phone" },
                    { title: "Email", field: "email" },
                    { title: "Реплики", field: "b_mess" },
                    { title: "Куратор", field: "curator" },
                    { title: "Статус покупки", field: "shop_st" },
                    { title: "Ссылка на пользователя в GC", field: "ad_url" },
                    { title: "Ссылка на VK", field: "vk_id" },
                    { title: "Ссылка на Tg", field: "chat_id" },
                    { title: "Статус подписки", field: "ws_stop" },
                    { title: "Вебинары", field: "web_st" },
                    { title: "Прогресс по воронке", field: "fin_prog" },
                    { title: "pr1", field: "pr1" },
                    { title: "pr2", field: "pr2" },
                    { title: "pr3", field: "pr3" },
                    { title: "Канал трафика", field: "pr4" },
                    { title: "Дата", field: "pr5" },
                    { title: "Ключ PR", field: "key_pr" },
                    { title: "Канал", field: "canal" },
                    { title: "Дата", field: "data_t" }
                ]
            });

            // Обработка клика на кнопке "Очистить фильтр"
            $('#filter-clear').click(function() {
                $('#filter-field').val('');
                $('#filter-type').val('=');
                $('#filter-value').val('');
                $('#filter-field2').val('');
                $('#filter-value2').val('');
            });

            // Обработка клика на кнопке "Скачать JSON"
            $('#download-json').click(function() {
                let jsonData = JSON.stringify(data, null, 2);
                let blob = new Blob([jsonData], { type: "application/json" });
                let url = URL.createObjectURL(blob);
                let a = document.createElement('a');
                a.href = url;
                a.download = 'data.json';
                a.click();
                URL.revokeObjectURL(url);
            });

            // Обработка клика на кнопке "Возьми для себя"
            $('#take-for-yourself').click(function() {
                Swal.fire({
                    title: 'Вы уверены?',
                    text: 'Вы собираетесь забрать эти данные для себя!',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Да, забрать',
                    cancelButtonText: 'Отмена',
                    customClass: {
                        confirmButton: 'swal-button-custom',
                        title: 'swal-title-custom',
                        content: 'swal-content-custom',
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Логика для кнопки "Возьми для себя"
                        Swal.fire(
                            'Выполнено!',
                            'Данные забраны для себя.',
                            'success'
                        );
                    }
                });
            });

            // Пример функции для обновления прогресс-бара
            function updateProgressBar(percentage) {
                $('#progressBar').css('width', percentage + '%').text(percentage + '%');
            }

            // Обновляем прогресс-бар на 50% как пример
            updateProgressBar(50);

            // Пример загрузки изображения
            $('#imageUrl').click(function() {
                let imageUrl = prompt('Введите URL изображения');
                if (imageUrl) {
                    $('#media').attr('src', imageUrl).show();
                    $('#mediaVideo').hide();
                    $('#imageUrl').text(imageUrl);
                }
            });

            // Пример загрузки видео
            function loadVideo(videoUrl) {
                $('#mediaVideo').show();
                $('#media').hide();
                $('#mediaSource').attr('src', videoUrl);
                $('#mediaVideo')[0].load();
            }
        });
    </script>
</body>
</html>