Ümit Tunç
770 lines
38 KiB
PHP
770 lines
38 KiB
PHP
@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 id="mermaid-card" class="relative bg-white p-6 md:p-8 rounded-3xl shadow-xl border border-slate-100 overflow-x-auto flex flex-col items-center">
|
||
<!-- Fullscreen Toggle Button -->
|
||
<button type="button" onclick="toggleFullscreen()" class="absolute top-4 right-4 p-2.5 rounded-xl bg-slate-50 hover:bg-slate-100 border border-slate-100 hover:border-slate-200 text-slate-500 hover:text-slate-700 transition-all duration-200 shadow-sm flex items-center justify-center z-10" title="Tam Ekran / Fullscreen">
|
||
<i id="fullscreen-icon" class="uil uil-expand-arrows-alt text-lg"></i>
|
||
</button>
|
||
<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:#1e293b,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));
|
||
}
|
||
|
||
/* Fullscreen styles for card container */
|
||
#mermaid-card:fullscreen,
|
||
#mermaid-card:-webkit-full-screen,
|
||
#mermaid-card:-ms-fullscreen {
|
||
background-color: #ffffff !important;
|
||
padding: 3rem 2rem !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
overflow: auto !important;
|
||
border-radius: 0px !important;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
</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
|
||
}
|
||
});
|
||
|
||
// Fullscreen toggle logic for Mermaid card
|
||
function toggleFullscreen() {
|
||
const card = document.getElementById('mermaid-card');
|
||
const icon = document.getElementById('fullscreen-icon');
|
||
|
||
if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
||
if (card.requestFullscreen) {
|
||
card.requestFullscreen();
|
||
} else if (card.webkitRequestFullscreen) { /* Safari */
|
||
card.webkitRequestFullscreen();
|
||
} else if (card.msRequestFullscreen) { /* IE11 */
|
||
card.msRequestFullscreen();
|
||
}
|
||
} else {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen();
|
||
} else if (document.webkitExitFullscreen) {
|
||
document.webkitExitFullscreen();
|
||
} else if (document.msExitFullscreen) {
|
||
document.msExitFullscreen();
|
||
}
|
||
}
|
||
}
|
||
|
||
// Handle icon sync on fullscreen change
|
||
function handleFullscreenChange() {
|
||
const icon = document.getElementById('fullscreen-icon');
|
||
if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
|
||
icon.className = "uil uil-shrink text-lg";
|
||
} else {
|
||
icon.className = "uil uil-expand-arrows-alt text-lg";
|
||
}
|
||
}
|
||
|
||
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
||
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
|
||
document.addEventListener('msfullscreenchange', handleFullscreenChange);
|
||
|
||
// 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
|