@extends('layouts.admin')

@section('title')
    @lang('translation.Editar Cancha')
@endsection

@section('css')
    <!-- Dropzone css -->
    <link href="{{ URL::asset('build/libs/dropzone/min/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Select2 -->
    <link href="{{ URL::asset('build/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/select2/css/select2-bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            <a href="{{ route('admin.canchas.index') }}">Canchas</a>
        @endslot
        @slot('title')
            Editar: {{ $cancha->nombre }}
        @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h4 class="card-title mb-0">Editar Cancha</h4>
                        </div>
                        <div class="col-auto">
                            <a href="{{ route('admin.canchas.show', $cancha) }}" class="btn btn-info btn-sm">
                                <i class="bx bx-show me-1"></i> Ver Detalles
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.canchas.update', $cancha) }}" method="POST" enctype="multipart/form-data" id="form-cancha">
                        @csrf
                        @method('PUT')
                        
                        <div class="row">
                            <!-- Información básica -->
                            <div class="col-lg-8">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">Información Básica</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="nombre" class="form-label">Nombre de la Cancha <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control @error('nombre') is-invalid @enderror" 
                                                           id="nombre" name="nombre" value="{{ old('nombre', $cancha->nombre) }}" 
                                                           placeholder="Ej: Cancha Principal">
                                                    @error('nombre')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="categoria_id" class="form-label">Categoría <span class="text-danger">*</span></label>
                                                    <select class="form-select @error('categoria_id') is-invalid @enderror" 
                                                            id="categoria_id" name="categoria_id">
                                                        <option value="">Seleccionar categoría</option>
                                                        @foreach($categorias as $categoria)
                                                            <option value="{{ $categoria->id }}" 
                                                                    {{ old('categoria_id', $cancha->categoria_id) == $categoria->id ? 'selected' : '' }}>
                                                                {{ $categoria->nombre }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('categoria_id')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="propietario_id" class="form-label">Propietario <span class="text-danger">*</span></label>
                                                    <select class="form-select select2 @error('propietario_id') is-invalid @enderror" 
                                                            id="propietario_id" name="propietario_id">
                                                        <option value="">Seleccionar propietario</option>
                                                        @foreach($propietarios as $propietario)
                                                            <option value="{{ $propietario->id }}" 
                                                                    {{ old('propietario_id', $cancha->propietario_id) == $propietario->id ? 'selected' : '' }}>
                                                                {{ $propietario->name }} - {{ $propietario->email }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('propietario_id')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="capacidad" class="form-label">Capacidad (personas) <span class="text-danger">*</span></label>
                                                    <input type="number" class="form-control @error('capacidad') is-invalid @enderror" 
                                                           id="capacidad" name="capacidad" value="{{ old('capacidad', $cancha->capacidad) }}" 
                                                           min="1" placeholder="Ej: 22">
                                                    @error('capacidad')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="descripcion" class="form-label">Descripción</label>
                                            <textarea class="form-control @error('descripcion') is-invalid @enderror" 
                                                      id="descripcion" name="descripcion" rows="4" 
                                                      placeholder="Descripción de la cancha, características especiales, etc.">{{ old('descripcion', $cancha->descripcion) }}</textarea>
                                            @error('descripcion')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label for="direccion" class="form-label">Dirección <span class="text-danger">*</span></label>
                                            <textarea class="form-control @error('direccion') is-invalid @enderror" 
                                                      id="direccion" name="direccion" rows="2" 
                                                      placeholder="Dirección completa o enlace de Google Maps">{{ old('direccion', $cancha->direccion) }}</textarea>
                                            <small class="text-muted">Puedes pegar un enlace de Google Maps (se detectarán las coordenadas automáticamente).</small>
                                            @error('direccion')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="precio_por_hora" class="form-label">Precio por Hora ($) <span class="text-danger">*</span></label>
                                                    <input type="number" class="form-control @error('precio_por_hora') is-invalid @enderror" 
                                                           id="precio_por_hora" name="precio_por_hora" value="{{ old('precio_por_hora', $cancha->precio_por_hora) }}" 
                                                           min="0" step="0.01" placeholder="Ej: 25000">
                                                    @error('precio_por_hora')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="estado" class="form-label">Estado <span class="text-danger">*</span></label>
                                                    <select class="form-select @error('estado') is-invalid @enderror" 
                                                            id="estado" name="estado">
                                                        <option value="activa" {{ old('estado', $cancha->estado) == 'activa' ? 'selected' : '' }}>Activa</option>
                                                        <option value="inactiva" {{ old('estado', $cancha->estado) == 'inactiva' ? 'selected' : '' }}>Inactiva</option>
                                                        <option value="mantenimiento" {{ old('estado', $cancha->estado) == 'mantenimiento' ? 'selected' : '' }}>Mantenimiento</option>
                                                    </select>
                                                    @error('estado')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Características adicionales -->
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">Características</h5>
                                    </div>
                                    <div class="card-body">
                                        @php
                                            $caracteristicas = $cancha->caracteristicas ?? [];
                                            // Asegurar que sea un array
                                            if (is_string($caracteristicas)) {
                                                $caracteristicas = json_decode($caracteristicas, true) ?? [];
                                            }
                                            $caracteristicasActuales = old('caracteristicas', $caracteristicas);
                                        @endphp
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-check mb-3">
                                                    <input class="form-check-input" type="checkbox" 
                                                           id="techado" name="caracteristicas[]" value="techado"
                                                           {{ in_array('techado', $caracteristicasActuales) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="techado">
                                                        Techado
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-check mb-3">
                                                    <input class="form-check-input" type="checkbox" 
                                                           id="iluminacion" name="caracteristicas[]" value="iluminacion"
                                                           {{ in_array('iluminacion', $caracteristicasActuales) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="iluminacion">
                                                        Iluminación
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-check mb-3">
                                                    <input class="form-check-input" type="checkbox" 
                                                           id="vestuarios" name="caracteristicas[]" value="vestuarios"
                                                           {{ in_array('vestuarios', $caracteristicasActuales) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="vestuarios">
                                                        Vestuarios
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-check mb-3">
                                                    <input class="form-check-input" type="checkbox" 
                                                           id="estacionamiento" name="caracteristicas[]" value="estacionamiento"
                                                           {{ in_array('estacionamiento', $caracteristicasActuales) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="estacionamiento">
                                                        Estacionamiento
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-check mb-3">
                                                    <input class="form-check-input" type="checkbox" 
                                                           id="cafeteria" name="caracteristicas[]" value="cafeteria"
                                                           {{ in_array('cafeteria', $caracteristicasActuales) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="cafeteria">
                                                        Cafetería
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-check mb-3">
                                                    <input class="form-check-input" type="checkbox" 
                                                           id="wifi" name="caracteristicas[]" value="wifi"
                                                           {{ in_array('wifi', $caracteristicasActuales) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="wifi">
                                                        WiFi
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Imágenes -->
                            <div class="col-lg-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">Imágenes</h5>
                                    </div>
                                    <div class="card-body">
                                        <!-- Imagen principal actual -->
                                        @if($cancha->imagen_principal)
                                            <div class="mb-3" id="imagen-principal-container">
                                                <label class="form-label">Imagen Principal Actual</label>
                                                <div class="position-relative">
                                                    <img src="{{ Storage::url($cancha->imagen_principal) }}" 
                                                         class="img-fluid rounded" 
                                                         style="max-height: 200px; width: 100%; object-fit: cover;">
                                                    <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-2" 
                                                            onclick="eliminarImagenPrincipal()">
                                                        <i class="bx bx-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        @endif

                                        <div class="mb-3">
                                            <label for="imagen_principal" class="form-label">
                                                {{ $cancha->imagen_principal ? 'Cambiar Imagen Principal' : 'Imagen Principal' }}
                                            </label>
                                            <input type="file" class="form-control @error('imagen_principal') is-invalid @enderror" 
                                                   id="imagen_principal" name="imagen_principal" accept="image/*">
                                            @error('imagen_principal')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <div class="form-text">Tamaño máximo: 2MB. Formatos: JPG, PNG, WEBP</div>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Vista Previa Nueva Imagen</label>
                                            <div id="preview-imagen-principal" class="border rounded p-3 text-center" style="min-height: 150px; display: none;">
                                            </div>
                                        </div>

                                        <!-- Imágenes adicionales actuales -->
                                        @if($cancha->galeria_imagenes && is_array($cancha->galeria_imagenes) && count($cancha->galeria_imagenes) > 0)
                                            <div class="mb-3">
                                                <label class="form-label">Imágenes Adicionales Actuales</label>
                                                <div class="row" id="imagenes-actuales">
                                                    @foreach($cancha->galeria_imagenes as $index => $imagen)
                                                        <div class="col-6 mb-2" id="imagen-actual-{{ $index }}">
                                                            <div class="position-relative">
                                                                <img src="{{ Storage::url($imagen) }}" 
                                                                     class="img-fluid rounded" 
                                                                     style="height: 80px; width: 100%; object-fit: cover;">
                                                                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 btn-eliminar-imagen" 
                                                                        data-index="{{ $index }}" data-imagen="{{ $imagen }}">
                                                                    <i class="bx bx-x" style="font-size: 12px;"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif

                                        <div class="mb-3">
                                            <label for="imagenes_adicionales" class="form-label">Agregar Más Imágenes</label>
                                            <input type="file" class="form-control @error('imagenes_adicionales.*') is-invalid @enderror" 
                                                   id="imagenes_adicionales" name="imagenes_adicionales[]" 
                                                   accept="image/*" multiple>
                                            @error('imagenes_adicionales.*')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <div class="form-text">Puedes seleccionar múltiples imágenes (máx. 5 total)</div>
                                        </div>

                                        <div id="preview-imagenes-adicionales" class="row"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('admin.canchas.show', $cancha) }}" class="btn btn-secondary">
                                        <i class="bx bx-x me-1"></i> Cancelar
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bx bx-save me-1"></i> Actualizar Cancha
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Campos ocultos para eliminar imágenes -->
                        <input type="hidden" name="eliminar_imagen_principal" id="eliminar_imagen_principal" value="0">
                        <input type="hidden" name="eliminar_imagenes_adicionales" id="eliminar_imagenes_adicionales" value="">
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- Select2 -->
    <script src="{{ URL::asset('build/libs/select2/js/select2.min.js') }}"></script>
    
    <!-- Script de funciones globales - SE EJECUTA INMEDIATAMENTE -->
    <script>
        console.log('🚀 Inicializando sistema de eliminación de imágenes...');
        
        // Variable para almacenar imágenes a eliminar
        const imagenesAEliminar = [];
    </script>

    <!-- Script de inicialización que espera al DOM -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🚀 DOM cargado - inicializando funcionalidades');
            
            // Inicializar Select2 solo si está disponible
            if (typeof $ !== 'undefined' && $.fn && $.fn.select2) {
                $('.select2').select2({
                    theme: 'bootstrap4',
                    placeholder: 'Seleccionar...',
                    allowClear: true
                });
                console.log('✅ Select2 inicializado');
            }

            // Delegación de eventos para eliminar imagen principal
            document.addEventListener('click', function(e) {
                if (e.target.closest('.btn-eliminar-principal')) {
                    e.preventDefault();
                    console.log('🗑️ Eliminando imagen principal...');
                    
                    if (confirm('¿Está seguro que desea eliminar la imagen principal?')) {
                        document.getElementById('eliminar_imagen_principal').value = '1';
                        var container = document.getElementById('imagen-principal-container');
                        if (container) {
                            container.style.display = 'none';
                            console.log('✅ Imagen principal ocultada');
                        }
                        
                        // Mostrar mensaje de confirmación
                        var alert = document.createElement('div');
                        alert.className = 'alert alert-warning alert-dismissible fade show mt-2';
                        alert.innerHTML = '<i class="bx bx-info-circle me-2"></i> La imagen principal será eliminada al guardar los cambios.';
                        
                        if (container && container.parentNode) {
                            container.parentNode.insertBefore(alert, container.nextSibling);
                        }
                        
                        console.log('✅ Imagen principal marcada para eliminación');
                    }
                }
            });

            // Delegación de eventos para eliminar imágenes adicionales
            document.addEventListener('click', function(e) {
                if (e.target.closest('.btn-eliminar-imagen')) {
                    e.preventDefault();
                    var button = e.target.closest('.btn-eliminar-imagen');
                    var index = button.getAttribute('data-index');
                    var imagen = button.getAttribute('data-imagen');
                    
                    console.log('🗑️ Eliminando imagen adicional:', index, imagen);
                    
                    if (confirm('¿Está seguro que desea eliminar esta imagen?')) {
                        // Agregar imagen al array de eliminación
                        imagenesAEliminar.push(imagen);
                        
                        // Actualizar campo oculto
                        var hiddenField = document.getElementById('eliminar_imagenes_adicionales');
                        if (hiddenField) {
                            hiddenField.value = JSON.stringify(imagenesAEliminar);
                            console.log('✅ Campo oculto actualizado:', hiddenField.value);
                        }
                        
                        // Ocultar el contenedor de la imagen con animación
                        var container = document.getElementById('imagen-actual-' + index);
                        if (container) {
                            container.style.transition = 'opacity 0.3s ease';
                            container.style.opacity = '0';
                            setTimeout(function() {
                                container.style.display = 'none';
                            }, 300);
                            console.log('✅ Imagen ocultada:', 'imagen-actual-' + index);
                        }
                        
                        console.log('✅ Imagen adicional marcada para eliminación:', imagen);
                        console.log('📝 Array actual:', imagenesAEliminar);
                    }
                }
            });

            // Preview imagen principal
            var imagenPrincipalInput = document.getElementById('imagen_principal');
            if (imagenPrincipalInput) {
                imagenPrincipalInput.addEventListener('change', function() {
                    var file = this.files[0];
                    var preview = document.getElementById('preview-imagen-principal');
                    
                    if (file) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            preview.innerHTML = '<img src="' + e.target.result + '" class="img-fluid rounded" style="max-height: 150px;">';
                            preview.style.display = 'block';
                        };
                        reader.readAsDataURL(file);
                    } else {
                        preview.style.display = 'none';
                    }
                });
            }

            // Preview imágenes adicionales
            var imagenesAdicionalesInput = document.getElementById('imagenes_adicionales');
            if (imagenesAdicionalesInput) {
                imagenesAdicionalesInput.addEventListener('change', function() {
                    var files = this.files;
                    var preview = document.getElementById('preview-imagenes-adicionales');
                    preview.innerHTML = '';
                    
                    var imagenesActuales = document.querySelectorAll('#imagenes-actuales .col-6:not([style*="display: none"])').length;
                    var totalImagenes = imagenesActuales + files.length;
                    
                    if (totalImagenes > 5) {
                        alert('Máximo 5 imágenes adicionales permitidas en total');
                        this.value = '';
                        return;
                    }
                    
                    Array.from(files).forEach(function(file, index) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            var div = document.createElement('div');
                            div.className = 'col-6 mb-2';
                            div.innerHTML = '<img src="' + e.target.result + '" class="img-fluid rounded" style="height: 80px; width: 100%; object-fit: cover;"><small class="text-muted d-block">Nueva imagen</small>';
                            preview.appendChild(div);
                        };
                        reader.readAsDataURL(file);
                    });
                });
            }
            
            // Validación del formulario
            var form = document.getElementById('form-cancha');
            if (form) {
                form.addEventListener('submit', function(e) {
                    console.log('📝 Validando formulario...');
                    
                    var valid = true;
                    var requiredFields = ['nombre', 'categoria_id', 'propietario_id', 'capacidad', 'direccion', 'precio_por_hora'];
                    
                    requiredFields.forEach(function(field) {
                        var input = document.getElementById(field);
                        if (input && (!input.value || input.value.trim() === '')) {
                            input.classList.add('is-invalid');
                            valid = false;
                        } else if (input) {
                            input.classList.remove('is-invalid');
                        }
                    });
                    
                    if (!valid) {
                        e.preventDefault();
                        alert('Por favor complete todos los campos requeridos (marcados con *)');
                        return false;
                    }
                    
                    console.log('✅ Formulario válido - enviando...');
                    
                    // Mostrar indicador de carga
                    var submitBtn = document.querySelector('button[type="submit"]');
                    if (submitBtn) {
                        submitBtn.disabled = true;
                        submitBtn.innerHTML = '<i class="bx bx-loader-alt bx-spin me-1"></i> Actualizando...';
                    }
                    
                    return true;
                });
            }
            
            console.log('✅ Todas las funcionalidades inicializadas correctamente');
        });
    </script>
@endsection