@extends('frontend.layout.dashboard-master')
@section('site_title', __('Work History'))

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

    $statusLabel = match($order_details->status) {
        0       => ['label' => __('Queue'),     'class' => 'bg-[#ECEDEF] text-[#3B4759]'],
        1       => ['label' => __('Active'),    'class' => 'bg-primary/10 text-primary'],
        2       => ['label' => __('Delivered'), 'class' => 'bg-primary/10 text-primary'],
        3       => ['label' => __('Completed'), 'class' => 'bg-[#DCFCE7] text-[#15803D]'],
        4       => ['label' => __('Cancelled'), 'class' => 'bg-[#FF4D4D]/10 text-[#FF4D4D]'],
        5       => ['label' => __('Declined'),  'class' => 'bg-[#FF4D4D]/10 text-[#FF4D4D]'],
        default => ['label' => __('On Hold'),   'class' => 'bg-[#FA8C00]/10 text-[#FA8C00]'],
    };

    $isHourly   = $order_details->is_fixed_hourly === 'hourly';
    $isComplete = $order_details->status === 3;

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

    $workHoursInt   = floor($total_work_time);
    $workMinutes    = round(($total_work_time - $workHoursInt) * 60);
    $workFormatted  = $workHoursInt . 'h ' . $workMinutes . 'm';
    $minHour        = (int)(get_static_option('minimum_hour_for_realtime_earning') ?? 1);

    $earnings = $isComplete
        ? $order_details->payable_amount
        : \App\Models\OrderMilestone::where('order_id', $order_details->id)->where('status', 2)->sum('price');

    $total_job    = \App\Models\JobPost::where('user_id', $clientUser?->id)->count();
    $total_order  = \App\Models\Order::where('user_id', $clientUser?->id)->where('status', 3)->count();
    $hiring_rate  = $total_job > 0 ? ($total_order * 100) / $total_job : 0;
@endphp

{{-- Page header --}}
<div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <div class="space-y-0.5">
        <h1 class="text-[20px] font-semibold leading-7 text-[#242B36]">{{ __('Work History') }}</h1>
        <p class="text-[14px] text-[#3B4759]">#{{ str_pad($order_details->id, 6, '0', STR_PAD_LEFT) }} · {{ $orderTitle }}</p>
    </div>
    <a href="{{ route('freelancer.order.details', $order_details->id) }}"
       class="inline-flex w-fit items-center gap-2 rounded-lg border border-[#C4C8CE] px-3 py-2 text-[13px] font-medium text-[#3B4759] transition-colors hover:bg-[#F5F6F8]">
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
            <path d="M19 12H5M5 12l7-7M5 12l7 7"/>
        </svg>
        {{ __('Back to Order') }}
    </a>
</div>

<x-validation.error />

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

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

        {{-- Order summary --}}
        <div class="rounded-xl border border-[#E9EBF0] bg-white p-5 shadow-sm">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <p class="text-[12px] text-[#637381]">{{ __('Order ID') }}: #{{ str_pad($order_details->id, 6, '0', STR_PAD_LEFT) }}</p>
                    <h2 class="mt-1 text-[16px] font-semibold text-[#242B36]">{{ $orderTitle }}</h2>
                    <p class="mt-1 text-[12px] text-[#637381]">{{ $order_details->created_at->toFormattedDateString() }}</p>
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    <span class="rounded-full px-3 py-1 text-[13px] font-medium {{ $statusLabel['class'] }}">{{ $statusLabel['label'] }}</span>
                    @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
                </div>
            </div>
        </div>

        {{-- Stats grid --}}
        <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
            <div class="rounded-xl border border-[#E9EBF0] bg-white p-4 shadow-sm">
                <p class="text-[11px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Earned') }}</p>
                <p class="mt-1.5 text-[17px] font-semibold text-[#242B36]">{{ float_amount_with_currency_symbol($earnings) }}</p>
            </div>

            @if($isHourly && !$isComplete)
                <div class="rounded-xl border border-[#E9EBF0] bg-white p-4 shadow-sm">
                    <p class="text-[11px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Hourly Rate') }}</p>
                    <p class="mt-1.5 text-[17px] font-semibold text-[#242B36]">{{ float_amount_with_currency_symbol($order_details->hourly_rate) }}</p>
                </div>
                <div class="rounded-xl border border-[#E9EBF0] bg-white p-4 shadow-sm">
                    <p class="text-[11px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Est. Hours') }}</p>
                    <p class="mt-1.5 text-[17px] font-semibold text-[#242B36]">{{ $order_details->job?->estimated_hours }} h</p>
                </div>
                <div class="rounded-xl border border-[#E9EBF0] bg-white p-4 shadow-sm">
                    <p class="text-[11px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Approx. Budget') }}</p>
                    <p class="mt-1.5 text-[17px] font-semibold text-[#242B36]">{{ float_amount_with_currency_symbol($order_details->price) }}</p>
                </div>
            @else
                <div class="rounded-xl border border-[#E9EBF0] bg-white p-4 shadow-sm">
                    <p class="text-[11px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Pending') }}</p>
                    <p class="mt-1.5 text-[17px] font-semibold text-[#242B36]">
                        {{ (!$isComplete && $order_details->payment_status) ? float_amount_with_currency_symbol($order_details->payable_amount) : site_currency_symbol() . ' 0' }}
                    </p>
                </div>
                <div class="rounded-xl border border-[#E9EBF0] bg-white p-4 shadow-sm">
                    <p class="text-[11px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Commission') }}</p>
                    <p class="mt-1.5 text-[17px] font-semibold text-[#242B36]">{{ float_amount_with_currency_symbol($order_details->commission_amount) }}</p>
                </div>
                <div class="rounded-xl border border-[#E9EBF0] bg-white p-4 shadow-sm">
                    <p class="text-[11px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Total Budget') }}</p>
                    <p class="mt-1.5 text-[17px] font-semibold text-[#242B36]">{{ float_amount_with_currency_symbol($order_details->price) }}</p>
                </div>
            @endif
        </div>

        {{-- Tabs --}}
        <div>
            <div class="border-b border-[#E9EBF0]">
                <div class="flex gap-6">
                    <button class="wh-tab-btn active-tab relative pb-3 text-[14px] font-medium text-primary" data-tab="history">
                        {{ __('Work Sessions') }}
                        <span class="absolute bottom-0 left-0 h-[3px] w-full rounded-t-full bg-primary"></span>
                    </button>
                    <button class="wh-tab-btn relative pb-3 text-[14px] font-medium text-[#3B4759] hover:text-primary" data-tab="summary">
                        {{ __('Earnings Summary') }}
                        <span class="tab-ind absolute bottom-0 left-0 hidden h-[3px] w-full rounded-t-full bg-primary"></span>
                    </button>
                </div>
            </div>

            {{-- Work Sessions --}}
            <div id="tab-history" class="wh-tab-panel mt-5">
                <div class="overflow-hidden rounded-xl border border-[#E9EBF0] bg-white shadow-sm">
                    @if($all_histories->count())
                        <div class="overflow-x-auto">
                            <table class="w-full text-left text-[13px]">
                                <thead class="border-b border-[#E9EBF0] bg-[#F9FAFB]">
                                    <tr>
                                        <th class="px-5 py-3 font-medium text-[#637381]">{{ __('Start') }}</th>
                                        <th class="px-5 py-3 font-medium text-[#637381]">{{ __('End') }}</th>
                                        <th class="px-5 py-3 font-medium text-[#637381]">{{ __('Duration') }}</th>
                                        <th class="px-5 py-3 font-medium text-[#637381]">{{ __('Note') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-[#E9EBF0]">
                                    @foreach($all_histories as $history)
                                        <tr class="transition-colors hover:bg-[#F9FAFB]">
                                            <td class="px-5 py-3.5 text-[#3B4759]">{{ \Carbon\Carbon::parse($history->start_date)->format('M d, Y H:i') }}</td>
                                            <td class="px-5 py-3.5 text-[#3B4759]">{{ \Carbon\Carbon::parse($history->end_date)->format('M d, Y H:i') }}</td>
                                            <td class="px-5 py-3.5">
                                                <span class="rounded-full bg-[#EEF2FF] px-2.5 py-1 font-mono text-[12px] font-medium text-[#4F46E5]">{{ $history->hours_worked }}</span>
                                            </td>
                                            <td class="px-5 py-3.5 text-[#637381]">{{ $history->notes ?: '—' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @if($all_histories->hasPages())
                            <div class="border-t border-[#E9EBF0] px-5 py-3">
                                {{ $all_histories->links() }}
                            </div>
                        @endif
                    @else
                        <div class="px-5 py-14 text-center">
                            <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary/10">
                                <svg class="h-6 w-6 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/>
                                </svg>
                            </div>
                            <p class="text-[14px] font-medium text-[#242B36]">{{ __('No work sessions yet') }}</p>
                            <p class="mt-1 text-[13px] text-[#637381]">{{ __('Sessions will appear here once you start the time tracker.') }}</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Earnings Summary --}}
            <div id="tab-summary" class="wh-tab-panel mt-5 hidden">
                @if($workHoursInt >= $minHour)
                    <div class="space-y-4">
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div class="rounded-xl border border-[#E9EBF0] bg-white p-5 shadow-sm">
                                <p class="text-[11px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Total Time Logged') }}</p>
                                <p class="mt-2 font-mono text-[28px] font-bold text-[#242B36]">{{ $workFormatted }}</p>
                            </div>
                            <div class="rounded-xl border border-[#E9EBF0] bg-white p-5 shadow-sm">
                                <p class="text-[11px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Earnings So Far') }}</p>
                                <p class="mt-2 text-[28px] font-bold text-[#15803D]">{{ float_amount_with_currency_symbol($order_total_amount_calculate) }}</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-[13px] text-amber-700">
                            <svg class="mt-0.5 h-4 w-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><circle cx="12" cy="16" r=".6" fill="currentColor"/>
                            </svg>
                            {{ __('Earnings are calculated from your logged sessions. The client can adjust work time before approving, which may change the final amount.') }}
                        </div>
                    </div>
                @else
                    <div class="rounded-xl border border-[#E9EBF0] bg-white px-5 py-14 text-center shadow-sm">
                        <p class="text-[14px] font-medium text-[#242B36]">{{ __('No earnings to show yet') }}</p>
                        <p class="mt-1 text-[13px] text-[#637381]">{{ __('Log at least') }} {{ $minHour }} {{ __('hour(s) to see your earnings summary.') }}</p>
                    </div>
                @endif
            </div>
        </div>

    </div>

    {{-- Right sidebar --}}
    <div class="lg:col-span-4">
        <div class="sticky top-24 space-y-4">

            {{-- Client card --}}
            <div class="rounded-xl border border-[#E9EBF0] bg-white p-5 shadow-sm">
                <p class="mb-4 text-[11px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Client') }}</p>

                <div class="mb-4 flex items-center gap-3">
                    <img src="{{ $clientImage }}" alt="{{ $clientUser?->first_name }}"
                         class="h-12 w-12 rounded-full object-cover">
                    <div>
                        <div class="flex items-center gap-1.5">
                            <p class="text-[15px] font-medium text-[#242B36]">{{ $clientUser?->first_name }} {{ $clientUser?->last_name }}</p>
                            @if($clientUser?->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>
                        @if($clientUser?->user_state?->state || $clientUser?->user_country?->country)
                            <p class="text-[12px] text-[#637381]">{{ implode(', ', array_filter([$clientUser?->user_state?->state, $clientUser?->user_country?->country])) }}</p>
                        @endif
                        @if(\Illuminate\Support\Facades\Cache::has('user_is_online_' . $clientUser?->id))
                            <span class="mt-0.5 inline-flex items-center gap-1 text-[11px] font-medium text-[#15803D]">
                                <span class="h-1.5 w-1.5 rounded-full bg-[#15803D]"></span>{{ __('Online') }}
                            </span>
                        @else
                            <span class="mt-0.5 inline-flex items-center gap-1 text-[11px] font-medium text-[#637381]">
                                <span class="h-1.5 w-1.5 rounded-full bg-[#C4C8CE]"></span>{{ __('Offline') }}
                            </span>
                        @endif
                    </div>
                </div>

                <div class="space-y-2.5 border-t border-[#E9EBF0] pt-4 text-[13px]">
                    <div class="flex items-center justify-between">
                        <span class="text-[#637381]">{{ __('Member since') }}</span>
                        <span class="font-medium text-[#242B36]">{{ $clientUser?->created_at->format('M Y') }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-[#637381]">{{ __('Total jobs') }}</span>
                        <span class="font-medium text-[#242B36]">{{ $total_job }}</span>
                    </div>
                    @if($hiring_rate >= 1)
                        <div class="flex items-center justify-between">
                            <span class="text-[#637381]">{{ __('Hire rate') }}</span>
                            <span class="font-medium text-[#242B36]">{{ $hiring_rate > 100 ? 100 : round($hiring_rate) }}%</span>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Actions --}}
            <div class="space-y-2">
                @if(!$isComplete && $order_details->status !== 0)
                    <a href="{{ route('freelancer.order.time.tracker', $order_details->id) }}"
                       class="flex w-full items-center justify-center gap-2 rounded-xl bg-primary px-4 py-2.5 text-[13px] font-medium text-white transition hover:bg-secondary">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/>
                        </svg>
                        {{ __('Go to Time Tracker') }}
                    </a>
                @endif
                <a href="{{ route('freelancer.order.details', $order_details->id) }}"
                   class="flex w-full items-center justify-center rounded-xl border border-[#C4C8CE] px-4 py-2.5 text-[13px] font-medium text-[#3B4759] transition hover:bg-[#F9FBFC]">
                    {{ __('Back to Order') }}
                </a>
            </div>

        </div>
    </div>

</div>

@endsection

@section('script')
<script>
(function () {
    const tabs   = document.querySelectorAll('.wh-tab-btn');
    const panels = document.querySelectorAll('.wh-tab-panel');

    tabs.forEach(btn => {
        btn.addEventListener('click', () => {
            const target = btn.dataset.tab;
            tabs.forEach(b => {
                const active = b === btn;
                b.classList.toggle('text-primary',    active);
                b.classList.toggle('text-[#3B4759]', !active);
                const ind = b.querySelector('.tab-ind');
                if (ind) ind.classList.toggle('hidden', !active);
            });
            panels.forEach(p => p.classList.toggle('hidden', p.id !== 'tab-' + target));
        });
    });
}());
</script>
@endsection