@extends('admin.master')

@section('content')
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
    /* ==========================================
       Custom CSS for Landing Page Orders
       ========================================== */
    :root {
        --primary-color: #4f46e5;
        --primary-hover: #4338ca;
        --dark-color: #111827;
        --dark-hover: #1f2937;
        --text-main: #374151;
        --text-muted: #6b7280;
        --border-color: #e5e7eb;
        --bg-light: #f9fafb;
        --success-color: #16a34a;
        --success-bg: #dcfce7;
    }

    .lpb-page {
        padding: 1.5rem;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        color: var(--text-main);
    }

    /* Toolbar Styles */
    .lpb-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .lpb-toolbar-text {
        flex: 1;
        min-width: 250px;
    }

    .lpb-eyebrow {
        color: var(--primary-color);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .lpb-toolbar h1 {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--dark-color);
        margin: 0 0 0.5rem 0;
    }

    .lpb-toolbar p {
        color: var(--text-muted);
        font-size: 0.875rem;
        margin: 0;
        max-width: 600px;
        line-height: 1.5;
    }

    /* Action Buttons */
    .lpb-toolbar-actions {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .lpb-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.6rem 1.2rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        border: 1px solid transparent;
        cursor: pointer;
    }

    .lpb-btn-light {
        background: #ffffff;
        border-color: var(--border-color);
        color: var(--dark-color);
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .lpb-btn-light:hover {
        background: var(--bg-light);
        border-color: #d1d5db;
    }

    .lpb-btn-dark {
        background: var(--dark-color);
        color: #ffffff;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    }

    .lpb-btn-dark:hover {
        background: var(--dark-hover);
        color: #ffffff;
    }

    /* Table Card Styles */
    .lpb-card {
        background: #ffffff;
        border-radius: 0.75rem;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
        border: 1px solid var(--border-color);
        overflow: hidden;
    }

    .lpb-table-wrap {
        width: 100%;
        overflow-x: auto;
    }

    .lpb-table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
    }

    .lpb-table th {
        background: var(--bg-light);
        padding: 1rem 1.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid var(--border-color);
        white-space: nowrap;
    }

    .lpb-table th i {
        margin-right: 0.25rem;
    }

    .lpb-table td {
        padding: 1rem 1.25rem;
        font-size: 0.875rem;
        color: var(--text-main);
        border-bottom: 1px solid var(--border-color);
        vertical-align: middle;
    }

    .lpb-table tr:last-child td {
        border-bottom: none;
    }

    .lpb-table tr:hover td {
        background-color: #f8fafc;
    }

    /* Cell Contents */
    .cell-content strong {
        color: var(--dark-color);
        font-weight: 600;
        display: block;
    }

    .cell-content small {
        color: var(--text-muted);
        display: block;
        margin-top: 0.25rem;
        font-size: 0.75rem;
    }

    /* Badges & Highlights */
    .lpb-status-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        background: #f1f5f9;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    .text-free {
        color: var(--success-color);
        background: var(--success-bg);
        padding: 0.15rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .lpb-empty {
        text-align: center;
        padding: 3rem !important;
        color: var(--text-muted);
        font-size: 0.95rem;
    }

    .lpb-empty i {
        font-size: 2rem;
        margin-bottom: 1rem;
        opacity: 0.5;
        display: block;
    }

    .lpb-pagination {
        padding: 1rem 1.25rem;
        border-top: 1px solid var(--border-color);
        background: var(--bg-light);
    }

    /* ==========================================
       Mobile Responsive (Card Layout)
       ========================================== */
    @media (max-width: 768px) {
        .lpb-page {
            padding: 1rem;
        }

        .lpb-toolbar-actions {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr;
        }
        
        .lpb-btn {
            width: 100%;
        }

        /* Hide Table Header on Mobile */
        .lpb-table thead {
            display: none;
        }

        /* Convert Rows to Cards */
        .lpb-table, .lpb-table tbody, .lpb-table tr, .lpb-table td {
            display: block;
            width: 100%;
        }

        .lpb-table tr {
            margin-bottom: 1rem;
            border: 1px solid var(--border-color);
            border-radius: 0.75rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            background: #fff;
        }

        .lpb-table tr:hover td {
            background-color: transparent;
        }

        /* Cell Styling for Mobile */
        .lpb-table td {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0.75rem 1rem;
            text-align: right;
            border-bottom: 1px solid #f3f4f6;
        }

        /* Create Labels Using data-label Attribute */
        .lpb-table td::before {
            content: attr(data-label);
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            flex-shrink: 0;
            margin-right: 1rem;
            margin-top: 0.2rem;
        }

        .cell-content {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            text-align: right;
        }
    }
</style>

<div class="lpb-page">
    <!-- Toolbar Section -->
    <div class="lpb-toolbar">
        <div class="lpb-toolbar-text">
            <div class="lpb-eyebrow">
                <i class="fa-solid fa-rocket"></i> Landing Page Order Source
            </div>
            <h1>Landing Page Orders</h1>
            <p>
                <strong>{{ $landingPage->title }}</strong> থেকে create হওয়া incomplete এবং final
                order একসাথে দেখুন। Order data existing orders/order_items table-এই আছে।
            </p>
        </div>

        <div class="lpb-toolbar-actions">
            <a class="lpb-btn lpb-btn-light" href="{{ route('admin.landing-pages.index') }}">
                <i class="fa-solid fa-list-ul"></i> All Pages
            </a>

            <a class="lpb-btn lpb-btn-light" href="{{ route('admin.landing-pages.incomplete-orders', $landingPage) }}">
                <i class="fa-solid fa-filter"></i> Incomplete Only
            </a>

            <a class="lpb-btn lpb-btn-dark" href="{{ route('admin.landing-pages.edit', $landingPage) }}">
                <i class="fa-solid fa-pen-to-square"></i> Edit Page
            </a>
        </div>
    </div>

    <!-- Data Table Section -->
    <section class="lpb-card">
        <div class="lpb-table-wrap">
            <table class="lpb-table">
                <thead>
                    <tr>
                        <th><i class="fa-solid fa-hashtag"></i> Order</th>
                        <th><i class="fa-regular fa-user"></i> Customer</th>
                        <th><i class="fa-solid fa-box-open"></i> Product</th>
                        <th><i class="fa-solid fa-signal"></i> Status</th>
                        <th><i class="fa-solid fa-map-location-dot"></i> Area</th>
                        <th><i class="fa-solid fa-truck-fast"></i> Delivery</th>
                        <th><i class="fa-solid fa-bangladeshi-taka-sign"></i> Total</th>
                        <th><i class="fa-regular fa-clock"></i> Activity</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($rows as $row)
                        @php
                            $item = $row->items->first();
                            $status = $row->status instanceof \BackedEnum
                                ? $row->status->value
                                : (string) $row->status;

                            $freeShipping = (bool) data_get(
                                $row->metadata,
                                'landing_page_free_shipping',
                                false
                            );
                        @endphp

                        <tr>
                            <td data-label="Order">
                                <div class="cell-content">
                                    <strong>{{ $row->order_number }}</strong>
                                    <small>{{ $row->checkout_token }}</small>
                                </div>
                            </td>

                            <td data-label="Customer">
                                <div class="cell-content">
                                    <strong>{{ $row->customer_name }}</strong>
                                    <small><i class="fa-solid fa-phone-flip" style="font-size: 10px;"></i> {{ $row->customer_phone }}</small>
                                </div>
                            </td>

                            <td data-label="Product">
                                <div class="cell-content">
                                    <strong>{{ $row->product_name ?: 'Product' }}</strong>
                                    @if($item?->variant_name)
                                        <small>{{ $item->variant_name }}</small>
                                    @endif
                                    <small>Qty: {{ (int) ($item?->quantity ?? 1) }}</small>
                                </div>
                            </td>

                            <td data-label="Status">
                                <div class="cell-content">
                                    <span class="lpb-status-badge">
                                        {{ \Illuminate\Support\Str::headline($status) }}
                                    </span>
                                </div>
                            </td>

                            <td data-label="Area">
                                <div class="cell-content">
                                    {{ data_get(
                                        $row->metadata,
                                        'delivery_area_label',
                                        'Not selected'
                                    ) }}
                                </div>
                            </td>

                            <td data-label="Delivery">
                                <div class="cell-content">
                                    @if($freeShipping)
                                        <span class="text-free"><i class="fa-solid fa-gift"></i> Free</span>
                                    @else
                                        ৳{{ number_format((float) $row->delivery_charge, 0) }}
                                    @endif
                                </div>
                            </td>

                            <td data-label="Total">
                                <div class="cell-content">
                                    <strong>৳{{ number_format((float) $row->total_amount, 0) }}</strong>
                                </div>
                            </td>

                            <td data-label="Activity">
                                <div class="cell-content">
                                    <small>
                                        {{ optional($row->last_activity_at ?: $row->created_at)->diffForHumans() }}
                                    </small>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="lpb-empty">
                                <i class="fa-solid fa-folder-open"></i>
                                No orders for this landing page yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($rows->hasPages())
            <div class="lpb-pagination">
                {{ $rows->links() }}
            </div>
        @endif
    </section>
</div>
@endsection