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

@section('admin_styles')
    <style>
        .job-grid {
            display: grid;
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            gap: 24px;
            align-items: start;
        }

        @media(max-width:1100px) {
            .job-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endsection

@section('content')
    <div class="page">
        <div class="page-head">
            <div>
                <h1 class="page-title">{{ __('Job Details') }}</h1>
                <p class="page-sub">{{ __('Review and manage job post') }}</p>
            </div>
            <div class="page-actions">
                <a href="{{ route('admin.jobs') }}" class="btn ghost sm">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        style="margin-right:4px">
                        <path d="M19 12H5M12 19l-7-7 7-7" />
                    </svg>
                    {{ __('Back') }}
                </a>
            </div>
        </div>

        <div class="job-grid">
            <div style="display:flex;flex-direction:column;gap:24px">
                {{-- Job Description --}}
                <div class="card" style="padding:24px">
                    <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
                        @php
                            $statusMap = [
                                0 => ['class' => 'warn', 'label' => __('Pending')],
                                1 => ['class' => 'success', 'label' => __('Approved')],
                                2 => ['class' => 'danger', 'label' => __('Rejected')],
                            ];
                            $st = $statusMap[$job->status] ?? ['class' => '', 'label' => __('Unknown')];
                        @endphp
                        <span class="tag {{ $st['class'] }}"><span class="dot"></span>{{ $st['label'] }}</span>
                        @if ($job->is_fake == 1)
                            <span class="tag danger"><span class="dot"></span>{{ __('Fake') }}</span>
                        @endif
                        <div style="font-size:12px;color:var(--text-2);margin-left:auto">
                            <span>{{ __('No of Edit:') }} <strong
                                    style="color:var(--text)">{{ $job->job_history?->edit_count ?? 0 }}</strong></span>
                        </div>
                    </div>

                    <h2 style="font-size:20px;font-weight:600;margin-bottom:12px;color:var(--text)">{{ $job->title }}</h2>
                    <div style="font-size:13px;line-height:1.75;color:var(--text-2);word-break:break-word">
                        {!! $job->description !!}
                    </div>
                </div>

                {{-- Employer Profile --}}
                <div class="card" style="padding:24px">
                    <div style="display:flex;align-items:center;gap:16px">
                        <div
                            style="flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden;background:var(--hover)">
                            @if ($user->image)
                                <img src="{{ cloudStorageExist() && in_array(Storage::getDefaultDriver(), ['s3', 'cloudFlareR2', 'wasabi']) ? render_frontend_cloud_image_if_module_exists('profile/' . $user->image, load_from: $user->load_from ?? '') : asset('assets/uploads/profile/' . $user->image) }}"
                                    style="width:100%;height:100%;object-fit:cover">
                            @else
                                @php
                                    $hues = [0, 36, 72, 108, 144, 180, 216, 252, 288, 324];
                                    $hue = $hues[$user->id % 10] ?? 0;
                                @endphp
                                <div
                                    style="width:100%;height:100%;background:oklch(0.6 0.15 {{ $hue }});color:#fff;display:grid;place-items:center;font-size:22px;font-weight:600">
                                    {{ strtoupper(substr($user->first_name, 0, 1)) }}
                                </div>
                            @endif
                        </div>
                        <div>
                            <div style="font-weight:600;font-size:15px;color:var(--text)">{{ $user->first_name }}
                                {{ $user->last_name }}</div>
                            <div style="font-size:12px;color:var(--text-2);margin-top:4px">
                                @if ($user->user_introduction?->title)
                                    {{ $user->user_introduction?->title }} &middot;
                                @endif
                                @if ($user->user_state?->state)
                                    {{ $user->user_state?->state }},
                                @endif
                                @if ($user->user_country?->country)
                                    {{ $user->user_country?->country }}
                                @endif
                            </div>
                            <div style="font-size:12px;font-weight:600;margin-top:6px;color:var(--accent,#6366f1)">
                                {{ $complete_jobs_count->count() }} {{ __('Jobs Completed') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="display:flex;flex-direction:column;gap:24px">
                {{-- Action Box --}}
                <div class="card" style="padding:24px">
                    <div style="display:flex;gap:16px;align-items:center;justify-content:space-between">
                        <div>
                            <div style="font-weight:600;font-size:14px;color:var(--text)">{{ __('Job Status') }}</div>
                            <div style="font-size:12px;color:var(--text-2);margin-top:2px">
                                {{ __('Change visibility of this job post') }}</div>
                        </div>
                        <form id="statusForm" action="{{ route('admin.job.status.change', $job->id) }}" method="POST">
                            @csrf
                            <button type="button" class="btn primary"
                                onclick="confirmStatus('{{ $job->status === 0 ? __('Approve this job?') : __('Deactivate this job?') }}')">
                                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" style="margin-right:6px">
                                    @if ($job->status === 0)
                                        <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
                                        <polyline points="22 4 12 14.01 9 11.01" />
                                    @else
                                        <circle cx="12" cy="12" r="10" />
                                        <line x1="15" y1="9" x2="9" y2="15" />
                                        <line x1="9" y1="9" x2="15" y2="15" />
                                    @endif
                                </svg>
                                {{ $job->status === 0 ? __('Approve Job') : __('Inactive Job') }}
                            </button>
                        </form>
                    </div>

                    {{-- Notice Callouts --}}
                    <div style="display:flex;flex-direction:column;gap:8px;margin-top:16px">
                        <div
                            style="background:var(--warn-soft);color:#92400e;padding:12px;border-radius:8px;display:flex;gap:8px;align-items:start;font-size:12px;line-height:1.6">
                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                style="flex:none;margin-top:2px">
                                <path
                                    d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
                                <path d="M12 9v4" />
                                <path d="M12 17h.01" />
                            </svg>
                            <div>
                                <strong>{{ __('Notice:') }}</strong>
                                {{ __('Active means the job will show for the website users. Inactive means the job will not show.') }}
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Job Info Sidebar --}}
                <div class="card" style="padding:16px">
                    <div
                        style="display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:12px">
                        <span style="color:var(--text-2)"><svg class="icon" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" style="margin-right:4px;vertical-align:-3px">
                                <path
                                    d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />
                                <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
                                <line x1="12" y1="22.08" x2="12" y2="12" />
                            </svg> {{ __('Type:') }} <strong
                                style="color:var(--text)">{{ __(ucfirst($job->type)) }}</strong></span>
                        <span style="color:var(--text-2)"><svg class="icon" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" style="margin-right:4px;vertical-align:-3px">
                                <line x1="12" y1="1" x2="12" y2="23" />
                                <path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" />
                            </svg> {{ __('Budget:') }} <strong
                                style="color:var(--text)">{{ amount_with_currency_symbol($job->budget ?? '') }}</strong></span>
                    </div>

                    <div style="display:flex;flex-direction:column;gap:12px">
                        @if ($job->last_seen != null)
                            <div style="display:flex;justify-content:space-between;align-items:center">
                                <span style="color:var(--text-2)">{{ __('Last Seen') }}</span>
                                <span
                                    style="font-weight:600;color:var(--text)">{{ \Carbon\Carbon::parse($job->last_seen)?->diffForHumans() }}</span>
                            </div>
                        @endif
                        @if ($job->attachment)
                            <div style="display:flex;justify-content:space-between;align-items:center">
                                <span style="color:var(--text-2)">{{ __('Attachment') }}</span>
                                @php
                                    $attUrl =
                                        cloudStorageExist() &&
                                        in_array(Storage::getDefaultDriver(), ['s3', 'cloudFlareR2', 'wasabi'])
                                            ? render_frontend_cloud_image_if_module_exists(
                                                'jobs/' . $job->attachment,
                                                load_from: $job->load_from,
                                            )
                                            : asset('assets/uploads/jobs/' . $job->attachment);
                                @endphp
                                <a href="{{ $attUrl }}" download class="btn ghost sm"
                                    style="height:28px;padding:0 8px;font-size:11px">
                                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" style="margin-right:4px;width:12px;height:12px">
                                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
                                        <polyline points="7 10 12 15 17 10" />
                                        <line x1="12" y1="15" x2="12" y2="3" />
                                    </svg>
                                    {{ __('Download') }}
                                </a>
                            </div>
                        @endif
                        @if ($job->level)
                            <div style="display:flex;justify-content:space-between;align-items:center">
                                <span style="color:var(--text-2)">{{ __('Experience Level') }}</span>
                                <span style="font-weight:600;color:var(--text)">{{ ucfirst($job->level) }}</span>
                            </div>
                        @endif
                        <div style="display:flex;justify-content:space-between;align-items:center">
                            <span style="color:var(--text-2)">{{ __('Category') }}</span>
                            <span
                                style="font-weight:600;color:var(--text)">{{ $job->job_category?->category ?? '' }}</span>
                        </div>

                        @if ($job->country_restriction_type && $job->country_restriction_type != 'none')
                            <div
                                style="display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--border)">
                                <span style="color:var(--text-2)">{{ __('Restriction') }}</span>
                                @if ($job->country_restriction_type == 'include')
                                    <span class="tag success" style="padding:2px 6px;font-size:11px"><span
                                            class="dot"></span>{{ __('Only Allowed') }}</span>
                                @elseif($job->country_restriction_type == 'exclude')
                                    <span class="tag warn" style="padding:2px 6px;font-size:11px"><span
                                            class="dot"></span>{{ __('Excluded') }}</span>
                                @endif
                            </div>
                        @endif
                        @if (!empty($allowed_countries) && count($allowed_countries) > 0)
                            <div style="display:flex;flex-direction:column;gap:6px">
                                <span style="color:var(--text-2)">{{ __('Allowed Countries') }}</span>
                                <div style="display:flex;flex-wrap:wrap;gap:4px">
                                    @foreach ($allowed_countries as $country)
                                        <span
                                            style="background:var(--surface-2);color:var(--success,#22c55e);padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;border:1px solid color-mix(in oklch,var(--success,#22c55e) 20%,transparent)">{{ $country }}</span>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                        @if (!empty($excluded_countries) && count($excluded_countries) > 0)
                            <div style="display:flex;flex-direction:column;gap:6px">
                                <span style="color:var(--text-2)">{{ __('Excluded Countries') }}</span>
                                <div style="display:flex;flex-wrap:wrap;gap:4px">
                                    @foreach ($excluded_countries as $country)
                                        <span
                                            style="background:var(--surface-2);color:var(--danger,#ef4444);padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;border:1px solid color-mix(in oklch,var(--danger,#ef4444) 20%,transparent)">{{ $country }}</span>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        (function() {
            window.confirmStatus = function(msg) {
                if (confirm(msg)) {
                    document.getElementById('statusForm').submit();
                }
            };
        })();
    </script>
@endsection