@extends('dashboard.body.main')

@section('container')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 mb-4">
            <div class="card border-0 shadow-sm rounded-xl p-3 bg-white d-flex flex-wrap flex-row align-items-center justify-content-between" style="border-radius: 16px;">
                <div>
                    <h4 class="font-weight-extrabold text-dark mb-1">
                        <i class="ri-history-line text-primary mr-2" style="color: var(--mh-pink) !important;"></i> Historial General de Ventas
                    </h4>
                    <p class="text-muted mb-0 font-size-13">Consolidado completo de tickets emitidos, pagos en efectivo, tarjeta y ventas a crédito.</p>
                </div>

                {{-- Buscador y Filtros --}}
                <form action="{{ route('order.salesHistory') }}" method="GET" class="d-flex flex-wrap align-items-center mt-3 mt-md-0" style="gap: 8px;">
                    <div class="input-group input-group-sm" style="max-width: 240px;">
                        <input type="text" name="search" class="form-control bg-light border-right-0" placeholder="N° Ticket, cliente o cajero..." value="{{ request('search') }}" style="border-radius: 10px 0 0 10px; height: 36px;">
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-primary" style="border-radius: 0 10px 10px 0; background-color: var(--mh-pink) !important; border-color: var(--mh-pink) !important;">
                                <i class="ri-search-line"></i>
                            </button>
                        </div>
                    </div>

                    <select name="payment_status" class="form-control form-control-sm font-weight-bold" onchange="this.form.submit()" style="max-width: 160px; height: 36px; border-radius: 10px; font-size: 12px;">
                        <option value="">Todos los Pagos</option>
                        <option value="HandCash" {{ request('payment_status') == 'HandCash' ? 'selected' : '' }}>Efectivo</option>
                        <option value="Tarjeta" {{ request('payment_status') == 'Tarjeta' ? 'selected' : '' }}>Tarjeta / Débito</option>
                        <option value="Transferencia" {{ request('payment_status') == 'Transferencia' ? 'selected' : '' }}>Transferencia</option>
                        <option value="Due" {{ request('payment_status') == 'Due' ? 'selected' : '' }}>Pendiente / Crédito</option>
                    </select>

                    @if(request('search') || request('payment_status'))
                        <a href="{{ route('order.salesHistory') }}" class="btn btn-sm btn-light border font-weight-bold" style="border-radius: 10px; height: 36px; line-height: 24px;" title="Limpiar filtros">
                            <i class="ri-refresh-line"></i> Limpiar
                        </a>
                    @endif
                </form>
            </div>
        </div>

        {{-- Tabla de Historial de Ventas --}}
        <div class="col-lg-12">
            <div class="card border-0 shadow-sm rounded-xl bg-white p-4" style="border-radius: 16px;">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th>N° Ticket / Factura</th>
                                <th>Fecha & Hora</th>
                                <th>Cliente</th>
                                <th>Cajero</th>
                                <th>Método de Pago</th>
                                <th class="text-right">Total ($)</th>
                                <th class="text-center">Estado</th>
                                <th class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($orders as $order)
                            <tr>
                                <td>
                                    <strong class="text-primary font-weight-bold" style="color: var(--mh-pink) !important;">
                                        #{{ $order->invoice_no }}
                                    </strong>
                                </td>
                                <td class="font-size-13 text-muted">
                                    {{ \Carbon\Carbon::parse($order->order_date)->format('d/m/Y') }} 
                                    <small class="d-block text-muted">{{ $order->created_at ? $order->created_at->format('H:i:s') : '' }}</small>
                                </td>
                                <td class="font-weight-bold text-dark">
                                    {{ $order->customer->name ?? 'Cliente General' }}
                                </td>
                                <td class="text-muted font-size-12">
                                    <i class="ri-user-line mr-1"></i>{{ $order->user->name ?? 'Sistema' }}
                                </td>
                                <td>
                                    @if($order->payment_status == 'HandCash')
                                        <span class="badge badge-success px-2 py-1"><i class="ri-money-dollar-circle-line mr-1"></i>Efectivo</span>
                                    @elseif($order->payment_status == 'Tarjeta')
                                        <span class="badge badge-primary px-2 py-1" style="background-color: var(--mh-pink) !important;"><i class="ri-bank-card-line mr-1"></i>Tarjeta</span>
                                    @elseif($order->payment_status == 'Transferencia')
                                        <span class="badge badge-info px-2 py-1"><i class="ri-swap-line mr-1"></i>Transferencia</span>
                                    @else
                                        <span class="badge badge-warning px-2 py-1" style="background-color: #FFE4EC; color: #FF2B66;"><i class="ri-time-line mr-1"></i>Pendiente</span>
                                    @endif
                                </td>
                                <td class="font-weight-extrabold text-dark text-right font-size-15">
                                    ${{ number_format($order->total, 0, ',', '.') }}
                                </td>
                                <td class="text-center">
                                    @if($order->order_status == 'complete')
                                        <span class="badge badge-success px-2 py-1">Completada</span>
                                    @else
                                        <span class="badge badge-warning px-2 py-1">Pendiente</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <div class="d-inline-flex align-items-center" style="gap: 4px;">
                                        <a href="{{ route('order.orderDetails', $order->id) }}" class="btn btn-sm btn-light border font-weight-bold" style="border-radius: 8px;" title="Ver Detalles">
                                            <i class="ri-eye-line"></i> Detalles
                                        </a>
                                        <a href="{{ route('pos.printTicket', $order->id) }}" target="_blank" class="btn btn-sm btn-outline-primary font-weight-bold" style="border-radius: 8px; border-color: var(--mh-pink); color: var(--mh-pink);" title="Imprimir Ticket">
                                            <i class="ri-printer-line"></i> Ticket
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center py-5 text-muted">No hay registros de ventas para la búsqueda realizada.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="mt-3 d-flex justify-content-between align-items-center">
                    <span class="text-muted font-size-12">
                        Mostrando {{ $orders->firstItem() ?? 0 }} a {{ $orders->lastItem() ?? 0 }} de {{ $orders->total() }} ventas registradas
                    </span>
                    <div>
                        {{ $orders->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection