@extends('layouts.cliente.app')

@section('title','Minhas Compras')

@section('content')
<div class="container py-4">

<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <h4 class="fw-bold mb-0">Minhas Compras</h4>

    <span class="badge bg-primary">
        {{ $orders->total() }} pedidos
    </span>
</div>

@if($orders->count())

<div class="row g-3">

@foreach($orders as $order)

<div class="col-12">
<div class="card border-0 shadow-sm order-card">

<div class="card-body">

<div class="row align-items-center g-3">

<div class="col-lg-3">
    <small class="text-muted d-block">Número</small>
    <div class="fw-bold">{{ $order->numero }}</div>
</div>

<div class="col-lg-3">
    <small class="text-muted d-block">Data</small>
    <div>{{ $order->created_at->format('d/m/Y H:i') }}</div>
</div>

<div class="col-lg-2">
    <small class="text-muted d-block">Pagamento</small>
    <div class="fw-semibold text-capitalize">
        {{ $order->payment_method }}
    </div>
</div>

<div class="col-lg-2">
    <small class="text-muted d-block">Total</small>
    <div class="fw-bold text-success">
        {{ number_format($order->total,2,',','.') }} Kz
    </div>
</div>

<div class="col-lg-2 text-lg-end">
    <a href="{{ route('dashboard.cliente.compras.show',$order) }}"
       class="btn btn-primary btn-sm w-100">
        Ver Detalhes
    </a>
</div>

</div>

</div>
</div>
</div>

@endforeach

</div>

<div class="mt-4">
    {{ $orders->links() }}
</div>

@else

<div class="text-center py-5">
    <h5 class="text">Nenhuma compra realizada</h5>
</div>

@endif

</div>

<style>
.order-card{
    border-radius:14px;
    transition:.25s;
}
.order-card:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}
</style>
@endsection