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

@section('content')

<div class="container mt-3">
    <br>
    <div class="card shadow-sm">

        <div class="card-header d-flex justify-content-between align-items-center">
            <span class="fw-bold">Detalle del Cliente</span>
            <div class="d-flex gap-2">
                <a href="{{ route('clientes.edit', $cliente) }}" class="btn btn-warning btn-sm">
                    <i class="bi bi-pencil"></i> Editar
                </a>
                <a href="{{ route('clientes.index') }}" class="btn btn-secondary btn-sm">
                    <i class="bi bi-arrow-left"></i> Regresar
                </a>
            </div>
        </div>

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

        <div class="card-body">
            <div class="tab-content mt-2">

                {{-- ===== TAB 1: INFORMACIÓN PERSONAL ===== --}}
                <div class="tab-pane fade show active" id="sp-personal">
                    <div class="row g-3">
                        @php
                            $badge = match($cliente->estatus) {
                                'activo'    => 'success',
                                'prospecto' => 'info',
                                'inactivo'  => 'secondary',
                                'baja'      => 'danger',
                                default     => 'light',
                            };
                        @endphp
                        <div class="col-12 mb-1">
                            <h5 class="mb-0">
                                {{ $cliente->nombre_completo }}
                                <span class="badge bg-{{ $badge }} ms-2">{{ ucfirst($cliente->estatus ?? '—') }}</span>
                            </h5>
                        </div>
                        <div class="col-md-3"><x-show-field label="Género"           :value="$cliente->ip_genero"/></div>
                        <div class="col-md-3"><x-show-field label="Fecha Nacimiento" :value="optional($cliente->ip_fecha_nacimiento)->format('d/m/Y')"/></div>
                        <div class="col-md-3"><x-show-field label="Estado Civil"     :value="$cliente->ip_estado_civil"/></div>
                        <div class="col-md-2"><x-show-field label="Hijos"            :value="$cliente->ip_hijos"/></div>
                        <div class="col-md-4"><x-show-field label="Identificación"   :value="$cliente->ip_identificacion"/></div>
                        <div class="col-md-3"><x-show-field label="RFC"              :value="$cliente->ip_rfc"/></div>
                        <div class="col-md-4"><x-show-field label="CURP"             :value="$cliente->ip_curp"/></div>
                        <div class="col-md-3"><x-show-field label="Nacionalidad"     :value="$cliente->ip_nacionalidad"/></div>
                    </div>
                </div>

                {{-- ===== TAB 2: SOCIO ECONÓMICO ===== --}}
                <div class="tab-pane fade" id="sp-socio">
                    <div class="row g-3">
                        <div class="col-md-4"><x-show-field label="Educación"     :value="$cliente->se_educacion"/></div>
                        <div class="col-md-4"><x-show-field label="Ocupación"     :value="$cliente->se_ocupacion"/></div>
                        <div class="col-md-4"><x-show-field label="Tipo Empleo"   :value="$cliente->se_empleo"/></div>
                        <div class="col-md-4"><x-show-field label="Tipo Vivienda" :value="$cliente->se_vivienda"/></div>
                        <div class="col-md-2"><x-show-field label="Automóvil"     :value="$cliente->se_auto ? 'Sí' : 'No'"/></div>
                        <div class="col-md-2"><x-show-field label="Smartphone"    :value="$cliente->se_smartphone ? 'Sí' : 'No'"/></div>
                    </div>
                </div>

                {{-- ===== TAB 3: CONTACTO ===== --}}
                <div class="tab-pane fade" id="sp-contacto">
                    <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"><x-show-field label="Correo"   :value="$cliente->cp_correo"/></div>
                        <div class="col-md-3"><x-show-field label="Teléfono" :value="$cliente->cp_telefono"/></div>
                        <div class="col-md-3"><x-show-field label="Tipo"     :value="$cliente->cp_tipo"/></div>

                        <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Notificaciones</h6></div>
                        <div class="col-md-4"><x-show-field label="Responsable" :value="$cliente->cn_responsable"/></div>
                        <div class="col-md-4"><x-show-field label="Correo"      :value="$cliente->cn_correo"/></div>
                        <div class="col-md-3"><x-show-field label="Teléfono"    :value="$cliente->cn_telefono"/></div>

                        <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Cobranza</h6></div>
                        <div class="col-md-4"><x-show-field label="Responsable" :value="$cliente->cc_responsable"/></div>
                        <div class="col-md-4"><x-show-field label="Correo"      :value="$cliente->cc_correo"/></div>
                        <div class="col-md-3"><x-show-field label="Teléfono"    :value="$cliente->cc_telefono"/></div>

                        <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Siniestros</h6></div>
                        <div class="col-md-4"><x-show-field label="Responsable" :value="$cliente->cs_responsable"/></div>
                        <div class="col-md-4"><x-show-field label="Correo"      :value="$cliente->cs_correo"/></div>
                        <div class="col-md-3"><x-show-field label="Teléfono"    :value="$cliente->cs_telefono"/></div>
                    </div>
                </div>

                {{-- ===== TAB 4: DIRECCIONES ===== --}}
                <div class="tab-pane fade" id="sp-direccion">
                    <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)
                            @php
                                $calle = $cliente->{$dir['prefix'].'_calle'};
                            @endphp
                            @if($calle)
                                <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">{{ $dir['label'] }}</h6></div>
                                <div class="col-md-5"><x-show-field label="Calle"    :value="$calle"/></div>
                                <div class="col-md-2"><x-show-field label="Núm. Ext" :value="$cliente->{$dir['prefix'].'_numero_ext'}"/></div>
                                <div class="col-md-2"><x-show-field label="Núm. Int" :value="$cliente->{$dir['prefix'].'_numero_int'}"/></div>
                                <div class="col-md-3"><x-show-field label="Colonia"  :value="$cliente->{$dir['prefix'].'_colonia'}"/></div>
                                <div class="col-md-3"><x-show-field label="Ciudad"   :value="$cliente->{$dir['prefix'].'_ciudad'}"/></div>
                                <div class="col-md-2"><x-show-field label="C.P."     :value="$cliente->{$dir['prefix'].'_codigo_postal'}"/></div>
                                <div class="col-md-3"><x-show-field label="Estado"   :value="$cliente->{$dir['prefix'].'_estado'}"/></div>
                                <div class="col-md-3"><x-show-field label="País"     :value="$cliente->{$dir['prefix'].'_pais'}"/></div>
                            @endif
                        @endforeach
                    </div>
                </div>

                {{-- ===== TAB 5: REDES SOCIALES ===== --}}
                <div class="tab-pane fade" id="sp-redes">
                    <div class="row g-3">
                        <div class="col-md-6"><x-show-field label="Facebook"  :value="$cliente->rs_facebook"/></div>
                        <div class="col-md-6"><x-show-field label="Instagram" :value="$cliente->rs_instagram"/></div>
                        <div class="col-md-6"><x-show-field label="LinkedIn"  :value="$cliente->rs_linkedin"/></div>
                        <div class="col-md-6"><x-show-field label="Twitter/X" :value="$cliente->rs_twitter"/></div>
                        <div class="col-md-6"><x-show-field label="Sitio Web" :value="$cliente->rs_sitio_web"/></div>
                    </div>
                </div>

                {{-- ===== TAB 6: DATOS ADICIONALES ===== --}}
                <div class="tab-pane fade" id="sp-extra">
                    <div class="row g-3">
                        <div class="col-md-3"><x-show-field label="Clave Agente" :value="$cliente->clave_agente"/></div>
                        <div class="col-md-3"><x-show-field label="Fecha de Alta" :value="optional($cliente->fecha_alta)->format('d/m/Y')"/></div>
                        <div class="col-md-3"><x-show-field label="Origen"       :value="$cliente->origen"/></div>
                        <div class="col-md-8"><x-show-field label="Notas"        :value="$cliente->notas"/></div>
                        <div class="col-md-3 text-muted small">
                            <div>Creado: {{ $cliente->created_at?->format('d/m/Y H:i') }}</div>
                            <div>Actualizado: {{ $cliente->updated_at?->format('d/m/Y H:i') }}</div>
                        </div>
                    </div>
                </div>

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

@endsection

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