{{-- resources/views/dashboard/job-descriptions/review.blade.php - Step 4: Review & Approval --}}
@extends('layouts.dashboard')

@section('content')
    <div class="w-full md:min-h-screen bg-gray-50 pt-[20px] pb-20">
        <div class="md:max-w-[80%] max-w-[90%] mx-auto px-6">

            {{-- Wizard Container --}}
            <div class="bg-white rounded-[20px] border border-gray-100 shadow-sm">

                {{-- Stepper --}}
                <x-job-descriptions.stepper :currentStep="4" />

                {{-- Content --}}
                <div class="px-6 md:px-10 pb-10"
                     x-data="{
                         approved: false,
                         approving: false,
                         async handleApprove() {
                             this.approving = true;
                             // Simulate approval - backend developer to replace
                             await new Promise(r => setTimeout(r, 800));
                             this.approving = false;
                             this.approved = true;
                         }
                     }">
                    {{-- Header --}}
                    <div class="flex items-start justify-between mb-8">
                        <div>
                            <h2 class="text-2xl font-bold text-gray-900 mb-2">Review & Submit for Approval</h2>
                            <p class="text-gray-500">Review the complete job description and approve or save as draft.</p>
                        </div>
                        <div class="flex items-center gap-3 shrink-0">
                            {{-- Before Approval --}}
                            <template x-if="!approved">
                                <div class="flex items-center gap-3">
                                    <form action="{{ route('dashboard.job-descriptions.save-draft', $jobDescription->id ?? 0) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="inline-flex items-center justify-center h-11 px-6 rounded-lg font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 transition-colors">
                                            Save as Draft
                                        </button>
                                    </form>
                                    <button @click="handleApprove()"
                                            :disabled="approving"
                                            class="inline-flex items-center justify-center gap-2 h-11 px-6 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors disabled:opacity-50">
                                        <template x-if="!approving">
                                            <svg class="w-4 h-4 transform rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                                            </svg>
                                        </template>
                                        <template x-if="approving">
                                            <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                        </template>
                                        <span x-text="approving ? 'Approving...' : 'Approve'"></span>
                                    </button>
                                </div>
                            </template>
                            {{-- After Approval --}}
                            <template x-if="approved">
                                <a href="{{ route('dashboard.job-descriptions.publish', $jobDescription->id ?? 0) }}"
                                   class="inline-flex items-center justify-center gap-2 h-11 px-6 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                    </svg>
                                    Publish
                                </a>
                            </template>
                        </div>
                    </div>

                    {{-- Success Message (shown after approve) --}}
                    <div x-show="approved" x-cloak
                         x-transition:enter="transition ease-out duration-300"
                         x-transition:enter-start="opacity-0 transform -translate-y-2"
                         x-transition:enter-end="opacity-100 transform translate-y-0"
                         class="bg-green-50 border border-green-100 rounded-2xl p-5 mb-8">
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center shrink-0">
                                <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div>
                                <h4 class="text-sm font-bold text-gray-900">Job Description Created Successfully!</h4>
                                <p class="text-xs text-gray-600 mt-1">Your job description has been approved. You can now publish or export it.</p>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        {{-- Left Column: JD Preview --}}
                        <div class="lg:col-span-2">
                            <div class="border border-gray-200 rounded-2xl overflow-hidden">
                                {{-- Preview Header --}}
                                <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 bg-gray-50">
                                    <h3 class="text-base font-semibold text-gray-900">Job Description Preview</h3>
                                </div>

                                {{-- Preview Content --}}
                                <div class="p-6 md:p-8">
                                    @php
                                        $jd = $jobDescription ?? (object)[
                                            'job_title' => 'Software Engineer',
                                            'department' => 'Design',
                                            'level' => 'L8 - Director',
                                            'location' => 'America USA',
                                            'employment_type' => 'Full-Time',
                                            'role_summary' => 'We are seeking a highly skilled professional to join our Design team. In this full-time role based in the specified location, you will play a crucial part in driving innovation and excellence. This position offers an exciting opportunity to work with cutting-edge technologies and collaborate with talented professionals.',
                                            'responsibilities' => ['Lead the design and development of scalable software solutions', 'Collaborate with cross-functional teams to define technical requirements', 'Mentor junior team members and provide technical guidance', 'Participate in code reviews and ensure best practices', 'Drive continuous improvement in development processes'],
                                            'required_skills' => ['5+ years of experience in software development', 'Proficiency in modern programming languages (Python, Java, or JavaScript)', 'Strong understanding of software architecture and design patterns', 'Experience with cloud platforms (AWS, Azure, or GCP)', 'Excellent problem-solving and analytical skills'],
                                            'qualifications' => ["Bachelor's degree in Computer Science or related field", "Master's degree preferred", 'Relevant industry certifications (AWS, Azure, etc.)', 'Proven track record of delivering complex projects'],
                                            'competencies' => ['Technical Leadership', 'Problem Solving', 'Communication', 'Team Collaboration', 'Innovation'],
                                        ];
                                    @endphp

                                    <h2 class="text-2xl font-bold text-gray-900 mb-4">{{ $jd->job_title }}</h2>

                                    <div class="grid grid-cols-2 gap-x-6 gap-y-2 mb-6 text-sm">
                                        <p><span class="font-semibold text-gray-900">Department: </span><span class="text-gray-600">{{ $jd->department }}</span></p>
                                        <p><span class="font-semibold text-gray-900">Level: </span><span class="text-gray-600">{{ $jd->level }}</span></p>
                                        <p><span class="font-semibold text-gray-900">Location: </span><span class="text-gray-600">{{ $jd->location }}</span></p>
                                        <p><span class="font-semibold text-gray-900">Employment Type: </span><span class="text-gray-600">{{ $jd->employment_type }}</span></p>
                                    </div>

                                    <hr class="my-6 border-gray-100">

                                    <h3 class="text-base font-bold text-gray-900 mb-3">Role Summary</h3>
                                    <p class="text-sm text-gray-600 leading-relaxed mb-6">{{ $jd->role_summary }}</p>

                                    <hr class="my-6 border-gray-100">

                                    <h3 class="text-base font-bold text-gray-900 mb-3">Key Responsibilities</h3>
                                    <ul class="space-y-2 mb-6">
                                        @foreach($jd->responsibilities as $item)
                                            <li class="flex items-start gap-2 text-sm text-gray-600">
                                                <span class="w-1.5 h-1.5 bg-gray-400 rounded-full mt-1.5 shrink-0"></span>
                                                {{ $item }}
                                            </li>
                                        @endforeach
                                    </ul>

                                    <hr class="my-6 border-gray-100">

                                    <h3 class="text-base font-bold text-gray-900 mb-3">Required Skills</h3>
                                    <ul class="space-y-2 mb-6">
                                        @foreach($jd->required_skills as $item)
                                            <li class="flex items-start gap-2 text-sm text-gray-600">
                                                <span class="w-1.5 h-1.5 bg-gray-400 rounded-full mt-1.5 shrink-0"></span>
                                                {{ $item }}
                                            </li>
                                        @endforeach
                                    </ul>

                                    <hr class="my-6 border-gray-100">

                                    <h3 class="text-base font-bold text-gray-900 mb-3">Qualifications</h3>
                                    <ul class="space-y-2 mb-6">
                                        @foreach($jd->qualifications as $item)
                                            <li class="flex items-start gap-2 text-sm text-gray-600">
                                                <span class="w-1.5 h-1.5 bg-gray-400 rounded-full mt-1.5 shrink-0"></span>
                                                {{ $item }}
                                            </li>
                                        @endforeach
                                    </ul>

                                    <hr class="my-6 border-gray-100">

                                    <h3 class="text-base font-bold text-gray-900 mb-3">Core Competencies</h3>
                                    <div class="flex flex-wrap gap-2">
                                        @foreach($jd->competencies as $comp)
                                            <span class="inline-flex items-center px-3 py-1.5 bg-gray-100 text-gray-700 rounded-full text-xs font-medium border border-gray-200">
                                                {{ $comp }}
                                            </span>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            {{-- Bottom Navigation --}}
                            <div class="flex items-center justify-end mt-6">
                                <a href="{{ route('dashboard.job-descriptions.validate', $jobDescription->id ?? 0) }}"
                                   class="inline-flex items-center justify-center h-11 px-6 rounded-lg font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 transition-colors">
                                    Back to Validation
                                </a>
                            </div>
                        </div>

                        {{-- Right Column: Activity Log --}}
                        <div class="space-y-6">
                            {{-- Activity Log --}}
                            <div class="border border-gray-200 rounded-2xl">
                                <div class="flex items-center gap-2 mb-4 p-6 border-b">
                                    <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    <h3 class="text-base font-bold text-gray-900">Activity Log</h3>
                                </div>

                                <div class="px-6 pb-6 space-y-4">
                                    <div class="flex items-start gap-3">
                                        <div class="w-8 h-8 bg-[#DBEAFE] rounded-full flex items-center justify-center shrink-0 mt-0.5">
                                            <svg class="w-4 h-4 text-[#2F3D7E]" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                            </svg>
                                        </div>
                                        <div>
                                            <p class="text-sm font-semibold text-gray-900">Draft Created</p>
                                            <p class="text-xs text-gray-500">{{ now()->format('M d, Y') }} at {{ now()->format('h:i A') }}</p>
                                            <p class="text-xs text-gray-400">{{ auth()->user()->name ?? 'Sarah Johnson' }}</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start gap-3">
                                        <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center shrink-0 mt-0.5">
                                            <svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                            </svg>
                                        </div>
                                        <div>
                                            <p class="text-sm font-semibold text-gray-900">Content Generated</p>
                                            <p class="text-xs text-gray-500">{{ now()->format('M d, Y') }} at {{ now()->addMinutes(2)->format('h:i A') }}</p>
                                            <p class="text-xs text-gray-400">System</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start gap-3">
                                        <div class="w-8 h-8 bg-[#EAD5BB] rounded-full flex items-center justify-center shrink-0 mt-0.5">
                                            <svg class="w-4 h-4 text-[#F76C5E]" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                            </svg>
                                        </div>
                                        <div>
                                            <p class="text-sm font-semibold text-gray-900">Validation Passed</p>
                                            <p class="text-xs text-gray-500">{{ now()->format('M d, Y') }} at {{ now()->addMinutes(5)->format('h:i A') }}</p>
                                            <p class="text-xs text-gray-400">System</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection