@extends('layouts.admin')

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

@section('css')
    <!-- Dropzone css -->
    <link href="{{ URL::asset('build/libs/dropzone/min/dropzone.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')
            Nueva Cancha
        @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Crear Nueva Cancha</h4>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.canchas.store') }}" method="POST" enctype="multipart/form-data" id="form-cancha" onsubmit="return validateForm()">
                        @csrf
                        <div id="validation-errors" class="alert alert-danger" style="display: none;"></div>
                        
                        <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') }}" 
                                                           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') == $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') == $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') }}" 
                                                           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') }}</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') }}</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="telefono" class="form-label">Teléfono</label>
                                                    <input type="text" class="form-control @error('telefono') is-invalid @enderror" 
                                                           id="telefono" name="telefono" value="{{ old('telefono') }}" 
                                                           placeholder="Ej: +56 9 1234 5678">
                                                    @error('telefono')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="email" class="form-label">Email</label>
                                                    <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                                           id="email" name="email" value="{{ old('email') }}" 
                                                           placeholder="contacto@cancha.com">
                                                    @error('email')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </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') }}" 
                                                           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', 'activa') == 'activa' ? 'selected' : '' }}>Activa</option>
                                                        <option value="inactiva" {{ old('estado') == 'inactiva' ? 'selected' : '' }}>Inactiva</option>
                                                        <option value="mantenimiento" {{ old('estado') == 'mantenimiento' ? 'selected' : '' }}>Mantenimiento</option>
                                                    </select>
                                                    @error('estado')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="horario_apertura" class="form-label">Horario de Apertura <span class="text-danger">*</span></label>
                                                    <select class="form-select @error('horario_apertura') is-invalid @enderror" 
                                                            id="horario_apertura" name="horario_apertura">
                                                        @for ($hour = 1; $hour <= 12; $hour++)
                                                            @foreach(['AM', 'PM'] as $meridiem)
                                                                @php
                                                                    $hour_padded = str_pad($hour, 2, '0', STR_PAD_LEFT);
                                                                    $time_12 = $hour_padded . ':00 ' . $meridiem;
                                                                    $time_24 = date('H:i', strtotime($time_12));
                                                                @endphp
                                                                <option value="{{ $time_24 }}" {{ old('horario_apertura', '06:00') == $time_24 ? 'selected' : '' }}>
                                                                    {{ $time_12 }}
                                                                </option>
                                                            @endforeach
                                                        @endfor
                                                    </select>
                                                    @error('horario_apertura')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="horario_cierre" class="form-label">Horario de Cierre <span class="text-danger">*</span></label>
                                                    <select class="form-select @error('horario_cierre') is-invalid @enderror" 
                                                            id="horario_cierre" name="horario_cierre">
                                                        @for ($hour = 1; $hour <= 12; $hour++)
                                                            @foreach(['AM', 'PM'] as $meridiem)
                                                                @php
                                                                    $hour_padded = str_pad($hour, 2, '0', STR_PAD_LEFT);
                                                                    $time_12 = $hour_padded . ':00 ' . $meridiem;
                                                                    $time_24 = date('H:i', strtotime($time_12));
                                                                @endphp
                                                                <option value="{{ $time_24 }}" {{ old('horario_cierre', '22:00') == $time_24 ? 'selected' : '' }}>
                                                                    {{ $time_12 }}
                                                                </option>
                                                            @endforeach
                                                        @endfor
                                                    </select>
                                                    @error('horario_cierre')
                                                        <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">
                                        <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', old('caracteristicas', [])) ? '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', old('caracteristicas', [])) ? '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', old('caracteristicas', [])) ? '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', old('caracteristicas', [])) ? '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', old('caracteristicas', [])) ? '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', old('caracteristicas', [])) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="wifi">
                                                        WiFi
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Servicios adicionales y reglas -->
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">Servicios y Reglas</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label class="form-label">Servicios Adicionales</label>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="checkbox" 
                                                               id="servicio_duchas" name="servicios_adicionales[]" value="duchas"
                                                               {{ in_array('duchas', old('servicios_adicionales', [])) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="servicio_duchas">
                                                            Duchas
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="checkbox" 
                                                               id="servicio_lockers" name="servicios_adicionales[]" value="lockers"
                                                               {{ in_array('lockers', old('servicios_adicionales', [])) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="servicio_lockers">
                                                            Lockers
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="checkbox" 
                                                               id="servicio_equipos" name="servicios_adicionales[]" value="alquiler_equipos"
                                                               {{ in_array('alquiler_equipos', old('servicios_adicionales', [])) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="servicio_equipos">
                                                            Alquiler de Equipos
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="checkbox" 
                                                               id="servicio_arbitro" name="servicios_adicionales[]" value="arbitro"
                                                               {{ in_array('arbitro', old('servicios_adicionales', [])) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="servicio_arbitro">
                                                            Árbitro
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="checkbox" 
                                                               id="servicio_seguridad" name="servicios_adicionales[]" value="seguridad"
                                                               {{ in_array('seguridad', old('servicios_adicionales', [])) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="servicio_seguridad">
                                                            Seguridad
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="reglas" class="form-label">Reglas de la Cancha</label>
                                            <textarea class="form-control @error('reglas') is-invalid @enderror" 
                                                      id="reglas" name="reglas" rows="4" 
                                                      placeholder="Reglas específicas de la cancha, horarios especiales, restricciones, etc.">{{ old('reglas') }}</textarea>
                                            @error('reglas')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </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">
                                        <div class="mb-3">
                                            <label for="imagen_principal" class="form-label">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</label>
                                            <div id="preview-imagen-principal" class="border rounded p-3 text-center" style="min-height: 200px;">
                                                <i class="bx bx-image text-muted" style="font-size: 3rem;"></i>
                                                <p class="text-muted mt-2">Selecciona una imagen para ver la vista previa</p>
                                            </div>
                                        </div>

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

                                        <div id="preview-galeria-imagenes" 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.index') }}" 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> Guardar Cancha
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function validateForm() {
            const requiredFields = [
                'nombre',
                'categoria_id',
                'capacidad',
                'direccion',
                'precio_por_hora',
                'propietario_id',
                'estado',
                'horario_apertura',
                'horario_cierre'
            ];

            const errors = [];
            
            // Validar campos requeridos
            requiredFields.forEach(field => {
                const element = document.getElementById(field);
                if (!element.value.trim()) {
                    errors.push(`El campo ${element.previousElementSibling.textContent.replace(' *', '')} es requerido.`);
                    element.classList.add('is-invalid');
                } else {
                    element.classList.remove('is-invalid');
                }
            });

            // Validar precio
            const precio = document.getElementById('precio_por_hora').value;
            if (precio && parseFloat(precio) <= 0) {
                errors.push('El precio por hora debe ser mayor a 0.');
            }

            // Validar capacidad
            const capacidad = document.getElementById('capacidad').value;
            if (capacidad && parseInt(capacidad) <= 0) {
                errors.push('La capacidad debe ser mayor a 0.');
            }

            // Validar email si está presente
            const email = document.getElementById('email').value;
            if (email && !email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
                errors.push('El formato del email no es válido.');
            }

            // Mostrar errores si existen
            const errorDiv = document.getElementById('validation-errors');
            if (errors.length > 0) {
                errorDiv.innerHTML = errors.map(error => `<div>${error}</div>`).join('');
                errorDiv.style.display = 'block';
                return false;
            }

            errorDiv.style.display = 'none';
            return true;
        }

        $(document).ready(function() {
            // Inicializar Select2
            $('.select2').select2({
                theme: 'bootstrap-5',
                placeholder: 'Seleccionar...',
                allowClear: true
            });

            // Preview imagen principal
            $('#imagen_principal').change(function() {
                const file = this.files[0];
                const preview = $('#preview-imagen-principal');
                
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        preview.html(`
                            <img src="${e.target.result}" class="img-fluid rounded" style="max-height: 200px;">
                        `);
                    };
                    reader.readAsDataURL(file);
                } else {
                    preview.html(`
                        <i class="bx bx-image text-muted" style="font-size: 3rem;"></i>
                    `);
                }
            });

            // Limpiar validación al cambiar valor
            $('input, select, textarea').on('change', function() {
                $(this).removeClass('is-invalid');
                if ($(this).val().trim()) {
                    $(this).addClass('is-valid');
                } else {
                    $(this).removeClass('is-valid');
                }
            });
        });
    </script>
@endsection