@extends('painel-admin.menu')

@section('title', 'Agenda')

@section('content')
    @if(session('errors'))
        <div class="alert alert-danger">
            <ul>
            @foreach(session('errors')->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
            </ul>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
    <div class="row">
            <div class="col-12 mt-3">
                <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center flex-wrap">
                    <h2 class="mb-3 mb-sm-0">Agenda</h2>

                    <div class="d-flex flex-column flex-sm-row flex-wrap" style="gap: 5px;">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#eventModal">
                            <i class="fas fa-plus mr-1"></i> Evento
                        </button>
                    </div>
                </div>
            </div>
        </div>

    <br>

    <!-- Calendário -->
    <div id="calendar" data-agenda="{{ json_encode($agenda) }}"></div>

    <!-- Modal de Cadastro de Evento -->
    <div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="exampleModalLabel" data-backdrop="static" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Cadastrar Evento</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="formEvento" action="{{ route('agenda.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="titulo">Título</label>
                            <input type="text" class="form-control" id="titulo" name="titulo" required>
                        </div>
                        <div class="form-group">
                            <label for="descricao">Descrição</label>
                            <textarea class="form-control" id="descricao" name="descricao"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="data_evento">Data do Evento</label>
                            <input type="datetime-local" class="form-control" id="data_evento" name="data_evento" required>
                        </div>
                        <div id="cliente-container" class="form-group">
                            <label>Cliente</label>
                            <select id="cliente" class="custom-select @error('cliente') is-invalid @enderror select2" name="cliente_agenda" autocomplete="cliente" autofocus>
                            </select>
                            @if ($errors->has('cliente'))
                                <p class="text-danger">{{ $errors->first('cliente') }}</p>
                            @endif
                        </div>
                        <div class="form-group">
                            <label for="tipo_evento">Tipo de Evento</label>
                            <select class="form-control" id="tipo_evento" name="tipo_evento" required>
                                <option value="lembrete">Lembrete</option>
                                <option value="treinamento">Treinamento</option>
                                <option value="treinamento_presencial">Treinamento Presencial</option>
                                <option value="instalacao">Instalação</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                        <button type="button" class="btn btn-primary btnSalvar">Salvar Evento</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <style>

        .select2-container {
            width: 100% !important;
        }

        .select2-selection--single {
        border: 1px solid #ced4da;
        border-radius: 4px;
        padding: 10px;
        height: 40px !important;
        box-sizing: border-box; 
        }

        .select2-selection__arrow {
        height: 38px; 
        }

        .select2-selection__rendered {
        color: #495057; 
        line-height: 40px; 
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 14px;
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }

        .select2-container--default.select2-container--focus .select2-selection--single {
        border-color: #80bdff; 
        }
        
        #calendar {
            max-width: 100%;
            margin: 0 auto;
            height: 75vh; 
        }

        .fc-event-title {
            white-space: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
        }

        .fc-daygrid-event {
            display: flex;
            justify-content: center;
            align-items: center; 
            padding: 5px;
        }

        /* Para telas menores (celulares) */
        @media (max-width: 768px) {
            #calendar {
                font-size: 12px;
            }

            .fc-header-toolbar {
                flex-direction: column;
                align-items: flex-start;
            }

            .fc-prev-button, .fc-next-button {
                padding: 8px 10px;
            }

            .fc-day-grid-event {
                font-size: 12px;
                padding: 5px;
            }

            .fc-toolbar-title {
                font-size: 16px;
                margin-bottom: 10px;
            }

            .fc-button {
                font-size: 14px;
            }
        }

        /* Para telas ainda menores (dispositivos muito pequenos) */
        @media (max-width: 480px) {
            
            .fc-button {
                font-size: 12px;
                padding: 8px 10px;
            }

            .fc-header-toolbar {
                font-size: 12px;
            }

            .fc-toolbar-title {
                font-size: 14px;
            }

            .fc-prev-button, .fc-next-button {
                padding: 5px 8px;
            }

            .fc-day-grid-event {
                font-size: 10px;
                padding: 3px;
            }
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/locales-all.min.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/pt-BR.js"></script>
    <script>
        var currentItemId = 'agenda-link';
        
        function validarAno(input) {
            const data = input.value;
            const partes = data.split('-');
            const ano = partes[0];

            if (ano.length > 4) {
                partes[0] = ano.slice(0, 4);


                input.value = partes.join('-');

                Swal.fire({
                    icon: 'error',
                    title: 'Ano inválido!',
                    text: 'O ano não pode ter mais de 4 dígitos.',
                    confirmButtonText: 'OK'
                });
            }
        }

        document.addEventListener('DOMContentLoaded', async function() {
            var events = JSON.parse(document.getElementById('calendar').getAttribute('data-agenda')) || [];

            // Buscar feriados do Brasil via API
            async function getHolidays(year) {
                try {
                    let response = await fetch(`https://brasilapi.com.br/api/feriados/v1/${year}`);
                    let holidays = await response.json();
                    return holidays.map(holiday => ({
                        title: `• ${holiday.name}`,
                        start: holiday.date,
                        color: 'transparent',
                        textColor: 'red',
                        allDay: true
                    }));
                } catch (error) {
                    console.error("Erro ao buscar feriados:", error);
                    return [];
                }
            }

            let year = new Date().getFullYear();
            let holidays = await getHolidays(year);

            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'pt-br',
                headerToolbar: {
                    left: 'prev,next',
                    center: 'title',
                    right: 'dayGridMonth,dayGridWeek,dayGridDay'
                },
                buttonText: {
                    today: 'Hoje',
                    month: 'Mês',
                    week: 'Semana',
                    day: 'Dia'
                },
                events: [...events.map(event => ({
                    id: event.id,
                    title: event.titulo,
                    start: event.data_evento,
                    color: event.color || 'blue',
                    extendedProps: {
                        description: event.descricao,
                        tipo_evento: event.tipo_evento,
                        empresa: event.empresa
                    }
                })), ...holidays], // Junta eventos do sistema com os feriados
                eventClick: function(info) {
                    if (info.event.extendedProps.tipo_evento) {
                        var eventDate = new Date(info.event.start);
                        var formattedDate = eventDate.toLocaleString('pt-BR', {
                            day: '2-digit',
                            month: '2-digit',
                            year: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit'
                        });

                        var tiposEventosMap = {
                            'treinamento': 'Treinamento',
                            'treinamento_presencial': 'Treinamento Presencial',
                            'lembrete': 'Lembrete',
                            'instalacao': 'Instalação'
                        };

                        var tipoEvento = tiposEventosMap[info.event.extendedProps.tipo_evento] || 'Outro';

                        Swal.fire({
                            title: info.event.title,
                            html: `<strong>Data:</strong> ${formattedDate}<br>
                                <strong>Cliente:</strong> ${info.event.extendedProps.empresa}<br>
                                <strong>Descrição:</strong> ${info.event.extendedProps.description}<br>
                                <strong>Tipo de Evento:</strong> ${tipoEvento}`,
                            icon: 'info',
                            showConfirmButton: false,
                            footer: `
                                <div style="display: flex; gap: 10px; justify-content: center;">
                                    <a title="Editar" href="/agenda/${info.event.id}/edit" class="btn btn-success">
                                        <i class="fas fa-edit"></i> Editar
                                    </a>
                                    <button id="closeSwal" class="btn btn-secondary">
                                        <i class="fas fa-times"></i> Fechar
                                    </button>
                                </div>
                            `
                        });

                        document.getElementById('closeSwal').addEventListener('click', function() {
                            Swal.close();
                        });

                    } else {
                        Swal.fire({
                            title: 'Feriado',
                            text: info.event.title.replace('• ', ''),
                            icon: 'info'
                        });
                    }
                }
            });

            calendar.render();
        });


        document.querySelectorAll('.btnSalvar').forEach(function(button) {
            button.addEventListener('click', function(event) {
                event.preventDefault();

                const tipoEvento = document.getElementById('tipo_evento').value;
                const titulo = document.getElementById('titulo').value.trim();
                const descricao = document.getElementById('descricao').value.trim();
                const dataEvento = document.getElementById('data_evento').value;

                if (!titulo || !descricao || !dataEvento) {
                    Swal.fire('Campos obrigatórios', 'Preencha todos os campos: Título, Descrição e Data do Evento.', 'warning');
                    return;
                }

                if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(dataEvento)) {
                    Swal.fire('Data inválida', 'Informe a data e hora do evento corretamente.', 'warning');
                    return;
                }

                if (tipoEvento === 'lembrete') {
                    confirmarCadastro();
                    return;
                }

                const clienteId = document.getElementById('cliente').value;

                if (!clienteId) {
                    Swal.fire('Atenção', 'Selecione um cliente primeiro.', 'warning');
                    return;
                }

                if (tipoEvento === 'treinamento_presencial') {
                    fetch(`/buscar-cliente-id?id=${clienteId}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.qtde_visitas == 0 || data.qtde_visitas == null) {
                                Swal.fire(
                                    'Sem visitas disponíveis',
                                    'Este cliente não possui mais visitas disponíveis. Necessário verificar com o Financeiro.',
                                    'warning'
                                );
                                return;
                            }

                            confirmarCadastro();
                        })
                        .catch(error => {
                            console.error('Erro ao buscar cliente:', error);
                            Swal.fire('Erro', 'Não foi possível verificar as visitas do cliente.', 'error');
                        });
                } else {
                    confirmarCadastro();
                }
            });
        });

        function confirmarCadastro() {
            Swal.fire({
                title: 'Confirmação',
                text: 'Deseja realmente cadastrar esse Evento?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Confirmar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('formEvento').submit(); 
                }
            });
        }

        var $j = jQuery.noConflict();
        $j(document).ready(function() {
            var oldCliente = "{{ old('cliente') }}";

            if (oldCliente) {
                $j.ajax({
                    url: '/buscar-cliente-id',
                    dataType: 'json',
                    data: { id: oldCliente },
                    success: function(data) {
                        if (data) {
                            var select = new Option(data.nome, data.id, true, true);
                            $j('#cliente').append(select).trigger('change');
                        }
                    }
                });
            }

            $j('#cliente').select2({
                theme: 'default',
                language: "pt-BR",
                width: '100%',
                ajax: {
                    url: '/buscar-cliente',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return { q: params.term };
                    },
                    processResults: function (data) {
                        return { results: data.results };
                    },
                    cache: true
                },
                minimumInputLength: 1,
                placeholder: 'Digite a razão social ou fantasia para buscar',
                dropdownParent: $j('#eventModal') // Necessário para funcionar dentro do modal
            });

            $j('#cliente').on('select2:select', function (e) { 
                var data = e.params.data;
            });
        });

        function toggleCliente() {
            const tipoEvento = document.getElementById('tipo_evento').value;
            const clienteContainer = document.getElementById('cliente-container');

            if (tipoEvento === 'lembrete') {
                clienteContainer.style.display = 'none';
            } else {
                clienteContainer.style.display = 'block';
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            toggleCliente(); 
            document.getElementById('tipo_evento').addEventListener('change', toggleCliente);
        });
    </script>
@endsection