{{--
    Componente: recent-orders
    Uso:
        <x-dashboard.recent-orders :orders="$orders" />
--}}

@props(['orders' => []])

<div class="block block-rounded">
    <div class="block-header block-header-default">
        <h3 class="block-title">Recent Orders</h3>
        <div class="block-options space-x-1">
            {{-- Toggle Search --}}
            <button type="button" class="btn btn-sm btn-alt-secondary"
                data-toggle="class-toggle" data-target="#one-dashboard-search-orders" data-class="d-none">
                <i class="fa fa-search"></i>
            </button>

            {{-- Filters Dropdown --}}
            <div class="dropdown d-inline-block">
                <button type="button" class="btn btn-sm btn-alt-secondary"
                    id="dropdown-recent-orders-filters" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-fw fa-flask"></i> Filters
                    <i class="fa fa-angle-down ms-1"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-md dropdown-menu-end fs-sm" aria-labelledby="dropdown-recent-orders-filters">
                    <a class="dropdown-item fw-medium d-flex align-items-center justify-content-between" href="#">
                        Pending <span class="badge bg-primary rounded-pill">20</span>
                    </a>
                    <a class="dropdown-item fw-medium d-flex align-items-center justify-content-between" href="#>
                        Active <span class="badge bg-primary rounded-pill">72</span>
                    </a>
                    <a class="dropdown-item fw-medium d-flex align-items-center justify-content-between" href="#">
                        Completed <span class="badge bg-primary rounded-pill">890</span>
                    </a>
                    <a class="dropdown-item fw-medium d-flex align-items-center justify-content-between" href="#">
                        All <span class="badge bg-primary rounded-pill">997</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Search Form (hidden by default) --}}
    <div id="one-dashboard-search-orders" class="block-content border-bottom d-none">
        <form action="#" method="GET">
            <div class="push">
                <div class="input-group">
                    <input type="text" class="form-control form-control-alt"
                        id="one-ecom-orders-search" name="q" placeholder="Search all orders..">
                    <span class="input-group-text bg-body border-0">
                        <i class="fa fa-search"></i>
                    </span>
                </div>
            </div>
        </form>
    </div>

    <div class="block-content block-content-full">
        <div class="table-responsive">
            <table class="table table-hover table-vcenter">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th class="d-none d-xl-table-cell">Customer</th>
                        <th>Status</th>
                        <th class="d-none d-sm-table-cell text-center">Profit</th>
                        <th class="d-none d-sm-table-cell text-end">Created</th>
                        <th class="d-none d-sm-table-cell text-end">Value</th>
                    </tr>
                </thead>
                <tbody class="fs-sm">
                    @forelse($orders as $order)
                        <tr>
                            <td>
                                <a class="fw-semibold" href="{{ route('orders.show', $order) ?? '#' }}">
                                    {{ $order->order_number }}
                                </a>
                                <p class="fs-sm fw-medium text-muted mb-0">{{ $order->plan ?? 'Standard' }}</p>
                            </td>
                            <td class="d-none d-xl-table-cell">
                                <a class="fw-semibold" href="{{ route('customers.show', $order->customer) ?? '#' }}">
                                    {{ $order->customer->name ?? 'N/A' }}
                                </a>
                                <p class="fs-sm fw-medium text-muted mb-0">{{ $order->customer->role ?? '' }}</p>
                            </td>
                            <td>
                                @php
                                    $statusClasses = [
                                        'active'    => 'bg-info-light text-info',
                                        'pending'   => 'bg-warning-light text-warning',
                                        'completed' => 'bg-success-light text-success',
                                        'cancelled' => 'bg-danger-light text-danger',
                                    ];
                                    $statusClass = $statusClasses[$order->status] ?? 'bg-secondary-light text-secondary';
                                @endphp
                                <span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill {{ $statusClass }}">
                                    {{ ucfirst($order->status) }}
                                </span>
                            </td>
                            <td class="d-none d-sm-table-cell">
                                <div class="progress mb-1" style="height: 5px;" role="progressbar"
                                    aria-valuenow="{{ $order->profit_percent ?? 0 }}" aria-valuemin="0" aria-valuemax="100">
                                    <div class="progress-bar bg-success" style="width: {{ $order->profit_percent ?? 0 }}%;"></div>
                                </div>
                                <p class="fs-xs fw-semibold mb-0">{{ $order->profit_percent ?? 0 }}%</p>
                            </td>
                            <td class="d-none d-sm-table-cell fw-semibold text-muted text-end">
                                {{ $order->created_at->diffForHumans() }}
                            </td>
                            <td class="d-none d-sm-table-cell text-end">
                                <strong>${{ number_format($order->total, 2) }}</strong>
                            </td>
                        </tr>
                    @empty
                        {{-- Filas de muestra cuando no hay datos --}}
                        <tr>
                            <td>
                                <a class="fw-semibold" href="#">ORD.00925</a>
                                <p class="fs-sm fw-medium text-muted mb-0">Premium</p>
                            </td>
                            <td class="d-none d-xl-table-cell">
                                <a class="fw-semibold" href="#">Adam McCoy</a>
                                <p class="fs-sm fw-medium text-muted mb-0">Web developer</p>
                            </td>
                            <td>
                                <span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-info-light text-info">Active</span>
                            </td>
                            <td class="d-none d-sm-table-cell">
                                <div class="progress mb-1" style="height: 5px;" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="100">
                                    <div class="progress-bar bg-success" style="width: 13%;"></div>
                                </div>
                                <p class="fs-xs fw-semibold mb-0">13%</p>
                            </td>
                            <td class="d-none d-sm-table-cell fw-semibold text-muted text-end">3 min ago</td>
                            <td class="d-none d-sm-table-cell text-end"><strong>$238,70</strong></td>
                        </tr>
                        <tr>
                            <td>
                                <a class="fw-semibold" href="#">ORD.00924</a>
                                <p class="fs-sm fw-medium text-muted mb-0">Premium</p>
                            </td>
                            <td class="d-none d-xl-table-cell">
                                <a class="fw-semibold" href="#">Carol Ray</a>
                                <p class="fs-sm fw-medium text-muted mb-0">Digital Nomad</p>
                            </td>
                            <td>
                                <span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-warning-light text-warning">Pending</span>
                            </td>
                            <td class="d-none d-sm-table-cell">
                                <div class="progress mb-1" style="height: 5px;" role="progressbar" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100">
                                    <div class="progress-bar bg-success" style="width: 9%;"></div>
                                </div>
                                <p class="fs-xs fw-semibold mb-0">9%</p>
                            </td>
                            <td class="d-none d-sm-table-cell fw-semibold text-muted text-end">9 min ago</td>
                            <td class="d-none d-sm-table-cell text-end"><strong>$1736,50</strong></td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Pagination --}}
    <div class="block-content block-content-full bg-body-light">
        @if($orders instanceof \Illuminate\Pagination\LengthAwarePaginator)
            {{ $orders->links() }}
        @else
            <nav aria-label="Orders Navigation">
                <ul class="pagination pagination-sm justify-content-end mb-0">
                    <li class="page-item"><a class="page-link" href="#">Prev</a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                </ul>
            </nav>
        @endif
    </div>
</div>