{{-- Diseño moderno (v3): consultar cliente (mismos datos y búsqueda que reservation/customers). --}}
@extends('layout.main') @section('content')
@include('reservation._alerts')
<div class="v3-page">
    <a href="{{ route('reservations.index') }}" class="v3-back">← Reservas</a>
    <div class="v3-head">
        <div><h1>Clientes</h1><p class="v3-sub">Busca por nombre, apellido, cédula/RUC, teléfono o código del cliente.</p></div>
        <div class="v3-actions"><a href="{{ route('reservations.create') }}" class="v3-btn v3-btn-primary">+ Nueva reserva</a></div>
    </div>
    <form method="get" action="{{ route('reservations.customers') }}" class="v3-filters">
        <div class="v3-search"><i class="fa fa-search"></i><input type="search" name="q" value="{{ $search }}" autofocus placeholder="Nombre, cédula/RUC, teléfono o código del cliente" aria-label="Buscar cliente"></div>
        <button class="v3-btn v3-btn-primary"><i class="fa fa-search"></i> Buscar</button>
    </form>
    @if($search === '')
    <div class="v3-card v3-empty"><i class="fa fa-users" style="font-size:28px;opacity:.4"></i><p class="mb-0 mt-2">Escribe al menos 2 letras o números para ver los clientes y sus reservas.</p></div>
    @elseif(mb_strlen($search) < 2)
    <div class="alert alert-info mb-0">Escribe al menos 2 letras o números.</div>
    @elseif($customers->isEmpty() && $codes->isEmpty())
    <div class="v3-card v3-empty">No encontramos clientes con "{{ $search }}".</div>
    @endif
    @if($customers->isNotEmpty())
    <div class="v3-card v3-card-flush">
    <table class="v3-table">
        <thead><tr><th>Cliente</th><th>Teléfono</th><th class="text-right">Activas</th><th class="text-right">Vencidas</th><th class="text-right">Total</th><th></th></tr></thead>
        <tbody>
        @foreach($customers as $c)
        <tr data-href="{{ route('reservations.customer', $c->id) }}">
            <td data-label="Cliente"><a href="{{ route('reservations.customer', $c->id) }}" class="v3-strong">{{ $c->name }}</a><div class="v3-muted">{{ $c->tax_no ?: $c->ruc }}</div></td>
            <td data-label="Teléfono">{{ $c->phone_number ?: '—' }}</td>
            <td data-label="Activas" class="text-right">@if($c->active_reservations)<span class="v3-pill v3-pill-orange">{{ $c->active_reservations }}</span>@else—@endif</td>
            <td data-label="Vencidas" class="text-right">@if($c->overdue_reservations)<span class="v3-pill v3-pill-red">{{ $c->overdue_reservations }}</span>@else—@endif</td>
            <td data-label="Total" class="text-right">{{ $c->all_reservations ?: '—' }}</td>
            <td class="text-right" style="white-space:nowrap"><a href="{{ route('reservations.create', ['customer_id' => $c->id]) }}" class="v3-btn">+ Reserva</a></td>
        </tr>
        @endforeach
        </tbody>
    </table>
    </div>
    @endif
    @if($codes->isNotEmpty())
    <h2 style="font-size:18px;font-weight:800;margin:4px 0 0">Códigos de cliente</h2>
    <div class="v3-card v3-card-flush">
    <table class="v3-table">
        <thead><tr><th>Código</th><th class="text-right">Activas</th><th class="text-right">Total</th><th></th></tr></thead>
        <tbody>
        @foreach($codes as $code)
        <tr data-href="{{ route('reservations.index', ['status' => 'all', 'q' => $code->client_code]) }}">
            <td data-label="Código"><a href="{{ route('reservations.index', ['status' => 'all', 'q' => $code->client_code]) }}" class="v3-strong">{{ $code->client_code }}</a></td>
            <td data-label="Activas" class="text-right">@if($code->activas)<span class="v3-pill v3-pill-orange">{{ $code->activas }}</span>@else—@endif</td>
            <td data-label="Total" class="text-right">{{ $code->total }}</td>
            <td class="text-right"><a href="{{ route('reservations.index', ['status' => 'all', 'q' => $code->client_code]) }}" class="v3-btn">Ver reservas</a></td>
        </tr>
        @endforeach
        </tbody>
    </table>
    </div>
    @endif
</div>
<script>$('.v3-table').on('click', 'tr[data-href]', function(e) { if (!$(e.target).closest('a,input,button').length) location = $(this).data('href'); });</script>
@endsection