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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerenciamento de Transcripts</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            height: 100vh;
            background: linear-gradient(to bottom right, #e8edf3, #ffffff);
        }
    
        .sidebar {
            width: 25%;
            background: #2c3e50;
            color: #fff;
            height: 9e9vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px 20px;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
        }
    
        .sidebar h1 {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 40px;
            color: #ecf0f1;
        }
    
        .sidebar a {
            text-decoration: none;
            color: #bdc3c7;
            font-size: 18px;
            margin: 15px 0;
            transition: color 0.3s ease;
        }
    
        .sidebar a:hover {
            color: #1abc9c;
        }
    
        .main-content {
            flex-grow: 1;
            padding: 30px;
            background: #f9fbfd;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
    
        .main-content h2 {
            font-size: 24px;
            color: #34495e;
            margin-bottom: 20px;
            border-bottom: 2px solid #bdc3c7;
            padding-bottom: 5px;
        }
    
        .filters {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }
    
        .filters button {
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            transition: background 0.3s ease, transform 0.2s ease;
        }
    
        .filters button:hover {
            transform: scale(1.05);
            filter: brightness(1.2);
        }
    
        .section {
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease, transform 0.5s ease;
            transform: translateY(20px);
        }
    
        .section.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
    
        .card {
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            background: #fff;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
    
        .card:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
    
        .card h3 {
            font-size: 20px;
            color: #2c3e50;
            margin-bottom: 10px;
        }
    
        .card p {
            font-size: 16px;
            color: #7f8c8d;
        }
    
        .card2 {
            display: flex;
            align-items: center;
            padding: 20px;
            border-radius: 10px;
            background: #ecf0f1;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease;
        }
    
        .card2 img {
            margin-left: 15px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
    
        .card2:hover {
            transform: scale(1.02);
        }
    
        #serverIcon {
            border-radius: 5px;
            transition: 250ms ease-in-out;
        }
    
        #serverIcon:hover {
            transform: scale(1.5);
        }
    
        #serverToogle {
            border-radius: 25px;
            width: 50px;
            height: 50px;
            transition: transform 0.3s ease;
            cursor: pointer;
        }
    
        #serverToogle:hover {
            transform: scale(1.2) rotate(25deg);
        }
    </style>
    
</head>

<body>
    <div class="sidebar">
        <h1>Moretti</h1>
        <a href="#">Transcripts</a>
        <div id="servers">
        </div>
    </div>
    <div class="main-content">
        <h2>Gerenciamento de Transcripts</h2>
        <div class="filters">
            <button style="background-color: rgb(80, 157, 76)" onclick="showSection('aprovados')">Aprovados</button>
            <button style="background-color: rgb(231, 171, 41); color:rgb(255, 255, 255)"
                onclick="showSection('pendentes')">Pendentes</button>
            <button style="background-color: rgb(197, 30, 11)" onclick="showSection('cancelados')">Cancelados</button>
            <button style="background-color: rgb(27, 132, 207)" onclick="showSection('tickets')">Tickets</button>

        </div>

        

        <div id="aprovados" class="section active">
            <div class="card">
                <h3>Transcripts Aprovados</h3>
                <p>Mostrando os transcripts que foram aprovados.</p>
            </div>
        </div>
        <div id="pendentes" class="section">
            <div class="card">
                <h3>Transcripts Pendentes</h3>
                <p>Mostrando os transcripts que estão aguardando aprovação.</p>
            </div>
        </div>
        <div id="cancelados" class="section">
            <div class="card">
                <h3>Transcripts Cancelados</h3>
                <p>Mostrando os transcripts que foram cancelados.</p>
            </div>
        </div>
        <div id="tickets" class="section">
            <div class="card">
                <h3>Transcripts de Tickets</h3>
                <p>Mostrando os transcripts tickets.</p>
            </div>
        </div>
    </div>

    <script>
        function showSection(sectionId) {
            const sections = document.querySelectorAll('.section');
            sections.forEach(section => {
                section.classList.remove('active');
            });

            const activeSection = document.getElementById(sectionId);
            activeSection.classList.add('active');
        }

        const aprovados = document.querySelector("#aprovados");
        const pendentes = document.querySelector("#pendentes");
        const cancelados = document.querySelector("#cancelados");
        const tickets = document.querySelector("#tickets");

        async function wait(ms) {
            return new Promise(result => {
                setTimeout(result, ms)
            })
        }

        let i = 0
        async function index() {
            const transcripts = await fetch('https://transcriptsadmin.csync.com.br/alltranscripts').then(r => r.json())
            const servers = []

            let serverAtual = 'tudo'
            async function toogleServers(serverIconNow) {
                let i = 0
                serverAtual = serverIconNow
                for (v of document.querySelectorAll('#serverIcon')) {
                    if (v.src !== serverIconNow && serverIconNow !== 'tudo') {
                        v.parentNode.style.display = 'none'
                    } else {
                        v.parentNode.style.display = null
                    }
                }
            }
             


            for (v of transcripts) {
                i++
                const htmlName = v.replace('.html', '')

                const card2 = document.createElement('div');
                card2.classList.add('card2');

                const h3 = document.createElement('h3')
                h3.innerHTML = htmlName

                const serverIcon = document.createElement('img')
                serverIcon.style.width = '25px'
                serverIcon.style.height = '25px'
                serverIcon.id = 'serverIcon'
                serverIcon.src = 'https://i.gifer.com/ZKZg.gif'

                card2.appendChild(h3)


                card2.appendChild(serverIcon)

                async function carregarCardInfo() {
                    const link = 'https://transcriptsadmin.csync.com.br/?ticket=' + htmlName
                    fetch(link).then(r => r.text()).then(r => {
                        let titulo = r.split('<title>')[1].split('</title>')[0]
                        const iconUrl = r.split('discord-header guild=')[1].split('icon="')[1].split('"')[0]
                        let userName = '';

                        if (!servers.find(v => v == iconUrl)) {
                            servers.push(iconUrl)

                            const imageToogle = document.createElement('img')
                            imageToogle.id = 'serverToogle'

                            let vez = false
                            imageToogle.onerror = () => {  
                                if (!vez) {
                                    imageToogle.src = 'https://cdn.dribbble.com/users/1053052/screenshots/3600670/_____.gif' 
                                }
                            }
                            imageToogle.src = iconUrl 

                            imageToogle.addEventListener('click', () => {
                                toogleServers(iconUrl)
                            })

                            document.querySelector('#servers').appendChild(imageToogle)
                        }
 

                        

                         
                        if (htmlName.includes('cl_d')) {
                            cancelados.appendChild(card2)
                            titulo = titulo.replace('🛒', '❌')

                            userName = 'Não identificado'
                        } else if (titulo.includes('✅')) {
                            aprovados.appendChild(card2)

                            userName = titulo.split('-').pop()
                        } else if (titulo.includes('🛒')) {
                            pendentes.appendChild(card2)

                            userName = titulo.split('-').pop()

                        } else if (titulo.includes('📨')) {
                            tickets.appendChild(card2)

                            userName = titulo.split('〡').pop()

                        } 

                        h3.innerHTML = titulo
                        serverIcon.src = iconUrl

                        card2.addEventListener('click', () => {
                            const iframeContainer = document.createElement('div');
                            iframeContainer.style.position = 'fixed';
                            iframeContainer.style.top = '50%';
                            iframeContainer.style.left = '50%';
                            iframeContainer.style.width = '0';
                            iframeContainer.style.height = '0';
                            iframeContainer.style.transform = 'translate(-50%, -50%) scale(0)';
                            iframeContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
                            iframeContainer.style.display = 'flex';
                            iframeContainer.style.justifyContent = 'center';
                            iframeContainer.style.alignItems = 'center';
                            iframeContainer.style.zIndex = '9999';
                            iframeContainer.style.borderRadius = '50%';
                            iframeContainer.style.transition = 'all 0.5s ease';


                            const loadingSpinner = document.createElement('div');
                            loadingSpinner.style.width = '100px';
                            loadingSpinner.style.height = '100px';
                            loadingSpinner.style.border = '5px solid #fff';
                            loadingSpinner.style.borderTop = '5px solid #566e8c';
                            loadingSpinner.style.borderRadius = '50%';
                            loadingSpinner.style.animation = 'spin 1s linear infinite';

                            const iframe = document.createElement('iframe');
                            iframe.src = `https://transcriptsadmin.csync.com.br/?ticket=${htmlName}`;
                            iframe.style.width = '80%';
                            iframe.style.height = '80%';
                            iframe.style.border = 'none';
                            iframe.style.borderRadius = '10px';
                            iframe.style.display = 'none';
                             

                            const closeButton = document.createElement('button');
                            closeButton.innerHTML = 'Fechar';
                            closeButton.style.position = 'absolute';
                            closeButton.style.top = '20px';
                            closeButton.style.right = '20px';
                            closeButton.style.padding = '10px 20px';
                            closeButton.style.border = 'none';
                            closeButton.style.borderRadius = '5px';
                            closeButton.style.backgroundColor = '#566e8c';
                            closeButton.style.color = '#fff';
                            closeButton.style.cursor = 'pointer';
                            closeButton.style.fontSize = '16px';
                            closeButton.style.opacity = '0';
                            closeButton.style.transition = 'opacity 0.5s ease';

                            closeButton.addEventListener('click', () => {
                                iframeContainer.style.transform = 'translate(-50%, -50%) scale(0)';
                                iframeContainer.style.opacity = '0';
                                setTimeout(() => {
                                    document.body.removeChild(iframeContainer);
                                }, 500);
                            });

                            iframe.addEventListener('load', () => {
                                iframe.style.display = 'block';
                                loadingSpinner.remove();
                                iframeContainer.style.borderRadius = '10px';
                                iframeContainer.style.width = '95%';
                                iframeContainer.style.height = '80%';
                                iframeContainer.style.transform = 'translate(-50%, -50%) scale(1)';
                                closeButton.style.opacity = '1';
                            });

                            iframeContainer.appendChild(loadingSpinner);
                            iframeContainer.appendChild(iframe);
                            iframeContainer.appendChild(closeButton);
                            document.body.appendChild(iframeContainer);

                            setTimeout(() => {
                                iframeContainer.style.width = '80%';
                                iframeContainer.style.height = '80%';
                                iframeContainer.style.transform = 'translate(-50%, -50%) scale(0.2)';
                            }, 10);
                        });

                        const style = document.createElement('style');
                        style.textContent = `
                            @keyframes spin {
                                0% { transform: rotate(0deg); }
                                100% { transform: rotate(360deg); }
                            }
                        `;
                        document.head.appendChild(style);

                        if (serverAtual !== 'tudo') {
                            if (serverAtual !== null) {
                                if (serverAtual !== iconUrl) {
                                    card2.style.display = 'none'
                                }
                            }
                        } else {

                        }
                    }).catch(() => {
                        setTimeout(carregarCardInfo, 15000)
                    })
                }

                carregarCardInfo()

                if (i > 25) {
                    await wait(5000)
                    i =0
                    return
                }
            }
        
        }

        index();
    </script>
</body>

</html>