@extends('frontend.layout.dashboard-master')
@section('site_title', __('My Orders'))

@section('style')
<style>
html, body { overflow-x: hidden; }
.order-card-title { word-break: break-word; overflow-wrap: break-word; }
@media (max-width: 640px) {
    .order-card { padding: 16px !important; }
    .order-action-btns { width: 100%; }
    .order-action-btns a { flex: 1; text-align: center; justify-content: center; display: inline-flex; align-items: center; }
}
</style>
@endsection

@section('content')

    {{-- Page Header --}}
    <div class="mb-6 flex flex-col gap-4 rounded-xl border border-[#C4C8CE] bg-white p-6 sm:flex-row sm:items-center sm:justify-between">
        <div class="space-y-1">
            <h1 class="text-[20px] font-semibold leading-7 text-[#242B36]">{{ __('My Orders') }}</h1>
            <p class="text-[14px] font-normal text-[#3B4759]">{{ __('Track your active orders and manage project details') }}</p>
        </div>
        <div class="flex items-center gap-2 rounded-lg border border-[#C4C8CE] px-4 py-2.5 shadow-sm focus-within:border-primary">
            <svg class="h-5 w-5 shrink-0 text-[#677181]" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5">
                <circle cx="8.5" cy="8.5" r="5.5"/><path d="m14 14 3.5 3.5" stroke-linecap="round"/>
            </svg>
            <input id="order-search" type="text" placeholder="{{ __('Search Orders...') }}"
                   class="flex-1 min-w-0 bg-transparent text-[14px] text-[#677181] placeholder-[#677181] outline-none">
        </div>
    </div>

    {{-- Tabs --}}
    <div class="border-b border-[#E9EBF0]">
        <div class="flex items-center gap-6 overflow-x-auto md:gap-10" style="scrollbar-width:none">
            @php $totalOrders = $orders->count(); @endphp
            <button class="order-tab-btn active-tab relative whitespace-nowrap py-4 text-[14px] font-medium text-primary" data-tab="all">
                {{ __('All Orders') }} ({{ $totalOrders }})
                <div class="absolute bottom-0 left-0 h-[3px] w-full rounded-t-full bg-primary"></div>
            </button>
            <button class="order-tab-btn relative whitespace-nowrap py-4 text-[14px] font-medium text-[#3B4759] hover:text-primary" data-tab="active">
                {{ __('Active') }} ({{ $active_orders }})
                <div class="tab-indicator absolute bottom-0 left-0 hidden h-[3px] w-full rounded-t-full bg-primary"></div>
            </button>
            <button class="order-tab-btn relative whitespace-nowrap py-4 text-[14px] font-medium text-[#3B4759] hover:text-primary" data-tab="queue">
                {{ __('Queue') }} ({{ $queue_orders }})
                <div class="tab-indicator absolute bottom-0 left-0 hidden h-[3px] w-full rounded-t-full bg-primary"></div>
            </button>
            <button class="order-tab-btn relative whitespace-nowrap py-4 text-[14px] font-medium text-[#3B4759] hover:text-primary" data-tab="complete">
                {{ __('Complete') }} ({{ $complete_orders }})
                <div class="tab-indicator absolute bottom-0 left-0 hidden h-[3px] w-full rounded-t-full bg-primary"></div>
            </button>
            <button class="order-tab-btn relative whitespace-nowrap py-4 text-[14px] font-medium text-[#3B4759] hover:text-primary" data-tab="cancelled">
                {{ __('Cancelled') }} ({{ $cancel_orders }})
                <div class="tab-indicator absolute bottom-0 left-0 hidden h-[3px] w-full rounded-t-full bg-primary"></div>
            </button>
        </div>
    </div>

    {{-- Order Cards --}}
    <div id="order-list" class="mt-8 space-y-4">

        @forelse($orders as $order)
            @php
                $statusMap = match($order->status) {
                    0       => 'queue',
                    1, 2    => 'active',
                    3       => 'complete',
                    default => 'cancelled',
                };
                $orderTitle = match($order->is_project_job) {
                    'project' => $order->project?->title ?? __('N/A'),
                    'job'     => $order->job?->title ?? __('N/A'),
                    default   => __('Custom Order'),
                };
                $isHourly = $order->is_fixed_hourly === 'hourly';
                $budget   = $isHourly
                    ? float_amount_with_currency_symbol($order->job?->hourly_rate ?? 0)
                    : float_amount_with_currency_symbol($order->price);

                $clientRating = \App\Models\Rating::where('order_id', $order->id)
                    ->where('sender_type', 1)
                    ->where('sender_id', auth()->id())
                    ->first();

                if ($order->freelancer?->image) {
                    if (cloudStorageExist() && in_array(\Illuminate\Support\Facades\Storage::getDefaultDriver(), ['s3','cloudFlareR2','wasabi'])) {
                        $freelancerImage = render_frontend_cloud_image_if_module_exists('profile/'.$order->freelancer->image, load_from: $order->freelancer->load_from ?? '');
                    } else {
                        $freelancerImage = asset('assets/uploads/profile/'.$order->freelancer->image);
                    }
                } else {
                    $freelancerImage = asset('assets/static/img/author/author.jpg');
                }
            @endphp

            <div class="order-card bg-white border border-[#E9EBF0] rounded-xl p-4 sm:p-6 shadow-sm"
                 data-status="{{ $statusMap }}"
                 data-title="{{ strtolower($orderTitle) }}">

                {{-- Top row: ID + time --}}
                <div class="mb-4 flex items-center justify-between">
                    <span class="text-[13px] font-normal text-[#637381]">{{ __('Order ID') }}: #{{ str_pad($order->id, 6, '0', STR_PAD_LEFT) }}</span>
                    <span class="text-[13px] font-normal text-[#637381]">{{ $order->created_at->diffForHumans() }}</span>
                </div>

                {{-- Title --}}
                <h3 class="order-card-title mb-4 text-[16px] font-semibold text-[#242B36]">{{ $orderTitle }}</h3>

                {{-- Badges + meta --}}
                <div class="mb-6 flex flex-wrap items-center gap-3">
                    @if($order->status === 0)
                        <span class="rounded-full bg-[#ECEDEF] px-3 py-1 text-[13px] font-medium text-[#3B4759]">{{ __('Queue Order') }}</span>
                    @elseif($order->status === 1)
                        <span class="rounded-full bg-primary/10 px-3 py-1 text-[13px] font-medium text-primary">{{ __('Active Order') }}</span>
                    @elseif($order->status === 2)
                        <span class="rounded-full bg-primary/10 px-3 py-1 text-[13px] font-medium text-primary">{{ __('Deliver Order') }}</span>
                    @elseif($order->status === 3)
                        <span class="rounded-full bg-[#ECEDEF] px-3 py-1 text-[13px] font-medium text-[#3B4759]">{{ __('Complete Order') }}</span>
                    @elseif($order->status === 4)
                        <span class="rounded-full bg-[#FF4D4D]/10 px-3 py-1 text-[13px] font-medium text-[#FF4D4D]">{{ __('Cancelled') }}</span>
                    @elseif($order->status === 5)
                        <span class="rounded-full bg-[#FF4D4D]/10 px-3 py-1 text-[13px] font-medium text-[#FF4D4D]">{{ __('Declined') }}</span>
                    @elseif($order->status === 6)
                        <span class="rounded-full bg-[#FF4D4D]/10 px-3 py-1 text-[13px] font-medium text-[#FF4D4D]">{{ __('Suspended') }}</span>
                    @elseif($order->status === 7)
                        <span class="rounded-full bg-[#FA8C00]/10 px-3 py-1 text-[13px] font-medium text-[#FA8C00]">{{ __('On Hold') }}</span>
                    @endif

                    @if($order->is_project_job === 'offer')
                        <span class="rounded-full bg-[#FA8C00]/10 px-3 py-1 text-[13px] font-medium text-[#FA8C00]">{{ __('Custom Order') }}</span>
                    @endif

                    <div class="flex items-center gap-2 text-[13px] text-[#637381]">
                        <span class="h-1 w-1 rounded-full bg-[#637381]"></span>
                        {{ __('Budget') }}: {{ $budget }}
                    </div>

                    @if($order->delivery_time)
                        <div class="flex items-center gap-2 text-[13px] text-[#637381]">
                            <span class="h-1 w-1 rounded-full bg-[#637381]"></span>
                            {{ __('Delivery') }}: {{ $order->delivery_time }}
                        </div>
                    @endif
                </div>

                <hr class="mb-6 border-[#E9EBF0]">

                {{-- Freelancer info + Actions --}}
                <div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">

                    <div class="flex items-center gap-3">
                        <img src="{{ $freelancerImage }}" alt="{{ $order->freelancer?->first_name }}"
                             class="h-11 w-11 rounded-full object-cover">
                        <div>
                            <div class="flex items-center gap-1">
                                <span class="text-[15px] font-medium text-[#3B4759]">
                                    {{ $order->freelancer?->first_name }} {{ $order->freelancer?->last_name }}
                                </span>
                                @if($order->freelancer?->user_verified_status)
                                    <svg class="h-4 w-4 text-primary" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                    </svg>
                                @endif
                            </div>
                            <p class="text-[12px] text-[#637381]">{{ __('Freelancer') }}</p>
                        </div>
                    </div>

                    {{-- Action buttons --}}
                    <div class="order-action-btns flex flex-wrap items-center gap-2">

                        @if($order->status === 3 && $order->freelancer?->is_suspend != 1)
                            @if(!$clientRating)
                                <a href="{{ route('client.order.rating', $order->id) }}"
                                   class="rounded-lg bg-[#ECEDEF] px-5 py-2.5 text-[13px] font-medium text-[#3B4759] transition hover:bg-[#d9dce1]">
                                    {{ __('Submit Review') }}
                                </a>
                            @endif
                            <a href="{{ route('client.order.invoice.generate', $order->id) }}"
                               class="rounded-lg bg-[#ECEDEF] px-5 py-2.5 text-[13px] font-medium text-[#3B4759] transition hover:bg-[#d9dce1]">
                                {{ __('Invoice') }}
                            </a>
                        @endif

                        <a href="{{ route('client.order.details', $order->id) }}"
                           class="rounded-lg bg-primary px-5 py-2.5 text-[13px] font-medium text-white transition hover:bg-secondary">
                            {{ __('View Order') }}
                        </a>

                    </div>
                </div>
            </div>
        @empty
            <div class="rounded-xl border border-[#C4C8CE] bg-white px-6 py-16 text-center">
                <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
                    <svg class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2"/>
                    </svg>
                </div>
                <p class="text-[16px] font-medium text-[#242B36]">{{ __('No orders yet') }}</p>
                <p class="mt-1 text-[14px] text-[#3B4759]">{{ __('Your orders will appear here once you place them.') }}</p>
            </div>
        @endforelse

    </div>

    <div id="order-empty-filter" class="hidden mt-4 rounded-xl border border-[#C4C8CE] bg-white px-6 py-12 text-center">
        <p class="text-[15px] font-medium text-[#242B36]">{{ __('No orders found') }}</p>
        <p class="mt-1 text-[13px] text-[#3B4759]">{{ __('Try adjusting your search or filter.') }}</p>
    </div>

    {{-- Pagination --}}
    <div id="order-pagination" class="mt-6 flex flex-wrap items-center gap-2 text-[12px] font-medium text-[#3B4759]"></div>

@endsection

@section('script')
<x-sweet-alert.sweet-alert2-js />
<script>
(function () {
    const PER_PAGE   = 10;
    let currentPage  = 1;
    let currentTab   = 'all';
    let searchTerm   = '';

    const cards  = Array.from(document.querySelectorAll('.order-card'));
    const listEl = document.getElementById('order-list');
    const emptyEl = document.getElementById('order-empty-filter');
    const pagEl  = document.getElementById('order-pagination');

    const PREV = '{{ __("Previous") }}';
    const NEXT = '{{ __("Next") }}';

    function visibleCards() {
        return cards.filter(c => {
            const matchTab  = currentTab === 'all' || c.dataset.status === currentTab;
            const matchSrch = !searchTerm || c.dataset.title.includes(searchTerm);
            return matchTab && matchSrch;
        });
    }

    function render() {
        const visible = visibleCards();
        const total   = visible.length;
        const pages   = Math.ceil(total / PER_PAGE) || 1;
        if (currentPage > pages) currentPage = 1;

        cards.forEach(c => c.classList.add('hidden'));
        visible.slice((currentPage - 1) * PER_PAGE, currentPage * PER_PAGE)
               .forEach(c => c.classList.remove('hidden'));

        emptyEl.classList.toggle('hidden', total > 0 || cards.length === 0);
        renderPagination(pages);
    }

    function renderPagination(pages) {
        if (pages <= 1) { pagEl.innerHTML = ''; return; }
        const cp = currentPage;
        let html = '';

        html += cp === 1
            ? `<span class="cursor-not-allowed rounded-full border border-[#C4C8CE] px-3 py-1.5 opacity-50">‹ ${PREV}</span>`
            : `<button class="pag-btn rounded-full border border-[#C4C8CE] px-3 py-1.5 hover:bg-[#F9FBFC]" data-p="${cp-1}">‹ ${PREV}</button>`;

        for (let p = 1; p <= pages; p++) {
            if (p === 1 || p === pages || Math.abs(p - cp) <= 1) {
                html += p === cp
                    ? `<span class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-white">${p}</span>`
                    : `<button class="pag-btn flex h-7 w-7 items-center justify-center rounded-full border border-[#C4C8CE] hover:bg-[#F9FBFC]" data-p="${p}">${p}</button>`;
            } else if ((p === cp - 2 && cp > 3) || (p === cp + 2 && cp < pages - 2)) {
                html += `<span class="px-1">...</span>`;
            }
        }

        html += cp === pages
            ? `<span class="cursor-not-allowed rounded-full border border-[#C4C8CE] px-4 py-1.5 opacity-50">${NEXT} ›</span>`
            : `<button class="pag-btn rounded-full border border-[#C4C8CE] px-4 py-1.5 hover:bg-[#F9FBFC]" data-p="${cp+1}">${NEXT} ›</button>`;

        pagEl.innerHTML = html;
        pagEl.querySelectorAll('.pag-btn').forEach(btn => {
            btn.addEventListener('click', () => { currentPage = +btn.dataset.p; render(); });
        });
    }

    document.querySelectorAll('.order-tab-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            currentTab = btn.dataset.tab;
            currentPage = 1;
            document.querySelectorAll('.order-tab-btn').forEach(b => {
                const isActive = b === btn;
                b.classList.toggle('text-primary', isActive);
                b.classList.toggle('text-[#3B4759]', !isActive);
                const ind = b.querySelector('.tab-indicator, div');
                if (ind) ind.classList.toggle('hidden', !isActive);
            });
            render();
        });
    });

    document.getElementById('order-search').addEventListener('input', e => {
        searchTerm = e.target.value.toLowerCase().trim();
        currentPage = 1;
        render();
    });

    render();
})();
</script>
@endsection