@extends('layouts.admin.app')

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

    {{-- HEADER --}}
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">

        <div>
            <h3 class="fw-bold mb-1 text-light"> Encomendas</h3>
            <small class="text-light">
                Gestão de compras realizadas pelos clientes
            </small>
        </div>

        {{-- SEARCH --}}
        <form method="GET" class="d-flex gap-2">
            <div class="input-group">
                <span class="input-group-text bg-white">🔍</span>
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       class="form-control"
                       placeholder="Pesquisar nº ou cliente...">
            </div>
        </form>

    </div>

    {{-- CARD --}}
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">

        <div class="table-responsive">

            <table class="table align-middle mb-0">

                <thead class="bg-dark text-white">
                    <tr>
                        <th class="ps-3">Nº Encomenda</th>
                        <th>Cliente</th>
                        <th>Total</th>
                        <th>Pagamento</th>
                        <th>Status</th>
                        <th>Data</th>
                        <th class="text-center">Ações</th>
                    </tr>
                </thead>

                <tbody>

                    @forelse($orders as $order)
                        <tr class="border-bottom align-middle hover-row">

                            {{-- Nº --}}
                            <td class="ps-3 fw-bold text-primary">
                                #{{ $order->numero }}
                            </td>

                            {{-- Cliente --}}
                            <td>
                                <div class="fw-semibold">{{ $order->cliente_nome }}</div>
                                <small class="text-muted">{{ $order->cliente_telefone }}</small>
                            </td>

                            {{-- TOTAL --}}
                            <td class="fw-bold text-success">
                                {{ number_format($order->total, 2, ',', '.') }} Kz
                            </td>

                            {{-- PAGAMENTO --}}
                            <td>
                                <span class="badge rounded-pill bg-info text-dark px-3 py-2">
                                    {{ ucfirst($order->payment_method) }}
                                </span>
                            </td>

                            {{-- STATUS --}}
                            <td>
                                @php
                                    $status = $order->status;
                                @endphp

                                <span class="badge rounded-pill px-3 py-2
                                    @if($status === 'pendente') bg-warning text-dark
                                    @elseif($status === 'pago') bg-success
                                    @elseif($status === 'cancelado') bg-danger
                                    @else bg-secondary
                                    @endif">
                                    {{ ucfirst($status) }}
                                </span>
                            </td>

                            {{-- DATA --}}
                            <td class="text-muted">
                                {{ $order->created_at?->format('d/m/Y H:i') ?? '-' }}
                            </td>

                            {{-- AÇÕES --}}
                            <td class="text-center">
                                <a href="{{ route('dashboard.admin.encomendas.show',$order->id) }}"
                                   class="btn btn-outline-dark btn-sm px-3 rounded-pill">
                                    👁 Ver
                                </a>
                            </td>

                        </tr>
                    @empty

                        <tr>
                            <td colspan="7" class="text-center py-5 text-muted">
                                <div class="py-4">
                                    <h5 class="mb-2">Nenhuma encomenda encontrada</h5>
                                    <small>Tente alterar os filtros de pesquisa</small>
                                </div>
                            </td>
                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

        {{-- PAGINATION --}}
        <div class="p-3 d-flex justify-content-center">
            {{ $orders->withQueryString()->links() }}
        </div>

    </div>

</div>

{{-- STYLE EXTRA (UX melhorada) --}}
<style>
    .hover-row:hover {
        background-color: #f8f9fa;
        transition: 0.2s;
    }

    .table td, .table th {
        vertical-align: middle;
    }
</style>

@endsection