{{-- Diseño moderno (v3): lista de reservas. Misma búsqueda, pestañas y acciones que reservation/index; solo cambia la presentación. --}}
@extends('layout.main') @section('content')
@include('reservation._alerts')
@php
    $tab = ['1' => 'activas', '2' => 'cerradas', '3' => 'cerradas', '4' => 'pagadas', 'cerradas' => 'cerradas', 'all' => 'todas', 'vencidas' => 'vencidas'][(string) $status] ?? 'activas';
    $tabs = ['activas' => ['1', 'Activas'], 'vencidas' => ['vencidas', 'Vencidas'], 'pagadas' => ['4', 'Pagadas'], 'cerradas' => ['cerradas', 'Cerradas'], 'todas' => ['all', 'Todas']];
    $pill = function ($r) {
        if ($r->is_overdue) return 'v3-pill-red';
        return [1 => 'v3-pill-gray', 2 => 'v3-pill-green', 3 => 'v3-pill-gray', 4 => 'v3-pill-brand', 5 => 'v3-pill-brand'][$r->status] ?? 'v3-pill-gray';
    };
    $selectable = $tab == 'pagadas' && $can_edit;
@endphp
<div class="v3-page">
    <div class="v3-head">
        <h1>Reservas</h1>
        <div class="v3-actions">
            <a href="{{ route('reservations.create') }}" class="v3-btn v3-btn-primary">+ Nueva reserva</a>
            <a href="{{ route('reservations.customers') }}" class="v3-btn">Clientes</a>
            <a href="{{ route('reservations.settings') }}" class="v3-btn v3-btn-icon" title="Configuración de reservas" aria-label="Configuración de reservas"><i class="fa fa-cog"></i></a>
        </div>
    </div>

    <div class="v3-kpis">
        <a href="{{ route('reservations.index', ['status' => 1]) }}" class="v3-kpi"><span>Activas</span><strong>{{ $kpis['activas'] }}</strong></a>
        <a href="{{ route('reservations.index', ['status' => 'vencidas']) }}" class="v3-kpi {{ $kpis['vencidas'] ? 'v3-kpi-red' : '' }}"><span>Vencidas</span><strong>{{ $kpis['vencidas'] }}</strong></a>
        <a href="{{ route('reservations.index', ['status' => 4]) }}" class="v3-kpi"><span>Por enviar / retirar</span><strong>{{ $kpis['pagadas'] }}</strong></a>
        <div class="v3-kpi"><span>Saldo por cobrar</span><strong>${{ number_format($kpis['saldo'], 2) }}</strong></div>
    </div>

    <form method="get" action="{{ route('reservations.index') }}" class="v3-filters">
        <input type="hidden" name="status" value="{{ $status }}">
        <div class="v3-search"><i class="fa fa-search"></i><input type="search" name="q" value="{{ $search }}" placeholder="Buscar cliente, código, cédula, producto o N° de reserva…" aria-label="Buscar reservas"></div>
        @foreach($tabs as $key => [$value, $label])
        <a href="{{ route('reservations.index', array_filter(['status' => $value, 'q' => $search])) }}" class="v3-chip {{ $tab == $key ? 'is-on' : '' }}">{{ $label }}</a>
        @endforeach
    </form>

    @if($tab == 'pagadas')
    <p class="v3-hint">Ya pagadas. Cuando el paquete sale o el cliente lo retira, abre la reserva y pulsa <strong>Confirmar envío</strong> o <strong>Confirmar retiro</strong>; para varias, márcalas y usa el botón de abajo.</p>
    @endif

    @if($reservations->isEmpty())
        <div class="v3-card v3-empty">
            @if($search !== '' && $status !== 'all')
            No hay reservas con "{{ $search }}" aquí. <a href="{{ route('reservations.index', ['status' => 'all', 'q' => $search]) }}"><strong>Buscar en todas</strong></a>
            @else
            No hay reservas aquí. <a href="{{ route('reservations.create') }}"><strong>Crear una reserva</strong></a>
            @endif
        </div>
    @else
    @if($selectable){!! Form::open(['route' => 'reservations.deliver-many', 'method' => 'post', 'id' => 'deliver-many-form']) !!}@endif
    <div class="v3-card v3-card-flush">
        <table class="v3-table">
            <thead><tr>
                @if($selectable)<th class="v3-check"><input type="checkbox" onclick="$('.res-check').prop('checked', this.checked)" aria-label="Marcar todas"></th>@endif
                <th>Cliente</th><th>Entrega</th><th class="text-right">Total</th><th class="text-right">Saldo</th><th>Estado</th>
            </tr></thead>
            <tbody>
            @foreach($reservations as $r)
            <tr data-href="{{ route('reservations.show', $r->id) }}">
                @if($selectable)<td class="v3-check"><input type="checkbox" class="res-check" name="ids[]" value="{{ $r->id }}" aria-label="Marcar {{ $r->reference_no }}"></td>@endif
                <td data-label="Cliente">
                    <a href="{{ route('reservations.show', $r->id) }}" class="v3-strong">{{ $r->customer->name ?? ($r->client_code ? 'Código ' . $r->client_code : 'Sin cliente') }}</a>
                    <div class="v3-muted">{{ $r->reference_no }}@if($r->client_code && $r->customer) · {{ $r->client_code }}@endif
                        @if($r->due_date && $r->status == 1) · vence {{ \Carbon\Carbon::parse($r->due_date)->format('d/m') }}@elseif($r->status == 2 && $r->delivered_at) · entregada {{ \Carbon\Carbon::parse($r->delivered_at)->format('d/m') }}@else · {{ $r->created_at->format('d/m') }}@endif
                        · {{ preg_replace('/\s*-\s*Entre Tu y Yo$/i', '', $r->warehouse->name ?? '') }}</div>
                </td>
                <td data-label="Entrega">@if($r->shipping_method){{ $r->shipping_method }}@if($r->delivery_mode == 'envio' && $r->shipping_cost > 0)<div class="v3-muted">${{ number_format($r->shipping_cost, 2) }}</div>@endif @else<span class="v3-muted">Por definir</span>@endif</td>
                <td data-label="Total" class="text-right">${{ number_format($r->total, 2) }}</td>
                <td data-label="Saldo" class="text-right v3-strong">@if($r->surplus > 0)<span class="v3-pill v3-pill-blue">Excedente ${{ number_format($r->surplus, 2) }}</span>@else${{ number_format($r->balance, 2) }}@endif</td>
                <td data-label="Estado"><span class="v3-pill {{ $pill($r) }}">{{ $r->status_label }}</span>
                    @if($r->status == 4 && $r->exit_issues)<div class="v3-muted text-danger">Falta: {{ implode('; ', $r->exit_issues) }}</div>@endif
                    @if($r->merged_into && $r->mergedInto)<div class="v3-muted">→ {{ $r->mergedInto->reference_no }}</div>@endif</td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    @if($selectable)
    <button name="type" value="salida" class="v3-btn v3-btn-green mt-3"><i class="fa fa-check"></i> Confirmar envío / retiro de las seleccionadas</button>
    {!! Form::close() !!}
    <script>
        $('#deliver-many-form button[name=type]').on('click', function(e) {
            var n = $('#deliver-many-form input[name="ids[]"]:checked').length;
            if (!n) { alert('Marca al menos una reserva.'); e.preventDefault(); return; }
            if (!confirm('¿Confirmar el envío o retiro de ' + n + ' reserva(s)? Pasan a ENTREGADAS.\nLas que tengan saldo o no tengan método de entrega se quedan como están y verás el motivo.')) e.preventDefault();
        });
    </script>
    @endif
    <div class="mt-3">{{ $reservations->links('pagination::bootstrap-4') }}</div>
    @endif
</div>
<script>
    // Toda la fila abre la reserva (menos las casillas y los enlaces).
    $('.v3-table').on('click', 'tr[data-href]', function(e) { if (!$(e.target).closest('a,input,button,label').length) location = $(this).data('href'); });
</script>
@endsection