@extends('layouts.publicador.novo_padrao')

@section('content')
    <style>
        :root {
            --primary-color: #004071;
            --primary-light: #2b5d8b;
            --primary-dark: #002c50;
            --accent-color: #E6F2FF;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --white: #ffffff;
            --gray-light: #f8f9fa;
            --gray: #6c757d;
        }

        .export-card {
            background-color: var(--white);
            border-radius: 10px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
            overflow: hidden;
            position: relative;
        }

        .export-card__header {
            background-color: var(--primary-color);
            color: var(--white);
            padding: 1.5rem;
            position: relative;
        }

        .export-card__title {
            font-size: 1.5rem;
            margin: 0;
            display: flex;
            align-items: center;
        }

        .export-card__title i {
            margin-right: 12px;
            font-size: 1.75rem;
        }

        .export-card__content {
            padding: 2rem;
        }

        .corner-icon {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 2.5rem;
            color: rgba(255, 255, 255, 0.2);
            transform: rotate(15deg);
        }

        .date-range-form {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            align-items: flex-end;
        }

        .form-group {
            flex: 1;
            min-width: 200px;
            position: relative;
            margin-bottom: 0;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: var(--primary-color);
            display: flex;
            align-items: center;
        }

        .form-group label i.field-icon {
            margin-right: 10px;
            color: var(--primary-color);
        }

        .form-control {
            width: 100%;
            padding: 0.75rem;
            padding-left: 2.5rem;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            height: calc(2.25rem + 2px);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(0, 64, 113, 0.25);
            outline: 0;
        }

        .form-control.is-invalid {
            border-color: var(--danger-color);
        }

        .invalid-feedback {
            color: var(--danger-color);
            font-size: 0.875rem;
            margin-top: 0.25rem;
            display: flex;
            align-items: center;
        }

        .invalid-feedback i {
            margin-right: 8px;
        }

        .input-icon {
            position: absolute;
            left: 10px;
            top: 60%;
            color: var(--gray);
            pointer-events: none;
        }

        .btn-group {
            display: flex;
            gap: 1rem;
            align-self: flex-end;
            margin-bottom: 1px;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: calc(2.25rem + 2px);
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: var(--white);
        }

        .btn-primary:hover {
            background-color: var(--primary-light);
        }

        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
        }

        .btn-outline:hover {
            background-color: var(--primary-color);
            color: var(--white);
        }

        .btn i {
            margin-right: 10px;
            font-size: 1.1rem;
        }

        .info-box {
            background-color: var(--accent-color);
            border-left: 4px solid var(--primary-color);
            padding: 1.2rem;
            margin-top: 2rem;
            border-radius: 0 5px 5px 0;
            position: relative;
        }

        .info-box h4 {
            margin-top: 0;
            color: var(--primary-color);
            display: flex;
            align-items: center;
        }

        .info-box h4 i {
            margin-right: 12px;
            font-size: 1.25rem;
        }

        .info-box ul {
            padding-left: 0.5rem;
            margin-bottom: 0;
            list-style-type: none;
        }

        .info-box ul li {
            margin-bottom: 0.75rem;
            padding-left: 0.5rem;
            position: relative;
            display: flex;
            align-items: center;
        }

        .info-box ul li i {
            margin-right: 12px;
            color: var(--primary-color);
            flex-shrink: 0;
            font-size: 1.1rem;
            width: 1.1rem;
            text-align: center;
        }

        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .spinner-container {
            position: relative;
            width: 80px;
            height: 80px;
            margin-bottom: 1rem;
        }

        .spinner {
            width: 80px;
            height: 80px;
            border: 5px solid var(--gray-light);
            border-top: 5px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .spinner-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--primary-color);
            font-size: 1.5rem;
        }

        .loading-text {
            color: var(--primary-color);
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        .loading-text i {
            margin-right: 10px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .alert {
            padding: 1rem;
            border-radius: 5px;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }

        .alert-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-warning {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeeba;
        }

        .alert-danger {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .alert i {
            margin-right: 12px;
            font-size: 1.25rem;
        }

        @media (max-width: 768px) {
            .export-card__content {
                padding: 1.5rem;
            }

            .date-range-form {
                flex-direction: column;
                gap: 1rem;
            }

            .form-group {
                width: 100%;
                margin-bottom: 1rem;
            }

            .btn-group {
                flex-direction: column;
                width: 100%;
            }

            .btn {
                width: 100%;
                height: auto;
                padding: 0.75rem 1.5rem;
                margin-bottom: 0.5rem;
            }
        }

        .fade-in {
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .help-icon {
            color: var(--gray);
            cursor: help;
            margin-left: 5px;
            font-size: 0.9rem;
        }

        .status-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: var(--success-color);
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        svg:not(:root).svg-inline--fa {
            overflow: visible;
            margin-right: 0.5rem;
        }
    </style>

    <div class="container">
        <div id="alertMessage" class="alert fade-in" style="display: none;">
            <i id="alertIcon" class="fas fa-info-circle"></i>
            <span id="alertText"></span>
        </div>

        <div class="export-card fade-in">
            <div class="export-card__header">
                <h2 class="export-card__title">
                    <i class="fas fa-file-excel me-2"></i> Exportar Agenda de Eventos
                </h2>
                <i class="fas fa-calendar-alt corner-icon"></i>
            </div>

            <div class="export-card__content">
                <form id="exportForm" action="{{ route('publicador.exportaragenda.gerar') }}" method="GET">
                    @csrf
                    <div class="date-range-form">
                        <div class="form-group">
                            <label for="dataInicial">
                                <i class="fas fa-calendar-day field-icon"></i>
                                Data Inicial
                            </label>
                            <i class="fas fa-calendar-alt input-icon"></i>
                            <input type="date" class="form-control" id="dataInicial" name="dataInicial" required
                                value="{{ now()->format('Y-m-d') }}">
                        </div>

                        <div class="form-group">
                            <label for="dataFinal">
                                <i class="fas fa-calendar-check field-icon"></i>
                                Data Final
                                <i class="fas fa-question-circle help-icon"
                                    title="Selecione a data de término do período"></i>
                            </label>
                            <i class="fas fa-calendar-alt input-icon"></i>
                            <input type="date" class="form-control" id="dataFinal" name="dataFinal" required
                                value="">
                        </div>

                        <div class="btn-group">
                            <button type="submit" class="btn btn-primary" id="exportButton">
                                <i class="fas fa-file-export"></i> Gerar Planilha
                            </button>
                            <button type="button" class="btn btn-outline" id="resetButton">
                                <i class="fas fa-sync-alt"></i> Limpar
                            </button>
                        </div>
                    </div>
                </form>

                <div class="info-box">
                    <h4><i class="fas fa-lightbulb"></i> Informações</h4>
                    <ul>
                        <li>
                            <i class="fas fa-file-excel"></i>
                            A planilha é exportada no formato XLSX com formatação visual aprimorada e com filtros.
                        </li>
                        <li>
                            <i class="fas fa-filter"></i>
                            Os eventos são filtrados pelo período selecionado e situação.
                        </li>
                        <li>
                            <i class="fas fa-star"></i>
                            Os eventos da planilha são apenas com situação de confirmados.
                        </li>
                        <li>
                            <i class="fas fa-list-alt"></i>
                            A coluna "Sessões" apresenta informações concatenadas de data, horário, título e local.
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="loading-overlay" id="loadingOverlay">
            <div class="spinner-container">
                <div class="spinner"></div>
                <i class="fas fa-file-export spinner-icon"></i>
            </div>
            <p class="loading-text">
                <i class="fas fa-cog fa-spin"></i>
                Gerando planilha...
            </p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('exportForm');
            const dataInicial = document.getElementById('dataInicial');
            const dataFinal = document.getElementById('dataFinal');
            const loadingOverlay = document.getElementById('loadingOverlay');
            const resetButton = document.getElementById('resetButton');
            const alertMessage = document.getElementById('alertMessage');
            const alertText = document.getElementById('alertText');
            const alertIcon = document.getElementById('alertIcon');

            function calcularProximaSextaFeira(dataInicial) {
                // Criar uma cópia da data para não modificar a original
                const data = new Date(dataInicial);
                data.setHours(0, 0, 0, 0); // Zerar horas para evitar problemas de fuso

                // Calcular quantos dias adicionar para chegar na sexta-feira da próxima semana
                const diaSemanaAtual = data.getDay(); // 0 (domingo) a 6 (sábado)

                // Cálculo para a próxima sexta-feira
                let diasParaAdicionar;
                if (diaSemanaAtual === 5) { // É sexta-feira
                    diasParaAdicionar = 7; // Próxima sexta
                } else if (diaSemanaAtual < 5) { // É domingo a quinta
                    diasParaAdicionar = (5 - diaSemanaAtual) + 7; // Dias até sexta + 7 para próxima semana
                } else { // É sábado
                    diasParaAdicionar = 6; // 6 dias até próxima sexta
                }

                data.setDate(data.getDate() + diasParaAdicionar);

                // Formatar como YYYY-MM-DD
                const result = data.toISOString().split('T')[0];
                console.log('Próxima Sexta:', result);
                return result;
            }

            dataInicial.addEventListener('change', function() {
                if (this.value) {
                    dataFinal.value = calcularProximaSextaFeira(this.value);
                    validateDates();
                }
            });

            if (dataInicial.value) {
                dataFinal.value = calcularProximaSextaFeira(dataInicial.value);
            }

            dataInicial.addEventListener('change', validateDates);
            dataFinal.addEventListener('change', validateDates);

            function validateDates() {
                let isValid = true;
                const startDate = new Date(dataInicial.value);
                const endDate = new Date(dataFinal.value);

                dataInicial.classList.remove('is-invalid');
                dataFinal.classList.remove('is-invalid');

                if (!dataInicial.value) {
                    dataInicial.classList.add('is-invalid');
                    isValid = false;
                }

                if (!dataFinal.value) {
                    dataFinal.classList.add('is-invalid');
                    isValid = false;
                }

                if (dataInicial.value && dataFinal.value && endDate < startDate) {
                    dataFinal.classList.add('is-invalid');
                    isValid = false;
                }

                const diffTime = Math.abs(endDate - startDate);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                if (diffDays > 180) {
                    showAlert(
                        'O período selecionado é muito extenso (mais de 6 meses). A geração pode demorar mais.',
                        'warning');
                }

                return isValid;
            }

            function showAlert(message, type = 'success') {
                alertMessage.className = 'alert fade-in alert-' + type;
                alertText.textContent = message;

                switch (type) {
                    case 'success':
                        alertIcon.className = 'fas fa-check-circle';
                        break;
                    case 'warning':
                        alertIcon.className = 'fas fa-exclamation-triangle';
                        break;
                    case 'danger':
                        alertIcon.className = 'fas fa-times-circle';
                        break;
                    default:
                        alertIcon.className = 'fas fa-info-circle';
                }

                alertMessage.style.display = 'flex';

                setTimeout(() => {
                    alertMessage.style.display = 'none';
                }, 5000);
            }

            form.addEventListener('submit', function(e) {
                e.preventDefault();

                if (validateDates()) {
                    console.log('dataFinal:', dataFinal.value);
                    loadingOverlay.style.display = 'flex';

                    setTimeout(() => {
                        form.submit();

                        setTimeout(() => {
                            loadingOverlay.style.display = 'none';
                            showAlert(
                                'A planilha está sendo gerada. Verifique seus downloads.',
                                'success');
                        }, 2000);
                    }, 500);
                }
            });

            resetButton.addEventListener('click', function() {
                dataInicial.value = new Date().toISOString().split('T')[0];
                dataFinal.value = calcularProximaSextaFeira(dataInicial.value);

                dataInicial.classList.remove('is-invalid');
                dataFinal.classList.remove('is-invalid');

                alertMessage.style.display = 'none';
                showAlert('Formulário reiniciado com sucesso!', 'success');
            });
        });
    </script>
@endsection