@extends('layouts.app')

@section('title', 'Nueva Empresa — TI Manager')

@section('content')
<div class="animate-fadeIn">
    {{-- Encabezado --}}
    <div class="page-header">
        <div class="page-header-top">
            <div class="d-flex align-center gap-md">
                <a href="{{ route('companies.index') }}" class="btn btn-ghost btn-icon" title="Volver">
                    <i class="ph ph-arrow-left"></i>
                </a>
                <h1 class="page-title">Nueva Empresa</h1>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('companies.store') }}" enctype="multipart/form-data">
        @csrf

        {{-- Info General --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-info" style="color: var(--secondary);"></i>
                    Información General
                </h3>
            </div>

            <div class="form-group">
                <label class="form-label" for="company_name">Nombre de la Empresa <span class="required">*</span></label>
                <input type="text" id="company_name" name="name" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                       value="{{ old('name') }}" placeholder="Ej: Empresa ABC S.A.S" required>
                @error('name') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="nit">NIT</label>
                    <input type="text" id="nit" name="nit" class="form-control {{ $errors->has('nit') ? 'is-invalid' : '' }}"
                           value="{{ old('nit') }}" placeholder="Ej: 900123456">
                    @error('nit') <span class="form-error">{{ $message }}</span> @enderror
                </div>
                <div class="form-group">
                    <label class="form-label" for="dv">DV</label>
                    <input type="text" id="dv" name="dv" class="form-control"
                           value="{{ old('dv') }}" placeholder="Ej: 7" maxlength="1" style="max-width: 80px;">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="responsabilidad_fiscal">Responsabilidad Fiscal</label>
                <select id="responsabilidad_fiscal" name="responsabilidad_fiscal" class="form-control">
                    <option value="">Seleccionar...</option>
                    <option value="Responsable de IVA" {{ old('responsabilidad_fiscal') == 'Responsable de IVA' ? 'selected' : '' }}>Responsable de IVA</option>
                    <option value="No responsable de IVA" {{ old('responsabilidad_fiscal') == 'No responsable de IVA' ? 'selected' : '' }}>No responsable de IVA</option>
                    <option value="Régimen Simple" {{ old('responsabilidad_fiscal') == 'Régimen Simple' ? 'selected' : '' }}>Régimen Simple de Tributación</option>
                    <option value="Gran Contribuyente" {{ old('responsabilidad_fiscal') == 'Gran Contribuyente' ? 'selected' : '' }}>Gran Contribuyente</option>
                </select>
            </div>
        </div>

        {{-- Ubicación --}}
        <div class="card mb-lg" x-data="locationSearch()">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-map-pin" style="color: var(--primary);"></i>
                    Ubicación
                </h3>
            </div>

            <div class="form-group">
                <label class="form-label" for="map_search">Buscador en el Mapa (Dirección, Ciudad o Lugar)</label>
                <div class="search-box">
                    <input type="text" id="map_search" class="form-control" 
                           placeholder="Ej: Calle 100 # 15-20, Bogotá" 
                           @keydown.enter.prevent="searchLocation()">
                    <button type="button" class="btn btn-outline" @click="searchLocation()" :disabled="searching" style="min-height: 48px;">
                        <i class="ph" :class="searching ? 'ph-spinner' : 'ph-magnifying-glass'" :style="searching && 'animation: spin 1s linear infinite'"></i>
                        <span x-text="searching ? 'Buscando...' : 'Buscar'"></span>
                    </button>
                </div>
                <span class="text-xs text-muted" style="margin-top: 4px; display: block;">
                    Escribe una dirección para ubicarla en el mapa y autocompletar los campos de abajo.
                </span>
            </div>

            {{-- Resultados de búsqueda (Ya manejado por Google Autocomplete) --}}

            {{-- Mapa embebido --}}
            <div x-show="showMap" x-cloak style="margin-bottom: var(--space-md);">
                <div style="border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(0,0,0,0.08);">
                    <iframe id="maps-iframe"
                            width="100%" height="250" style="border: 0; display: block;"
                            loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"
                            src="about:blank">
                    </iframe>
                </div>
                <div class="d-flex gap-sm" style="margin-top: var(--space-sm); flex-wrap: wrap;">
                    <a href="#" class="btn btn-outline btn-sm" style="color: var(--primary);"
                       @click.prevent="openInGoogleMaps()">
                        <i class="ph ph-arrow-square-out"></i> Abrir en Google Maps
                    </a>
                    <button type="button" class="btn btn-ghost btn-sm" @click="showMap = false; results = [];">
                        <i class="ph ph-x"></i> Cerrar
                    </button>
                </div>
            </div>

            {{-- Alerta de selección exitosa --}}
            <div x-show="selected" x-cloak class="alert alert-success" style="padding: 10px var(--space-md); font-size: 0.82rem;">
                <i class="ph ph-check-circle"></i>
                <span>Dirección asignada correctamente. Puedes editarla manualmente si necesitas ajustarla.</span>
            </div>

            <div class="form-group">
                <label class="form-label" for="address">Dirección</label>
                <textarea id="address" name="address" class="form-control" rows="2"
                          placeholder="Ej: Calle 100 # 15-20, Oficina 301">{{ old('address') }}</textarea>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="city">Ciudad</label>
                    <input type="text" id="city" name="city" class="form-control"
                           value="{{ old('city') }}" placeholder="Ej: Bogotá">
                </div>
                <div class="form-group">
                    <label class="form-label" for="department">Departamento</label>
                    <select id="department" name="department" class="form-control">
                        <option value="">Seleccionar...</option>
                        @foreach(['Amazonas','Antioquia','Arauca','Atlántico','Bolívar','Boyacá','Caldas','Caquetá','Casanare','Cauca','Cesar','Chocó','Córdoba','Cundinamarca','Guainía','Guaviare','Huila','La Guajira','Magdalena','Meta','Nariño','Norte de Santander','Putumayo','Quindío','Risaralda','San Andrés','Santander','Sucre','Tolima','Valle del Cauca','Vaupés','Vichada'] as $dept)
                            <option value="{{ $dept }}" {{ old('department') == $dept ? 'selected' : '' }}>{{ $dept }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        {{-- Contacto --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-phone" style="color: var(--secondary);"></i>
                    Contacto
                </h3>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="phone">Teléfono</label>
                    <input type="tel" id="phone" name="phone" class="form-control"
                           value="{{ old('phone') }}" placeholder="Ej: 3001234567">
                </div>
                <div class="form-group">
                    <label class="form-label" for="email">Correo electrónico</label>
                    <input type="email" id="email" name="email" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                           value="{{ old('email') }}" placeholder="Ej: contacto@empresa.com">
                    @error('email') <span class="form-error">{{ $message }}</span> @enderror
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="website">Sitio Web</label>
                <input type="url" id="website" name="website" class="form-control"
                       value="{{ old('website') }}" placeholder="Ej: https://www.empresa.com">
            </div>
        </div>

        {{-- Logo y Notas --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-image" style="color: var(--primary);"></i>
                    Logo y Notas
                </h3>
            </div>

            <div class="form-group" x-data="{ preview: null }">
                <label class="form-label">Logo de la empresa</label>
                <label class="file-upload">
                    <template x-if="preview">
                        <img :src="preview" class="file-preview" alt="Preview">
                    </template>
                    <template x-if="!preview">
                        <i class="ph ph-upload-simple"></i>
                    </template>
                    <span class="file-upload-text">Haz clic para subir una imagen (máx. 2MB)</span>
                    <input type="file" name="logo" accept="image/*" style="display: none;"
                           @change="preview = URL.createObjectURL($event.target.files[0])">
                </label>
                @error('logo') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label class="form-label" for="notes">Notas adicionales</label>
                <textarea id="notes" name="notes" class="form-control" rows="3"
                          placeholder="Observaciones, detalles del contrato, etc.">{{ old('notes') }}</textarea>
            </div>
        </div>

        {{-- Botones --}}
        <div class="d-flex gap-md" style="justify-content: flex-end;">
            <a href="{{ route('companies.index') }}" class="btn btn-outline">
                <i class="ph ph-x"></i> Cancelar
            </a>
            <button type="submit" class="btn btn-primary">
                <i class="ph ph-check"></i> Guardar Empresa
            </button>
        </div>
    </form>
</div>

@push('scripts')
@if(config('services.google.maps_api_key'))
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google.maps_api_key') }}&libraries=places&callback=initMapSearch" async defer></script>
@endif
<script>
let autocomplete;

function initMapSearch() {
    const input = document.getElementById('map_search');
    if (!input) return;

    autocomplete = new google.maps.places.Autocomplete(input, {
        componentRestrictions: { country: 'co' },
        fields: ['address_components', 'geometry', 'formatted_address', 'name'],
    });

    autocomplete.addListener('place_changed', function() {
        const place = autocomplete.getPlace();
        if (!place.geometry) {
            Swal.fire({ title: 'Atención', text: 'No se encontraron detalles para esta ubicación.', icon: 'warning', confirmButtonText: 'Entendido' });
            return;
        }

        // Emitir evento para que Alpine actualice
        window.dispatchEvent(new CustomEvent('place-selected', { detail: place }));
    });
}

function locationSearch() {
    return {
        showMap: false,
        selected: false,
        selectedLat: null,
        selectedLon: null,
        searching: false,

        init() {
            window.addEventListener('place-selected', (e) => {
                this.selectPlace(e.detail);
            });
        },

        searchLocation() {
            // Con Google Places esto funciona automáticamente,
            // pero si presionan enter, podemos advertirles.
            if (!document.getElementById('map_search').value) {
                Swal.fire({ title: 'Atención', text: 'Escribe una dirección en el buscador y selecciona una de las sugerencias de Google.', icon: 'warning', confirmButtonText: 'Entendido' });
            }
        },

        selectPlace(place) {
            this.selectedLat = place.geometry.location.lat();
            this.selectedLon = place.geometry.location.lng();
            
            let address = '';
            let city = '';
            let department = '';

            // Procesar los componentes de la dirección de Google
            if (place.address_components) {
                for (const component of place.address_components) {
                    const types = component.types;
                    
                    if (types.includes('route')) {
                        address = component.long_name;
                    }
                    if (types.includes('street_number')) {
                        address += ' #' + component.long_name;
                    }
                    if (types.includes('locality') || types.includes('administrative_area_level_2')) {
                        city = component.long_name;
                    }
                    if (types.includes('administrative_area_level_1')) {
                        department = component.long_name;
                    }
                }
            }

            // Si no armó bien la dirección, usamos el formatted_address o el nombre
            if (!address) {
                address = place.name || place.formatted_address.split(',')[0];
            }

            // Llenar campos
            const addressEl = document.getElementById('address');
            if (addressEl) {
                addressEl.value = address;
            }

            const cityEl = document.getElementById('city');
            if (cityEl) {
                cityEl.value = city;
            }

            const deptSelect = document.getElementById('department');
            if (deptSelect && department) {
                // Limpiar acentos para buscar en el select
                const normalize = str => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
                const normDept = normalize(department);
                
                for (let i = 0; i < deptSelect.options.length; i++) {
                    if (normalize(deptSelect.options[i].value) === normDept || normalize(deptSelect.options[i].text) === normDept) {
                        deptSelect.selectedIndex = i;
                        break;
                    }
                }
            }

            this.showMap = true;
            this.selected = true;

            this.$nextTick(() => {
                const iframe = document.getElementById('maps-iframe');
                if (iframe) {
                    iframe.src = 'https://maps.google.com/maps?q=' + this.selectedLat + ',' + this.selectedLon + '&z=17&output=embed';
                }
            });
        },

        openInGoogleMaps() {
            if (this.selectedLat && this.selectedLon) {
                window.open('https://www.google.com/maps?q=' + this.selectedLat + ',' + this.selectedLon, '_blank');
            } else {
                let queryVal = document.getElementById('map_search').value || document.getElementById('company_name').value;
                window.open('https://www.google.com/maps/search/' + encodeURIComponent(queryVal + ' Colombia'), '_blank');
            }
        }
    };
}
</script>
<style>
/* Ajustes para el dropdown de sugerencias de pac-container de Google */
.pac-container {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0,0,0,0.08);
    font-family: inherit;
    margin-top: 4px;
    z-index: 9999;
}
.pac-item {
    padding: 10px;
    font-size: 0.9rem;
    cursor: pointer;
}
.pac-item:hover {
    background-color: var(--surface-hover);
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
</style>
@endpush
@endsection