@extends('backend.layout.master-tailwind')
@section('title', __('Job Details'))

@section('admin_styles')
<style>
.jd-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}
@@media (max-width: 960px) { .jd-grid { grid-template-columns: 1fr; } }

.job-desc {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-2);
}
.job-desc p  { margin: 0 0 12px; }
.job-desc ul { padding-left: 20px; margin: 0 0 12px; }

.creator-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}
.creator-av {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.creator-av-fallback {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.creator-name  { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 2px; }
.creator-sub   { font-size: 12px; color: var(--text-3); margin: 0 0 6px; }
.creator-jobs  { font-size: 12px; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }

.meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    gap: 12px;
}
.meta-row:last-child  { border-bottom: none; padding-bottom: 0; }
.meta-row:first-child { padding-top: 0; }
.meta-label {
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.meta-value { font-weight: 500; color: var(--text); text-align: right; }

.dl-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.dl-link:hover { opacity: .8; }

.notice-callout {
    font-size: 12px;
    color: var(--text-3);
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    line-height: 1.6;
    margin-top: 12px;
}
.notice-callout p { margin: 0 0 4px; }
.notice-callout p:last-child { margin: 0; }

@@media (max-width: 600px) {
    .creator-card { flex-wrap: wrap; }
}
@@media (max-width: 960px) {
    .jd-sidebar { position: static !important; }
}
</style>
@endsection

@section('content')
<div class="page">
    <div class="page-head">
        <div>
            <h1 class="page-title">{{ __('Job Details') }}</h1>
            <p class="page-sub">{{ $job->title }}</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('admin.hourly.jobs.all') }}" class="btn ghost sm">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M19 12H5M5 12l7-7M5 12l7 7"/></svg>
                {{ __('All Jobs') }}
            </a>
        </div>
    </div>

    <div class="jd-grid">

        {{-- ── Main column ── --}}
        <div style="display:flex;flex-direction:column;gap:20px">

            {{-- Job overview --}}
            <div class="card">
                <div class="card-head">
                    <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
                        @if($job->status === 0)
                            <span class="tag warn"><span class="dot"></span>{{ __('Pending') }}</span>
                        @elseif($job->status === 1)
                            <span class="tag success"><span class="dot"></span>{{ __('Approved') }}</span>
                        @else
                            <span class="tag danger"><span class="dot"></span>{{ __('Rejected') }}</span>
                        @endif
                        <h2 style="font-size:16px;font-weight:600;color:var(--text);margin:0">{{ $job->title }}</h2>
                    </div>
                    @if($job->job_history?->edit_count)
                    <span class="tag" style="flex-shrink:0">{{ __('Edits') }}: {{ $job->job_history->edit_count }}</span>
                    @endif
                </div>
                <div class="card-body">
                    <div class="job-desc">{!! $job->description !!}</div>
                </div>
            </div>

            {{-- Creator card --}}
            <div class="card">
                <div class="card-head">
                    <div class="card-title">{{ __('Posted By') }}</div>
                </div>
                <div class="card-body">
                    <div class="creator-card">
                        @php
                            $hues     = [120, 260, 280, 220, 30, 180, 300, 60, 200, 340];
                            $hue      = $hues[$user->id % count($hues)];
                            $initials = strtoupper(substr($user->first_name, 0, 1) . substr($user->last_name, 0, 1));
                        @endphp

                        @if($user->image)
                            @if(cloudStorageExist() && in_array(Storage::getDefaultDriver(), ['s3', 'cloudFlareR2', 'wasabi']))
                                <img class="creator-av" src="{{ render_frontend_cloud_image_if_module_exists('profile/'.$user->image, load_from: $user->load_from ?? '') }}" alt="{{ $user->first_name }}">
                            @else
                                <img class="creator-av" src="{{ asset('assets/uploads/profile/'.$user->image) }}" alt="{{ $user->first_name }}">
                            @endif
                        @else
                            <span class="creator-av-fallback" style="background:oklch(0.6 0.15 {{ $hue }})">{{ $initials }}</span>
                        @endif

                        <div>
                            <p class="creator-name">{{ $user->first_name }} {{ $user->last_name }}</p>
                            <p class="creator-sub">
                                {{ $user->user_introduction?->title }}
                                @if($user->user_state?->state || $user->user_country?->country)
                                    · {{ $user->user_state?->state }}{{ ($user->user_state?->state && $user->user_country?->country) ? ', ' : '' }}{{ $user->user_country?->country }}
                                @endif
                            </p>
                            <span class="creator-jobs">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:12px;height:12px"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                                {{ $complete_jobs_count->count() }} {{ __('Jobs Completed') }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- ── Sidebar ── --}}
        <div class="jd-sidebar" style="display:flex;flex-direction:column;gap:20px;position:sticky;top:20px">

            {{-- Meta info --}}
            <div class="card">
                <div class="card-head">
                    <div class="card-title">{{ __('Job Info') }}</div>
                </div>
                <div class="card-body">

                    <div class="meta-row">
                        <span class="meta-label">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                            {{ __('Type') }}
                        </span>
                        <span class="meta-value">{{ __(ucfirst($job->type)) }}</span>
                    </div>

                    <div class="meta-row">
                        <span class="meta-label">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            {{ $job->type === 'hourly' ? __('Hourly Rate') : __('Budget') }}
                        </span>
                        <span class="meta-value">
                            {{ amount_with_currency_symbol($job->type === 'hourly' ? ($job->hourly_rate ?? '') : ($job->budget ?? '')) }}
                        </span>
                    </div>

                    @if($job->level)
                    <div class="meta-row">
                        <span class="meta-label">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M18 20V10"/><path d="M12 20V4"/><path d="M6 20v-6"/></svg>
                            {{ __('Experience') }}
                        </span>
                        <span class="meta-value">{{ ucfirst($job->level) }}</span>
                    </div>
                    @endif

                    <div class="meta-row">
                        <span class="meta-label">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
                            {{ __('Category') }}
                        </span>
                        <span class="meta-value">{{ $job->job_category?->category ?? '—' }}</span>
                    </div>

                    @if($job->last_seen)
                    <div class="meta-row">
                        <span class="meta-label">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            {{ __('Last Seen') }}
                        </span>
                        <span class="meta-value">{{ \Carbon\Carbon::parse($job->last_seen)->diffForHumans() }}</span>
                    </div>
                    @endif

                    @if($job->attachment)
                    <div class="meta-row">
                        <span class="meta-label">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                            {{ __('Attachment') }}
                        </span>
                        <span class="meta-value">
                            @if(cloudStorageExist() && in_array(Storage::getDefaultDriver(), ['s3', 'cloudFlareR2', 'wasabi']))
                                <a href="{{ render_frontend_cloud_image_if_module_exists('jobs/'.$job->attachment, load_from: $job->load_from) }}" download class="dl-link">
                            @else
                                <a href="{{ asset('assets/uploads/jobs/'.$job->attachment) }}" download class="dl-link">
                            @endif
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:12px;height:12px"><polyline points="8 17 12 21 16 17"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"/></svg>
                                {{ __('Download') }}
                            </a>
                        </span>
                    </div>
                    @endif

                </div>
            </div>

            {{-- Status action --}}
            <div class="card">
                <div class="card-head">
                    <div class="card-title">{{ __('Status') }}</div>
                    @if($job->status === 0)
                        <span class="tag warn"><span class="dot"></span>{{ __('Pending') }}</span>
                    @elseif($job->status === 1)
                        <span class="tag success"><span class="dot"></span>{{ __('Active') }}</span>
                    @else
                        <span class="tag danger"><span class="dot"></span>{{ __('Inactive') }}</span>
                    @endif
                </div>
                <div class="card-body">
                    @can('job-status-change')
                    <button class="btn primary swal_status_change_button" style="width:100%">
                        @if($job->status === 0 || $job->status === 2)
                            {{ __('Approve Job') }}
                        @else
                            {{ __('Deactivate Job') }}
                        @endif
                    </button>
                    <form method="post" action="{{ route('admin.hourly.job.status.change', $job->id) }}" style="display:none">
                        @csrf
                        <button type="submit" class="swal_form_submit_btn" style="display:none"></button>
                    </form>
                    @endcan

                    <div class="notice-callout">
                        <p>{{ __('Active: job is visible to all users on the site.') }}</p>
                        <p>{{ __('Inactive: job is hidden from the site.') }}</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@section('script')
<script>
(function ($) {
    'use strict';
    // swal_status_change_button handled globally in master-tailwind
}(jQuery));
</script>
@endsection