@push('styles')
<style>

/* Icono PDF real para Plan de aportaciones: no usa PNG ni FontAwesome */
.pdf-doc-icon{
    width:24px;
    height:28px;
    position:relative;
    display:inline-flex;
    align-items:flex-end;
    justify-content:center;
    flex:0 0 auto;
    border-radius:4px;
    background:#ffffff;
    border:2px solid #1f2937;
    color:#dc2626;
    font-family:Arial,Helvetica,sans-serif;
    font-size:8px;
    font-weight:900;
    line-height:1;
    padding-bottom:4px;
    box-shadow:0 1px 0 rgba(255,255,255,.75) inset;
}
.pdf-doc-icon::before{
    content:"";
    position:absolute;
    top:-2px;
    right:-2px;
    width:9px;
    height:9px;
    background:linear-gradient(135deg,#e5e7eb 0 50%,#fff 50% 100%);
    border-left:2px solid #1f2937;
    border-bottom:2px solid #1f2937;
    border-top-right-radius:3px;
}
.pdf-doc-icon span{
    position:relative;
    z-index:1;
    letter-spacing:.02em;
}
.account-v-actions .btn .pdf-doc-icon,
.vinc-actions .btn .pdf-doc-icon,
.client-actions .btn .pdf-doc-icon,
.card .btn .pdf-doc-icon{
    margin:0;
}
.clients-pagination{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    width:100%;
    margin-top:14px;
}
.clients-page-numbers{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:0;
    overflow-x:auto;
    padding:2px 4px;
}
.clients-page-link,
.clients-page-number,
.clients-page-ellipsis{
    min-width:38px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line-strong);
    border-radius:8px;
    background:var(--surface);
    color:var(--text);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    line-height:1;
    white-space:nowrap;
}
.clients-page-link{
    min-width:96px;
    padding:0 14px;
}
.clients-page-link:hover,
.clients-page-number:hover{
    border-color:var(--gold);
    color:var(--gold-strong);
}
.clients-page-number.is-current{
    background:var(--gold);
    border-color:var(--gold);
    color:#111827;
}
.clients-page-link.is-disabled{
    opacity:.45;
    cursor:not-allowed;
}
.clients-page-ellipsis{
    border-color:transparent;
    background:transparent;
    min-width:28px;
}
body.panel-theme-modern .clients-page-link,
body.panel-theme-modern .clients-page-number,
body.panel-theme-modern .clients-page-ellipsis,
body.panel-theme-classic .clients-page-link,
body.panel-theme-classic .clients-page-number,
body.panel-theme-classic .clients-page-ellipsis{
    box-shadow:none!important;
}
@media(max-width:720px){
    .clients-pagination{grid-template-columns:1fr;gap:8px}
    .clients-page-link{width:100%}
    .clients-page-numbers{justify-content:flex-start}
}

</style>
@endpush
@extends('layouts.app', ['title' => term('nav_clients','Clientes')])

@section('header_actions')
<button class="btn btn-primary" type="button" data-modal-open="modal-add-client"><i class="fa-solid fa-user-plus"></i>Agregar cliente</button>
@endsection

@section('content')
<div class="grid g2" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-users"></i><div class="metric-val">{{ $clients->total() }}</div><div class="metric-label">Total clientes</div></div>
    <div class="metric"><i class="fa-solid fa-handshake"></i><div class="metric-val text-gold">{{ $advisors->count() }}</div><div class="metric-label">Asesores</div></div>
    {{-- Tarjetas de estado (En negociación / Cerrados) ocultas a petición --}}
</div>

<div class="toolbar">
    <form class="filter-bar" method="get">
        <div class="fb-search">
            <span class="fb-search-icon"><i class="fa-solid fa-magnifying-glass"></i></span>
            <input name="search" placeholder="Buscar clientes por nombre, email, RFC, teléfono…" value="{{ request('search') }}">
        </div>

        <div class="fb-divider"></div>

        {{-- Filtro de estado (Negociación/Cerrado…) oculto a petición --}}

        <label class="fb-field">
            <span class="fb-label">Asesor</span>
            <select name="advisor_id">
                <option value="">Todos los asesores</option>
                @foreach($advisors as $advisor)
                    <option value="{{ $advisor->id }}" @selected(request('advisor_id') == $advisor->id)>{{ $advisor->name }}</option>
                @endforeach
            </select>
        </label>

        <div class="fb-actions">
            <button class="btn btn-primary" type="submit"><i class="fa-solid fa-magnifying-glass"></i> Buscar</button>
            @if(request()->hasAny(['search','advisor_id']))
                <a class="btn btn-ghost" href="{{ route('clients.index') }}" data-tip="Limpiar filtros"><i class="fa-solid fa-xmark"></i></a>
            @endif
        </div>
    </form>
    {{-- Botones de exportar CSV/Excel y PDF ocultos a petición --}}
</div>

<div class="card" id="clients-print">
    <div class="card-head"><div><div class="card-title">Cartera de clientes</div><div class="sub">{{ $clients->total() }} registros</div></div></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Cliente</th><th>Teléfono / Celular</th><th>Domicilio</th><th>Asesor</th><th style="width:50px"></th></tr></thead>
            <tbody>
            @forelse($clients as $client)
                @php
                    $ubic = trim(collect([$client->municipio ?? null, $client->estado ?? null])->filter()->implode(', '));
                @endphp
                <tr>
                    <td><a href="{{ route('clients.show', $client) }}" style="color:inherit;text-decoration:none"><strong style="border-bottom:1px dotted var(--line-strong)">{{ $client->name }}</strong></a><div class="sub">ID #{{ $client->id }} · {{ $client->rfc ?: 'sin RFC' }}</div></td>
                    <td>{{ $client->phone ?: '—' }}<div class="sub">{{ $client->ocupacion ?: '' }}</div></td>
                    <td>{{ $ubic ?: (\Illuminate\Support\Str::limit((string) $client->domicilio, 40, '…') ?: '—') }}<div class="sub">{{ $client->colonia ?? '' }}</div></td>
                    <td>{{ $client->advisor?->name ?? 'Sin asignar' }}</td>
                    <td>
                        <div class="kebab">
                            <button class="kebab-trigger" type="button" data-kebab data-tip="Más acciones"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                            <div class="kebab-menu">
                                <div class="group-label">Cliente</div>
                                <a href="{{ route('clients.show', $client) }}"><i class="fa-solid fa-folder-open"></i> Ver expediente</a>
                                <button type="button" data-modal-open="modal-edit-client-{{ $client->id }}"><i class="fa-solid fa-pen"></i> Editar datos</button>
                                @if($client->phone)
                                    @php $phoneClean = preg_replace('/\D+/','',$client->phone); $waPhone = strlen($phoneClean) === 10 ? '52'.$phoneClean : $phoneClean; @endphp
                                    <a href="https://wa.me/{{ $waPhone }}" target="_blank" rel="noopener"><i class="fa-brands fa-whatsapp"></i> Enviar WhatsApp</a>
                                @endif
                                {{-- Email de contacto oculto a peticion --}}
                                <hr>
                                <form method="post" action="{{ route('clients.destroy', $client) }}" onsubmit="return confirm('¿Eliminar cliente?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="danger"><i class="fa-solid fa-trash"></i> Eliminar cliente</button>
                                </form>
                            </div>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="5" style="text-align:center;color:var(--muted);padding:30px">Sin clientes con los filtros actuales.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    {{ $clients->onEachSide(2)->links('vendor.pagination.clients') }}
</div>
@endsection


@section('modals')
<div class="modal-backdrop" id="modal-add-client">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-user-plus text-gold"></i> Nuevo cliente</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('clients.store') }}">
            @csrf
            <div class="modal-body">
                {{-- Datos personales --}}
                <div class="form-grid two">
                    <label>Nombre(s) *<input name="nombres" required placeholder="Ej. Juan Carlos"></label>
                    <label>Primer apellido *<input name="primer_apellido" required placeholder="Ej. Pérez"></label>
                    <label>Segundo apellido<input name="segundo_apellido" placeholder="Ej. López"></label>
                    <label>Sexo
                        <select data-sexo>
                            <option value="">— Selecciona —</option>
                            <option value="Masculino">Masculino</option>
                            <option value="Femenino">Femenino</option>
                        </select>
                    </label>
                    <label>Género
                        <select name="genero" data-genero data-current="">
                            <option value="">— Selecciona —</option>
                        </select>
                    </label>
                    <label>Lugar de nacimiento<input name="lugar_nacimiento" placeholder="Ej. Tepic, Nayarit"></label>
                    <label>Fecha de nacimiento<input type="date" name="fecha_nacimiento"></label>
                    <label>Estado civil
                        <select name="estado_civil" data-estado-civil data-current="">
                            <option value="">— Selecciona —</option>
                        </select>
                    </label>
                    <label>Ocupación<input name="ocupacion" placeholder="Ej. Comerciante, Empleado, Profesionista"></label>
                    <label>Beneficiario sustituto<input name="beneficiario_sustituto" maxlength="160" placeholder="Nombre en caso de fallecimiento"></label>
                    <label>Representante legal<input name="representante_legal" maxlength="180" placeholder="Si aplica"></label>
                    <label style="grid-column:1/-1">Asesor<select name="advisor_id"><option value="">Sin asignar</option>@foreach($advisors as $advisor)<option value="{{ $advisor->id }}">{{ $advisor->name }}</option>@endforeach</select></label>
                </div>

                {{-- Domicilio --}}
                <fieldset style="border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(255,255,255,.02);margin-top:14px">
                    <legend class="sub" style="padding:0 8px;color:var(--gold);font-weight:600">Domicilio</legend>
                    <div class="form-grid two" style="margin-top:4px">
                        <label style="grid-column:1/-1">Calle<input name="calle" placeholder="Av. México"></label>
                        <label>Número<input name="numero" placeholder="123 / S/N"></label>
                        <label>Colonia<input name="colonia" placeholder="Centro"></label>
                        <label>Código Postal<input name="codigo_postal" maxlength="10" placeholder="63000"></label>
                        <label>Municipio<input name="municipio" placeholder="Tepic"></label>
                        <label>Estado<input name="estado" placeholder="Nayarit"></label>
                        <label>Teléfono / Celular<input name="phone" placeholder="3111234567"></label>
                    </div>
                </fieldset>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Registrar cliente</button>
            </div>
        </form>
    </div>
</div>

@foreach($clients as $client)
<div class="modal-backdrop" id="modal-edit-client-{{ $client->id }}">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-pen text-gold"></i> Editar — {{ $client->name }}</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('clients.update', $client) }}">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Nombre(s) *<input name="nombres" value="{{ $client->nombres ?: $client->name }}" required></label>
                    <label>Primer apellido<input name="primer_apellido" value="{{ $client->primer_apellido ?? '' }}"></label>
                    <label>Segundo apellido<input name="segundo_apellido" value="{{ $client->segundo_apellido ?? '' }}"></label>
                    @php $sexoEd = in_array($client->genero ?? '', ['EL ASOCIADO','LOS ASOCIADOS','El Asociado','Los Asociados']) ? 'Masculino' : (in_array($client->genero ?? '', ['LA ASOCIADA','LAS ASOCIADAS','La Asociada','Las Asociadas']) ? 'Femenino' : ''); @endphp
                    <label>Sexo
                        <select data-sexo>
                            <option value="">— Selecciona —</option>
                            <option value="Masculino" @selected($sexoEd === 'Masculino')>Masculino</option>
                            <option value="Femenino" @selected($sexoEd === 'Femenino')>Femenino</option>
                        </select>
                    </label>
                    <label>Género
                        <select name="genero" data-genero data-current="{{ $client->genero ?? '' }}">
                            <option value="">— Selecciona —</option>
                        </select>
                    </label>
                    <label>Lugar de nacimiento<input name="lugar_nacimiento" value="{{ $client->lugar_nacimiento ?? '' }}" placeholder="Ej. Tepic, Nayarit"></label>
                    <label>Fecha de nacimiento<input type="date" name="fecha_nacimiento" value="{{ optional($client->fecha_nacimiento)->format('Y-m-d') }}"></label>
                    <label>Estado civil
                        <select name="estado_civil" data-estado-civil data-current="{{ $client->estado_civil ?? '' }}">
                            <option value="">— Selecciona —</option>
                        </select>
                    </label>
                    <label>Ocupación<input name="ocupacion" value="{{ $client->ocupacion ?? '' }}" placeholder="Ej. Comerciante, Empleado"></label>
                    <label>Beneficiario sustituto<input name="beneficiario_sustituto" value="{{ $client->beneficiario_sustituto ?? '' }}" maxlength="160" placeholder="Nombre en caso de fallecimiento"></label>
                    <label>Representante legal<input name="representante_legal" value="{{ $client->representante_legal ?? '' }}" maxlength="180" placeholder="Si aplica"></label>
                    <label style="grid-column:1/-1">Asesor<select name="advisor_id"><option value="">Sin asignar</option>@foreach($advisors as $advisor)<option value="{{ $advisor->id }}" @selected($client->advisor_id === $advisor->id)>{{ $advisor->name }}</option>@endforeach</select></label>
                </div>

                {{-- Datos fiscales (opcional) --}}
                <fieldset style="border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(255,255,255,.02);margin-top:14px">
                    <legend class="sub" style="padding:0 8px;color:var(--gold);font-weight:600">Datos fiscales (opcional)</legend>
                    <div class="form-grid two" style="margin-top:4px">
                        <label>RFC<input name="rfc" value="{{ $client->rfc }}" placeholder="XXXX000000XX0" style="text-transform:uppercase"></label>
                        <label>CURP<input name="curp" maxlength="18" value="{{ $client->curp }}" placeholder="XXXX000000XXXXXX00" style="text-transform:uppercase"></label>
                    </div>
                </fieldset>

                <fieldset style="border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(255,255,255,.02);margin-top:14px">
                    <legend class="sub" style="padding:0 8px;color:var(--gold);font-weight:600">Domicilio</legend>
                    @if($client->domicilio && ! ($client->calle ?? null))
                        <div class="sub" style="margin-bottom:8px;font-size:11px;color:var(--soft)"><i class="fa-solid fa-circle-info"></i> Domicilio actual: {{ $client->domicilio }}</div>
                    @endif
                    <div class="form-grid two" style="margin-top:4px">
                        <label style="grid-column:1/-1">Calle<input name="calle" value="{{ $client->calle ?? '' }}" placeholder="Av. México"></label>
                        <label>Número<input name="numero" value="{{ $client->numero ?? '' }}" placeholder="123 / S/N"></label>
                        <label>Colonia<input name="colonia" value="{{ $client->colonia ?? '' }}" placeholder="Centro"></label>
                        <label>Código Postal<input name="codigo_postal" maxlength="10" value="{{ $client->codigo_postal ?? '' }}" placeholder="63000"></label>
                        <label>Municipio<input name="municipio" value="{{ $client->municipio ?? '' }}" placeholder="Tepic"></label>
                        <label>Estado<input name="estado" value="{{ $client->estado ?? '' }}" placeholder="Nayarit"></label>
                        <label>Teléfono / Celular<input name="phone" value="{{ $client->phone }}" placeholder="3111234567"></label>
                    </div>
                </fieldset>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar cambios</button>
            </div>
        </form>
    </div>
</div>
@endforeach
@endsection

@push('scripts')
<script>
(function(){
    // Sexo controla las opciones de Género y Estado civil (forma correcta por género).
    const GEN = { Masculino:['EL ASOCIADO','LOS ASOCIADOS'], Femenino:['LA ASOCIADA','LAS ASOCIADAS'] };
    const EST = { Masculino:['Soltero','Casado','Unión libre','Divorciado','Viudo'], Femenino:['Soltera','Casada','Unión libre','Divorciada','Viuda'] };
    function fill(sel, opts, preserve){
        if(!sel) return;
        const cur = preserve ? (sel.getAttribute('data-current') || '') : '';
        sel.innerHTML = '<option value="">— Selecciona —</option>';
        let matched = false;
        (opts||[]).forEach(o => { const op=document.createElement('option'); op.value=o; op.textContent=o; if(o===cur){op.selected=true;matched=true;} sel.appendChild(op); });
        if(preserve && cur && !matched){ const op=document.createElement('option'); op.value=cur; op.textContent=cur; op.selected=true; sel.appendChild(op); }
    }
    function sync(form, preserve){
        if(!form) return;
        const sx = form.querySelector('[data-sexo]'); if(!sx) return;
        fill(form.querySelector('[data-genero]'), GEN[sx.value] || [], preserve);
        fill(form.querySelector('[data-estado-civil]'), EST[sx.value] || [], preserve);
    }
    function initAll(){ document.querySelectorAll('[data-sexo]').forEach(sx => sync(sx.closest('form'), true)); }
    if(document.readyState !== 'loading') initAll(); else document.addEventListener('DOMContentLoaded', initAll);
    document.addEventListener('change', e => { if(e.target && e.target.hasAttribute('data-sexo')) sync(e.target.closest('form'), false); });
})();
</script>
@endpush