@extends('../layouts/partials/header')

@section('content')

<div class="container mt-3">
    <br>
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs" id="clienteTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="tab-personal-tab" data-bs-toggle="tab" href="#tab-personal" role="tab">Información Personal</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-socio-tab" data-bs-toggle="tab" href="#tab-socio" role="tab">Socio Económico</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-contacto-tab" data-bs-toggle="tab" href="#tab-contacto" role="tab">Contacto</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-direccion-tab" data-bs-toggle="tab" href="#tab-direccion" role="tab">Direcciones</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-redes-tab" data-bs-toggle="tab" href="#tab-redes" role="tab">Redes Sociales</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-extra-tab" data-bs-toggle="tab" href="#tab-extra" role="tab">Datos Adicionales</a>
                </li>
            </ul>
        </div>

        <div class="card-body">

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>OK:</strong> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>Por favor corrige los siguientes errores:</strong>
                    <ul class="mb-0 mt-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form action="{{ route('clientes.store') }}" method="POST" id="formCliente">
                @csrf
                <input type="hidden" name="active_tab" id="active_tab" value="{{ old('active_tab', 'tab-personal') }}">

                <div class="tab-content mt-3" id="clienteTabsContent">

                    {{-- ===== TAB 1: INFORMACIÓN PERSONAL ===== --}}
                    <div class="tab-pane fade show active" id="tab-personal" role="tabpanel">
                        <p class="text-muted small">Los campos marcados con <span class="text-danger">*</span> son obligatorios.</p>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Nombre(s)</label>
                                <input type="text" name="ip_nombre" value="{{ old('ip_nombre') }}" class="form-control @error('ip_nombre') is-invalid @enderror" maxlength="100">
                                @error('ip_nombre')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Apellido Paterno</label>
                                <input type="text" name="ip_apellido_paterno" value="{{ old('ip_apellido_paterno') }}" class="form-control @error('ip_apellido_paterno') is-invalid @enderror" maxlength="100">
                                @error('ip_apellido_paterno')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Apellido Materno</label>
                                <input type="text" name="ip_apellido_materno" value="{{ old('ip_apellido_materno') }}" class="form-control @error('ip_apellido_materno') is-invalid @enderror" maxlength="100">
                                @error('ip_apellido_materno')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Género</label>
                                <select name="ip_genero" class="form-select @error('ip_genero') is-invalid @enderror">
                                    <option value="">- Seleccionar -</option>
                                    <option value="Masculino" {{ old('ip_genero') == 'Masculino' ? 'selected' : '' }}>Masculino</option>
                                    <option value="Femenino" {{ old('ip_genero') == 'Femenino' ? 'selected' : '' }}>Femenino</option>
                                    <option value="Otro" {{ old('ip_genero') == 'Otro' ? 'selected' : '' }}>Otro</option>
                                </select>
                                @error('ip_genero')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Fecha de Nacimiento</label>
                                <input type="date" name="ip_fecha_nacimiento" value="{{ old('ip_fecha_nacimiento') }}" class="form-control @error('ip_fecha_nacimiento') is-invalid @enderror">
                                @error('ip_fecha_nacimiento')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Estado Civil</label>
                                <select name="ip_estado_civil" class="form-select @error('ip_estado_civil') is-invalid @enderror">
                                    <option value="">- Seleccionar -</option>
                                    <option value="Soltero(a)" {{ old('ip_estado_civil') == 'Soltero(a)' ? 'selected' : '' }}>Soltero(a)</option>
                                    <option value="Casado(a)" {{ old('ip_estado_civil') == 'Casado(a)' ? 'selected' : '' }}>Casado(a)</option>
                                    <option value="Divorciado(a)" {{ old('ip_estado_civil') == 'Divorciado(a)' ? 'selected' : '' }}>Divorciado(a)</option>
                                    <option value="Viudo(a)" {{ old('ip_estado_civil') == 'Viudo(a)' ? 'selected' : '' }}>Viudo(a)</option>
                                    <option value="Unión libre" {{ old('ip_estado_civil') == 'Unión libre' ? 'selected' : '' }}>Unión libre</option>
                                </select>
                                @error('ip_estado_civil')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold">Hijos</label>
                                <input type="number" name="ip_hijos" value="{{ old('ip_hijos', 0) }}" class="form-control @error('ip_hijos') is-invalid @enderror" min="0" max="99">
                                @error('ip_hijos')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Identificación</label>
                                <input type="text" name="ip_identificacion" value="{{ old('ip_identificacion') }}" class="form-control @error('ip_identificacion') is-invalid @enderror" maxlength="50" placeholder="INE, Pasaporte, etc.">
                                @error('ip_identificacion')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">RFC</label>
                                <input type="text" name="ip_rfc" value="{{ old('ip_rfc') }}" class="form-control @error('ip_rfc') is-invalid @enderror" maxlength="17" style="text-transform:uppercase;">
                                @error('ip_rfc')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">CURP</label>
                                <input type="text" name="ip_curp" value="{{ old('ip_curp') }}" class="form-control @error('ip_curp') is-invalid @enderror" maxlength="18" style="text-transform:uppercase;">
                                @error('ip_curp')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Nacionalidad</label>
                                <input type="text" name="ip_nacionalidad" value="{{ old('ip_nacionalidad', 'Mexicana') }}" class="form-control @error('ip_nacionalidad') is-invalid @enderror" maxlength="60">
                                @error('ip_nacionalidad')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                    </div>

                    {{-- ===== TAB 2: ESTUDIO SOCIO ECONÓMICO ===== --}}
                    <div class="tab-pane fade" id="tab-socio" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Nivel de Educación</label>
                                <select name="se_educacion" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Sin estudios','Primaria','Secundaria','Preparatoria','Licenciatura','Maestría','Doctorado'] as $nivel)
                                        <option value="{{ $nivel }}" {{ old('se_educacion') == $nivel ? 'selected' : '' }}>{{ $nivel }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Ocupación</label>
                                <input type="text" name="se_ocupacion" value="{{ old('se_ocupacion') }}" class="form-control" maxlength="100">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Tipo de Empleo</label>
                                <select name="se_empleo" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Empleado','Independiente / Freelance','Empresario','Desempleado','Jubilado / Pensionado','Estudiante'] as $empleo)
                                        <option value="{{ $empleo }}" {{ old('se_empleo') == $empleo ? 'selected' : '' }}>{{ $empleo }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Tipo de Vivienda</label>
                                <select name="se_vivienda" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Propia','Rentada','Familiar','Otro'] as $vivienda)
                                        <option value="{{ $vivienda }}" {{ old('se_vivienda') == $vivienda ? 'selected' : '' }}>{{ $vivienda }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="se_auto" id="se_auto" value="1" {{ old('se_auto') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="se_auto">Tiene Automóvil</label>
                                </div>
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="se_smartphone" id="se_smartphone" value="1" {{ old('se_smartphone') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="se_smartphone">Tiene Smartphone</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ===== TAB 3: CONTACTO ===== --}}
                    <div class="tab-pane fade" id="tab-contacto" role="tabpanel">
                        <div class="row g-3">

                            <div class="col-12"><h6 class="text-secondary border-bottom pb-1">Contacto Principal</h6></div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Correo</label>
                                <input type="email" name="cp_correo" value="{{ old('cp_correo') }}" class="form-control @error('cp_correo') is-invalid @enderror" maxlength="150">
                                @error('cp_correo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Teléfono</label>
                                <input type="text" name="cp_telefono" value="{{ old('cp_telefono') }}" class="form-control" maxlength="20">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Tipo</label>
                                <select name="cp_tipo" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Celular','Oficina','Casa','Otro'] as $tipo)
                                        <option value="{{ $tipo }}" {{ old('cp_tipo') == $tipo ? 'selected' : '' }}>{{ $tipo }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Contacto para Notificaciones</h6></div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Responsable</label>
                                <input type="text" name="cn_responsable" value="{{ old('cn_responsable') }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Correo</label>
                                <input type="email" name="cn_correo" value="{{ old('cn_correo') }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Teléfono</label>
                                <input type="text" name="cn_telefono" value="{{ old('cn_telefono') }}" class="form-control" maxlength="20">
                            </div>

                            <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Contacto de Cobranza</h6></div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Responsable</label>
                                <input type="text" name="cc_responsable" value="{{ old('cc_responsable') }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Correo</label>
                                <input type="email" name="cc_correo" value="{{ old('cc_correo') }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Teléfono</label>
                                <input type="text" name="cc_telefono" value="{{ old('cc_telefono') }}" class="form-control" maxlength="20">
                            </div>

                            <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Contacto de Siniestros</h6></div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Responsable</label>
                                <input type="text" name="cs_responsable" value="{{ old('cs_responsable') }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Correo</label>
                                <input type="email" name="cs_correo" value="{{ old('cs_correo') }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Teléfono</label>
                                <input type="text" name="cs_telefono" value="{{ old('cs_telefono') }}" class="form-control" maxlength="20">
                            </div>

                        </div>
                    </div>

                    {{-- ===== TAB 4: DIRECCIONES ===== --}}
                    <div class="tab-pane fade" id="tab-direccion" role="tabpanel">
                        <div class="row g-3">

                            @foreach([
                                ['prefix' => 'dir_principal', 'label' => 'Dirección Principal'],
                                ['prefix' => 'dir_fiscal',    'label' => 'Dirección Fiscal'],
                                ['prefix' => 'dir_actual',    'label' => 'Dirección Actual'],
                                ['prefix' => 'dir_otro',      'label' => 'Otra Dirección'],
                            ] as $dir)
                                <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">{{ $dir['label'] }}</h6></div>
                                <div class="col-md-5">
                                    <label class="form-label fw-bold">Calle</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_calle" value="{{ old($dir['prefix'].'_calle') }}" class="form-control" maxlength="150">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label fw-bold">Núm. Ext.</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_numero_ext" value="{{ old($dir['prefix'].'_numero_ext') }}" class="form-control" maxlength="20">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label fw-bold">Núm. Int.</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_numero_int" value="{{ old($dir['prefix'].'_numero_int') }}" class="form-control" maxlength="20">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-bold">Colonia</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_colonia" value="{{ old($dir['prefix'].'_colonia') }}" class="form-control" maxlength="100">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-bold">Ciudad</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_ciudad" value="{{ old($dir['prefix'].'_ciudad') }}" class="form-control" maxlength="100">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label fw-bold">C.P.</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_codigo_postal" value="{{ old($dir['prefix'].'_codigo_postal') }}" class="form-control" maxlength="10">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-bold">Estado</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_estado" value="{{ old($dir['prefix'].'_estado') }}" class="form-control" maxlength="100">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-bold">País</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_pais" value="{{ old($dir['prefix'].'_pais', 'México') }}" class="form-control" maxlength="100">
                                </div>
                            @endforeach

                        </div>
                    </div>

                    {{-- ===== TAB 5: REDES SOCIALES ===== --}}
                    <div class="tab-pane fade" id="tab-redes" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Facebook</label>
                                <input type="text" name="rs_facebook" value="{{ old('rs_facebook') }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Instagram</label>
                                <input type="text" name="rs_instagram" value="{{ old('rs_instagram') }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">LinkedIn</label>
                                <input type="text" name="rs_linkedin" value="{{ old('rs_linkedin') }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Twitter / X</label>
                                <input type="text" name="rs_twitter" value="{{ old('rs_twitter') }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Sitio Web</label>
                                <input type="text" name="rs_sitio_web" value="{{ old('rs_sitio_web') }}" class="form-control" maxlength="150">
                            </div>
                        </div>
                    </div>

                    {{-- ===== TAB 6: DATOS ADICIONALES ===== --}}
                    <div class="tab-pane fade" id="tab-extra" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Clave Agente</label>
                                <input type="text" name="clave_agente" value="{{ old('clave_agente') }}" class="form-control" maxlength="8">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Fecha de Alta</label>
                                <input type="date" name="fecha_alta" value="{{ old('fecha_alta', date('Y-m-d')) }}" class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Origen</label>
                                <select name="origen" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Referido','Web','Llamada','Visita','Redes Sociales','Otro'] as $origen)
                                        <option value="{{ $origen }}" {{ old('origen') == $origen ? 'selected' : '' }}>{{ $origen }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Estatus</label>
                                <select name="estatus" class="form-select">
                                    <option value="activo" {{ old('estatus', 'activo') == 'activo' ? 'selected' : '' }}>Activo</option>
                                    <option value="prospecto" {{ old('estatus') == 'prospecto' ? 'selected' : '' }}>Prospecto</option>
                                    <option value="inactivo" {{ old('estatus') == 'inactivo' ? 'selected' : '' }}>Inactivo</option>
                                    <option value="baja" {{ old('estatus') == 'baja' ? 'selected' : '' }}>Baja</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label fw-bold">Notas</label>
                                <textarea name="notas" class="form-control" rows="4" maxlength="2000">{{ old('notas') }}</textarea>
                            </div>
                        </div>
                    </div>

                </div>{{-- /tab-content --}}

                <div class="row mt-4">
                    <div class="col-12 d-flex gap-2">
                        <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
                        <a href="{{ route('clientes.index') }}" class="btn btn-secondary btn-sm">Cancelar</a>
                    </div>
                </div>

            </form>
        </div>{{-- /card-body --}}
    </div>{{-- /card --}}
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const tabs = document.querySelectorAll('a[data-bs-toggle="tab"]');

        tabs.forEach(tab => {
            tab.addEventListener('shown.bs.tab', function (e) {
                document.getElementById('active_tab').value = e.target.getAttribute('href').substring(1);
            });
        });

        const activeTab = '{{ old('active_tab', 'tab-personal') }}';
        const tabElement = document.querySelector(`a[href="#${activeTab}"]`);
        if (tabElement) {
            new bootstrap.Tab(tabElement).show();
        }
    });
</script>

@endsection

@extends('../layouts/partials/footer')