@extends('adminlte::page')

@section('title', 'Editar Evento')

@section('css')
    <style>
        .tab-pane { padding-top: 20px; }
        .img-preview { width: 150px; height: auto; border-radius: 8px; border: 1px solid #ddd; display: block; }
        .custom-file-label::after { content: "Buscar"; }
        .file-wrapper { transition: all 0.3s ease; }
    </style>
@stop

@section('content_header')
<div class="container-fluid">
    @include('components.alerts')
    <div class="row">
        <div class="col-12">
            @include('components.breadcrumbs', ['items' => ['Eventos' => 'events', 'Editar' => 'active']])
        </div>
    </div>
    <div class="row align-items-center justify-content-between mt-2">
        <div class="col-auto">
            <h1><i class="fas fa-edit mr-2 text-primary"></i>Editar: {{ $evento->name }}</h1>
        </div>
    </div>
</div>
@stop

@section('content')
<div class="container-fluid">
    <form action="{{ route('eventos.update', $evento->id) }}" method="POST" enctype="multipart/form-data" id="eventEditForm">
        @csrf
        @method('PUT')
        
        <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>
                    <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#neocom">Categorización Neocom</a></li>
                </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', $evento->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 Asignado</label>
                                <select name="id_usuario" class="form-control select2" data-placeholder="Seleccione responsable...">
                                    @foreach(\App\Models\User::all() as $user)
                                        <option value="{{ $user->id }}" {{ $evento->id_usuario == $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', $evento->descripcion) !!}</textarea>
                            </div>

                            <div class="col-md-6 form-group">
                                <label>Imagen Destacada Actual</label>
                                @php $imgPrincipal = $evento->archivos()->where('file_type', 'image')->first(); @endphp
                                @if($imgPrincipal)
                                    <div id="wrapper-file-{{ $imgPrincipal->id }}" class="mb-2 p-2 border rounded bg-light file-wrapper" style="width: fit-content;">
                                        <img src="{{ asset('storage/'.$imgPrincipal->image_path) }}" class="img-preview shadow-sm mb-2">
                                        <button type="button" class="btn btn-danger btn-xs btn-block btn-delete-resource" data-id="{{ $imgPrincipal->id }}">
                                            <i class="fas fa-trash-alt mr-1"></i> Eliminar para cambiar
                                        </button>
                                    </div>
                                @endif
                                <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">Subir nueva imagen...</label>
                                </div>
                            </div>

                            <div class="col-md-6 form-group">
                                <label>Enlace Externo</label>
                                <input type="url" name="enlace_externo" class="form-control" value="{{ old('enlace_externo', $evento->enlace_externo) }}" placeholder="Ej: https://www.sierranortemadrid.org/evento/festival-sierra-2024">
                            </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', $evento->start_date ? $evento->start_date->format('Y-m-d\TH:i') : '') }}" required>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Fecha y Hora de Fin</label>
                                <input type="datetime-local" name="end_date" class="form-control" 
                                       value="{{ old('end_date', $evento->end_date ? $evento->end_date->format('Y-m-d\TH:i') : '') }}">
                            </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 }}" {{ $evento->location == $loc->id ? 'selected' : '' }}>
                                            {{ $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 }}" {{ $evento->organizer == $org->id ? 'selected' : '' }}>
                                            {{ $org->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 form-group">
                                <label>Dirección Física / Localización Exacta</label>
                                <input type="text" name="direccion" class="form-control" value="{{ old('direccion', $evento->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[]" multiple="multiple" class="form-control select2" data-placeholder="Seleccione pueblos...">
                                    <option value=""></option>
                                    @foreach($pueblosNeocom as $id => $nombre)
                                        <option value="{{ $id }}" {{ in_array($id, $evento->pueblo_neocom_array) ? 'selected' : '' }}>
                                            {{ $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...">
                                    @php $catNeocomSaved = $evento->categoria_neocom_array; @endphp
                                    @foreach($opcionesNeocom as $id => $nombre)
                                        <option value="{{ $id }}" {{ in_array($id, $catNeocomSaved) ? 'selected' : '' }}>
                                            {{ $nombre }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="card-footer">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <a href="{{ route('eventos.index') }}" class="btn btn-default shadow-sm">Cancelar</a>
                    </div>
                    <div class="col-md-6 text-right">
                        <div class="input-group">
                            <input type="text" name="panel_info" required class="form-control" 
                                   placeholder="¿Qué has modificado? (Ej: Cambio de fecha)">
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-primary shadow-sm">
                                    <i class="fas fa-sync-alt mr-1"></i> Actualizar Evento
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@stop

@section('js')
<script>
    $(document).ready(function () {
        // Inicializar Select2
        $('.select2').select2({ width: '100%', placeholder: "Seleccione opciones..." });

        // Summernote
        if($.isFunction($.fn.summernote)) {
            $('.summernote').summernote({ height: 200, lang: 'es-ES' });
        }

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

        // Eliminar archivos vía AJAX
        $(document).on('click', '.btn-delete-resource', function() {
            const resourceId = $(this).data('id');
            if(confirm('¿Seguro que quieres eliminar esta imagen?')) {
                $.post(`/events/archivo/${resourceId}/eliminar`, { 
                    _token: "{{ csrf_token() }}",
                    _method: "DELETE" 
                }, function(res) {
                    if(res.success) {
                        $(`#wrapper-file-${resourceId}`).fadeOut(function() { $(this).remove(); });
                    }
                });
            }
        });

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