@extends('adminlte::page')

@section('title', 'Añadir Evento')

@section('css')
    <style>
        .tab-pane { padding-top: 20px; }
        .custom-file-label::after { content: "Buscar"; }
    </style>
@stop

@section('content_header')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            @include('components.breadcrumbs', ['items' => ['Eventos' => 'eventos', 'Crear' => 'active']])
        </div>
    </div>
    <div class="row align-items-center justify-content-between mt-2">
        <div class="col-auto">
            <h1><i class="fas fa-calendar-plus mr-2"></i>Nuevo Evento</h1>
        </div>
    </div>
</div>
@stop

@section('content')
<div class="container-fluid">
    @include('components.alerts')

    <form action="{{ route('eventos.store') }}" method="POST" enctype="multipart/form-data" id="eventForm">
        @csrf
        
        <div class="card card-primary card-outline card-tabs">
            <div class="card-header p-0 pt-1 border-bottom-0">
                <ul class="nav nav-tabs" id="eventTab" role="tablist">
                    <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#general">Información General</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#horarios">Fechas y Horarios</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#maestros">Localización y Organizadores</a></li>
                    @if(auth()->user()->isAdmin())
                    <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#neocom">Categorización Neocom</a></li>
                    @endif
                </ul>
            </div>
            
            <div class="card-body">
                <div class="tab-content" id="eventTabContent">
                    
                    {{-- TAB 1: GENERAL --}}
                    <div class="tab-pane fade show active" id="general" role="tabpanel">
                        <div class="row">
                            <div class="col-md-8 form-group">
                                <label>Título del Evento *</label>
                                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required placeholder="Ej: Festival de la Sierra 2024">
                            </div>
                            
                            @if(auth()->user()->isAdmin())
                            <div class="col-md-4 form-group">
                                <label class="text-danger">Responsable (Admin)</label>
                                <select name="id_usuario" class="form-control select2" data-placeholder="Seleccione responsable...">
                                    @foreach(\App\Models\User::all() as $user)
                                        <option value="{{ $user->id }}" {{ auth()->id() == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            @endif

                            <div class="col-12 form-group">
                                <label>Descripción del Evento</label>
                                <textarea name="descripcion" class="form-control summernote" rows="5">{{ old('descripcion') }}</textarea>
                            </div>

                            <div class="col-md-6 form-group">
                                <label>Imagen Destacada</label>
                                <div class="custom-file">
                                    <input type="file" name="image" class="custom-file-input" id="image_main" accept="image/*">
                                    <label class="custom-file-label" for="image_main">Elegir imagen...</label>
                                </div>
                                <small class="text-muted">Esta imagen aparecerá como principal en WordPress.</small>
                            </div>

                            <div class="col-md-6 form-group">
                                <label>Enlace Externo (Opcional)</label>
                                <input type="url" name="enlace_externo" class="form-control" placeholder="https://..." value="{{ old('enlace_externo') }}">
                            </div>
                        </div>
                    </div>

                    {{-- TAB 2: FECHAS Y HORARIOS --}}
                    <div class="tab-pane fade" id="horarios" role="tabpanel">
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>Fecha y Hora de Inicio *</label>
                                <input type="datetime-local" name="start_date" class="form-control @error('start_date') is-invalid @enderror" value="{{ old('start_date') }}" required placehlolder="Ej: 2024-08-15 18:00">
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Fecha y Hora de Fin (Opcional)</label>
                                <input type="datetime-local" name="end_date" class="form-control" value="{{ old('end_date') }}" placeholder="Ej: 2024-08-15 23:00">
                            </div>
                            <div class="col-12 mt-2">
                                <div class="alert alert-info border-0 shadow-sm">
                                    <i class="fas fa-info-circle mr-2"></i>
                                    Si la fecha de fin es distinta a la de inicio, se generará automáticamente el texto <strong>"Del X al Y"</strong> en WordPress.
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- TAB 3: LOCALIZACIÓN Y ORGANIZADORES --}}
                    <div class="tab-pane fade" id="maestros" role="tabpanel">
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>Localización</label>
                                <select name="location" class="form-control select2" data-placeholder="Seleccione localización...">
                                    <option value="">-- Sin localización --</option>
                                    @foreach($locations as $loc)
                                        <option value="{{ $loc->id }}">{{ $loc->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Organizador</label>
                                <select name="organizer" class="form-control select2" data-placeholder="Seleccione organizador...">
                                    <option value="">-- Sin organizador --</option>
                                    @foreach($organizers as $org)
                                        <option value="{{ $org->id }}">{{ $org->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-12 form-group">
                                <label>Dirección Física / Texto Localización Exacta</label>
                                <input type="text" name="direccion" class="form-control" value="{{ old('direccion') }}" placeholder="Ej: Plaza Mayor, 1">
                            </div>
                        </div>
                    </div>

                    {{-- TAB 4: NEOCOM --}}
                    <div class="tab-pane fade" id="neocom" role="tabpanel">
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>Pueblo (Neocom)</label>
                                <select name="pueblo_neocom[]" class="form-control select2" multiple="multiple" data-placeholder="Seleccione pueblo...">
                                    <option value=""></option>
                                    @foreach($pueblosNeocom as $id => $nombre)
                                        <option value="{{ $id }}">{{ $nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Categorías (Opciones Neocom)</label>
                                <select name="categoria_neocom[]" class="form-control select2" multiple="multiple" data-placeholder="Seleccione categorías...">
                                    @foreach($opcionesNeocom as $id => $nombre)
                                        <option value="{{ $id }}">{{ $nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="card-footer">
                <button type="submit" class="btn btn-primary float-right">
                    <i class="fas fa-save mr-1"></i> Guardar Evento
                </button>
                <a href="{{ route('eventos.index') }}" class="btn btn-default">Cancelar</a>
                
                <input type="hidden" name="panel_info" value="Nuevo evento creado desde el panel.">
                <input type="hidden" name="active" value="1">
            </div>
        </div>
    </form>
</div>
@stop

@section('js')
<script>
    $(document).ready(function () {
        // Inicializar Select2 con soporte para múltiples
        $('.select2').select2({
            width: '100%',
            allowClear: true
        });

        // Mostrar nombre de archivo seleccionado
        $(".custom-file-input").on("change", function() {
            var fileName = $(this).val().split("\\").pop();
            $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
        });

        

        $('.summernote[name="descripcion"]').summernote({
            placeholder: 'Longitud recomendada: 600–1.200 caracteres',
            height: 150
        });
    });
</script>
@stop