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

@section('content')

    {{-- Page Header --}}
    <div class="mb-6 flex flex-col gap-4 rounded-xl border border-[#C4C8CE] bg-white p-4 sm: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]">{{ __('Stay updated with your project progress and client interactions') }}</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="w-full sm:w-48 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);

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

                if ($order->user?->image) {
                    if (cloudStorageExist() && in_array(\Illuminate\Support\Facades\Storage::getDefaultDriver(), ['s3','cloudFlareR2','wasabi'])) {
                        $clientImage = render_frontend_cloud_image_if_module_exists('profile/'.$order->user->image, load_from: $order->user->load_from ?? '');
                    } else {
                        $clientImage = asset('assets/uploads/profile/'.$order->user->image);
                    }
                } else {
                    $clientImage = 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="mb-4 text-[16px] font-semibold text-[#242B36]">{{ $orderTitle }}</h3>

                {{-- Badges + meta --}}
                <div class="mb-6 flex flex-wrap items-center gap-3">
                    {{-- Status badge --}}
                    @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

                    {{-- Fixed / Hourly badge --}}
                    @if($isHourly)
                        <span class="rounded-full bg-[#EEF2FF] px-3 py-1 text-[13px] font-medium text-[#4F46E5]">{{ __('Hourly') }}</span>
                    @else
                        <span class="rounded-full bg-[#F0F9FF] px-3 py-1 text-[13px] font-medium text-[#0284C7]">{{ __('Fixed') }}</span>
                    @endif

                    {{-- Custom order badge --}}
                    @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

                    {{-- Budget --}}
                    <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>

                    {{-- Delivery --}}
                    @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

                    {{-- Review indicator --}}
                    @if($clientReview && !$freelancerReply)
                        <span class="inline-flex items-center gap-1 rounded-full border border-[#FED7AA] bg-[#FFF7ED] px-3 py-1 text-[12px] font-semibold text-[#C2410C]">
                            <svg class="h-3.5 w-3.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                            {{ __('New Review') }}
                        </span>
                    @elseif($clientReview && $freelancerReply)
                        <span class="inline-flex items-center gap-1 rounded-full border border-[#BBF7D0] bg-[#F0F9F4] px-3 py-1 text-[12px] font-medium text-[#15803D]">
                            <svg class="h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            {{ __('Reviewed') }}
                        </span>
                    @endif
                </div>

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

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

                    {{-- Client avatar --}}
                    <div class="flex items-center gap-3">
                        <img src="{{ $clientImage }}" alt="{{ $order->user?->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->user?->first_name }} {{ $order->user?->last_name }}
                                </span>
                                @if($order->user?->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]">{{ __('Customer') }}</p>
                        </div>
                    </div>

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

                        {{-- Queue: Decline + Accept --}}
                        @if($order->status === 0)
                            <a class="decline_and_change_order_status cursor-pointer rounded-lg bg-[#F0416C]/10 px-5 py-2.5 text-[13px] font-medium text-[#F0416C] transition hover:bg-[#ffe0e4]">
                                {{ __('Decline Order') }}
                            </a>
                            <form method="post" action="{{ route('freelancer.order.decline', $order->id) }}" class="d-none hidden">
                                @csrf
                                <input type="hidden" name="cancel_or_decline_order" value="decline">
                                <button type="submit" class="swal_form_submit_btn hidden"></button>
                            </form>
                            <a class="accept_and_change_order_status cursor-pointer rounded-lg bg-[#ECEDEF] px-5 py-2.5 text-[13px] font-medium text-[#3B4759] transition hover:bg-[#d9dce1]">
                                {{ __('Accept Order') }}
                            </a>
                            <form method="post" action="{{ route('freelancer.order.accept', $order->id) }}" class="d-none hidden">
                                @csrf
                                <button type="submit" class="swal_form_submit_btn hidden"></button>
                            </form>
                        @endif

                        {{-- Active / Deliver: Cancel --}}
                        @if(in_array($order->status, [1, 2]))
                            <a class="cancel_and_change_order_status cursor-pointer rounded-lg bg-[#F0416C]/10 px-5 py-2.5 text-[13px] font-medium text-[#F0416C] transition hover:bg-[#ffe0e4]">
                                {{ __('Cancel Order') }}
                            </a>
                            <form method="post" action="{{ route('freelancer.order.decline', $order->id) }}" class="d-none hidden">
                                @csrf
                                <input type="hidden" name="cancel_or_decline_order" value="cancel">
                                <button type="submit" class="swal_form_submit_btn hidden"></button>
                            </form>
                        @endif

                        {{-- Complete: Invoice only (freelancers don't submit reviews) --}}
                        @if($order->status === 3)
                            @if($order->freelancer?->is_suspend != 1)
                                <a href="{{ route('freelancer.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
                        @endif

                        {{-- Reply to Review --}}
                        @if($clientReview && !$freelancerReply)
                            <a href="{{ route('freelancer.order.rating', $order->id) }}"
                               class="rounded-lg border border-[#FED7AA] bg-[#FFF7ED] px-5 py-2.5 text-[13px] font-medium text-[#C2410C] transition hover:bg-[#FFEDD5]">
                                {{ __('Reply to Review') }}
                            </a>
                        @endif

                        {{-- View Order (always) --}}
                        <a href="{{ route('freelancer.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 clients place them.') }}</p>
            </div>
        @endforelse

    </div>

    {{-- Empty state for filtered results --}}
    <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 pagEl      = document.getElementById('order-pagination');
        const emptyEl    = document.getElementById('order-empty-filter');

        // ---------- filtering ----------
        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'));
            const slice = visible.slice((currentPage - 1) * PER_PAGE, currentPage * PER_PAGE);
            slice.forEach(c => c.classList.remove('hidden'));

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

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

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

            for (let p = 1; p <= pages; p++) {
                if (p === 1 || p === pages || Math.abs(p - cp) <= 1) {
                    if (p === cp) {
                        html += `<span class="flex h-7 w-7 items-center justify-center rounded-full bg-[#FA8C00] text-white">${p}</span>`;
                    } else {
                        html += `<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>`;
                }
            }

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

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

        const prev_label = '{{ __("Previous") }}';
        const next_label = '{{ __("Next") }}';

        // ---------- tabs ----------
        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('div');
                    if (ind) ind.classList.toggle('hidden', !isActive);
                });
                render();
            });
        });

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

        // ---------- SweetAlert2 actions (keep existing jQuery bridge) ----------
        document.addEventListener('click', function (e) {
            const btn = e.target.closest('.decline_and_change_order_status, .accept_and_change_order_status, .cancel_and_change_order_status');
            if (!btn) return;
            e.preventDefault();

            let title, text, confirmText;
            if (btn.classList.contains('decline_and_change_order_status')) {
                title = '{{ __("Decline Order?") }}'; text = '{{ __("You would not change it again.") }}'; confirmText = '{{ __("Yes, Decline it!") }}';
            } else if (btn.classList.contains('accept_and_change_order_status')) {
                title = '{{ __("Accept Order?") }}'; text = '{{ __("You would not change it again.") }}'; confirmText = '{{ __("Yes, Accept it!") }}';
            } else {
                title = '{{ __("Cancel Order?") }}'; text = '{{ __("You would not change it again.") }}'; confirmText = '{{ __("Yes, Cancel it!") }}';
            }

            Swal.fire({ title, text, icon: 'warning', showCancelButton: true,
                confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: confirmText
            }).then(result => {
                if (result.isConfirmed) {
                    const form = btn.nextElementSibling;
                    if (form) form.querySelector('.swal_form_submit_btn').click();
                }
            });
        });

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