@extends('layouts.app')

@section('title', 'Eventos')

@push('styles-custom')
    <link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/select2/css/select2.css') }}" rel="stylesheet" />
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <style>
        /* Mantém estilos do Select2 */
        .select2-container--default .select2-selection--single {
            height: 31px;
            padding: 0.1rem 0.5rem;
            font-size: 0.8125rem;
            border-radius: 0.25rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 30px;
        }
        .modal-lg .select2-container {
            width: 100% !important;
        }

        /* Estilo zebrado suave */
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 0, 0, 0.02);
        }

        /* Altura das linhas */
        .table td {
            padding: 0.75rem;
            vertical-align: middle;
        }

        /* Hover nas linhas */
        .table tbody tr:hover {
            background-color: rgba(var(--phoenix-primary-rgb), 0.1);
        }

        /* DataTables customização */
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: var(--phoenix-primary);
            color: white !important;
            border-color: var(--phoenix-primary);
        }

        /* Scrollbar duplo */
        .table-responsive {
            position: relative;
        }

        .table-scroll-top {
            overflow-x: auto;
            overflow-y: hidden;
            height: 20px;
            margin-bottom: 10px;
        }

        .table-scroll-top-inner {
            height: 1px;
        }

        .dataTables_wrapper .dataTables_processing {
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid #ddd;
            border-radius: 0.375rem;
            padding: 20px;
        }

        /* Badges personalizadas */
        .badge-status-hoje {
            background-color: var(--phoenix-warning);
            color: var(--phoenix-warning-text-emphasis);
        }

        .badge-status-futuro {
            background-color: var(--phoenix-success);
            color: var(--phoenix-success-text-emphasis);
        }

        .badge-status-passado {
            background-color: var(--phoenix-secondary);
            color: var(--phoenix-secondary-text-emphasis);
        }

        .badge-status-proximamente {
            background-color: var(--phoenix-info);
            color: var(--phoenix-info-text-emphasis);
        }
    </style>
@endpush

@section('content')
<div class="content pt-3">
    <nav class="mb-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Eventos</li>
        </ol>
    </nav>

    <div class="mb-9">
        <!-- Título e Botão Adicionar -->
        <div class="row align-items-center justify-content-between g-3 mb-4">
            <div class="col-auto">
                <h2 class="mb-0">Eventos</h2>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-primary" onclick="window.location='{{ route('eventos.create') }}'">
                    <span class="fas fa-plus me-2"></span>Adicionar Evento
                </button>
            </div>
        </div>

        <!-- Card de Filtros -->
        <div class="card mb-4">
            <div class="card-header bg-body-tertiary">
                <h5 class="mb-0">Filtros</h5>
            </div>
            <div class="card-body">
                <form id="filterForm">
                    <!-- Primeira linha - Filtros principais -->
                    <div class="row g-3 mb-3">
                        <!-- Status -->
                        <div class="col-md-2">
                            <label class="form-label small">Status</label>
                            <select name="status" id="filterStatus" class="form-select form-select-sm">
                                <option value="all">Todos</option>
                                <option value="hoje">Hoje</option>
                                <option value="futuros">Futuros</option>
                                <option value="passados">Passados</option>
                                <option value="esta_semana">Esta Semana</option>
                                <option value="este_mes">Este Mês</option>
                            </select>
                        </div>

                        <!-- Período -->
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">Período</label>
                            <select name="periodo" id="filterPeriodo" class="form-select form-select-sm">
                                <option value="tudo">Tudo</option>
                                <option value="hoje">Hoje</option>
                                <option value="amanha">Amanhã</option>
                                <option value="proximo_7">Próximos 7 dias</option>
                                <option value="proximo_15">Próximos 15 dias</option>
                                <option value="proximo_mes">Próximo mês</option>
                                <option value="intervalo">Intervalo</option>
                                <option value="especifico">Específico</option>
                            </select>
                        </div>

                        <!-- Container para datas dinâmicas -->
                        <div class="col-md-4" id="datasContainer">
                            <!-- Intervalo de datas -->
                            <div id="intervaloContainer" style="display: none;">
                                <label class="form-label small fw-bold">Intervalo de Datas</label>
                                <div class="row g-2">
                                    <div class="col">
                                        <input type="date" name="data_inicio" id="dataInicio" class="form-control form-control-sm">
                                    </div>
                                    <div class="col">
                                        <input type="date" name="data_fim" id="dataFim" class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>

                            <!-- Data específica -->
                            <div id="especificoContainer" style="display: none;">
                                <label class="form-label small fw-bold">Data Específica</label>
                                <input type="date" name="data_especifica" id="dataEspecifica" class="form-control form-control-sm">
                            </div>
                        </div>

                        <!-- Registros por página -->
                        <div class="col-md-2">
                            <label class="form-label small">Registros</label>
                            <select id="perPage" class="form-select form-select-sm">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100" selected>100</option>
                            </select>
                        </div>
                    </div>

                    <!-- Segunda linha - Buscas -->
                    <div class="row g-3">
                        <!-- Busca primária -->
                        <div class="col-12 col-xl-6">
                            <label class="form-label small">Busca Principal</label>
                            <div class="row g-2">
                                <div class="col-12 col-md-8 mb-2 mb-md-0">
                                    <div class="position-relative">
                                        <input
                                            id="searchInput"
                                            class="form-control form-control-sm pe-5"
                                            type="search"
                                            name="q"
                                            placeholder="Buscar em todas as colunas"
                                        >
                                        <span class="fas fa-search position-absolute top-50 end-0 translate-middle-y me-3 text-muted"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <select name="search_field" id="searchField" class="form-select form-select-sm">
                                        <option value="">Todas as Colunas</option>
                                        <option value="nome">Nome</option>
                                        <option value="local">Local</option>
                                        <option value="cidade">Cidade</option>
                                        <option value="uf">UF</option>
                                        <option value="artista">Artista</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Busca secundária -->
                        <div class="col-12 col-xl-6">
                            <label class="form-label small">Busca Secundária (opcional)</label>
                            <div class="row g-2">
                                <div class="col-12 col-md-8 mb-2 mb-md-0">
                                    <div class="position-relative">
                                        <input
                                            id="searchInput2"
                                            class="form-control form-control-sm pe-5"
                                            type="search"
                                            name="q2"
                                            placeholder="Segundo filtro (opcional)"
                                        >
                                        <span class="fas fa-search position-absolute top-50 end-0 translate-middle-y me-3 text-muted"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <select name="search_field2" id="searchField2" class="form-select form-select-sm">
                                        <option value="">Selecione</option>
                                        <option value="nome">Nome</option>
                                        <option value="local">Local</option>
                                        <option value="cidade">Cidade</option>
                                        <option value="uf">UF</option>
                                        <option value="artista">Artista</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Botões de ação -->
                    <div class="row mt-3">
                        <div class="col-12 text-end">
                            <button type="button" id="btnLimparFiltros" class="btn btn-outline-secondary btn-sm">
                                <span class="fas fa-times me-1"></span>Limpar
                            </button>
                            <button type="button" id="btnAplicarFiltros" class="btn btn-primary btn-sm">
                                <span class="fas fa-search me-1"></span>Aplicar Filtros
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Tabela -->
        <div class="card">
            <div class="card-body">
                <!-- Scrollbar superior -->
                <div class="table-scroll-top">
                    <div class="table-scroll-top-inner"></div>
                </div>

                <div class="table-responsive" id="tableContainer">
                    <table id="eventosTable" class="table table-sm fs-9 mb-0">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Nome</th>
                                <th>Artista</th>
                                <th>Data</th>
                                <th>Hora</th>
                                <th>Local</th>
                                <th>Cidade</th>
                                <th>UF</th>
                                <th>Levon</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Dados carregados via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Container para modais dinâmicos -->
<div id="modalContainer"></div>

<!-- Incluir modais -->
@include('eventos.partials.modal-delete')
@include('eventos.partials.modal-visualizar')

@endsection

@push('scripts-custom')
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <!-- Choices e Select2 -->
    <script src="{{ asset('vendors/choices/choices.min.js') }}"></script>
    <script src="{{ asset('vendors/select2/js/select2.min.js') }}"></script>

    @include('eventos.scripts.index-scripts')
@endpush