@extends('layouts.app')

@section('title', 'Agregar Cliente')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">👥 Agregar Cliente</h1>
                <a href="{{ route('clientes.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Volver
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('clientes.store') }}" method="POST" id="clienteForm">
                        @csrf
                        
                        <!-- Tabs Navigation -->
                        <ul class="nav nav-tabs" id="clienteTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="personal-tab" data-bs-toggle="tab" data-bs-target="#personal" type="button" role="tab">
                                    <i class="fas fa-user"></i> Información Personal
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="contacto-tab" data-bs-toggle="tab" data-bs-target="#contacto" type="button" role="tab">
                                    <i class="fas fa-address-card"></i> Contacto y Ubicación
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="servicio-tab" data-bs-toggle="tab" data-bs-target="#servicio" type="button" role="tab">
                                    <i class="fas fa-wifi"></i> Servicio de Internet
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="tecnico-tab" data-bs-toggle="tab" data-bs-target="#tecnico" type="button" role="tab">
                                    <i class="fas fa-cogs"></i> Información Técnica
                                </button>
                            </li>
                        </ul>

                        <!-- Tabs Content -->
                        <div class="tab-content mt-4" id="clienteTabsContent">
                            
                            <!-- Tab 1: Información Personal -->
                            <div class="tab-pane fade show active" id="personal" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="nombre" class="form-label">Nombre *</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>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="apellido" class="form-label">Apellido *</label>
                                            <input type="text" class="form-control @error('apellido') is-invalid @enderror" id="apellido" name="apellido" value="{{ old('apellido') }}" required>
                                            @error('apellido')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="documento_identidad" class="form-label">Documento de Identidad *</label>
                                            <input type="text" class="form-control @error('documento_identidad') is-invalid @enderror" id="documento_identidad" name="documento_identidad" value="{{ old('documento_identidad') }}" required>
                                            @error('documento_identidad')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="tipo_cliente" class="form-label">Tipo de Cliente *</label>
                                            <select class="form-select @error('tipo_cliente') is-invalid @enderror" id="tipo_cliente" name="tipo_cliente" required>
                                                <option value="">Seleccione el tipo</option>
                                                <option value="individual" {{ old('tipo_cliente') == 'individual' ? 'selected' : '' }}>Individual</option>
                                                <option value="empresa" {{ old('tipo_cliente') == 'empresa' ? 'selected' : '' }}>Empresa</option>
                                            </select>
                                            @error('tipo_cliente')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="fecha_registro" class="form-label">Fecha de Registro *</label>
                                            <input type="date" class="form-control @error('fecha_registro') is-invalid @enderror" id="fecha_registro" name="fecha_registro" value="{{ old('fecha_registro', date('Y-m-d')) }}" required>
                                            @error('fecha_registro')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="empresa" class="form-label">Empresa (opcional)</label>
                                            <input type="text" class="form-control @error('empresa') is-invalid @enderror" id="empresa" name="empresa" value="{{ old('empresa') }}">
                                            @error('empresa')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab 2: Contacto y Ubicación -->
                            <div class="tab-pane fade" id="contacto" role="tabpanel">
                                <div class="row">
                                    <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') }}" required>
                                            @error('email')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <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') }}" required>
                                            @error('telefono')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="departamento" class="form-label">Departamento *</label>
                                            <select class="form-select @error('departamento') is-invalid @enderror" id="departamento" name="departamento" required>
                                                <option value="">Seleccione un departamento</option>
                                                <option value="Santa Cruz" {{ old('departamento') == 'Santa Cruz' ? 'selected' : '' }}>Santa Cruz</option>
                                                <option value="La Paz" {{ old('departamento') == 'La Paz' ? 'selected' : '' }}>La Paz</option>
                                                <option value="Cochabamba" {{ old('departamento') == 'Cochabamba' ? 'selected' : '' }}>Cochabamba</option>
                                                <option value="Oruro" {{ old('departamento') == 'Oruro' ? 'selected' : '' }}>Oruro</option>
                                                <option value="Potosí" {{ old('departamento') == 'Potosí' ? 'selected' : '' }}>Potosí</option>
                                                <option value="Tarija" {{ old('departamento') == 'Tarija' ? 'selected' : '' }}>Tarija</option>
                                                <option value="Chuquisaca" {{ old('departamento') == 'Chuquisaca' ? 'selected' : '' }}>Chuquisaca</option>
                                                <option value="Beni" {{ old('departamento') == 'Beni' ? 'selected' : '' }}>Beni</option>
                                                <option value="Pando" {{ old('departamento') == 'Pando' ? 'selected' : '' }}>Pando</option>
                                            </select>
                                            @error('departamento')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="ciudad" class="form-label">Ciudad *</label>
                                            <input type="text" class="form-control @error('ciudad') is-invalid @enderror" id="ciudad" name="ciudad" value="{{ old('ciudad') }}" required>
                                            @error('ciudad')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="zona_id" class="form-label">Zona</label>
                                            <input type="text" class="form-control @error('zona_id') is-invalid @enderror" id="zona_input" name="zona_input" list="zonas_list" value="{{ old('zona_input') }}" placeholder="Escriba o seleccione una zona">
                                            <input type="hidden" id="zona_id" name="zona_id" value="{{ old('zona_id') }}">
                                            <datalist id="zonas_list">
                                                @foreach($zonas as $zona)
                                                    <option value="{{ $zona->nombre }}" data-id="{{ $zona->id }}" data-departamento="{{ $zona->departamento }}">
                                                        {{ $zona->nombre }} - {{ $zona->departamento }}
                                                    </option>
                                                @endforeach
                                            </datalist>
                                            <small class="form-text text-muted">Puede escribir una nueva zona o seleccionar de la lista</small>
                                            @error('zona_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="direccion" class="form-label">Dirección *</label>
                                    <textarea class="form-control @error('direccion') is-invalid @enderror" id="direccion" name="direccion" rows="2" required>{{ old('direccion') }}</textarea>
                                    @error('direccion')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="direccion_completa" class="form-label">Dirección Completa (opcional)</label>
                                    <textarea class="form-control @error('direccion_completa') is-invalid @enderror" id="direccion_completa" name="direccion_completa" rows="3" placeholder="Descripción detallada de la ubicación para instalación">{{ old('direccion_completa') }}</textarea>
                                    @error('direccion_completa')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Tab 3: Servicio de Internet -->
                            <div class="tab-pane fade" id="servicio" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="servicio" class="form-label">Tipo de Servicio</label>
                                            <select class="form-select @error('servicio') is-invalid @enderror" id="servicio" name="servicio">
                                                <option value="">Seleccione el servicio</option>
                                                <option value="Internet Residencial" {{ old('servicio') == 'Internet Residencial' ? 'selected' : '' }}>Internet Residencial</option>
                                                <option value="Internet Empresarial" {{ old('servicio') == 'Internet Empresarial' ? 'selected' : '' }}>Internet Empresarial</option>
                                                <option value="Fibra Óptica" {{ old('servicio') == 'Fibra Óptica' ? 'selected' : '' }}>Fibra Óptica</option>
                                                <option value="Wi-Fi" {{ old('servicio') == 'Wi-Fi' ? 'selected' : '' }}>Wi-Fi</option>
                                            </select>
                                            @error('servicio')
                                                <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 del Servicio</label>
                                            <select class="form-select @error('estado') is-invalid @enderror" id="estado" name="estado">
                                                <option value="1" {{ old('estado', 1) == 1 ? 'selected' : '' }}>Activo</option>
                                                <option value="0" {{ old('estado') == 0 ? 'selected' : '' }}>Inactivo</option>
                                            </select>
                                            @error('estado')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="alert alert-info">
                                            <h6><i class="fas fa-info-circle"></i> Información sobre el Plan de Internet:</h6>
                                            <p class="mb-0">
                                                El plan de internet se seleccionará automáticamente cuando se cree el contrato para este cliente.
                                                No es necesario especificarlo en este momento.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab 4: Información Técnica -->
                            <div class="tab-pane fade" id="tecnico" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="ip" class="form-label">Dirección IP</label>
                                            <input type="text" class="form-control @error('ip') is-invalid @enderror" id="ip" name="ip" value="{{ old('ip') }}" placeholder="Ej: 192.168.1.100">
                                            @error('ip')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="router" class="form-label">Router/Equipo</label>
                                            <input type="text" class="form-control @error('router') is-invalid @enderror" id="router" name="router" value="{{ old('router') }}" placeholder="Modelo del router o equipo">
                                            @error('router')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="alert alert-info">
                                            <h6>Información Técnica:</h6>
                                            <ul class="mb-0">
                                                <li>La dirección IP debe ser válida y única en la red</li>
                                                <li>El router/equipo se asignará durante la instalación</li>
                                                <li>Esta información puede completarse posteriormente</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Botones de acción -->
                        <div class="d-flex justify-content-between mt-4">
                            <div>
                                <a href="{{ route('clientes.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Cancelar
                                </a>
                            </div>
                            <div>
                                <button type="button" class="btn btn-outline-primary" id="btnAnterior" style="display: none;">
                                    <i class="fas fa-arrow-left"></i> Anterior
                                </button>
                                <button type="button" class="btn btn-primary" id="btnSiguiente">
                                    Siguiente <i class="fas fa-arrow-right"></i>
                                </button>
                                <button type="submit" class="btn btn-success" id="btnGuardar" style="display: none;">
                                    <i class="fas fa-save"></i> Guardar Cliente
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabs = ['personal', 'contacto', 'servicio', 'tecnico'];
    let currentTab = 0;
    
    const btnAnterior = document.getElementById('btnAnterior');
    const btnSiguiente = document.getElementById('btnSiguiente');
    const btnGuardar = document.getElementById('btnGuardar');
    
    function updateButtons() {
        btnAnterior.style.display = currentTab > 0 ? 'inline-block' : 'none';
        btnSiguiente.style.display = currentTab < tabs.length - 1 ? 'inline-block' : 'none';
        btnGuardar.style.display = currentTab === tabs.length - 1 ? 'inline-block' : 'none';
    }
    
    btnSiguiente.addEventListener('click', function() {
        if (currentTab < tabs.length - 1) {
            currentTab++;
            const nextTab = new bootstrap.Tab(document.querySelector(`#${tabs[currentTab]}-tab`));
            nextTab.show();
            updateButtons();
        }
    });
    
    btnAnterior.addEventListener('click', function() {
        if (currentTab > 0) {
            currentTab--;
            const prevTab = new bootstrap.Tab(document.querySelector(`#${tabs[currentTab]}-tab`));
            prevTab.show();
            updateButtons();
        }
    });
    
    // Escuchar cambios de tab manuales
    document.querySelectorAll('[data-bs-toggle="tab"]').forEach(function(tab) {
        tab.addEventListener('shown.bs.tab', function(e) {
            const targetId = e.target.getAttribute('data-bs-target').replace('#', '');
            currentTab = tabs.indexOf(targetId);
            updateButtons();
        });
    });
    
    updateButtons();
    
    // Filtrar zonas por departamento
    const departamentoSelect = document.getElementById('departamento');
    const zonaInput = document.getElementById('zona_input');
    const zonaIdHidden = document.getElementById('zona_id');
    const zonasList = document.getElementById('zonas_list');
    
    // Manejar selección de zona desde datalist
    zonaInput.addEventListener('input', function() {
        const value = this.value;
        const options = zonasList.getElementsByTagName('option');
        
        // Buscar si el valor coincide con alguna opción
        for (let option of options) {
            if (option.value === value) {
                zonaIdHidden.value = option.getAttribute('data-id');
                return;
            }
        }
        
        // Si no coincide, limpiar el ID (zona nueva)
        zonaIdHidden.value = '';
    });
    
    // Filtrar zonas por departamento seleccionado
    departamentoSelect.addEventListener('change', function() {
        const selectedDept = this.value;
        const options = zonasList.getElementsByTagName('option');
        
        // Ocultar/mostrar opciones según departamento
        for (let option of options) {
            const optionDept = option.getAttribute('data-departamento');
            if (!selectedDept || optionDept === selectedDept) {
                option.style.display = '';
            } else {
                option.style.display = 'none';
            }
        }
        
        // Limpiar zona si no pertenece al departamento seleccionado
        if (selectedDept && zonaIdHidden.value) {
            const currentZoneOption = document.querySelector(`option[data-id="${zonaIdHidden.value}"]`);
            if (currentZoneOption && currentZoneOption.getAttribute('data-departamento') !== selectedDept) {
                zonaInput.value = '';
                zonaIdHidden.value = '';
            }
        }
    });
    const todasLasZonas = Array.from(zonaSelect.options);
    
    departamentoSelect.addEventListener('change', function() {
        const departamentoSeleccionado = this.value;
        
        // Limpiar el select de zonas
        zonaSelect.innerHTML = '<option value="">Seleccione una zona</option>';
        
        if (departamentoSeleccionado) {
            // Filtrar y agregar las zonas del departamento seleccionado
            todasLasZonas.forEach(function(option) {
                if (option.value && option.dataset.departamento === departamentoSeleccionado) {
                    zonaSelect.appendChild(option.cloneNode(true));
                }
            });
        } else {
            // Si no hay departamento seleccionado, mostrar todas las zonas
            todasLasZonas.forEach(function(option) {
                if (option.value) {
                    zonaSelect.appendChild(option.cloneNode(true));
                }
            });
        }
    });
    
    // Trigger inicial si hay un departamento seleccionado (para old values)
    if (departamentoSelect.value) {
        departamentoSelect.dispatchEvent(new Event('change'));
    }
});
</script>
@endsection