@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 Incomplete Orders (Lead Recovery)
       ========================================== */
    :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;
        --warning-color: #d97706;
        --warning-bg: #fef3c7;
        --danger-color: #dc2626;
        --danger-bg: #fee2e2;
    }

    .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(--warning-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: 650px;
        line-height: 1.6;
    }

    /* 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: flex;
        align-items: center;
        gap: 0.25rem;
        margin-top: 0.25rem;
        font-size: 0.75rem;
    }
    
    .cell-content small.not-entered {
        color: var(--danger-color);
        font-style: italic;
    }

    /* Badges & Highlights */
    .lpb-badge-warning {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.6rem;
        border-radius: 9999px;
        font-size: 0.7rem;
        font-weight: 700;
        background: var(--warning-bg);
        color: var(--warning-color);
        text-transform: uppercase;
        letter-spacing: 0.025em;
        margin-top: 0.25rem;
    }

    .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%;
        }

        .lpb-table thead {
            display: none;
        }

        .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;
        }

        .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;
        }

        .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;
        }
        
        .cell-content small {
            justify-content: flex-end;
        }
    }
</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-rotate-left"></i> Lead Recovery · Orders Table
            </div>
            <h1>Incomplete Orders</h1>
            <p>
                <strong>{{ $landingPage->title }}</strong> — visitor form open/typing করেছে কিন্তু
                final Place 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.orders', $landingPage) }}">
                <i class="fa-solid fa-table-list"></i> All Page Orders
            </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-map-location-dot"></i> Area</th>
                        <th><i class="fa-solid fa-layer-group"></i> Qty</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> Last Activity</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($rows as $row)
                        @php
                            $item = $row->items->first();
                            $draftFields = (array) data_get(
                                $row->metadata,
                                'draft_fields',
                                []
                            );

                            $nameFilled = (bool) data_get($draftFields, 'customer_name_filled', false);
                            $phoneFilled = (bool) data_get($draftFields, 'customer_phone_filled', false);
                            $addressFilled = (bool) data_get($draftFields, 'address_filled', false);
                            $areaSelected = (bool) data_get($draftFields, 'delivery_area_selected', false);

                            $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>
                                    <span class="lpb-badge-warning"><i class="fa-solid fa-triangle-exclamation" style="margin-right: 4px;"></i> Incomplete</span>
                                </div>
                            </td>

                            <td data-label="Customer">
                                <div class="cell-content">
                                    <strong>
                                        {{ $nameFilled ? $row->customer_name : 'Name not entered' }}
                                    </strong>

                                    @if($phoneFilled)
                                        <small><i class="fa-solid fa-phone-flip text-xs"></i> {{ $row->customer_phone }}</small>
                                    @else
                                        <small class="not-entered"><i class="fa-solid fa-phone-slash text-xs"></i> Phone not entered</small>
                                    @endif

                                    @if($addressFilled)
                                        <small><i class="fa-solid fa-location-dot text-xs"></i> {{ \Illuminate\Support\Str::limit($row->address, 50) }}</small>
                                    @else
                                        <small class="not-entered"><i class="fa-solid fa-map-pin text-xs"></i> Address not entered</small>
                                    @endif
                                </div>
                            </td>

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

                            <td data-label="Area">
                                <div class="cell-content">
                                    @if($areaSelected)
                                        {{ data_get($row->metadata, 'delivery_area_label', 'Selected') }}
                                    @else
                                        <span class="not-entered text-muted" style="font-style: italic; font-size: 0.8rem;">Not selected</span>
                                    @endif
                                </div>
                            </td>

                            <td data-label="Qty">
                                <div class="cell-content">
                                    <strong>{{ (int) ($item?->quantity ?? 1) }}</strong>
                                </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="Last Activity">
                                <div class="cell-content">
                                    <small><i class="fa-solid fa-stopwatch text-xs"></i> {{ optional($row->last_activity_at)->diffForHumans() }}</small>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="lpb-empty">
                                <i class="fa-solid fa-ghost"></i>
                                No incomplete orders yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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