@extends('admin.layout')

@section('title', 'Order')

@section('content')
<div class="admin-orders-page">

    {{-- Page header --}}
    <section class="admin-section-header">
        <div>
            <span class="admin-page-eyebrow">Transaction Management</span>

            <h1 class="admin-section-title font-display">
                Daftar <span>Order</span>
            </h1>

            <p class="admin-section-description">
                Cari, pantau, dan buka detail transaksi pelanggan.
            </p>
        </div>

        <div class="admin-section-total">
            <span>Total Order</span>
            <strong class="font-figures">
                {{ number_format($orders->total(), 0, ',', '.') }}
            </strong>
        </div>
    </section>

    {{-- Search --}}
    <section class="admin-order-toolbar">
        <form method="GET" class="admin-order-search">
            <div class="admin-order-search-field">
                <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.8"
                    aria-hidden="true"
                >
                    <circle cx="11" cy="11" r="7"></circle>
                    <path
                        stroke-linecap="round"
                        d="m20 20-4-4"
                    ></path>
                </svg>

                <input
                    type="text"
                    name="q"
                    value="{{ request('q') }}"
                    placeholder="Cari invoice, nama, atau WhatsApp"
                    autocomplete="off"
                >
            </div>

            <button type="submit" class="admin-button admin-button-primary">
                Cari
            </button>

            @if (request('q'))
                <a
                    href="{{ route('admin.orders.index') }}"
                    class="admin-button admin-button-ghost"
                >
                    Reset
                </a>
            @endif
        </form>

        @if (request('q'))
            <p class="admin-order-filter-info">
                Menampilkan hasil untuk:
                <strong class="font-figures">
                    {{ request('q') }}
                </strong>
            </p>
        @endif
    </section>

    {{-- Desktop table --}}
    <section class="admin-order-table-panel">
        <div class="admin-order-table-scroll">
            <table class="admin-order-table">
                <thead>
                    <tr>
                        <th>Invoice</th>
                        <th>Produk</th>
                        <th>WhatsApp</th>
                        <th>Status</th>
                        <th aria-label="Aksi"></th>
                    </tr>
                </thead>

                <tbody>
                    @forelse ($orders as $order)
                        <tr>
                            <td>
                                <a href="{{ route('admin.orders.show', $order) }}" class="admin-order-token admin-entity-link">
                                    <span class="admin-order-token-icon">
                                        <svg
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="1.7"
                                            aria-hidden="true"
                                        >
                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                d="M6 3h12v18l-3-2-3 2-3-2-3 2V3Z"
                                            />
                                        </svg>
                                    </span>

                                    <span class="font-figures">
                                        {{ $order->public_token }}
                                    </span>
                                </a>
                            </td>

                            <td>
                                <div class="admin-order-product">
                                    @if ($order->product && ! $order->product->trashed())
                                        <a href="{{ route('admin.products.show', $order->product) }}" class="admin-order-product-name admin-entity-link">
                                            {{ $order->productName() }}
                                        </a>
                                    @else
                                        <span class="admin-order-product-name">{{ $order->productName() }}</span>
                                    @endif

                                    @if ($order->variantName())
                                        <span class="admin-order-product-note">{{ $order->variantLabel() }}</span>
                                    @endif

                                    @if (! $order->product)
                                        <span class="admin-order-product-note">Produk sudah tidak tersedia</span>
                                    @endif
                                </div>
                            </td>

                            <td>
                                <span class="admin-order-whatsapp font-figures">
                                    {{ $order->customer_whatsapp }}
                                </span>
                            </td>

                            <td>
                                <div class="admin-order-status">
                                    @include('partials.status-stamp', [
                                        'status' => $order->status
                                    ])
                                </div>
                            </td>

                            <td>
                                <a
                                    href="{{ route('admin.orders.show', $order) }}"
                                    class="admin-order-detail-link"
                                >
                                    <span>Detail</span>

                                    <svg
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="1.8"
                                        aria-hidden="true"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            d="m9 18 6-6-6-6"
                                        />
                                    </svg>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5">
                                <div class="admin-order-empty">
                                    <span class="admin-order-empty-icon">
                                        <svg
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="1.7"
                                            aria-hidden="true"
                                        >
                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                d="M6 3h12v18l-3-2-3 2-3-2-3 2V3Zm3 6h6M9 13h4"
                                            />
                                        </svg>
                                    </span>

                                    <div>
                                        <p>Belum ada order</p>
                                        <span>
                                            Transaksi baru akan muncul di halaman ini.
                                        </span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    {{-- Mobile cards --}}
    <section class="admin-order-mobile-list">
        @forelse ($orders as $order)
            <article class="admin-order-mobile-card">
                <header class="admin-order-mobile-card-header">
                    <div>
                        <span class="admin-order-mobile-label">
                            Invoice ID
                        </span>

                        <a href="{{ route('admin.orders.show', $order) }}" class="admin-order-mobile-token admin-entity-link font-figures">
                            {{ $order->public_token }}
                        </a>
                    </div>

                    <div class="admin-order-status">
                        @include('partials.status-stamp', [
                            'status' => $order->status
                        ])
                    </div>
                </header>

                <div class="admin-order-mobile-body">
                    <div class="admin-order-mobile-row">
                        <span>Produk</span>
                        <div>
                            @if ($order->product && ! $order->product->trashed())
                                <a href="{{ route('admin.products.show', $order->product) }}" class="admin-entity-link">
                                    {{ $order->productName() }}
                                </a>
                            @else
                                <strong>{{ $order->productName() }}</strong>
                            @endif
                            @if ($order->variantName())
                                <small class="admin-order-product-note">{{ $order->variantLabel() }}</small>
                            @endif
                        </div>
                    </div>

                    <div class="admin-order-mobile-row">
                        <span>WhatsApp</span>
                        <strong class="font-figures">
                            {{ $order->customer_whatsapp }}
                        </strong>
                    </div>
                </div>

                <footer class="admin-order-mobile-footer">
                    <a
                        href="{{ route('admin.orders.show', $order) }}"
                        class="admin-order-mobile-detail"
                    >
                        Buka Detail Order

                        <svg
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.8"
                            aria-hidden="true"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="m9 18 6-6-6-6"
                            />
                        </svg>
                    </a>
                </footer>
            </article>
        @empty
            <div class="admin-order-empty admin-order-empty-mobile">
                <span class="admin-order-empty-icon">
                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.7"
                        aria-hidden="true"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M6 3h12v18l-3-2-3 2-3-2-3 2V3Zm3 6h6M9 13h4"
                        />
                    </svg>
                </span>

                <div>
                    <p>Belum ada order</p>
                    <span>Transaksi baru akan muncul di halaman ini.</span>
                </div>
            </div>
        @endforelse
    </section>

    @include('admin.partials.pagination', ['paginator' => $orders->withQueryString()])
</div>
@endsection