@extends('layouts.app')

@section('title', 'Editar 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">✏️ Editar Cliente</h1>
                <a href="{{ route('clientes.show', $cliente->id) }}" 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.update', $cliente->id) }}" method="POST" id="clienteForm">
                        @csrf
                        @method('PUT')
                        
                        <!-- 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', $cliente->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', $cliente->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', $cliente->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', $cliente->tipo_cliente) == 'individual' ? 'selected' : '' }}>Individual</option>
                                                <option value="empresa" {{ old('tipo_cliente', $cliente->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', $cliente->fecha_registro) }}" 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', $cliente->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', $cliente->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', $cliente->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="ciudad" class="form-label">Ciudad *</label>
                                            <input type="text" class="form-control @error('ciudad') is-invalid @enderror" id="ciudad" name="ciudad" value="{{ old('ciudad', $cliente->ciudad) }}" required>
                                            @error('ciudad')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="zona_id" class="form-label">Zona</label>
                                            <select class="form-select @error('zona_id') is-invalid @enderror" id="zona_id" name="zona_id">
                                                <option value="">Seleccione una zona</option>
                                                @foreach($zonas as $zona)
                                                    <option value="{{ $zona->id }}" {{ old('zona_id', $cliente->zona_id) == $zona->id ? 'selected' : '' }}>
                                                        {{ $zona->nombre }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @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', $cliente->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', $cliente->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', $cliente->servicio) == 'Internet Residencial' ? 'selected' : '' }}>Internet Residencial</option>
                                                <option value="Internet Empresarial" {{ old('servicio', $cliente->servicio) == 'Internet Empresarial' ? 'selected' : '' }}>Internet Empresarial</option>
                                                <option value="Fibra Óptica" {{ old('servicio', $cliente->servicio) == 'Fibra Óptica' ? 'selected' : '' }}>Fibra Óptica</option>
                                                <option value="Wi-Fi" {{ old('servicio', $cliente->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 class="form-label text-muted">Plan de Internet</label>
                                            <div class="form-control bg-light text-muted">
                                                Se gestiona desde el contrato
                                            </div>
                                            <small class="text-info">
                                                <i class="fas fa-info-circle"></i> 
                                                El plan se asigna y modifica desde la sección de contratos
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <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', $cliente->estado) == 1 ? 'selected' : '' }}>Activo</option>
                                                <option value="0" {{ old('estado', $cliente->estado) == 0 ? 'selected' : '' }}>Inactivo</option>
                                            </select>
                                            @error('estado')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </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', $cliente->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', $cliente->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.show', $cliente->id) }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Cancelar
                                </a>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-save"></i> Actualizar Cliente
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabs = ['personal', 'contacto', 'servicio', 'tecnico'];
    let currentTab = 0;
    
    // Funcionalidad de navegación de tabs ya incluida en la vista create
    // Se puede reutilizar el mismo código JavaScript
});
</script>
@endsection