{{-- resources/views/dashboard/job-descriptions/create.blade.php - Step 1: Role Basics --}}
@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-[90%] 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="1" />

                {{-- Step Content --}}
                <div class="px-6 md:px-10 pb-10">
                    <h2 class="text-2xl font-bold text-gray-900 mb-2">Let's start with the basics</h2>
                    <p class="text-gray-500 mb-8">Provide the essential information about the role. We'll use this to generate a comprehensive job description.</p>

                    <form action="{{ route('dashboard.job-descriptions.store') }}" method="POST"
                          x-data="{
                              jobTitle: '{{ old('job_title') }}',
                              department: '{{ old('department') }}',
                              level: '{{ old('level') }}',
                              location: '{{ old('location') }}',
                              employmentType: '{{ old('employment_type') }}',
                              errors: {},
                              validate() {
                                  this.errors = {};
                                  if (!this.jobTitle.trim()) this.errors.jobTitle = 'Job title is required';
                                  if (!this.department) this.errors.department = 'Department is required';
                                  if (!this.level) this.errors.level = 'Level is required';
                                  if (!this.location.trim()) this.errors.location = 'Location is required';
                                  if (!this.employmentType) this.errors.employmentType = 'Employment type is required';
                                  return Object.keys(this.errors).length === 0;
                              },
                              submitForm(e) {
                                  if (!this.validate()) {
                                      e.preventDefault();
                                  }
                              }
                          }">
                        @csrf

                        {{-- Role Information Card --}}
                        <div class="border border-gray-200 rounded-2xl p-6 md:p-8">
                            <h3 class="text-xl font-bold text-gray-900 mb-1">Role Information</h3>
                            <p class="text-sm text-gray-500 mb-6 pb-6 border-b border-gray-100">Fill in the core details about this position</p>

                            {{-- Job Title --}}
                            <div class="mb-6">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Job Title <span class="text-red-500">*</span>
                                </label>
                                <input type="text" name="job_title" x-model="jobTitle"
                                       placeholder="e.g., Senior Software Engineer"
                                       :class="errors.jobTitle ? 'border-red-300 ring-2 ring-red-100' : 'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'"
                                       class="w-full px-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 transition-colors">
                                <p x-show="errors.jobTitle" x-text="errors.jobTitle" class="text-red-500 text-xs mt-1.5 font-medium"></p>
                                @error('job_title')
                                    <p class="text-red-500 text-xs mt-1.5 font-medium">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Department --}}
                            <div class="mb-6">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Department <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
                                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                        </svg>
                                    </div>
                                    <input type="text" name="department" list="departments" x-model="department"
                                           placeholder="Search or enter department"
                                           :class="errors.department ? 'border-red-300 ring-2 ring-red-100' : 'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'"
                                           class="w-full pl-10 pr-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 transition-colors bg-white">
                                </div>
                                <datalist id="departments">
                                    <option value="Engineering">
                                    <option value="Product">
                                    <option value="Design">
                                    <option value="Marketing">
                                    <option value="Sales">
                                    <option value="Operations">
                                    <option value="Finance">
                                    <option value="Human Resources">
                                    <option value="Customer Success">
                                    <option value="Analytics">
                                    <option value="Legal">
                                    <option value="Compliance">
                                    <option value="Research & Development">
                                    <option value="Quality Assurance">
                                    <option value="Infrastructure">
                                    <option value="Security">
                                </datalist>
                                <p x-show="errors.department" x-text="errors.department" class="text-red-500 text-xs mt-1.5 font-medium"></p>
                            </div>

                            {{-- Level / Grade --}}
                            <div class="mb-6">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Level / Grade <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <select name="level" x-model="level"
                                            :class="errors.level ? 'border-red-300 ring-2 ring-red-100' : 'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'"
                                            class="w-full px-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 bg-white appearance-none transition-colors">
                                        <option value="">Select level</option>
                                        <option value="L1 - Entry Level">L1 - Entry Level</option>
                                        <option value="L2 - Associate">L2 - Associate</option>
                                        <option value="L3 - Junior">L3 - Junior</option>
                                        <option value="L4 - Mid-Level">L4 - Mid-Level</option>
                                        <option value="L5 - Senior">L5 - Senior</option>
                                        <option value="L5 - Lead">L5 - Lead</option>
                                        <option value="L6 - Principal">L6 - Principal</option>
                                        <option value="L7 - Director">L7 - Director</option>
                                        <option value="L8 - VP">L8 - VP</option>
                                        <option value="L9 - Executive">L9 - Executive</option>
                                    </select>
                                    <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                    </svg>
                                </div>
                                <p x-show="errors.level" x-text="errors.level" class="text-red-500 text-xs mt-1.5 font-medium"></p>
                            </div>

                            {{-- Location & Employment Type Row --}}
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                {{-- Location --}}
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                                        Location <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <div class="absolute left-3 top-1/2 -translate-y-1/2">
                                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                            </svg>
                                        </div>
                                        <input type="text" name="location" x-model="location"
                                               placeholder="e.g., New York, NY"
                                               :class="errors.location ? 'border-red-300 ring-2 ring-red-100' : 'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'"
                                               class="w-full pl-10 pr-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 transition-colors">
                                    </div>
                                    <p x-show="errors.location" x-text="errors.location" class="text-red-500 text-xs mt-1.5 font-medium"></p>
                                </div>

                                {{-- Employment Type --}}
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                                        Employment Type <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <div class="absolute left-3 top-1/2 -translate-y-1/2">
                                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                            </svg>
                                        </div>
                                        <select name="employment_type" x-model="employmentType"
                                                :class="errors.employmentType ? 'border-red-300 ring-2 ring-red-100' : 'border-gray-200 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]'"
                                                class="w-full pl-10 pr-4 py-3 border rounded-lg text-sm focus:outline-none focus:ring-2 bg-white appearance-none transition-colors">
                                            <option value="">Select type</option>
                                            <option value="Full-Time">Full-Time</option>
                                            <option value="Part-Time">Part-Time</option>
                                            <option value="Contract">Contract</option>
                                            <option value="Temporary">Temporary</option>
                                            <option value="Internship">Internship</option>
                                        </select>
                                        <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </div>
                                    <p x-show="errors.employmentType" x-text="errors.employmentType" class="text-red-500 text-xs mt-1.5 font-medium"></p>
                                </div>
                            </div>
                        </div>

                        {{-- Info Banner --}}
                        <div class="mt-8 bg-blue-50 border border-blue-100 rounded-2xl p-5 flex items-start gap-4">
                            <div class="w-10 h-10 bg-[#2F3D7E] rounded-xl flex items-center justify-center shrink-0">
                                <svg class="w-5 h-5 text-white" 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>
                            <div>
                                <h4 class="text-sm font-bold text-[#2F3D7E] mb-1">Professional Job Description Generation</h4>
                                <p class="text-sm text-gray-600">Based on your inputs, we'll create a complete, structured job description including role summary, responsibilities, required skills, qualifications, and competencies aligned with your job architecture.</p>
                            </div>
                        </div>

                        {{-- Action Buttons --}}
                        <div class="flex items-center justify-end gap-4 mt-10">
                            <a href="{{ route('dashboard.job-descriptions.index') }}"
                               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">
                                Cancel
                            </a>
                            <button type="submit" @click="submitForm($event)"
                                    class="inline-flex items-center justify-center h-12 px-8 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors gap-2">
                                <svg class="w-5 h-5" 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>
                                Generate Job Description
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
