@extends('adminlte::page')

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

@section('css')
    <style>
        .img-preview { width: 150px; height: 100px; object-fit: cover; border-radius: 5px; border: 1px solid #ddd; }
        .file-wrapper { transition: all 0.3s ease; }
        .btn-delete-resource { top: 5px; right: 5px; border-radius: 50%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; }
        .tab-pane { padding-top: 20px; }
    </style>
@stop

@section('content_header')
<div class="container-fluid">
    @include('components.alerts')
    <div class="row">
        <div class="col-12">
            @include('components.breadcrumbs', ['items' => ['Experiencias' => 'experiencias', 'Editar' => 'active']])
        </div>
    </div>
    <div class="row align-items-center justify-content-between mt-2">
        <div class="col-auto">
            <h1><i class="fas fa-map-marked-alt mr-2"></i>Editar Experiencia: {{ $experiencia->name }}</h1>
        </div>
    </div>
</div>
@stop

@section('content')
<div class="container-fluid">
    <form action="{{ route('experiencias.update', $experiencia->id) }}" method="POST" enctype="multipart/form-data">
        @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="expTab" role="tablist">
                    <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#general">Información Principal</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#detalles">Logística y Perfil</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#ubicacion">Ubicación y Contacto</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#taxonomias">Taxonomías y Relaciones</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#multimedia">Multimedia</a></li>
                </ul>
            </div>
            
            <div class="card-body">
                <div class="tab-content" id="expTabContent">
                    
                    {{-- TAB 1: INFORMACIÓN PRINCIPAL --}}
                    <div class="tab-pane fade show active" id="general" role="tabpanel">
                        <div class="row">
                            <div class="col-md-8 form-group">
                                <label>Nombre de la Experiencia *</label>
                                <input type="text" name="name" class="form-control" value="{!! old('name', $experiencia->name) !!}" required>
                            </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">
                                    @foreach($usuarios as $user)
                                        <option value="{{ $user->id }}" {{ $experiencia->id_usuario == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            @endif

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

                            <div class="col-md-4 form-group">
                                <label>Precio</label>
                                <input type="text" name="precio" class="form-control" value="{{ old('precio', $experiencia->precio) }}">
                            </div>
                            <div class="col-md-4 form-group">
                                <label>Duración</label>
                                <input type="text" name="duracion" class="form-control" value="{{ old('duracion', $experiencia->duracion) }}">
                            </div>
                            <div class="col-md-4 form-group">
                                <label>Proveedor</label>
                                <input type="text" name="proveedor" class="form-control" value="{{ old('proveedor', $experiencia->proveedor) }}">
                            </div>
                        </div>
                    </div>

                    {{-- TAB 2: LOGÍSTICA Y PERFIL --}}
                    <div class="tab-pane fade" id="detalles" role="tabpanel">
                        <div class="row">
                            <div class="col-md-6 form-group"><label>Incluye</label><textarea name="incluye" class="form-control summernote" rows="2">{!! old('incluye', $experiencia->incluye) !!}</textarea></div>
                            <div class="col-md-6 form-group"><label>Dónde</label><textarea name="donde" class="form-control summernote" rows="2">{!! old('donde', $experiencia->donde) !!}</textarea></div>
                            
                            <div class="col-md-4 form-group"><label>Dificultad</label><input type="text" name="dificultad" class="form-control" value="{{ old('dificultad', $experiencia->dificultad) }}"></div>
                            <div class="col-md-4 form-group"><label>Destinatarios</label><input type="text" name="destinatarios" class="form-control" value="{{ old('destinatarios', $experiencia->destinatarios) }}"></div>
                            <div class="col-md-4 form-group"><label>Época recomendada</label><input type="text" name="epoca" class="form-control" value="{{ old('epoca', $experiencia->epoca) }}"></div>
                            
                            <div class="col-12 form-group"><label>Otros detalles de interés</label><textarea name="otros" class="form-control summernote" rows="3">{!! old('otros', $experiencia->otros) !!}</textarea></div>
                        </div>
                    </div>

                    {{-- TAB 3: UBICACIÓN Y CONTACTO --}}
                    <div class="tab-pane fade" id="ubicacion" role="tabpanel">
                        <div class="row">
                            <div class="col-12 form-group"><label>Ubicación (Texto)</label><input type="text" name="ubicacion" class="form-control" value="{{ old('ubicacion', $experiencia->ubicacion) }}"></div>
                            <div class="col-md-6 form-group">
                                <label>Zona</label>
                                <select name="zona" id="select-zona" class="form-control select2">
                                    <option value="">Seleccione...</option>
                                    @foreach($zonas as $zona)
                                        <option value="{{ $zona->wp_id }}" {{ old('zona', $experiencia->zona) == $zona->wp_id ? 'selected' : '' }}>{{ $zona->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Pueblo</label>
                                <select name="pueblo" id="select-pueblo" class="form-control select2" data-selected="{{ old('pueblo', $experiencia->pueblo) }}">
                                    <option value="">Cargando...</option>
                                </select>
                            </div>
                            <div class="col-md-3 form-group"><label>Teléfono</label><input type="text" name="telefono" class="form-control" value="{{ old('telefono', $experiencia->telefono) }}"></div>
                            <div class="col-md-3 form-group"><label>Email</label><input type="email" name="mail" class="form-control" value="{{ old('mail', $experiencia->mail) }}"></div>
                            <div class="col-md-3 form-group"><label>Contacto</label><input type="text" name="contacto" class="form-control" value="{{ old('contacto', $experiencia->contacto) }}"></div>
                            <div class="col-md-3 form-group"><label>Web</label><input type="url" name="web" class="form-control" value="{{ old('web', $experiencia->web) }}"></div>
                            
                            <div class="col-md-12 form-group"><label>URL Reservas</label><input type="url" name="reservas" class="form-control" value="{{ old('reservas', $experiencia->reservas) }}"></div>

                            <!--<div class="col-md-3 form-group"><label>Facebook</label><input type="text" name="facebook" class="form-control" value="{{ old('facebook', $experiencia->facebook) }}"></div>
                            <div class="col-md-3 form-group"><label>X (Twitter)</label><input type="text" name="x" class="form-control" value="{{ old('x', $experiencia->x) }}"></div>
                            <div class="col-md-3 form-group"><label>LinkedIn</label><input type="text" name="linkedin" class="form-control" value="{{ old('linkedin', $experiencia->linkedin) }}"></div>
                            <div class="col-md-3 form-group"><label>Pinterest</label><input type="text" name="pinterest" class="form-control" value="{{ old('pinterest', $experiencia->pinterest) }}"></div>-->
                        </div>
                    </div>

                    {{-- TAB 4: TAXONOMÍAS --}}
                    <div class="tab-pane fade" id="taxonomias" role="tabpanel">
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>Tipos de Experiencia (múltiple)</label>
                                <select name="tipo_de_experiencia[]" class="form-control select2" multiple="multiple">
                                    @php $tipoSel = explode(',', $experiencia->tipo_de_experiencia); @endphp
                                    @foreach($tipos as $tipo)
                                        <option value="{{ $tipo->wp_id }}" {{ in_array($tipo->wp_id, $tipoSel) ? 'selected' : '' }}>{{ $tipo->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Temporadas (múltiple)</label>
                                <select name="temporada[]" class="form-control select2" multiple="multiple">
                                    @php $tempSel = explode(',', $experiencia->temporada); @endphp
                                    @foreach($temporadas as $temp)
                                        <option value="{{ $temp->wp_id }}" {{ in_array($temp->wp_id, $tempSel) ? 'selected' : '' }}>{{ $temp->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Tipos de Cliente (múltiple)</label>
                                <select name="tipo_de_cliente[]" class="form-control select2" multiple="multiple">
                                    @php $cliSel = explode(',', $experiencia->tipo_de_cliente); @endphp
                                    @foreach($clientes as $cli)
                                        <option value="{{ $cli->wp_id }}" {{ in_array($cli->wp_id, $cliSel) ? 'selected' : '' }}>{{ $cli->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <hr class="mt-4 mb-3">
                            @php
                                $hasRelaciones = count($alojamientos) || count($restaurantes) || count($empresas) || count($productores) || count($oficinas);
                            @endphp
                            @if($hasRelaciones)
                            <hr class="mt-4 mb-3">
                            <h5 class="w-100 mb-3" style="font-weight:600;">Relaciones</h5>
                            @if(count($alojamientos))
                            <div class="col-md-6 form-group">
                                <label>Alojamientos (múltiple)</label>
                                <select name="relacion_alojamientos[]" class="form-control select2" multiple="multiple" data-placeholder="Seleccionar alojamientos...">
                                    @php $relSel = $experiencia->relacion_alojamientos ? explode(',', $experiencia->relacion_alojamientos) : []; @endphp
                                    @foreach($alojamientos as $aloj)
                                        <option value="{{ $aloj->wp_id }}" {{ in_array($aloj->wp_id, $relSel) ? 'selected' : '' }}>{{ $aloj->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif
                            @if(count($restaurantes))
                            <div class="col-md-6 form-group">
                                <label>Restaurantes (múltiple)</label>
                                <select name="relacion_restaurantes[]" class="form-control select2" multiple="multiple" data-placeholder="Seleccionar restaurantes...">
                                    @php $relSel = $experiencia->relacion_restaurantes ? explode(',', $experiencia->relacion_restaurantes) : []; @endphp
                                    @foreach($restaurantes as $rest)
                                        <option value="{{ $rest->wp_id }}" {{ in_array($rest->wp_id, $relSel) ? 'selected' : '' }}>{{ $rest->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif
                            @if(count($empresas))
                            <div class="col-md-6 form-group">
                                <label>Empresas (múltiple)</label>
                                <select name="relacion_empresas[]" class="form-control select2" multiple="multiple" data-placeholder="Seleccionar empresas...">
                                    @php $relSel = $experiencia->relacion_empresas ? explode(',', $experiencia->relacion_empresas) : []; @endphp
                                    @foreach($empresas as $emp)
                                        <option value="{{ $emp->wp_id }}" {{ in_array($emp->wp_id, $relSel) ? 'selected' : '' }}>{{ $emp->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif
                            @if(count($productores))
                            <div class="col-md-6 form-group">
                                <label>Productores (múltiple)</label>
                                <select name="relacion_productores[]" class="form-control select2" multiple="multiple" data-placeholder="Seleccionar productores...">
                                    @php $relSel = $experiencia->relacion_productores ? explode(',', $experiencia->relacion_productores) : []; @endphp
                                    @foreach($productores as $prod)
                                        <option value="{{ $prod->wp_id }}" {{ in_array($prod->wp_id, $relSel) ? 'selected' : '' }}>{{ $prod->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif
                            @if(count($oficinas))
                            <div class="col-md-6 form-group">
                                <label>Oficinas de Turismo (múltiple)</label>
                                <select name="relacion_oficinas[]" class="form-control select2" multiple="multiple" data-placeholder="Seleccionar oficinas de turismo...">
                                    @php $relSel = $experiencia->relacion_oficinas ? explode(',', $experiencia->relacion_oficinas) : []; @endphp
                                    @foreach($oficinas as $ofi)
                                        <option value="{{ $ofi->wp_id }}" {{ in_array($ofi->wp_id, $relSel) ? 'selected' : '' }}>{{ $ofi->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif
                            @endif
                        </div>
                    </div>

                    {{-- TAB 5: MULTIMEDIA --}}
                    <div class="tab-pane fade" id="multimedia" role="tabpanel">
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>Imagen Destacada Actual</label>
                                @php $imgPrincipal = $experiencia->archivos()->where('file_type', 'image')->first(); @endphp
                                @if($imgPrincipal)
                                    <div id="wrapper-file-{{ $imgPrincipal->id }}" class="mb-3 border p-2 bg-light position-relative file-wrapper text-center">
                                        <img src="{{ asset('storage/'.$imgPrincipal->image_path) }}" class="img-preview shadow-sm">
                                        <button type="button" class="btn btn-danger btn-xs position-absolute btn-delete-resource" data-id="{{ $imgPrincipal->id }}" title="Eliminar imagen actual">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                @endif
                                <label>Subir Nueva Imagen</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">Reemplazar imagen...</label>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="card-footer row">
                <div class="col-md-3 form-group">
                    <a href="{{ route('experiencias.index') }}" class="btn btn-default shadow-sm">Cancelar</a>
                </div>
                <div class="col-md-9 form-group">
                    <div class="input-group">
                        <input type="text" name="panel_info" required class="form-control" placeholder="Indica los cambios que has efectuado para facilitar su verificación">
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-primary shadow-sm">
                                <i class="fas fa-sync mr-1"></i> Actualizar Experiencia
                            </button>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </form>
</div>
@stop

@section('js')
<script>
    $(document).ready(function () {
        $('.select2').select2({ width: '100%' });

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

        // Eliminar archivo mediante AJAX
        $(document).on('click', '.btn-delete-resource', function() {
            if(confirm('¿Seguro que deseas eliminar esta imagen?')) {
                const id = $(this).data('id');
                $.post(`/experiencias/archivo/${id}/eliminar`, { _token: "{{ csrf_token() }}" }, (res) => {
                    if(res.success) $(`#wrapper-file-${id}`).fadeOut();
                });
            }
        });

        // Lógica de carga de pueblos por zona
        const $szona = $('#select-zona'), $spueblo = $('#select-pueblo');
        function cargarPueblos(zId, sel = null) {
            if (!zId) return;
            $spueblo.empty().append('<option value="">Cargando...</option>').prop('disabled', true);
            $.get(`/api/pueblos/${zId}`, (data) => {
                $spueblo.empty().append('<option value="">Seleccione pueblo...</option>');
                $.each(data, (i, p) => {
                    $spueblo.append(`<option value="${p.wp_id}" ${sel == p.wp_id ? 'selected' : ''}>${p.name}</option>`);
                });
                $spueblo.prop('disabled', false);
            });
        }

        if($szona.val()) cargarPueblos($szona.val(), $spueblo.data('selected'));
        $szona.on('change', function() { cargarPueblos($(this).val()); });
    });
</script>
@stop