@extends('layouts.app')

@section('title', 'Gestionar Proyecto')
@section('header', 'Gestión de Proyecto')

@section('content')
<div class="container-fluid">
    {{-- Breadcrumb --}}
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('projects.index') }}" class="text-decoration-none">Proyectos</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ $project->name }}</li>
        </ol>
    </nav>

    <div class="row">
        {{-- Columna izquierda: Información básica --}}
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-body">
                    <h6 class="fw-semibold mb-3">
                        <i class="fas fa-info-circle me-2" style="color: var(--carza-primary);"></i>
                        Información Básica
                    </h6>

                    {{-- Imagen del proyecto --}}
                    <div class="text-center mb-4">
                        <div class="position-relative d-inline-block">
                            <img src="{{ $project->main_image ? Storage::url($project->main_image) : asset('images/no-photo.jpg') }}" 
                                 alt="{{ $project->name }}"
                                 class="img-fluid rounded border"
                                 style="max-height: 200px; width: 100%; object-fit: cover;"
                                 id="projectImage">
                            
                            <label for="imageUpload" class="btn btn-sm btn-outline-carza position-absolute bottom-0 end-0 mb-2 me-2" style="border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-camera"></i>
                                <input type="file" id="imageUpload" accept="image/*" style="display: none;" onchange="uploadImage(this)">
                            </label>
                        </div>
                    </div>

                    {{-- Formulario de información --}}
                    <form id="projectForm">
                        @csrf
                        @method('PUT')
                        
                        <div class="mb-3">
                            <label class="form-label">ID CAPI</label>
                            <input type="text" class="form-control" value="{{ $project->id_capi }}" readonly disabled>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Nombre del Proyecto</label>
                            <input type="text" 
                                   name="name" 
                                   class="form-control" 
                                   value="{{ $project->name }}"
                                   required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Ubicación (URL de Google Maps)</label>
                            <div class="location-input-group">
                                <input type="text" 
                                    name="location" 
                                    id="locationInput"
                                    class="form-control" 
                                    value="{{ $project->location }}"
                                    placeholder="Pega aquí la URL de Google Maps">
                                <button type="button" class="btn btn-outline-carza" onclick="processMapUrl()" title="Cargar mapa">
                                    <i class="fas fa-map-marked-alt"></i>
                                </button>
                                @if($project->location)
                                    @php
                                        preg_match('/@(-?\d+\.\d+),(-?\d+\.\d+)/', $project->location, $matches);
                                    @endphp
                                    @if(isset($matches[1]) && isset($matches[2]))
                                        <a href="https://www.openstreetmap.org/?mlat={{ $matches[1] }}&mlon={{ $matches[2] }}#map=15/{{ $matches[1] }}/{{ $matches[2] }}" 
                                        target="_blank" 
                                        class="btn btn-outline-dark" 
                                        title="Abrir en OpenStreetMap">
                                            <i class="fas fa-external-link-alt"></i>
                                        </a>
                                    @endif
                                @endif
                            </div>
                            
                            {{-- Contenedor del mapa --}}
                            <div id="mapContainer" class="map-container mt-2">
                                @if($project->location)
                                    @php
                                        // Intentar extraer coordenadas de la URL guardada
                                        preg_match('/@(-?\d+\.\d+),(-?\d+\.\d+)/', $project->location, $matches);
                                        $lat = $matches[1] ?? '';
                                        $lng = $matches[2] ?? '';
                                    @endphp
                                    @if($lat && $lng)
                                        <iframe 
                                            width="100%"
                                            height="100%"
                                            frameborder="0"
                                            style="border:0"
                                            src="https://www.openstreetmap.org/export/embed.html?bbox={{ $lng-0.01 }}%2C{{ $lat-0.01 }}%2C{{ $lng+0.01 }}%2C{{ $lat+0.01 }}&layer=mapnik&marker={{ $lat }}%2C{{ $lng }}">
                                        </iframe>
                                    @else
                                        <div class="d-flex align-items-center justify-content-center h-100 bg-light">
                                            <div class="text-center">
                                                <i class="fas fa-map-marked-alt fa-3x text-muted mb-2"></i>
                                                <p class="text-muted mb-0">URL no válida para mapa</p>
                                            </div>
                                        </div>
                                    @endif
                                @else
                                    <div class="d-flex align-items-center justify-content-center h-100 bg-light">
                                        <div class="text-center">
                                            <i class="fas fa-map-marked-alt fa-3x text-muted mb-2"></i>
                                            <p class="text-muted mb-0">Pega una URL de Google Maps para ver la ubicación</p>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            
                            <div class="map-help-text">
                                <i class="fas fa-info-circle"></i>
                                Ejemplo: https://www.google.com/maps/place/Mercado+Corona/@20.6779072,-103.3494025,17z
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Descripción</label>
                            <textarea name="description" 
                                      class="form-control" 
                                      rows="4">{{ $project->description }}</textarea>
                        </div>

                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       name="is_visible" 
                                       id="isVisible" 
                                       {{ $project->is_visible ? 'checked' : '' }}>
                                <label class="form-check-label" for="isVisible">
                                    Proyecto visible
                                </label>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       name="has_amenities" 
                                       id="hasAmenities" 
                                       {{ $project->has_amenities ? 'checked' : '' }}>
                                <label class="form-check-label" for="hasAmenities">
                                    Tiene amenidades
                                </label>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-carza w-100">
                            <i class="fas fa-save me-1"></i>
                            Guardar Cambios
                        </button>
                    </form>
                </div>
            </div>

            {{-- Estadísticas rápidas --}}
            <div class="card">
                <div class="card-body">
                    <h6 class="fw-semibold mb-3">
                        <i class="fas fa-chart-pie me-2" style="color: var(--carza-primary);"></i>
                        Estadísticas
                    </h6>
                    
                    <div class="mb-3">
                        <small class="text-muted d-block">ID CAPI</small>
                        <span class="fw-semibold">{{ $project->id_capi }}</span>
                    </div>
                    
                    <div class="mb-3">
                        <small class="text-muted d-block">Última sincronización</small>
                        <span class="fw-semibold">{{ $project->updated_at->format('d/m/Y H:i') }}</span>
                    </div>
                    
                    <div class="mb-3">
                        <small class="text-muted d-block">Total unidades</small>
                        <span class="fw-semibold">{{ $project->units_count ?? 0 }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Columna derecha: Pestañas --}}
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-tabs" id="projectTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" 
                                    id="amenities-tab" 
                                    data-bs-toggle="tab" 
                                    data-bs-target="#amenities" 
                                    type="button" 
                                    role="tab">
                                <i class="fas fa-swimming-pool me-1"></i>
                                Amenidades
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" 
                                    id="gallery-tab" 
                                    data-bs-toggle="tab" 
                                    data-bs-target="#gallery" 
                                    type="button" 
                                    role="tab">
                                <i class="fas fa-images me-1"></i>
                                Galería
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" 
                                    id="videos-tab" 
                                    data-bs-toggle="tab" 
                                    data-bs-target="#videos" 
                                    type="button" 
                                    role="tab">
                                <i class="fas fa-video me-1"></i>
                                Videos
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" 
                                    id="documents-tab" 
                                    data-bs-toggle="tab" 
                                    data-bs-target="#documents" 
                                    type="button" 
                                    role="tab">
                                <i class="fas fa-file-pdf me-1"></i>
                                Documentos
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content p-3" id="projectTabsContent">
                        {{-- Pestaña Amenidades --}}
                        <div class="tab-pane fade show active" id="amenities" role="tabpanel">
                            @include('projects.partials.amenities', ['amenities' => $project->amenities])
                        </div>

                        {{-- Pestaña Galería --}}
                        <div class="tab-pane fade" id="gallery" role="tabpanel">
                            @include('projects.partials.gallery', ['images' => $project->images])
                        </div>

                        {{-- Pestaña Videos --}}
                        <div class="tab-pane fade" id="videos" role="tabpanel">
                            @include('projects.partials.videos', ['videos' => $project->videos])
                        </div>

                        {{-- Pestaña Documentos --}}
                        <div class="tab-pane fade" id="documents" role="tabpanel">
                            @include('projects.partials.documents', ['documents' => $project->documents])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Manejar envío del formulario
    $('#projectForm').on('submit', function(e) {
        e.preventDefault();
        
        $.ajax({
            url: '{{ route("projects.update", $project) }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: response.message,
                        confirmButtonColor: '#862633',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            },
            error: function(xhr) {
                let message = 'Error al guardar';
                
                if (xhr.status === 422) {
                    // Errores de validación
                    const errors = xhr.responseJSON?.errors;
                    if (errors) {
                        // Tomar el primer error
                        const firstError = Object.values(errors)[0];
                        message = Array.isArray(firstError) ? firstError[0] : firstError;
                    } else {
                        message = xhr.responseJSON?.message || 'Error de validación';
                    }
                } else {
                    message = xhr.responseJSON?.message || 'Error al guardar';
                }
                
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: message,
                    confirmButtonColor: '#862633'
                });
            }
        });
    });

    // Subir imagen
    window.uploadImage = function(input) {
        const file = input.files[0];
        if (!file) return;
        
        const formData = new FormData();
        formData.append('image', file);
        formData.append('_token', '{{ csrf_token() }}');
        
        $.ajax({
            url: '{{ route("projects.upload-image", $project) }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    $('#projectImage').attr('src', response.path);
                    Swal.fire({
                        icon: 'success',
                        title: 'Imagen actualizada',
                        timer: 1500,
                        showConfirmButton: false
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'No se pudo subir la imagen',
                    confirmButtonColor: '#862633'
                });
            }
        });
    };

    window.updateMap = function() {
        const location = $('#locationInput').val();
        if (!location) {
            Swal.fire({
                icon: 'warning',
                title: 'Campo vacío',
                text: 'Ingresa una ubicación primero',
                confirmButtonColor: '#862633'
            });
            return;
        }

        let mapSrc = '';
        
        // Detectar si es URL de Google Maps
        if (location.includes('google.com/maps') || location.includes('goo.gl/maps')) {
            // Extraer coordenadas de la URL (esto es más complejo)
            Swal.fire({
                icon: 'info',
                title: 'URL detectada',
                text: 'Para URLs de Google Maps, usa mejor coordenadas directas',
                confirmButtonColor: '#862633'
            });
            return;
        } 
        // Detectar si son coordenadas
        else {
            const coords = location.replace(/\s/g, '').split(',');
            if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {
                // Usar el embed oficial de Google Maps
                mapSrc = `https://www.google.com/maps/embed/v1/place?key=TU_API_KEY&q=${coords[0]},${coords[1]}&zoom=15`;
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Formato inválido',
                    text: 'Ingresa coordenadas válidas (ej: 25.6866, -100.3161)',
                    confirmButtonColor: '#862633'
                });
                return;
            }
        }

        // Actualizar el mapa
        $('#mapContainer').html(`
            <iframe 
                width="100%"
                height="100%"
                frameborder="0" 
                style="border:0"
                src="${mapSrc}"
                allowfullscreen>
            </iframe>
        `);
    };

    // Procesar URL de Google Maps
    window.processMapUrl = function() {
        const url = $('#locationInput').val();
        if (!url) {
            Swal.fire({
                icon: 'warning',
                title: 'Campo vacío',
                text: 'Pega una URL de Google Maps primero',
                confirmButtonColor: '#862633'
            });
            return;
        }

        // Extraer coordenadas de la URL
        // Busca el patrón @lat,lng o /@lat,lng
        const regex = /[@\/](-?\d+\.\d+),(-?\d+\.\d+)/;
        const matches = url.match(regex);
        
        if (matches && matches.length >= 3) {
            const lat = matches[1];
            const lng = matches[2];
            
            // Guardar la URL original en el campo (para el formulario)
            // Pero mostrar el mapa con OpenStreetMap
            const mapSrc = `https://www.openstreetmap.org/export/embed.html?bbox=${parseFloat(lng)-0.01}%2C${parseFloat(lat)-0.01}%2C${parseFloat(lng)+0.01}%2C${parseFloat(lat)+0.01}&layer=mapnik&marker=${lat}%2C${lng}`;
            
            $('#mapContainer').html(`
                <iframe 
                    width="100%"
                    height="100%"
                    frameborder="0"
                    scrolling="no"
                    src="${mapSrc}">
                </iframe>
            `);
            
            // Mostrar mensaje de éxito
            Swal.fire({
                icon: 'success',
                title: 'Mapa cargado',
                text: 'Ubicación encontrada correctamente',
                timer: 1500,
                showConfirmButton: false
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'URL no válida',
                text: 'No se pudieron extraer las coordenadas de la URL',
                confirmButtonColor: '#862633'
            });
        }
    };

    // ===== AMENIDADES =====
    window.addAmenity = function() {
        $('#amenityModalTitle').text('Agregar Amenidad');
        $('#amenityId').val('');
        $('#amenityForm')[0].reset();
        $('#currentImageContainer').hide();
        new bootstrap.Modal(document.getElementById('amenityModal')).show();
    };

    window.editAmenity = function(id) {
        const row = $(`#amenity-${id}`);
        const name = row.find('h6').text();
        const description = row.find('p').text();
        const image = row.find('img').attr('src');
        
        $('#amenityModalTitle').text('Editar Amenidad');
        $('#amenityId').val(id);
        $('#amenityName').val(name);
        $('#amenityDescription').val(description);
        
        if (image) {
            $('#currentImage').attr('src', image);
            $('#currentImageContainer').show();
        } else {
            $('#currentImageContainer').hide();
        }
        
        new bootstrap.Modal(document.getElementById('amenityModal')).show();
    };

    window.deleteAmenity = function(id) {
        Swal.fire({
            title: '¿Eliminar amenidad?',
            text: 'Esta acción no se puede revertir',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#862633',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/amenities/${id}`,
                    method: 'DELETE',
                    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    success: function() {
                        $(`#amenity-${id}`).remove();
                        Swal.fire('Eliminado', 'La amenidad fue eliminada', 'success');
                    }
                });
            }
        });
    };

    $('#amenityForm').on('submit', function(e) {
        e.preventDefault();
        
        const id = $('#amenityId').val();
        const url = id ? `/amenities/${id}` : '{{ route("projects.amenities.store", $project) }}';
        const method = id ? 'PUT' : 'POST';
        
        const formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('_method', method);
        formData.append('name', $('#amenityName').val());
        formData.append('description', $('#amenityDescription').val());
        
        const imageFile = $('#amenityImage')[0].files[0];
        if (imageFile) {
            formData.append('image', imageFile);
        }
        
        $.ajax({
            url: url,
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#amenityModal').modal('hide');
                location.reload();
            },
            error: function(xhr) {
                Swal.fire('Error', xhr.responseJSON?.message || 'Error al guardar', 'error');
            }
        });
    });

    // ===== GALERÍA =====
    window.addImage = function() {
        $('#imageForm')[0].reset();
        new bootstrap.Modal(document.getElementById('imageModal')).show();
    };

    window.deleteImage = function(id) {
        Swal.fire({
            title: '¿Eliminar imagen?',
            text: 'Esta acción no se puede revertir',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#862633',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/images/${id}`,
                    method: 'DELETE',
                    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    success: function() {
                        $(`#gallery-${id}`).remove();
                        Swal.fire('Eliminada', 'La imagen fue eliminada', 'success');
                    }
                });
            }
        });
    };

    $('#imageForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('title', $('#imageTitle').val());
        formData.append('image', $('#imageFile')[0].files[0]);
        
        $.ajax({
            url: '{{ route("projects.images.store", $project) }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function() {
                $('#imageModal').modal('hide');
                location.reload();
            },
            error: function(xhr) {
                Swal.fire('Error', xhr.responseJSON?.message || 'Error al subir', 'error');
            }
        });
    });

    // ===== VIDEOS =====
    window.addVideo = function() {
        $('#videoForm')[0].reset();
        $('#videoPreview').hide();
        new bootstrap.Modal(document.getElementById('videoModal')).show();
    };

    window.deleteVideo = function(id) {
        Swal.fire({
            title: '¿Eliminar video?',
            text: 'Esta acción no se puede revertir',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#862633',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/videos/${id}`,
                    method: 'DELETE',
                    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    success: function() {
                        $(`#video-${id}`).remove();
                        Swal.fire('Eliminado', 'El video fue eliminado', 'success');
                    }
                });
            }
        });
    };

    // Vista previa del video
    $('#videoUrl').on('input', function() {
        const url = $(this).val();
        const videoId = extractYouTubeId(url);
        
        if (videoId) {
            $('#videoPreview iframe').attr('src', `https://www.youtube.com/embed/${videoId}`);
            $('#videoPreview').show();
        } else {
            $('#videoPreview').hide();
        }
    });

    function extractYouTubeId(url) {
        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
        const match = url.match(regExp);
        return (match && match[2].length === 11) ? match[2] : null;
    }

    $('#videoForm').on('submit', function(e) {
        e.preventDefault();
        
        $.ajax({
            url: '{{ route("projects.videos.store", $project) }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                title: $('#videoTitle').val(),
                url: $('#videoUrl').val()
            },
            success: function() {
                $('#videoModal').modal('hide');
                location.reload();
            },
            error: function(xhr) {
                Swal.fire('Error', xhr.responseJSON?.message || 'Error al guardar', 'error');
            }
        });
    });

    // ===== DOCUMENTOS =====
    window.addDocument = function() {
        $('#documentForm')[0].reset();
        new bootstrap.Modal(document.getElementById('documentModal')).show();
    };

    window.editDocument = function(id) {
        const name = $(`#document-${id} td:first`).text();
        $('#editDocumentId').val(id);
        $('#editDocumentName').val(name);
        new bootstrap.Modal(document.getElementById('editDocumentModal')).show();
    };

    window.deleteDocument = function(id) {
        Swal.fire({
            title: '¿Eliminar documento?',
            text: 'Esta acción no se puede revertir',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#862633',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/documents/${id}`,
                    method: 'DELETE',
                    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    success: function() {
                        $(`#document-${id}`).remove();
                        Swal.fire('Eliminado', 'El documento fue eliminado', 'success');
                    }
                });
            }
        });
    };

    $('#documentForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('name', $('#documentName').val());
        formData.append('file', $('#documentFile')[0].files[0]);
        
        $.ajax({
            url: '{{ route("projects.documents.store", $project) }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function() {
                $('#documentModal').modal('hide');
                location.reload();
            },
            error: function(xhr) {
                Swal.fire('Error', xhr.responseJSON?.message || 'Error al subir', 'error');
            }
        });
    });

    $('#editDocumentForm').on('submit', function(e) {
        e.preventDefault();
        
        const id = $('#editDocumentId').val();
        
        $.ajax({
            url: `/documents/${id}`,
            method: 'PUT',
            data: {
                _token: '{{ csrf_token() }}',
                name: $('#editDocumentName').val()
            },
            success: function() {
                $('#editDocumentModal').modal('hide');
                location.reload();
            },
            error: function(xhr) {
                Swal.fire('Error', xhr.responseJSON?.message || 'Error al actualizar', 'error');
            }
        });
    });
});
</script>
@endpush