@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-fle color-back">
                        <div class="col-md-10 div-button">Eventos</div>
                        <div class="col-md-2 div-button">
                            @if (Auth::user()->is_admin == '1')
                                <a href="{{ route('eventos.create') }}" class="btn btn-success"> <i
                                        class="fa-solid fa-plus"></i>
                                    Criar Evento</a>
                            @endif
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="col-md-12">
                            <table class="table">
                                <thead class="thead-dark">
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Nome</th>
                                        <th scope="col">Descrição</th>
                                        <th scope="col">Participantes</th>
                                        <th scope="col">Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($eventos->isNotEmpty())
                                        @php
                                            $cont = 1;
                                        @endphp
                                        @foreach ($eventos as $evento)
                                            <tr>
                                                <th scope="row">{{ $cont }}</th>
                                                <td>{{ $evento->nome }}</td>
                                                <td>{!! $evento->descricao !!}</td>
                                                <td>{{ $evento->eventosEmail ? $evento->eventosEmail->count() : 0 }}</td>
                                                <td class="btn-quest-graph">
                                                    <a href="{{ route('eventos.participantes', $evento->id) }}"
                                                        class="btn btn-success"><i class="fa-solid fa-users"></i></a>
                                                    <a href="{{ route('eventos.update', $evento->id) }}"
                                                        class="btn btn-primary"><i class="fa-solid fa-pencil"></i></a>
                                                    <a onclick="showqrcode({{ $evento->id }})" class="btn btn-info"><i
                                                            class="fa-solid fa-qrcode"></i></a>
                                                    <button class="btn btn-danger"
                                                        onclick="confirmDeletion({{ $evento->id }})"><i
                                                            class="fa-solid fa-trash-can"></i></button>
                                                </td>
                                            </tr>
                                            @php
                                                $cont++;
                                            @endphp
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                            @if ($eventos->IsEmpty())
                                <p class="text-center">Sem Eventos Cadastrados...</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script>
        function confirmDeletion(id) {
            Swal.fire({
                title: 'Tem certeza?',
                text: "Você não será capaz de reverter isso!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sim, delete!',
                cancelButtonText: 'Não, cancelar!'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = "{{ url('/evento/delete') }}/" + id;
                }
            })
        }

        function showqrcode(id) {
            fetch(`{{ route('eventos.qrcode') }}?id=${id}`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        Swal.fire({
                            title: 'Erro',
                            text: data.error,
                            icon: 'error',
                            confirmButtonText: 'Ok'
                        });
                    } else {
                        // Aqui você pode adicionar um console.log para ver a URL no console do navegador
                        console.log("URL Gerada:", data.url);

                        Swal.fire({
                            title: 'QR Code',
                            html: `<div style="display: flex; justify-content: center;">${data.qrcode}</div>`,
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Imprimir',
                            cancelButtonText: 'Fechar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                printQrCode(data.qrcode);
                            }
                        })
                    }
                })
                .catch(error => {
                    Swal.fire({
                        title: 'Erro',
                        text: 'Ocorreu um erro ao gerar o QR Code.',
                        icon: 'error',
                        confirmButtonText: 'Ok'
                    });
                });
        }

        function printQrCode(qrcode) {
            const printWindow = window.open('', '_blank');
            const logoUrl = "{{ asset('img/brasao-alep/brasao-assembleia.jpg') }}";

            printWindow.document.write(`
                <html>
                    <head>
                        <title>Imprimir QR Code</title>
                        <style>
                            @page { size: A4; margin: 0; }
                            body { font-family: Arial, sans-serif; margin: 0; padding: 0mm 20mm; display: flex; flex-direction: column; height: 100vh; }
                            .container { flex: 1; display: flex; flex-direction: column; }
                            .header { text-align: center; margin-top: 5mm; }
                            .header img { max-width: 100%; height: 100px; }
                            .header h1 { font-size: 18px; }
                            .content { text-align: left; font-size: 14px; margin-top: 10mm; }
                            .content p { margin: 0 0 5mm 0; }
                            .content ol { margin: 0; padding-left: 20px; }
                            .content li { margin-bottom: 5mm; }
                            .qr-code { display: flex; justify-content: center; margin: 5mm 0 0 0; }
                            .footer { text-align: justify; font-size: 14px; margin-top:10mm!important;  }
                            .highlight { color: red; }
                            .p1{font-size:24px; text-align:center;margin-bottom:15mm!important}
                            .space {display: flex; flex-direction: column; justify-content: flex-start; margin-top:10mm!important; height:100%}
                        </style>
                    </head>
                    <body>
                        <div class="container">
                            <div class="header">
                                <img src="${logoUrl}" alt="Logo" id="logoImage">
                                <h1>Assembleia Legislativa do Estado do Paraná</h1>
                            </div>
                            <div class="space">
                                <div class="content">
                                    <p class="p1"><b>Bem-vindos!</b></p>
                                    <p>Para confirmar sua presença, por favor, escaneie o QR Code abaixo com seu celular.</p>
                                    <p><b>Como escanear o QR Code:</b></p>
                                    <ol>
                                        <li>Abra a câmera do seu celular;</li>
                                        <li>Aponte a câmera para o QR Code;</li>
                                        <li>Clique no link que aparecer na tela;</li>
                                        <li>Preencha seus dados funcionais.</li>
                                    </ol>
                                </div>
                                <div class="qr-code">${qrcode}</div>
                                 <div class="footer">Agradecemos sua participação e desejamos um excelente evento!</div>
                            </div>
                        </div>
                    </body>
                </html>
            `);
            printWindow.document.close();

            const logoImage = printWindow.document.getElementById('logoImage');
            logoImage.onload = function() {
                printWindow.focus();
                printWindow.print();
                printWindow.close();
            };
        }
    </script>
@endsection