{{-- resources/views/dashboard/job-descriptions/validate.blade.php - Step 3: Validation & Alignment --}}
@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="3" />

                {{-- Content --}}
                <div class="px-6 md:px-10 pb-10">

                    <h2 class="text-2xl font-bold text-gray-900 mb-2">Validation & Alignment</h2>
                    <p class="text-gray-500 mb-8">Review the validation results to ensure alignment with your job architecture and compliance standards.</p>

                    {{-- Validation Stats --}}
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
                        @php
                            $validationStats = $validationStats ?? ['total' => 14, 'aligned' => 11, 'needs_review' => 3];
                        @endphp
                        <div class="bg-[#e7ecf3] border border-[#E2E8F0] rounded-2xl p-5">
                            <div class="w-10 h-10 bg-[#dbe9fe] rounded-xl flex items-center justify-center mb-3 shadow-sm">
                                <svg class="w-5 h-5 text-[#2F3D7E]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                </svg>
                            </div>
                            <p class="text-sm font-medium text-gray-700">Total Checks</p>
                            <p class="text-2xl font-semibold text-gray-900">{{ $validationStats['total'] }}</p>
                        </div>
                        <div class="bg-[#F0FDF4] border border-[#B9F8CF] rounded-2xl p-5">
                            <div class="w-10 h-10 bg-[#c3f0d5] rounded-xl flex items-center justify-center mb-3 shadow-sm">
                                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <p class="text-sm font-medium text-green-700">Aligned</p>
                            <p class="text-2xl font-semibold text-gray-900">{{ $validationStats['aligned'] }}</p>
                        </div>
                        <div class="bg-[#FFFBEB] border border-[#FEE685] rounded-2xl p-5">
                            <div class="w-10 h-10 bg-[#ffe2d1] rounded-xl flex items-center justify-center mb-3 shadow-sm">
                                <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                </svg>
                            </div>
                            <p class="text-sm font-medium text-yellow-600">Needs Review</p>
                            <p class="text-2xl font-semibold text-gray-900">{{ $validationStats['needs_review'] }}</p>
                        </div>
                    </div>

                    {{-- Job Architecture Alignment --}}
                    <div class="border border-gray-200 rounded-2xl p-6 mb-6">
                        <h3 class="text-lg font-bold text-gray-900 mb-5 pb-4 border-b border-gray-100">Job Architecture Alignment</h3>
                        <div class="space-y-4">
                            {{-- Aligned Item --}}
                            <div class="flex items-start justify-between">
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-green-500 mt-0.5 shrink-0" 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 class="flex items-center gap-2">
                                            <p class="text-sm font-semibold text-gray-900">Role level matches salary band</p>
                                            <span class="text-xs font-medium bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Aligned</span>
                                        </div>
                                        <p class="text-xs text-green-600 mt-0.5">L5 Senior aligns with Band 5 ($120k - $160k)</p>
                                    </div>
                                </div>
                            </div>
                            {{-- Aligned Item --}}
                            <div class="flex items-start justify-between">
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-green-500 mt-0.5 shrink-0" 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 class="flex items-center gap-2">
                                            <p class="text-sm font-semibold text-gray-900">Department classification</p>
                                            <span class="text-xs font-medium bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Aligned</span>
                                        </div>
                                        <p class="text-xs text-green-600 mt-0.5">Engineering department correctly mapped</p>
                                    </div>
                                </div>
                            </div>
                            {{-- Needs Review Item --}}
                            <div class="flex items-start justify-between">
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-yellow-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    <div>
                                        <div class="flex items-center gap-2">
                                            <p class="text-sm font-semibold text-gray-900">Competencies framework</p>
                                            <span class="text-xs font-medium bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full">Needs Review</span>
                                        </div>
                                        <p class="text-xs text-yellow-600 mt-0.5">2 suggested competencies to review</p>
                                    </div>
                                </div>
                                <a href="{{ route('dashboard.job-descriptions.show', $jobDescription->id ?? 0) }}"
                                   class="text-sm font-medium text-gray-700 border border-gray-200 px-4 py-1.5 rounded-lg hover:bg-gray-50 transition-colors shrink-0">
                                    Review
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- Required Fields --}}
                    <div class="border border-gray-200 rounded-2xl p-6 mb-6">
                        <h3 class="text-lg font-bold text-gray-900 mb-5 pb-4 border-b border-gray-100">Required Fields</h3>
                        <div class="space-y-4">
                            @php
                                $requiredFields = [
                                    ['name' => 'Role summary', 'status' => 'aligned', 'detail' => 'Complete'],
                                    ['name' => 'Key responsibilities', 'status' => 'aligned', 'detail' => '5 responsibilities defined'],
                                    ['name' => 'Required skills', 'status' => 'aligned', 'detail' => '5 skills specified'],
                                    ['name' => 'Qualifications', 'status' => 'aligned', 'detail' => '4 qualifications listed'],
                                    ['name' => 'Location information', 'status' => 'aligned', 'detail' => 'Complete'],
                                ];
                            @endphp
                            @foreach($requiredFields as $field)
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-green-500 mt-0.5 shrink-0" 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 class="flex items-center gap-2">
                                            <p class="text-sm font-semibold text-gray-900">{{ $field['name'] }}</p>
                                            <span class="text-xs font-medium bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Aligned</span>
                                        </div>
                                        <p class="text-xs text-green-600 mt-0.5">{{ $field['detail'] }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Compliance & Standards --}}
                    <div class="border border-gray-200 rounded-2xl p-6 mb-6">
                        <h3 class="text-lg font-bold text-gray-900 mb-5 pb-4 border-b border-gray-100">Compliance & Standards</h3>
                        <div class="space-y-4">
                            <div class="flex items-start gap-3">
                                <svg class="w-5 h-5 text-green-500 mt-0.5 shrink-0" 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 class="flex items-center gap-2">
                                        <p class="text-sm font-semibold text-gray-900">Equal opportunity language</p>
                                        <span class="text-xs font-medium bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Aligned</span>
                                    </div>
                                    <p class="text-xs text-green-600 mt-0.5">Standard EEO statement recommended</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3">
                                <svg class="w-5 h-5 text-green-500 mt-0.5 shrink-0" 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 class="flex items-center gap-2">
                                        <p class="text-sm font-semibold text-gray-900">Inclusive language check</p>
                                        <span class="text-xs font-medium bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Aligned</span>
                                    </div>
                                    <p class="text-xs text-green-600 mt-0.5">No bias detected</p>
                                </div>
                            </div>
                            <div class="flex items-start justify-between">
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-yellow-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    <div>
                                        <div class="flex items-center gap-2">
                                            <p class="text-sm font-semibold text-gray-900">Legal compliance</p>
                                            <span class="text-xs font-medium bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full">Needs Review</span>
                                        </div>
                                        <p class="text-xs text-yellow-600 mt-0.5">Review ADA requirements</p>
                                    </div>
                                </div>
                                <a href="{{ route('dashboard.job-descriptions.show', $jobDescription->id ?? 0) }}"
                                   class="text-sm font-medium text-gray-700 border border-gray-200 px-4 py-1.5 rounded-lg hover:bg-gray-50 transition-colors shrink-0">
                                    Review
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- Content Quality --}}
                    <div class="border border-gray-200 rounded-2xl p-6 mb-6">
                        <h3 class="text-lg font-bold text-gray-900 mb-5 pb-4 border-b border-gray-100">Content Quality</h3>
                        <div class="space-y-4">
                            <div class="flex items-start gap-3">
                                <svg class="w-5 h-5 text-green-500 mt-0.5 shrink-0" 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 class="flex items-center gap-2">
                                        <p class="text-sm font-semibold text-gray-900">Role summary length</p>
                                        <span class="text-xs font-medium bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Aligned</span>
                                    </div>
                                    <p class="text-xs text-green-600 mt-0.5">Optimal length (120 words)</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3">
                                <svg class="w-5 h-5 text-green-500 mt-0.5 shrink-0" 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 class="flex items-center gap-2">
                                        <p class="text-sm font-semibold text-gray-900">Responsibilities clarity</p>
                                        <span class="text-xs font-medium bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Aligned</span>
                                    </div>
                                    <p class="text-xs text-green-600 mt-0.5">Clear and actionable</p>
                                </div>
                            </div>
                            <div class="flex items-start justify-between">
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-yellow-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    <div>
                                        <div class="flex items-center gap-2">
                                            <p class="text-sm font-semibold text-gray-900">Skills specificity</p>
                                            <span class="text-xs font-medium bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full">Needs Review</span>
                                        </div>
                                        <p class="text-xs text-yellow-600 mt-0.5">Consider adding proficiency levels</p>
                                    </div>
                                </div>
                                <a href="{{ route('dashboard.job-descriptions.show', $jobDescription->id ?? 0) }}"
                                   class="text-sm font-medium text-gray-700 border border-gray-200 px-4 py-1.5 rounded-lg hover:bg-gray-50 transition-colors shrink-0">
                                    Review
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- Action Buttons --}}
                    <div class="flex items-center justify-end gap-4">
                        <a href="{{ route('dashboard.job-descriptions.show', $jobDescription->id ?? 0) }}"
                           class="inline-flex items-center justify-center h-12 px-8 rounded-lg font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 transition-colors">
                            Back
                        </a>
                        <a href="{{ route('dashboard.job-descriptions.review', $jobDescription->id ?? 0) }}"
                           class="inline-flex items-center justify-center h-12 px-8 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors">
                            Continue to Review
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection