@extends('frontend.layout.dashboard-master')
@section('site_title', __('Order Details'))

@section('style')
<style>
html, body { overflow-x: hidden; }

/* ── Dynamic primary colour utilities ── */
.text-main          { color: var(--main-color-one); }
.bg-main            { background-color: var(--main-color-one); }
.border-main        { border-color: var(--main-color-one); }
.bg-main-tint       { background-color: color-mix(in srgb, var(--main-color-one) 12%, white); }
.focus-main:focus   { border-color: var(--main-color-one) !important; outline: none; }

/* Active badge (green tint) */
.badge-active       { background-color: color-mix(in srgb, var(--main-color-one) 12%, white); color: var(--main-color-one); }

/* Buttons */
.btn-od-primary { background: var(--main-color-one); color: #fff; transition: filter .15s; }
.btn-od-primary:hover { filter: brightness(.88); }
.btn-od-outline { border: 1px solid var(--main-color-one); color: var(--main-color-one); background: transparent; transition: background .15s; }
.btn-od-outline:hover { background: color-mix(in srgb, var(--main-color-one) 8%, white); }

/* Tabs */
.detail-tab { transition: color .15s; white-space: nowrap; }
.active-detail-tab { color: #242B36 !important; border-bottom: 2px solid var(--main-color-one) !important; margin-bottom: -1px; }

/* Mobile */
@media (max-width: 640px) {
    .od-card { padding: 16px !important; }
    .od-action-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .od-action-btns > a,
    .od-action-btns > button,
    .od-action-btns > form,
    .od-action-btns > form > button { width: 100%; text-align: center; justify-content: center; display: flex; align-items: center; }
}
</style>
@endsection

@section('content')

@php
    $od = $order_details;

    $mile_stones    = \App\Models\OrderMilestone::where('order_id', $od->id)->get();
    $payable_amount = \App\Models\OrderMilestone::where('order_id', $od->id)->where('status', '!=', 3)->sum('price');
    $earnings       = \App\Models\OrderMilestone::where('order_id', $od->id)->where('status', 2)->sum('price');

    $complete_orders = \App\Models\Order::where('freelancer_id', $od->freelancer_id)->where('status', 3)->count();
    $active_orders   = \App\Models\Order::where('freelancer_id', $od->freelancer_id)->where('status', 1)->count();

    $check_order_has_report_by_client = \App\Models\Report::where('client_id', $od->user_id)
        ->where('order_id', $od->id)->where('reporter', 'client')->first();

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

    $isHourly     = $od->is_fixed_hourly === 'hourly';
    $notSuspended = $od?->freelancer?->is_suspend != 1;

    $hourlyLoggedSeconds = 0;
    $hourlyLoggedHours   = 0;
    $hourlyPayAmount     = 0;
    $hourlyRefund        = 0;
    if ($isHourly && $od->status !== 3) {
        $hourlyLoggedSeconds = \App\Models\OrderWorkHistory::where('order_id', $od->id)->sum('seconds');
        $hourlyLoggedHours   = $hourlyLoggedSeconds / 3600;
        $hourlyRate          = $od->hourly_rate ?? $od->job?->hourly_rate ?? 0;
        $hourlyActual        = ($hourlyLoggedSeconds / 3600) * $hourlyRate;
        $hourlyPayAmount     = min($hourlyActual, (float) $od->price);
        $hourlyRefund        = max(0, (float) $od->price - $hourlyPayAmount);
    }

    $orderTitle = match($od->is_project_job) {
        'project' => $od->project?->title ?? __('N/A'),
        'job'     => $od->job?->title ?? __('N/A'),
        default   => __('Custom Order'),
    };

    $budget = $isHourly
        ? float_amount_with_currency_symbol($od->job?->hourly_rate ?? 0)
        : float_amount_with_currency_symbol($od->price);

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

    $isOnline = \Illuminate\Support\Facades\Cache::has('user_is_online_' . $od->freelancer?->id);
@endphp

{{-- Back link --}}
<div class="mb-5">
    <a href="{{ route('client.order.all') }}"
       class="inline-flex items-center gap-2 text-[14px] font-medium text-[#3B4759] hover:text-main">
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M19 12H5M12 5l-7 7 7 7" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        {{ __('Back to Orders') }}
    </a>
</div>

<div class="grid grid-cols-1 gap-6 lg:grid-cols-12">

    {{-- ===== LEFT COLUMN ===== --}}
    <div class="space-y-6 lg:col-span-8">

        {{-- Card 1: Summary --}}
        <div class="od-card rounded-2xl border border-[#E9EBF0] bg-white p-4 sm:p-6 shadow-sm">
            <div class="mb-2 flex flex-wrap items-start justify-between gap-3">
                <h2 class="text-[18px] sm:text-[20px] font-medium text-[#242B36] break-words min-w-0 flex-1">{{ $orderTitle }}</h2>
                @if($od->status === 0)
                    <span class="shrink-0 rounded-full bg-[#ECEDEF] px-3 py-1 text-[12px] font-medium text-[#3B4759]">{{ __('Queue') }}</span>
                @elseif($od->status === 1)
                    <span class="badge-active shrink-0 rounded-full px-3 py-1 text-[12px] font-medium">{{ __('Active') }}</span>
                @elseif($od->status === 2)
                    <span class="badge-active shrink-0 rounded-full px-3 py-1 text-[12px] font-medium">{{ __('Deliver') }}</span>
                @elseif($od->status === 3)
                    <span class="shrink-0 rounded-full bg-[#ECEDEF] px-3 py-1 text-[12px] font-medium text-[#3B4759]">{{ __('Complete') }}</span>
                @elseif($od->status === 4)
                    <span class="shrink-0 rounded-full bg-[#FF4D4D]/10 px-3 py-1 text-[12px] font-medium text-[#FF4D4D]">{{ __('Cancelled') }}</span>
                @elseif($od->status === 5)
                    <span class="shrink-0 rounded-full bg-[#FF4D4D]/10 px-3 py-1 text-[12px] font-medium text-[#FF4D4D]">{{ __('Declined') }}</span>
                @elseif($od->status === 6)
                    <span class="shrink-0 rounded-full bg-[#FF4D4D]/10 px-3 py-1 text-[12px] font-medium text-[#FF4D4D]">{{ __('Suspended') }}</span>
                @elseif($od->status === 7)
                    <span class="shrink-0 rounded-full bg-[#FA8C00]/10 px-3 py-1 text-[12px] font-medium text-[#FA8C00]">{{ __('On Hold') }}</span>
                @endif
            </div>
            <p class="mb-4 sm:mb-6 text-[13px] text-[#637381]">{{ __('Order ID') }}: #{{ str_pad($od->id, 6, '0', STR_PAD_LEFT) }}</p>

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

            <div class="mb-6 sm:mb-8 grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-4">
                <div>
                    <p class="mb-1 text-[13px] font-normal text-[#637381]">{{ $isHourly ? __('Hourly Rate') : __('Budget') }}</p>
                    <p class="text-[16px] sm:text-[18px] font-medium text-[#242B36]">
                        {{ $budget }}
                        @if(!$isHourly)
                            <span class="text-[12px] font-normal text-[#637381]">({{ $od->payment_status === 'complete' ? __('Funded') : ucfirst($od->payment_status) }})</span>
                        @endif
                    </p>
                </div>
                <div>
                    <p class="mb-1 text-[13px] font-normal text-[#637381]">{{ __('Delivery Time') }}</p>
                    <p class="text-[16px] sm:text-[18px] font-medium text-[#242B36]">{{ $od->delivery_time ?? __('N/A') }}</p>
                </div>
                <div>
                    <p class="mb-1 text-[13px] font-normal text-[#637381]">{{ __('Completed') }}</p>
                    <p class="text-[16px] sm:text-[18px] font-medium text-[#242B36]">{{ $complete_orders }}</p>
                </div>
                <div>
                    <p class="mb-1 text-[13px] font-normal text-[#637381]">{{ __('Active') }}</p>
                    <p class="text-[16px] sm:text-[18px] font-medium text-[#242B36]">{{ $active_orders }}</p>
                </div>
            </div>

            <div class="od-action-btns flex flex-wrap gap-3">
                @if($notSuspended)
                    <form action="{{ route('client.message.send') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="freelancer_id" value="{{ $od->freelancer_id }}">
                        <input type="hidden" name="from_user" value="1">
                        <input type="hidden" name="project_id" value="{{ $od->identity }}">
                        <input type="hidden" name="order_id" value="{{ $od->id }}">
                        <button type="submit"
                                class="btn-od-outline rounded-xl px-5 py-2.5 text-[14px] font-semibold">
                            {{ __('Send Message') }}
                        </button>
                    </form>

                    @if($od->status === 3)
                        <a href="{{ route('client.order.invoice.generate', $od->id) }}"
                           class="rounded-xl border border-[#C4C8CE] px-5 py-2.5 text-[14px] font-medium text-[#3B4759] transition hover:bg-[#F9FBFC]">
                            {{ __('Invoice') }}
                        </a>
                        @if(!$clientRating)
                            <a href="{{ route('client.order.rating', $od->id) }}"
                               class="btn-od-primary rounded-xl px-5 py-2.5 text-[14px] font-medium">
                                {{ __('Submit Review') }}
                            </a>
                        @endif
                    @endif
                @endif

                @if($isHourly && $od->status !== 0)
                    <a href="{{ route('client.order.work.history', $od->id) }}"
                       class="rounded-xl border border-[#C4C8CE] px-5 py-2.5 text-[14px] font-medium text-[#3B4759] transition hover:bg-[#F9FBFC]">
                        {{ __('Work History') }}
                    </a>
                @endif
            </div>
        </div>

        {{-- Card 2: Balance stats --}}
        @if(get_static_option('commission_disable_client_panel') != 'disable')
        <div class="od-card rounded-2xl border border-[#E9EBF0] bg-white p-4 sm:p-6 shadow-sm">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">

                {{-- Card 1 --}}
                <div class="rounded-xl bg-[#F0F2FF] p-4">
                    @if($isHourly && $od->status !== 3)
                        <p class="mb-2 text-[13px] font-normal text-[#637381]">{{ __('Hours Logged') }}</p>
                        <p class="text-[16px] sm:text-[18px] font-medium text-[#242B36]">
                            {{ number_format($hourlyLoggedHours, 2) }} / {{ $od->job?->estimated_hours ?? '—' }} {{ __('hrs') }}
                        </p>
                    @else
                        <p class="mb-2 text-[13px] font-normal text-[#637381]">{{ __('Earned Balance') }}</p>
                        <p class="text-[16px] sm:text-[18px] font-medium text-[#242B36]">
                            {{ float_amount_with_currency_symbol($od->status === 3 ? $od->payable_amount : $earnings) }}
                        </p>
                    @endif
                </div>

                {{-- Card 2 --}}
                <div class="rounded-xl bg-[#E6F4F1] p-4">
                    @if($isHourly && $od->status !== 3)
                        <p class="mb-2 text-[13px] font-normal text-[#637381]">{{ __('Hourly Rate') }}</p>
                        <p class="text-[16px] sm:text-[18px] font-medium text-[#242B36]">{{ float_amount_with_currency_symbol($od->job?->hourly_rate) }}</p>
                    @else
                        <p class="mb-2 text-[13px] font-normal text-[#637381]">{{ __('Pending Balance') }}</p>
                        <p class="text-[16px] sm:text-[18px] font-medium text-[#242B36]">
                            @if($mile_stones->count() > 0)
                                {{ float_amount_with_currency_symbol($od->status != 3 ? $payable_amount - $earnings : 0) }}
                            @else
                                {{ ($od->status != 3 && $od->status != 4 && $od->payment_status != '') ? float_amount_with_currency_symbol($od->payable_amount) : site_currency_symbol().'0' }}
                            @endif
                        </p>
                    @endif
                </div>

                {{-- Card 3 --}}
                <div class="rounded-xl bg-[#FFF4E8] p-4">
                    @if($isHourly && $od->status !== 3)
                        <p class="mb-2 text-[13px] font-normal text-[#637381]">{{ __('Amount to Pay') }}</p>
                        <p class="text-[16px] sm:text-[18px] font-medium text-[#242B36]">{{ float_amount_with_currency_symbol($hourlyPayAmount) }}</p>
                        @if($hourlyLoggedSeconds === 0)
                            <p class="mt-1 text-[11px] text-[#637381]">{{ __('No hours logged yet') }}</p>
                        @elseif($hourlyRefund > 0)
                            <p class="mt-1 text-[11px] font-medium text-green-600">{{ float_amount_with_currency_symbol($hourlyRefund) }} {{ __('will be refunded to you') }}</p>
                        @endif
                    @else
                        <p class="mb-2 text-[13px] font-normal text-[#637381]">{{ __('Commission Amount') }}</p>
                        <p class="text-[16px] sm:text-[18px] font-medium text-[#242B36]">{{ float_amount_with_currency_symbol($od->commission_amount) }}</p>
                    @endif
                </div>

                {{-- Card 4 --}}
                <div class="rounded-xl bg-[#FFF0F2] p-4">
                    <p class="mb-2 text-[13px] font-normal text-[#637381]">{{ $isHourly ? __('Locked Budget') : __('Total Budget') }}</p>
                    <p class="text-[16px] sm:text-[18px] font-medium text-[#242B36]">{{ float_amount_with_currency_symbol($od->price) }}</p>
                </div>

            </div>
        </div>
        @endif

        {{-- Card 3: Tabs --}}
        <div class="od-card rounded-2xl border border-[#E9EBF0] bg-white p-4 sm:p-6 shadow-sm">

            <div class="mb-6 flex gap-6 overflow-x-auto border-b border-[#E9EBF0]" style="scrollbar-width:none">
                @if($mile_stones->count() > 0)
                    <button class="detail-tab active-detail-tab pb-3 text-[15px] font-medium text-[#242B36]" data-tab="milestones">{{ __('Milestones') }}</button>
                @endif
                <button class="detail-tab {{ $mile_stones->count() === 0 ? 'active-detail-tab' : '' }} pb-3 text-[15px] font-medium text-[#3B4759] hover:text-[#242B36]" data-tab="description">{{ __('Description & Requirements') }}</button>
                <button class="detail-tab pb-3 text-[15px] font-medium text-[#3B4759] hover:text-[#242B36]" data-tab="works">{{ __('Works Submitted') }}</button>
            </div>

            {{-- Milestones tab --}}
            @if($mile_stones->count() > 0)
            <div class="detail-tab-content" id="tab-milestones">
                <div class="space-y-4">
                    @foreach($mile_stones as $ms)
                    <div class="rounded-xl border border-[#E9EBF0] p-4">
                        <div class="mb-2 flex flex-wrap items-start justify-between gap-3">
                            <h4 class="text-[15px] font-medium text-[#242B36] min-w-0 break-words">#{{ $ms->id }} — {{ $ms->title }}</h4>
                            <div class="flex shrink-0 flex-wrap items-center gap-2">
                                @if($ms->status === 0)
                                    <span class="rounded-full bg-[#FA8C00]/10 px-2.5 py-0.5 text-[12px] font-medium text-[#FA8C00]">{{ __('Pending') }}</span>
                                @elseif($ms->status === 1)
                                    <span class="badge-active rounded-full px-2.5 py-0.5 text-[12px] font-medium">{{ __('Active') }}</span>
                                @elseif($ms->status === 2)
                                    <span class="rounded-full bg-[#ECEDEF] px-2.5 py-0.5 text-[12px] font-medium text-[#3B4759]">{{ __('Complete') }}</span>
                                @elseif($ms->status === 3)
                                    <span class="rounded-full bg-[#FF4D4D]/10 px-2.5 py-0.5 text-[12px] font-medium text-[#FF4D4D]">{{ __('Cancel') }}</span>
                                @elseif($ms->status === 4)
                                    <span class="badge-active rounded-full px-2.5 py-0.5 text-[12px] font-medium">{{ __('Deliver') }}</span>
                                @endif
                                <span class="text-[13px] text-[#637381]">{{ float_amount_with_currency_symbol($ms->price) }}</span>
                                @if($ms->revision)
                                    <span class="text-[12px] text-[#637381]">{{ __('Rev') }}: {{ $ms->revision }} ({{ __('Left') }}: {{ $ms->revision_left }})</span>
                                @endif
                            </div>
                        </div>
                        <p class="mb-2 text-[13px] text-[#637381]">{{ __('Delivery') }}: {{ $ms->deadline }}</p>
                        <p class="text-[13px] text-[#454F5B]">{{ $ms->description }}</p>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Description tab --}}
            <div class="detail-tab-content {{ $mile_stones->count() > 0 ? 'hidden' : '' }}" id="tab-description">
                <p class="whitespace-pre-line text-[14px] leading-relaxed text-[#454F5B]">
                    {{ $od->description ?? __('No description provided.') }}
                </p>
            </div>

            {{-- Works Submitted tab --}}
            <div class="detail-tab-content hidden" id="tab-works">
                @if($od->order_submit_history?->count() > 0)
                    <div class="space-y-3">
                        @foreach($od->order_submit_history as $history)
                        @php $urlType = empty($history->order_milestone_id) ? 'order' : 'milestone'; @endphp
                        <div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E9EBF0] px-4 py-3">
                            <span class="text-[13px] text-[#637381]">{{ $history->created_at->toFormattedDateString() }}</span>
                            @if($history->attachment)
                                <a href="{{ asset('assets/uploads/attachment/order/'.$history->attachment) }}" download
                                   class="flex items-center gap-1.5 text-[13px] font-medium text-main hover:underline">
                                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    {{ __('Download Attachment') }}
                                </a>
                            @endif
                            <div class="flex flex-wrap items-center gap-2">
                                @if($history->status === 0)
                                    <span class="rounded-full bg-[#FA8C00]/10 px-2.5 py-0.5 text-[12px] font-medium text-[#FA8C00]">{{ __('Pending') }}</span>
                                    <button class="request_revision_submit rounded-lg border border-[#C4C8CE] px-4 py-1.5 text-[12px] font-medium text-[#3B4759] transition hover:bg-[#F9FBFC]"
                                            data-order_submit_history_id="{{ $history->id }}"
                                            data-order_id="{{ $history->order_id }}"
                                            data-order_milestone_id="{{ $history->order_milestone_id }}">
                                        {{ __('Request Revision') }}
                                    </button>
                                    <button class="accept_and_pay btn-od-primary rounded-lg px-4 py-1.5 text-[12px] font-medium"
                                        @if($isHourly)
                                            data-is-hourly="1"
                                            data-pay-amount="{{ float_amount_with_currency_symbol($hourlyPayAmount) }}"
                                            data-refund-amount="{{ $hourlyRefund > 0 ? float_amount_with_currency_symbol($hourlyRefund) : '' }}"
                                        @endif>
                                        {{ __('Accept Order') }}
                                    </button>
                                    <form method="post" action="{{ route('client.order.milestone.approve', [$history->order_milestone_id ?? $history->order_id, $urlType]) }}" class="hidden">
                                        @csrf
                                        <button type="submit" class="swal_form_submit_btn hidden"></button>
                                    </form>
                                @elseif($history->status === 1)
                                    <span class="badge-active rounded-full px-2.5 py-0.5 text-[12px] font-medium">{{ __('Approved') }}</span>
                                @elseif($history->status === 2)
                                    <button class="show_revision_details rounded-full bg-[#FF4D4D]/10 px-2.5 py-0.5 text-[12px] font-medium text-[#FF4D4D] hover:bg-[#FF4D4D]/20"
                                            data-revision_id="{{ $history->request_revision?->id }}"
                                            data-revision_description="{{ $history->request_revision?->description }}">
                                        {{ __('Revision Details') }}
                                    </button>
                                @endif
                            </div>
                            <button class="show_submit_description text-[13px] font-medium text-main hover:underline"
                                    data-description="{{ $history->description }}"
                                    data-milestone_id="{{ $history->order_milestone_id }}">
                                {{ __('Description') }} →
                            </button>
                        </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-[14px] text-[#637381]">{{ __('No work submitted yet.') }}</p>
                @endif
            </div>

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

            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    @if(empty($check_order_has_report_by_client))
                        @if(in_array($od->status, [3, 4]) && $notSuspended)
                            <button class="open_order_report_modal rounded-lg border border-[#FF4D4D] px-5 py-2.5 text-[13px] font-medium text-[#FF4D4D] transition hover:bg-[#FF4D4D]/10"
                                    data-order-id="{{ $od->id }}" data-freelancer-id="{{ $od->freelancer_id }}">
                                {{ __('Report Order') }}
                            </button>
                        @endif
                    @else
                        <span class="rounded-lg border border-[#C4C8CE] px-5 py-2.5 text-[13px] font-medium text-[#637381]">{{ __('Reported') }}</span>
                    @endif
                </div>
                @if($mile_stones->isEmpty())
                    <div class="flex items-center gap-3 text-[13px] text-[#637381]">
                        <span>{{ __('Revisions') }}: {{ $od->revision }}</span>
                        <span>{{ __('Left') }}: {{ $od->revision_left }}</span>
                    </div>
                @endif
            </div>
        </div>

    </div>{{-- end left --}}

    {{-- ===== RIGHT COLUMN: Freelancer sidebar ===== --}}
    <div class="lg:col-span-4">
        <div class="sticky top-24 rounded-2xl border border-[#E9EBF0] bg-white p-4 sm:p-5 shadow-sm">

            <div class="mb-4 flex items-center gap-4">
                <img src="{{ $freelancerImage }}" alt="{{ $od->freelancer?->first_name }}"
                     class="h-16 w-16 sm:h-20 sm:w-20 shrink-0 rounded-full object-cover shadow-sm">
                <div class="min-w-0">
                    <div class="flex items-center gap-1.5">
                        <h3 class="text-[15px] sm:text-[17px] font-medium text-[#242B36] break-words">
                            <a href="{{ route('freelancer.profile.details', $od->freelancer?->username) }}"
                               class="hover:text-main">
                                {{ $od->freelancer?->first_name }} {{ $od->freelancer?->last_name }}
                            </a>
                        </h3>
                        @if($od->freelancer?->user_verified_status)
                            <svg class="h-[18px] w-[18px] shrink-0 text-main" 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>
                    <div class="mt-0.5 flex items-center gap-1.5">
                        <span class="h-2 w-2 rounded-full {{ $isOnline ? 'bg-[#27C27C]' : 'bg-[#C4C8CE]' }}"></span>
                        <span class="text-[13px] text-[#637381]">{{ $isOnline ? __('Active') : __('Inactive') }}</span>
                    </div>
                    <p class="mt-1 text-[13px] sm:text-[14px] text-[#637381] break-words">
                        @if($od->freelancer?->user_state?->state){{ $od->freelancer->user_state->state }}, @endif
                        {{ $od->freelancer?->user_country?->country }}
                    </p>
                </div>
            </div>

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

            <div class="mb-4 text-[14px]">
                {!! freelancer_rating($od->freelancer?->id) !!}
            </div>

            <div class="space-y-1">
                <div class="flex items-center justify-between py-2">
                    <div class="flex items-center gap-2">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg">
                            <svg class="h-6 w-6 text-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
                                <rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
                            </svg>
                        </div>
                        <span class="text-[13px] sm:text-[14px] text-[#637381]">{{ __('Member Since') }}</span>
                    </div>
                    <span class="text-[13px] sm:text-[14px] font-medium text-[#242B36]">{{ $od->freelancer?->created_at?->format('M d, Y') }}</span>
                </div>

                <div class="flex items-center justify-between py-2">
                    <div class="flex items-center gap-2">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg">
                            <svg class="h-6 w-6 text-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
                            </svg>
                        </div>
                        <span class="text-[13px] sm:text-[14px] text-[#637381]">{{ __('Complete Orders') }}</span>
                    </div>
                    <span class="text-[13px] sm:text-[14px] font-medium text-[#242B36]">{{ $complete_orders }}</span>
                </div>

                <div class="flex items-center justify-between py-2">
                    <div class="flex items-center gap-2">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg">
                            <svg class="h-6 w-6 text-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
                                <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
                            </svg>
                        </div>
                        <span class="text-[13px] sm:text-[14px] text-[#637381]">{{ __('Active Orders') }}</span>
                    </div>
                    <span class="text-[13px] sm:text-[14px] font-medium text-[#242B36]">{{ $active_orders }}</span>
                </div>
            </div>

        </div>
    </div>

</div>{{-- end grid --}}


{{-- ===== MODALS ===== --}}

{{-- Revision Request Modal --}}
<div id="revision-request-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
    <div class="relative flex w-full max-w-[580px] flex-col overflow-hidden rounded-2xl bg-white shadow-2xl" style="max-height:90vh">
        <div class="flex shrink-0 items-center justify-between border-b border-[#E9EBF0] p-5 sm:p-6">
            <h2 class="text-[17px] sm:text-[18px] font-semibold text-[#242B36]">{{ __('Request Revision') }}</h2>
            <button class="close-modal-btn text-[#637381] transition hover:text-[#FF4D4D]" data-modal="revision-request-modal">
                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12" stroke-linecap="round"/></svg>
            </button>
        </div>
        <form action="{{ route('client.order.revision') }}" method="post" id="revision_request_form" class="flex flex-col overflow-hidden">
            @csrf
            <input type="hidden" name="order_submit_history_id" id="order_submit_history_id">
            <input type="hidden" name="order_id" id="order_id_for_revision_order">
            <input type="hidden" name="order_milestone_id" id="order_milestone_id">
            <div class="space-y-4 overflow-y-auto p-5 sm:p-6">
                <div class="rounded-xl bg-[#FFF7ED] p-4">
                    <p class="text-[13px] text-[#454F5B]">{{ __('Notice: You will send revision request if the order or milestone has available revision.') }}</p>
                </div>
                <div>
                    <label class="mb-2 block text-[14px] font-medium text-[#242B36]">{{ __('Description') }}</label>
                    <textarea name="revision_description" id="revision_description" rows="5"
                              placeholder="{{ __('Write a description about your modification') }}"
                              class="focus-main w-full resize-none rounded-xl border border-[#E9EBF0] p-4 text-[14px] outline-none transition"></textarea>
                </div>
                <button type="button" class="submit_revision_request btn-od-primary w-full rounded-xl px-8 py-3 text-[14px] font-medium">
                    {{ __('Submit') }}
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Revision Details Modal --}}
<div id="revision-details-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
    <div class="relative flex w-full max-w-[500px] flex-col overflow-hidden rounded-2xl bg-white shadow-2xl" style="max-height:90vh">
        <div class="flex shrink-0 items-center justify-between border-b border-[#E9EBF0] p-5 sm:p-6">
            <h2 class="text-[17px] sm:text-[18px] font-semibold text-[#242B36]">{{ __('Revision Details') }}</h2>
            <button class="close-modal-btn text-[#637381] transition hover:text-[#FF4D4D]" data-modal="revision-details-modal">
                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12" stroke-linecap="round"/></svg>
            </button>
        </div>
        <div class="overflow-y-auto p-5 sm:p-6">
            <div class="mb-4 rounded-xl bg-[#FFF7ED] p-4">
                <p class="text-[13px] text-[#454F5B]">{{ __('You reviewed the freelancer\'s work and requested the following changes:') }}</p>
            </div>
            <p id="display_request_revision_description" class="text-[14px] leading-relaxed text-[#242B36]"></p>
        </div>
    </div>
</div>

{{-- Submission Description Modal --}}
<div id="description-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
    <div class="relative flex w-full max-w-[500px] flex-col overflow-hidden rounded-2xl bg-white shadow-2xl" style="max-height:90vh">
        <div class="flex shrink-0 items-center justify-between border-b border-[#E9EBF0] p-5 sm:p-6">
            <h2 class="text-[17px] sm:text-[18px] font-semibold text-[#242B36]">{{ __('Submission Description') }}</h2>
            <button class="close-modal-btn text-[#637381] transition hover:text-[#FF4D4D]" data-modal="description-modal">
                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12" stroke-linecap="round"/></svg>
            </button>
        </div>
        <div class="overflow-y-auto p-5 sm:p-6">
            <p id="show_order_submit_description" class="whitespace-pre-line text-[14px] leading-relaxed text-[#242B36]"></p>
        </div>
    </div>
</div>

{{-- Report Order Modal --}}
<div id="report-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
    <div class="relative flex w-full max-w-[580px] flex-col overflow-hidden rounded-2xl bg-white shadow-2xl" style="max-height:90vh">
        <div class="flex shrink-0 items-center justify-between border-b border-[#E9EBF0] p-5 sm:p-6">
            <h2 class="text-[17px] sm:text-[18px] font-semibold text-[#242B36]">{{ __('Report Order') }}</h2>
            <button class="close-modal-btn text-[#637381] transition hover:text-[#FF4D4D]" data-modal="report-modal">
                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12" stroke-linecap="round"/></svg>
            </button>
        </div>
        <form action="{{ route('client.order.report') }}" method="post" id="order_report_form" class="flex flex-col overflow-hidden">
            @csrf
            <input type="hidden" name="report_order_id" id="report_order_id">
            <input type="hidden" name="report_to_freelancer_id" id="report_to_freelancer_id">
            <div class="space-y-4 overflow-y-auto p-5 sm:p-6">
                <div class="rounded-xl bg-[#FFF7ED] p-4">
                    <p class="text-[13px] text-[#454F5B]">{{ __('Notice: Admin will review your report and take appropriate action.') }}</p>
                </div>
                <div>
                    <label class="mb-2 block text-[14px] font-medium text-[#242B36]">{{ __('Title') }}</label>
                    <input type="text" name="report_title" id="report_title" placeholder="{{ __('Enter title') }}"
                           class="focus-main w-full rounded-xl border border-[#E9EBF0] px-4 py-3 text-[14px] outline-none transition">
                </div>
                <div>
                    <label class="mb-2 block text-[14px] font-medium text-[#242B36]">{{ __('Description') }}</label>
                    <textarea name="report_description" id="report_description" rows="5"
                              placeholder="{{ __('Describe the issue...') }}"
                              class="focus-main w-full resize-none rounded-xl border border-[#E9EBF0] p-4 text-[14px] outline-none transition"></textarea>
                </div>
                <button type="button" class="client_order_report btn-od-primary w-full rounded-xl px-8 py-3 text-[14px] font-medium">
                    {{ __('Submit Report') }}
                </button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('script')
<x-sweet-alert.sweet-alert2-js />
<script>
(function () {

    // ---------- Tabs ----------
    const tabBtns   = document.querySelectorAll('.detail-tab');
    const tabPanels = document.querySelectorAll('.detail-tab-content');

    tabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const target = btn.dataset.tab;
            tabBtns.forEach(b => {
                b.classList.remove('active-detail-tab', 'text-[#242B36]');
                b.classList.add('text-[#3B4759]');
            });
            btn.classList.add('active-detail-tab', 'text-[#242B36]');
            btn.classList.remove('text-[#3B4759]');
            tabPanels.forEach(p => p.classList.add('hidden'));
            const panel = document.getElementById('tab-' + target);
            if (panel) panel.classList.remove('hidden');
        });
    });

    // ---------- Modal helpers ----------
    function openModal(id) {
        const m = document.getElementById(id);
        if (m) { m.classList.remove('hidden'); m.classList.add('flex'); }
    }
    function closeModal(id) {
        const m = document.getElementById(id);
        if (m) { m.classList.add('hidden'); m.classList.remove('flex'); }
    }

    document.querySelectorAll('.close-modal-btn').forEach(btn => {
        btn.addEventListener('click', () => closeModal(btn.dataset.modal));
    });

    ['revision-request-modal','revision-details-modal','description-modal','report-modal'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.addEventListener('click', e => { if (e.target === el) closeModal(id); });
    });

    // ---------- Revision Request ----------
    document.querySelectorAll('.request_revision_submit').forEach(btn => {
        btn.addEventListener('click', () => {
            document.getElementById('order_submit_history_id').value     = btn.dataset.order_submit_history_id;
            document.getElementById('order_id_for_revision_order').value = btn.dataset.order_id;
            document.getElementById('order_milestone_id').value          = btn.dataset.order_milestone_id ?? '';
            document.getElementById('revision_description').value        = '';
            openModal('revision-request-modal');
        });
    });

    document.querySelector('.submit_revision_request')?.addEventListener('click', function () {
        const desc = document.getElementById('revision_description').value.trim();
        if (!desc) { alert('{{ __("Please enter description.") }}'); return; }
        document.getElementById('revision_request_form').submit();
    });

    // ---------- Revision Details ----------
    document.querySelectorAll('.show_revision_details').forEach(btn => {
        btn.addEventListener('click', () => {
            document.getElementById('display_request_revision_description').textContent = btn.dataset.revision_description ?? '';
            openModal('revision-details-modal');
        });
    });

    // ---------- Submission Description ----------
    document.querySelectorAll('.show_submit_description').forEach(btn => {
        btn.addEventListener('click', () => {
            document.getElementById('show_order_submit_description').textContent = btn.dataset.description ?? '';
            openModal('description-modal');
        });
    });

    // ---------- Accept Order ----------
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.accept_and_pay');
        if (!btn) return;
        e.preventDefault();
        const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--main-color-one').trim() || '#007456';

        let swalOptions = {
            title: '{{ __("Accept Order?") }}',
            text: '{{ __("If you accept, freelancer will get the amount and you will not be able to change it.") }}',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: primaryColor,
            cancelButtonColor: '#d33',
            confirmButtonText: '{{ __("Yes, Accept it!") }}'
        };

        if (btn.dataset.isHourly) {
            let html = '{{ __("Freelancer will be paid") }} <strong>' + btn.dataset.payAmount + '</strong> {{ __("based on actual hours worked.") }}';
            if (btn.dataset.refundAmount) {
                html += '<br><span style="color:#15803d;font-size:13px">{{ __("You will receive a refund of") }} <strong>' + btn.dataset.refundAmount + '</strong> {{ __("from the locked budget.") }}</span>';
            }
            swalOptions.html = html;
            delete swalOptions.text;
        }

        Swal.fire(swalOptions).then(result => {
            if (result.isConfirmed) {
                const form = btn.nextElementSibling;
                if (form) form.querySelector('.swal_form_submit_btn').click();
            }
        });
    });

    // ---------- Report Order ----------
    document.querySelectorAll('.open_order_report_modal').forEach(btn => {
        btn.addEventListener('click', () => {
            document.getElementById('report_order_id').value         = btn.dataset.orderId;
            document.getElementById('report_to_freelancer_id').value = btn.dataset.freelancerId;
            openModal('report-modal');
        });
    });

    document.querySelector('.client_order_report')?.addEventListener('click', function () {
        const title = document.getElementById('report_title').value.trim();
        const desc  = document.getElementById('report_description').value.trim();
        if (!title || !desc) { alert('{{ __("Please fill both fields.") }}'); return; }
        document.getElementById('order_report_form').submit();
    });

})();
</script>
@endsection