@extends('layouts.site')

@section('content')
<section class="wrapper bg-[#f0f7ff]">
  <div class="container pt-16 pb-8 text-center">
    <div class="max-w-4xl mx-auto">
      <h1 class="text-5xl font-bold mb-4 text-slate-900 tracking-tight">{{ __('career.job_application_title') }}</h1>
      <p class="text-lg text-slate-600 leading-relaxed">{{ __('career.job_application_description') }}</p>
    </div>
  </div>
</section>

<section class="wrapper bg-white py-12 lg:py-20">
  <div class="container px-4">
    <!-- Wizard Progress Tracker -->
    <div class="max-w-3xl mx-auto mb-16">
      <div class="relative flex items-center justify-between">
        <!-- Progress Line -->
        <div class="absolute left-0 top-1/2 -translate-y-1/2 w-full h-1 bg-slate-100 -z-10 rounded-full">
          <div id="wizard-progress-bar" class="h-full bg-[#e31e24] rounded-full transition-all duration-500 w-[0%]"></div>
        </div>
        
        <!-- Step 1 Dot -->
        <div class="flex flex-col items-center">
          <div id="step-dot-1" class="w-12 h-12 rounded-full bg-[#e31e24] text-white flex items-center justify-center font-extrabold shadow-lg shadow-red-500/20 transition-all duration-500 ring-4 ring-red-100">
            <i class="uil uil-info-circle text-xl"></i>
          </div>
          <span id="step-label-1" class="text-xs md:text-sm font-bold text-slate-800 mt-3 transition-all duration-300">{{ __('career.step_1_title') }}</span>
        </div>
        
        <!-- Step 2 Dot -->
        <div class="flex flex-col items-center">
          <div id="step-dot-2" class="w-12 h-12 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center font-extrabold transition-all duration-500 ring-4 ring-transparent">
            <i class="uil uil-file-download text-xl"></i>
          </div>
          <span id="step-label-2" class="text-xs md:text-sm font-medium text-slate-400 mt-3 transition-all duration-300">{{ __('career.step_2_title') }}</span>
        </div>
        
        <!-- Step 3 Dot -->
        <div class="flex flex-col items-center">
          <div id="step-dot-3" class="w-12 h-12 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center font-extrabold transition-all duration-500 ring-4 ring-transparent">
            <i class="uil uil-check-circle text-xl"></i>
          </div>
          <span id="step-label-3" class="text-xs md:text-sm font-medium text-slate-400 mt-3 transition-all duration-300">{{ __('career.step_3_title') }}</span>
        </div>
      </div>
    </div>

    <!-- Main Wizard Form Container -->
    <form action="{{ route('career.store') }}" method="POST" enctype="multipart/form-data" id="career-application-form">
      @csrf
      <input type="hidden" name="type" value="job">

      <!-- ================= STEP 1: TERMS & CONDITIONS ================= -->
      <div id="step-content-1" class="wizard-step transition-all duration-500 opacity-100 block">
        <div class="max-w-5xl mx-auto mb-12">
          <div class="bg-blue-50 border-l-4 border-blue-500 p-8 rounded-r-2xl shadow-sm mb-12">
            <h4 class="text-xl font-bold text-blue-900 mb-4">{{ __('career.dear_developer') }}</h4>
            <div class="text-blue-800 space-y-4 leading-relaxed">
              <p>{!! __('career.intro_text_1') !!}</p>
              <p>{!! __('career.intro_text_2') !!}</p>
              <div class="bg-white/80 p-6 rounded-2xl border border-blue-100 my-6 space-y-4 text-sm shadow-sm">
                <span class="font-extrabold text-blue-950 block text-base"><i class="uil uil-shield-check text-lg mr-1 text-[#e31e24]"></i> {{ __('career.kvkk_title') }}</span>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div class="p-4 bg-slate-50/50 rounded-xl border border-slate-100">
                    <span class="font-bold text-slate-800 block mb-2"><i class="uil uil-lock text-[#e31e24] mr-1"></i> {{ __('career.kvkk_nda_title') }}</span>
                    <p class="text-xs text-slate-600 leading-relaxed">{{ __('career.kvkk_nda_desc') }}</p>
                  </div>
                  <div class="p-4 bg-slate-50/50 rounded-xl border border-slate-100">
                    <span class="font-bold text-slate-800 block mb-2"><i class="uil uil-file-contract-sign text-blue-500 mr-1"></i> {{ __('career.kvkk_contract_title') }}</span>
                    <p class="text-xs text-slate-600 leading-relaxed">{{ __('career.kvkk_contract_desc') }}</p>
                  </div>
                  <div class="p-4 bg-slate-50/50 rounded-xl border border-slate-100">
                    <span class="font-bold text-slate-800 block mb-2"><i class="uil uil-card-atm text-emerald-500 mr-1"></i> {{ __('career.kvkk_id_title') }}</span>
                    <p class="text-xs text-slate-600 leading-relaxed">{{ __('career.kvkk_id_desc') }}</p>
                  </div>
                </div>
              </div>
              <p>{{ __('career.intro_text_3') }}</p>
              <p>{{ __('career.intro_text_4') }}</p>
              <p>{{ __('career.thanks') }}</p>
              <div class="pt-4 border-t border-blue-200 mt-4 text-sm font-medium">
                {!! __('career.company_details') !!}
              </div>
            </div>
          </div>

          <div class="text-center mb-12">
            <h2 class="text-xs uppercase font-bold tracking-widest text-[#e31e24] mb-2">{{ __('career.working_model_title') }}</h2>
            <h3 class="text-3xl md:text-4xl font-extrabold text-slate-900">{{ __('career.working_model_subtitle') }}</h3>
          </div>

          <div class="flex flex-col lg:flex-row gap-12 items-start mb-12">
            <!-- Mermaid Flowchart Canvas -->
            <div class="w-full lg:w-3/5">
              <div class="bg-white p-6 md:p-8 rounded-3xl shadow-xl border border-slate-100 overflow-x-auto flex flex-col items-center">
                <span class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"><i class="uil uil-presentation-play mr-1"></i> {{ __('career.hr_flow_diagram') }}</span>
                <div class="mermaid w-full flex justify-center" style="min-height: 500px;">
                  graph TD
                    %% Styles
                    classDef startNode fill:#3b82f6,stroke:#1d4ed8,stroke-width:2px,color:#fff,font-weight:bold,rx:10px,ry:10px;
                    classDef decisionNode fill:#eab308,stroke:#ca8a04,stroke-width:2px,color:#fff,font-weight:bold;
                    classDef processNode fill:#10b981,stroke:#047857,stroke-width:2px,color:#fff,font-weight:bold,rx:5px,ry:5px;
                    classDef rejectNode fill:#ef4444,stroke:#b91c1c,stroke-width:2px,color:#fff,font-weight:bold,rx:5px,ry:5px;
                    classDef actionNode fill:#8b5cf6,stroke:#6d28d9,stroke-width:2px,color:#fff,font-weight:bold,rx:5px,ry:5px;

                    Start["{{ __('career.mermaid_start') }}"]:::startNode
                    Dec1{"{{ __('career.mermaid_dec1') }}"}:::decisionNode
                    Red1["{{ __('career.mermaid_red1') }}"]:::rejectNode
                    GitAccess["{{ __('career.mermaid_git') }}"]:::processNode
                    SampleTask["{{ __('career.mermaid_sample') }}"]:::processNode
                    Dec2{"{{ __('career.mermaid_dec2') }}"}:::decisionNode
                    Red2["{{ __('career.mermaid_red2') }}"]:::rejectNode
                    Issues["{{ __('career.mermaid_issues') }}"]:::processNode
                    Dec3{"{{ __('career.mermaid_dec3') }}"}:::decisionNode
                    WaitTask["{{ __('career.mermaid_wait') }}"]:::actionNode
                    Assign["{{ __('career.mermaid_assign') }}"]:::processNode
                    WorkStart["{{ __('career.mermaid_work') }}"]:::processNode
                    Review["{{ __('career.mermaid_review') }}"]:::processNode
                    Dec4{"{{ __('career.mermaid_dec4') }}"}:::decisionNode
                    Feedback["{{ __('career.mermaid_feedback') }}"]:::actionNode
                    Payment["{{ __('career.mermaid_payment') }}"]:::processNode

                    Start --> Dec1
                    Dec1 -- "Hayır" --> Red1
                    Dec1 -- "Evet" --> GitAccess
                    GitAccess --> SampleTask
                    SampleTask --> Dec2
                    Dec2 -- "Hayır" --> Red2
                    Dec2 -- "Evet" --> Issues
                    Issues --> Dec3
                    Dec3 -- "Hayır" --> WaitTask
                    Dec3 -- "Evet" --> Assign
                    Assign --> WorkStart
                    WorkStart --> Review
                    Review --> Dec4
                    Dec4 -- "Hayır" --> Feedback
                    Feedback --> WorkStart
                    Dec4 -- "Evet" --> Payment
                    Payment --> Issues
                </div>
              </div>
            </div>

            <!-- Terms & Conditions Bullet Points -->
            <div class="w-full lg:w-2/5 space-y-8">
              <h4 class="text-2xl font-bold text-slate-900">{{ __('career.terms_title') }}</h4>
              <div class="space-y-6">
                <div class="flex items-start gap-4">
                  <div class="flex-shrink-0 w-8 h-8 rounded-full bg-red-50 flex items-center justify-center text-[#e31e24]">
                    <i class="uil uil-check-circle text-xl"></i>
                  </div>
                  <div>
                    <span class="font-bold text-slate-800 block text-sm">{{ __('career.fully_remote') }}</span>
                    <p class="text-sm text-slate-500">{{ __('career.fully_remote_desc') }}</p>
                  </div>
                </div>
                <div class="flex items-start gap-4">
                  <div class="flex-shrink-0 w-8 h-8 rounded-full bg-red-50 flex items-center justify-center text-[#e31e24]">
                    <i class="uil uil-check-circle text-xl"></i>
                  </div>
                  <div>
                    <span class="font-bold text-slate-800 block text-sm">{{ __('career.independent_contractor') }}</span>
                    <p class="text-sm text-slate-500">{{ __('career.independent_contractor_desc') }}</p>
                  </div>
                </div>
                <div class="flex items-start gap-4">
                  <div class="flex-shrink-0 w-8 h-8 rounded-full bg-red-50 flex items-center justify-center text-[#e31e24]">
                    <i class="uil uil-check-circle text-xl"></i>
                  </div>
                  <div>
                    <span class="font-bold text-slate-800 block text-sm">{{ __('career.mandatory_documents') }}</span>
                    <p class="text-sm text-slate-500">{{ __('career.mandatory_documents_desc') }}</p>
                  </div>
                </div>
              </div>

              <!-- Terms Acceptance Checkbox -->
              <div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 mt-8 space-y-4">
                <div class="flex items-start gap-3">
                  <input type="checkbox" id="terms-accept-checkbox" class="w-5 h-5 rounded border-slate-300 text-[#e31e24] focus:ring-[#e31e24] mt-1 cursor-pointer">
                  <label for="terms-accept-checkbox" class="text-sm text-slate-700 font-semibold cursor-pointer">
                    {{ __('career.terms_accept_label') }} <span class="text-[#e31e24]">*</span>
                  </label>
                </div>
                <button type="button" onclick="nextStep(2)" id="step-1-next-btn" class="w-full py-4 bg-slate-300 text-slate-500 font-bold rounded-xl transition-all flex items-center justify-center gap-2 cursor-not-allowed" disabled>
                  <span>{{ __('career.accept_terms_btn') }}</span>
                  <i class="uil uil-arrow-right text-lg"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- ================= STEP 2: DOWNLOAD FORMS ================= -->
      <div id="step-content-2" class="wizard-step transition-all duration-500 opacity-0 hidden">
        <div class="max-w-4xl mx-auto mb-12">
          <div class="text-center mb-10">
            <h2 class="text-3xl font-extrabold text-slate-900 mb-2">{{ __('career.download_required_documents') }}</h2>
            <p class="text-slate-500 max-w-xl mx-auto">{{ __('career.download_required_documents_desc') }}</p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            <!-- NDA Download Card -->
            <div class="bg-white p-8 rounded-3xl border border-slate-100 shadow-xl flex flex-col justify-between hover:shadow-2xl hover:border-red-500/20 transition-all duration-300">
              <div>
                <div class="w-14 h-14 rounded-2xl bg-red-50 flex items-center justify-center text-[#e31e24] mb-6">
                  <i class="uil uil-shield-check text-3xl"></i>
                </div>
                <h4 class="text-xl font-bold text-slate-900 mb-3">{{ __('career.nda_label') }}</h4>
                <p class="text-sm text-slate-500 leading-relaxed mb-6">{{ __('career.nda_card_desc') }}</p>
              </div>
              <a href="https://docs.google.com/document/d/1WwDo_zgx4KjdnX6ohJaCfPQSS0-eRN41OB1HYvAmDO4/edit?usp=sharing" target="_blank" class="w-full py-3.5 bg-slate-50 hover:bg-red-50 hover:text-[#e31e24] text-slate-700 font-bold rounded-xl transition-all border border-slate-100 hover:border-red-100 flex items-center justify-center gap-2">
                <i class="uil uil-file-download"></i> {{ __('career.review_download_document') }}
              </a>
            </div>

            <!-- Contractor Agreement Download Card -->
            <div class="bg-white p-8 rounded-3xl border border-slate-100 shadow-xl flex flex-col justify-between hover:shadow-2xl hover:border-red-500/20 transition-all duration-300">
              <div>
                <div class="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-500 mb-6">
                  <i class="uil uil-file-contract-sign text-3xl"></i>
                </div>
                <h4 class="text-xl font-bold text-slate-900 mb-3">{{ __('career.contract_label') }}</h4>
                <p class="text-sm text-slate-500 leading-relaxed mb-6">{{ __('career.contract_card_desc') }}</p>
              </div>
              <a href="https://docs.google.com/document/d/1VofpJIxmQmxSLk6OxsDjCtrMte0UkAFCSaQfZCS2DP8/edit?usp=sharing" target="_blank" class="w-full py-3.5 bg-slate-50 hover:bg-red-50 hover:text-[#e31e24] text-slate-700 font-bold rounded-xl transition-all border border-slate-100 hover:border-red-100 flex items-center justify-center gap-2">
                <i class="uil uil-file-download"></i> {{ __('career.review_download_document') }}
              </a>
            </div>
          </div>

          <!-- Step 2 Navigation -->
          <div class="flex items-center justify-between border-t border-slate-100 pt-8">
            <button type="button" onclick="prevStep(1)" class="px-6 py-3.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl transition-all flex items-center gap-2">
              <i class="uil uil-arrow-left text-lg"></i>
              <span>{{ __('career.go_back') }}</span>
            </button>
            <button type="button" onclick="nextStep(3)" class="px-8 py-3.5 bg-[#e31e24] hover:bg-[#c4191f] text-white font-bold rounded-xl transition-all shadow-lg shadow-red-500/20 flex items-center gap-2">
              <span>{{ __('career.downloaded_next_btn') }}</span>
              <i class="uil uil-arrow-right text-lg"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- ================= STEP 3: COMPLETE APPLICATION ================= -->
      <div id="step-content-3" class="wizard-step transition-all duration-500 opacity-0 hidden">
        <div class="max-w-4xl mx-auto">
          <div class="bg-white rounded-[2rem] shadow-2xl overflow-hidden border border-slate-100">
            <div class="p-8 md:p-12">
              <div class="mb-10 text-center">
                <h2 class="text-3xl font-bold text-slate-900 mb-2">{{ __('career.form_title') }}</h2>
                <p class="text-slate-500">{{ __('career.form_subtitle') }}</p>
                <div class="w-12 h-1 bg-[#e31e24] rounded-full mx-auto mt-4"></div>
              </div>

              <div class="space-y-6">
                <!-- Name -->
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
                  <label for="name" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.name') }} <span class="text-[#e31e24]">*</span></label>
                  <div class="md:col-span-9">
                    <input type="text" name="name" id="name" class="w-full px-5 py-3 rounded-xl border border-slate-200 focus:ring-4 focus:ring-red-500/10 focus:border-[#e31e24] outline-none transition-all placeholder-slate-300" placeholder="{{ __('career.name_placeholder') }}" value="{{ old('name') }}" required>
                  </div>
                </div>

                <!-- Email -->
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
                  <label for="email" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.email') }} <span class="text-[#e31e24]">*</span></label>
                  <div class="md:col-span-9">
                    <input type="email" name="email" id="email" class="w-full px-5 py-3 rounded-xl border border-slate-200 focus:ring-4 focus:ring-red-500/10 focus:border-[#e31e24] outline-none transition-all placeholder-slate-300" placeholder="{{ __('career.email_placeholder') }}" value="{{ old('email') }}" required>
                  </div>
                </div>

                <!-- Phone -->
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
                  <label for="phone" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.phone') }}</label>
                  <div class="md:col-span-9">
                    <input type="text" name="phone" id="phone" class="w-full px-5 py-3 rounded-xl border border-slate-200 focus:ring-4 focus:ring-red-500/10 focus:border-[#e31e24] outline-none transition-all placeholder-slate-300" placeholder="{{ __('career.phone_placeholder') }}" value="{{ old('phone') }}">
                  </div>
                </div>

                <!-- CV Upload -->
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
                  <label for="cv" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.cv') }} <span class="text-[#e31e24]">*</span></label>
                  <div class="md:col-span-9">
                    <input type="file" name="cv" id="cv" class="w-full px-5 py-2.5 rounded-xl border border-slate-200 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-red-50 file:text-[#e31e24] hover:file:bg-red-100 transition-all" required>
                    <p class="mt-2 text-xs text-slate-400">{{ __('career.cv_description') }}</p>
                  </div>
                </div>

                <!-- NDA Upload -->
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
                  <label for="nda" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.nda') }} <span class="text-[#e31e24]">*</span></label>
                  <div class="md:col-span-9">
                    <input type="file" name="nda" id="nda" class="w-full px-5 py-2.5 rounded-xl border border-slate-200 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-red-50 file:text-[#e31e24] hover:file:bg-red-100 transition-all" required>
                    <p class="mt-2 text-xs text-slate-400">{{ __('career.nda_description') }}</p>
                  </div>
                </div>

                <!-- Contract Upload -->
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
                  <label for="contract" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.contract') }} <span class="text-[#e31e24]">*</span></label>
                  <div class="md:col-span-9">
                    <input type="file" name="contract" id="contract" class="w-full px-5 py-2.5 rounded-xl border border-slate-200 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-red-50 file:text-[#e31e24] hover:file:bg-red-100 transition-all" required>
                    <p class="mt-2 text-xs text-slate-400">{{ __('career.contract_description') }}</p>
                  </div>
                </div>

                <!-- ID Photocopy Upload -->
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
                  <label for="id_photocopy" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.id_photocopy') }} <span class="text-[#e31e24]">*</span></label>
                  <div class="md:col-span-9">
                    <input type="file" name="id_photocopy" id="id_photocopy" class="w-full px-5 py-2.5 rounded-xl border border-slate-200 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-red-50 file:text-[#e31e24] hover:file:bg-red-100 transition-all" required>
                    <p class="mt-2 text-xs text-slate-400">{{ __('career.id_photocopy_description') }}</p>
                  </div>
                </div>

                <!-- Checkboxes -->
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
                  <div class="md:col-start-4 md:col-span-9 space-y-4">
                    <div class="flex items-center gap-3">
                      <input type="checkbox" name="git_knowledge" id="git_knowledge" class="w-5 h-5 rounded border-slate-300 text-[#e31e24] focus:ring-[#e31e24]" required>
                      <label for="git_knowledge" class="text-sm text-slate-700 font-medium">{{ __('career.git_confirmation') }} <span class="text-[#e31e24]">*</span></label>
                    </div>
                    <div class="flex items-center gap-3">
                      <input type="checkbox" name="ai_usage" id="ai_usage" class="w-5 h-5 rounded border-slate-300 text-[#e31e24] focus:ring-[#e31e24]" required>
                      <label for="ai_usage" class="text-sm text-slate-700 font-medium">{{ __('career.ai_confirmation') }} <span class="text-[#e31e24]">*</span></label>
                    </div>
                  </div>
                </div>

                <!-- Message -->
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
                  <label for="message" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right pt-3">{{ __('career.message') }}</label>
                  <div class="md:col-span-9">
                    <textarea name="message" id="message" class="w-full px-5 py-4 rounded-xl border border-slate-200 focus:ring-4 focus:ring-red-500/10 focus:border-[#e31e24] outline-none transition-all placeholder-slate-300 min-h-[150px]" placeholder="{{ __('career.message_placeholder') }}">{{ old('message') }}</textarea>
                  </div>
                </div>

                <!-- Step 3 Navigation -->
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6 pt-6 border-t border-slate-100">
                  <div class="md:col-start-4 md:col-span-9 flex items-center justify-between gap-4">
                    <button type="button" onclick="prevStep(2)" class="px-6 py-4 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl transition-all flex items-center gap-2">
                      <i class="uil uil-arrow-left text-lg"></i>
                      <span>{{ __('career.go_back') }}</span>
                    </button>
                    
                    <button type="submit" id="submit-btn" class="flex-1 md:flex-none px-10 py-4 bg-[#e31e24] hover:bg-[#c4191f] text-white font-bold rounded-full transition-all shadow-lg shadow-red-500/30 flex items-center justify-center gap-3">
                      <span class="btn-text">{{ __('career.submit') }}</span>
                      <span class="spinner-border spinner-border-sm hidden animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" role="status"></span>
                      <i class="uil uil-arrow-right text-xl btn-icon"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</section>

@push('styles')
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
  :root {
    --citrus-red: #e31e24;
    --citrus-red-soft: rgba(227, 30, 36, 0.05);
    --citrus-red-hover: #c4191f;
  }

  .text-citrus { color: var(--citrus-red) !important; }
  .bg-citrus { background-color: var(--citrus-red) !important; }
  
  .btn-citrus {
    color: #fff !important;
    background-color: var(--citrus-red) !important;
    border-color: var(--citrus-red) !important;
  }
  .btn-citrus:hover {
    background-color: var(--citrus-red-hover) !important;
    border-color: var(--citrus-red-hover) !important;
    transform: translateY(-2px);
  }

  .shadow-citrus {
    box-shadow: 0 0.5rem 1.5rem rgba(227, 30, 36, 0.25) !important;
  }

  .divider-citrus {
    width: 60px;
    height: 4px;
    background-color: var(--citrus-red);
    border-radius: 2px;
    margin: 1.5rem 0;
  }
  
  @media (max-width: 767.98px) {
    .divider-citrus { margin: 1.5rem auto; }
  }

  .career-form .custom-input {
    border: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    transition: all 0.25s ease-in-out;
    font-size: 1.05rem;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .career-form .custom-input:focus {
    border-color: var(--citrus-red);
    box-shadow: 0 0 0 0.2rem rgba(227, 30, 36, 0.1);
    background-color: #fff;
    outline: none;
  }

  input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    accent-color: var(--citrus-red);
    cursor: pointer;
    margin-top: 0;
  }

  .bg-soft-primary {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f1ff 100%) !important;
  }
  
  .shadow-xl {
    box-shadow: 0 1.5rem 4rem rgba(30, 41, 59, 0.1) !important;
  }

  .mermaid-container {
      min-width: 300px;
  }

  .btn-soft-citrus {
    background-color: var(--citrus-red-soft);
    color: var(--citrus-red);
    border: none;
  }

  .text-mutedSmall {
    font-size: 0.9rem;
    color: #6c757d;
  }

  .icon-list.bullet-citrus li::before {
    color: var(--citrus-red);
    content: "\e9dd"; /* UIL Check Circle icon */
    font-family: 'unicons';
    font-size: 1.2rem;
    left: 0;
    position: absolute;
    top: 0.1rem;
  }

  .icon-list li {
    list-style: none;
    padding-left: 2rem;
    position: relative;
  }

  /* Mermaid diagram readability and aesthetics */
  .mermaid .nodeLabel, 
  .mermaid .node text,
  .mermaid text,
  .mermaid .node .label {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.2) !important;
  }

  .mermaid .node.decisionNode .nodeLabel,
  .mermaid .node.decisionNode text,
  .mermaid .node.decisionNode .label {
    text-shadow: none !important;
    color: #1e293b !important;
  }

  .mermaid svg {
    filter: drop-shadow(0px 10px 20px rgba(15, 23, 42, 0.05));
  }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.2.4/dist/mermaid.min.js"></script>
<script>
  // Initialize Mermaid
  mermaid.initialize({
    startOnLoad: true,
    theme: 'neutral',
    securityLevel: 'loose',
    flowchart: {
      useMaxWidth: true,
      htmlLabels: true
    }
  });

  // Step variables
  let currentStep = 1;

  // Track Terms checkbox to enable Step 1 Next button
  document.getElementById('terms-accept-checkbox').addEventListener('change', function(e) {
    const nextBtn = document.getElementById('step-1-next-btn');
    if (e.target.checked) {
      nextBtn.disabled = false;
      nextBtn.classList.remove('bg-slate-300', 'text-slate-500', 'cursor-not-allowed');
      nextBtn.classList.add('bg-[#e31e24]', 'text-white', 'hover:bg-[#c4191f]', 'shadow-lg', 'shadow-red-500/20');
    } else {
      nextBtn.disabled = true;
      nextBtn.classList.add('bg-slate-300', 'text-slate-500', 'cursor-not-allowed');
      nextBtn.classList.remove('bg-[#e31e24]', 'text-white', 'hover:bg-[#c4191f]', 'shadow-lg', 'shadow-red-500/20');
    }
  });

  function updateProgressBar() {
    const progressPercent = ((currentStep - 1) / 2) * 100;
    document.getElementById('wizard-progress-bar').style.width = `${progressPercent}%`;

    // Reset indicator classes
    for (let i = 1; i <= 3; i++) {
      const dot = document.getElementById(`step-dot-${i}`);
      const label = document.getElementById(`step-label-${i}`);
      
      if (i < currentStep) {
        // Completed Step
        dot.className = "w-12 h-12 rounded-full bg-emerald-500 text-white flex items-center justify-center font-extrabold shadow-lg shadow-emerald-500/20 ring-4 ring-emerald-100 transition-all duration-500";
        dot.innerHTML = `<i class="uil uil-check text-xl"></i>`;
        label.className = "text-xs md:text-sm font-bold text-slate-800 mt-3";
      } else if (i === currentStep) {
        // Active Step
        dot.className = "w-12 h-12 rounded-full bg-[#e31e24] text-white flex items-center justify-center font-extrabold shadow-lg shadow-red-500/20 ring-4 ring-red-100 transition-all duration-500";
        if (i === 1) dot.innerHTML = `<i class="uil uil-info-circle text-xl"></i>`;
        if (i === 2) dot.innerHTML = `<i class="uil uil-file-download text-xl"></i>`;
        if (i === 3) dot.innerHTML = `<i class="uil uil-check-circle text-xl"></i>`;
        label.className = "text-xs md:text-sm font-bold text-slate-800 mt-3";
      } else {
        // Pending Step
        dot.className = "w-12 h-12 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center font-extrabold ring-4 ring-transparent transition-all duration-500";
        if (i === 2) dot.innerHTML = `<i class="uil uil-file-download text-xl"></i>`;
        if (i === 3) dot.innerHTML = `<i class="uil uil-check-circle text-xl"></i>`;
        label.className = "text-xs md:text-sm font-medium text-slate-400 mt-3";
      }
    }
  }

  function nextStep(step) {
    if (step === 2 && !document.getElementById('terms-accept-checkbox').checked) {
      return;
    }

    // Hide current step content with nice fade animation
    const currentStepEl = document.getElementById(`step-content-${currentStep}`);
    currentStepEl.classList.remove('opacity-100');
    currentStepEl.classList.add('opacity-0');
    
    setTimeout(() => {
      currentStepEl.classList.add('hidden');
      
      // Show next step content
      const nextStepEl = document.getElementById(`step-content-${step}`);
      nextStepEl.classList.remove('hidden');
      
      // Force repaint to trigger animation
      nextStepEl.offsetHeight;
      
      nextStepEl.classList.remove('opacity-0');
      nextStepEl.classList.add('opacity-100');
      
      currentStep = step;
      updateProgressBar();
      window.scrollTo({ top: document.querySelector('.wrapper').offsetTop - 50, behavior: 'smooth' });
    }, 200);
  }

  function prevStep(step) {
    const currentStepEl = document.getElementById(`step-content-${currentStep}`);
    currentStepEl.classList.remove('opacity-100');
    currentStepEl.classList.add('opacity-0');
    
    setTimeout(() => {
      currentStepEl.classList.add('hidden');
      
      const prevStepEl = document.getElementById(`step-content-${step}`);
      prevStepEl.classList.remove('hidden');
      
      prevStepEl.offsetHeight;
      
      prevStepEl.classList.remove('opacity-0');
      prevStepEl.classList.add('opacity-100');
      
      currentStep = step;
      updateProgressBar();
      window.scrollTo({ top: document.querySelector('.wrapper').offsetTop - 50, behavior: 'smooth' });
    }, 200);
  }
</script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('career-application-form');
    const submitBtn = document.getElementById('submit-btn');
    const btnText = submitBtn.querySelector('.btn-text');
    const btnIcon = submitBtn.querySelector('.btn-icon');
    const spinner = submitBtn.querySelector('.spinner-border');

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        submitBtn.disabled = true;
        spinner.classList.remove('hidden');
        btnIcon.classList.add('hidden');
        
        document.querySelectorAll('.invalid-feedback').forEach(el => el.remove());
        document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));

        const formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(async response => {
            const isJson = response.headers.get('content-type')?.includes('application/json');
            const data = isJson ? await response.json() : null;

            if (!response.ok) {
                if (response.status === 422 && data) {
                    return { type: 'validation', errors: data.errors };
                }
                throw new Error(data?.message || 'Bir hata oluştu.');
            }
            return { type: 'success', data: data };
        })
        .then(result => {
            if (result.type === 'success') {
                Swal.fire({
                    icon: 'success',
                    title: '{{ __("career.success") ?? "Başarılı!" }}',
                    text: result.data.message,
                    confirmButtonColor: '#e31e24',
                    confirmButtonText: '{{ __("career.ok") ?? "Tamam" }}'
                }).then(() => {
                    form.reset();
                    // Go back to step 1
                    document.getElementById('terms-accept-checkbox').checked = false;
                    document.getElementById('terms-accept-checkbox').dispatchEvent(new Event('change'));
                    prevStep(1);
                });
            } else if (result.type === 'validation') {
                Object.keys(result.errors).forEach(key => {
                    const input = document.getElementById(key) || document.getElementsByName(key)[0];
                    if (input) {
                        input.classList.add('is-invalid');
                        const errorDiv = document.createElement('div');
                        errorDiv.className = 'invalid-feedback text-start text-xs text-red-500 mt-1 block';
                        errorDiv.textContent = result.errors[key][0];
                        
                        // Handle different input structures
                        if (input.type === 'checkbox') {
                          input.closest('.flex').parentNode.appendChild(errorDiv);
                        } else {
                          input.parentNode.appendChild(errorDiv);
                        }
                    }
                });
                
                Swal.fire({
                    icon: 'error',
                    title: '{{ __("career.error") ?? "Hata!" }}',
                    text: '{{ __("career.validation_error") ?? "Lütfen formdaki hataları kontrol ediniz." }}',
                    confirmButtonColor: '#e31e24',
                });
            }

            submitBtn.disabled = false;
            spinner.classList.add('hidden');
            btnIcon.classList.remove('hidden');
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                icon: 'error',
                title: '{{ __("career.error") ?? "Hata!" }}',
                text: error.message || '{{ __("career.error_message") ?? "Başvuru gönderilirken bir hata oluştu. Lütfen tekrar deneyiniz." }}',
                confirmButtonColor: '#e31e24',
            });
            submitBtn.disabled = false;
            spinner.classList.add('hidden');
            btnIcon.classList.remove('hidden');
        });
    });
});
</script>
@endpush
@endsection