@extends('layouts.app')

@section('title', 'Crear Empresa')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('empresa.index') }}">Empresa</a></li>
            <li class="breadcrumb-item active">Crear Empresa</li>
        </ol>
    </nav>

    <!-- Título de la página -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-plus me-2"></i>Crear Nueva Empresa
        </h1>
        <a href="{{ route('empresa.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Volver
        </a>
    </div>

    <!-- Formulario -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-building me-2"></i>Información de la Empresa
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('empresa.store') }}" enctype="multipart/form-data">
                        @csrf
                        
                        <!-- Información básica -->
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="nombre" class="form-label">Nombre de la Empresa <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nombre') is-invalid @enderror" 
                                       id="nombre" name="nombre" value="{{ old('nombre') }}" required>
                                @error('nombre')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="ruc_nit" class="form-label" id="label_documento">Número de Documento <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('ruc_nit') is-invalid @enderror" 
                                       id="ruc_nit" name="ruc_nit" value="{{ old('ruc_nit') }}" required>
                                @error('ruc_nit')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted" id="ejemplo_documento"></small>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="tipo_documento" class="form-label">Tipo de Documento <span class="text-danger">*</span></label>
                                <select class="form-select @error('tipo_documento') is-invalid @enderror" 
                                        id="tipo_documento" name="tipo_documento" required>
                                    <option value="">Seleccionar tipo</option>
                                    @foreach($tiposDocumento as $tipo)
                                        <option value="{{ $tipo->codigo }}" {{ old('tipo_documento') == $tipo->codigo ? 'selected' : '' }}>
                                            {{ $tipo->nombre_corto }} - {{ $tipo->nombre }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('tipo_documento')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6 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') }}">
                                @error('telefono')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 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') }}">
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="sitio_web" class="form-label">Sitio Web</label>
                                <input type="url" class="form-control @error('sitio_web') is-invalid @enderror" 
                                       id="sitio_web" name="sitio_web" value="{{ old('sitio_web') }}">
                                @error('sitio_web')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </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="3">{{ old('descripcion') }}</textarea>
                            @error('descripcion')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Información de ubicación -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-map-marker-alt me-2"></i>Información de Ubicación
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="pais_id" class="form-label">País <span class="text-danger">*</span></label>
                                        <select class="form-select @error('pais_id') is-invalid @enderror" 
                                                id="pais_id" name="pais_id" required>
                                            <option value="">Seleccionar país</option>
                                            @foreach(\App\Models\Pais::activos()->get() as $pais)
                                                <option value="{{ $pais->id }}" {{ old('pais_id') == $pais->id ? 'selected' : '' }}>
                                                    {{ $pais->nombre }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('pais_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    
                                    <div class="col-md-4 mb-3">
                                        <label for="estado_id" class="form-label">Estado/Provincia</label>
                                        <select class="form-select @error('estado_id') is-invalid @enderror" 
                                                id="estado_id" name="estado_id">
                                            <option value="">Seleccionar estado</option>
                                        </select>
                                        @error('estado_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    
                                    <div class="col-md-4 mb-3">
                                        <label for="ciudad_id" class="form-label">Ciudad</label>
                                        <select class="form-select @error('ciudad_id') is-invalid @enderror" 
                                                id="ciudad_id" name="ciudad_id">
                                            <option value="">Seleccionar ciudad</option>
                                        </select>
                                        @error('ciudad_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-8 mb-3">
                                        <label for="direccion" class="form-label">Dirección</label>
                                        <input type="text" class="form-control @error('direccion') is-invalid @enderror" 
                                               id="direccion" name="direccion" value="{{ old('direccion') }}">
                                        @error('direccion')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    
                                    <div class="col-md-4 mb-3">
                                        <label for="codigo_postal" class="form-label">Código Postal</label>
                                        <input type="text" class="form-control @error('codigo_postal') is-invalid @enderror" 
                                               id="codigo_postal" name="codigo_postal" value="{{ old('codigo_postal') }}">
                                        @error('codigo_postal')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Logo de la empresa -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-image me-2"></i>Logo de la Empresa
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="logo" class="form-label">Seleccionar Logo</label>
                                    <input type="file" class="form-control @error('logo') is-invalid @enderror" 
                                           id="logo" name="logo" accept="image/*">
                                    @error('logo')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Formatos permitidos: JPG, PNG, GIF. Tamaño máximo: 2MB</div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="activo" 
                                       name="activo" value="1" {{ old('activo', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="activo">
                                    Empresa activa
                                </label>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('empresa.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Crear Empresa
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Panel de ayuda -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2"></i>Información
                    </h5>
                </div>
                <div class="card-body">
                    <h6>Tipos de Documento:</h6>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-file-alt me-2"></i><strong>RUC:</strong> Registro Único de Contribuyentes</li>
                        <li><i class="fas fa-file-alt me-2"></i><strong>NIT:</strong> Número de Identificación Tributaria</li>
                        <li><i class="fas fa-file-alt me-2"></i><strong>Cédula:</strong> Documento de identidad</li>
                        <li><i class="fas fa-file-alt me-2"></i><strong>Pasaporte:</strong> Documento de viaje</li>
                    </ul>
                    
                    <hr>
                    
                    <h6>Requisitos del Logo:</h6>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check text-success me-2"></i>Formatos: JPG, PNG, GIF</li>
                        <li><i class="fas fa-check text-success me-2"></i>Tamaño máximo: 2MB</li>
                        <li><i class="fas fa-check text-success me-2"></i>Resolución recomendada: 300x300px</li>
                        <li><i class="fas fa-check text-success me-2"></i>Fondo transparente preferible</li>
                    </ul>
                    
                    <hr>
                    
                    <h6>Consejos:</h6>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-lightbulb text-warning me-2"></i>Completa todos los campos obligatorios</li>
                        <li><i class="fas fa-lightbulb text-warning me-2"></i>Verifica la información fiscal</li>
                        <li><i class="fas fa-lightbulb text-warning me-2"></i>Usa un logo de buena calidad</li>
                        <li><i class="fas fa-lightbulb text-warning me-2"></i>La información será usada en documentos</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Cargar estados cuando se selecciona un país
document.getElementById('pais_id').addEventListener('change', function() {
    const paisId = this.value;
    const estadoSelect = document.getElementById('estado_id');
    const ciudadSelect = document.getElementById('ciudad_id');
    
    // Limpiar estados y ciudades
    estadoSelect.innerHTML = '<option value="">Seleccionar estado</option>';
    ciudadSelect.innerHTML = '<option value="">Seleccionar ciudad</option>';
    
    if (paisId) {
        fetch(`/empresa/get-estados?pais_id=${paisId}`)
            .then(response => response.json())
            .then(data => {
                data.forEach(estado => {
                    const option = document.createElement('option');
                    option.value = estado.id;
                    option.textContent = estado.nombre;
                    estadoSelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error:', error));
    }
});

// Cargar ciudades cuando se selecciona un estado
document.getElementById('estado_id').addEventListener('change', function() {
    const estadoId = this.value;
    const ciudadSelect = document.getElementById('ciudad_id');
    
    // Limpiar ciudades
    ciudadSelect.innerHTML = '<option value="">Seleccionar ciudad</option>';
    
    if (estadoId) {
        fetch(`/empresa/get-ciudades?estado_id=${estadoId}`)
            .then(response => response.json())
            .then(data => {
                data.forEach(ciudad => {
                    const option = document.createElement('option');
                    option.value = ciudad.id;
                    option.textContent = ciudad.nombre;
                    ciudadSelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error:', error));
    }
});

// Cambio dinámico del tipo de documento
document.getElementById('tipo_documento').addEventListener('change', function() {
    const tipoCodigo = this.value;
    const labelDocumento = document.getElementById('label_documento');
    const ejemploDocumento = document.getElementById('ejemplo_documento');
    
    // Ejemplos temporales hasta que se configure la API
    const ejemplos = {
        'RUC': 'Ejemplo: 12345678901',
        'NIT': 'Ejemplo: 1234567890',
        'CEDULA': 'Ejemplo: 1234567890',
        'PASAPORTE': 'Ejemplo: AB123456',
        'OTRO': 'Formato libre'
    };
    
    if (tipoCodigo) {
        const tipoSeleccionado = this.options[this.selectedIndex].text.split(' - ')[0];
        labelDocumento.textContent = `${tipoSeleccionado} *`;
        ejemploDocumento.textContent = ejemplos[tipoCodigo] || 'Formato libre';
        
        // Actualizar placeholder
        const inputDocumento = document.getElementById('ruc_nit');
        inputDocumento.placeholder = ejemplos[tipoCodigo] || '';
    } else {
        labelDocumento.textContent = 'Número de Documento *';
        ejemploDocumento.textContent = '';
    }
});

// Validación del archivo de logo
document.getElementById('logo').addEventListener('change', function() {
    const file = this.files[0];
    if (file) {
        const maxSize = 2 * 1024 * 1024; // 2MB
        const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
        
        if (file.size > maxSize) {
            alert('El archivo es demasiado grande. El tamaño máximo es 2MB.');
            this.value = '';
            return;
        }
        
        if (!allowedTypes.includes(file.type)) {
            alert('Tipo de archivo no permitido. Solo se permiten JPG, PNG y GIF.');
            this.value = '';
            return;
        }
    }
});
</script>
@endpush
@endsection