Ümit Tunç
348 lines
15 KiB
PHP
348 lines
15 KiB
PHP
@extends('layouts.site')
|
||
|
||
@section('content')
|
||
<section class="wrapper bg-soft-primary">
|
||
<div class="container pt-15 pb-0 pt-md-20 pb-md-0 text-center">
|
||
<div class="row">
|
||
<div class="col-xl-8 col-lg-10 mx-auto">
|
||
<h1 class="display-1 mb-3 text-dark">{{ __('career.internship_title', ['default' => 'Staj Başvurusu']) }}</h1>
|
||
<p class="lead mb-0 text-muted">{{ __('career.internship_description', ['default' => 'Uzaktan staj programımız hakkında bilgi alın ve başvurunuzu yapın.']) }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="wrapper bg-light">
|
||
<div class="container pt-10 pb-14 pb-md-16">
|
||
<div class="row mb-12">
|
||
<div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center">
|
||
<h2 class="fs-15 text-uppercase text-citrus mb-3">{{ __('career.remote_work_title', ['default' => 'Süreç Nasıl İşliyor?']) }}</h2>
|
||
<h3 class="display-4 mb-6">{{ __('career.remote_work_title', ['default' => 'Tamamen Uzaktan Staj Deneyimi']) }}</h3>
|
||
<p class="mb-6 text-muted">{{ __('career.remote_work_details', ['default' => 'Truncgil olarak stajyerlerimizi tamamen uzaktan (remote) kabul ediyoruz. Günlük çalışma sistemimiz de tamamen uzaktan yürütülmektedir.']) }}</p>
|
||
|
||
<div class="row text-start mb-10">
|
||
<div class="col-md-6 mb-5 mb-md-0">
|
||
<div class="card shadow-lg border-0 h-100">
|
||
<div class="card-body p-6">
|
||
<div class="d-flex align-items-center mb-3">
|
||
<div class="icon btn btn-circle btn-soft-citrus disabled me-4"><i class="uil uil-users-alt"></i></div>
|
||
<h4 class="mb-0">{{ __('career.daily_standup', ['default' => 'Günlük Standup']) }}</h4>
|
||
</div>
|
||
<p class="mb-0 text-mutedSmall">{{ __('career.daily_standup_desc', ['default' => 'Her gün düzenlenen kısa toplantılarla ekip içi iletişim ve ilerleme takibi sağlanır.']) }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="card shadow-lg border-0 h-100">
|
||
<div class="card-body p-6">
|
||
<div class="d-flex align-items-center mb-3">
|
||
<div class="icon btn btn-circle btn-soft-citrus disabled me-4"><i class="uil uil-laptop-cloud"></i></div>
|
||
<h4 class="mb-0">{{ __('career.flexible_projects', ['default' => 'Esnek ve Proje Odaklı']) }}</h4>
|
||
</div>
|
||
<p class="mb-0 text-mutedSmall">{{ __('career.flexible_projects_desc', ['default' => 'Projelerimizde esneklik esastır. Yeteneklerinize uygun gerçek projelerde görev alırsınız.']) }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mermaid-container p-6 bg-white rounded-4 shadow-xl mb-10 overflow-auto d-flex justify-content-center">
|
||
<pre class="mermaid">
|
||
graph TD
|
||
A[İnternet Üzerinden Başvuru] --> B{Uzaktan Çalışma Koşulları}
|
||
B -- Uygun --> C[CV ve Evrakların İletilmesi]
|
||
B -- Uygun Değil --> D[Süreç Sonlandırılır]
|
||
C --> E[Ön Değerlendirme]
|
||
E --> F[Teknik Görüşme]
|
||
F --> G[Projelere Dahil Edilme]
|
||
|
||
style A fill:#f9f9f9,stroke:#333,stroke-width:2px
|
||
style G fill:#e31e24,stroke:#fff,stroke-width:2px,color:#fff
|
||
style B fill:#fff4f4,stroke:#e31e24
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto">
|
||
<div class="card shadow-xl border-0 rounded-4">
|
||
<div class="card-body p-8 p-md-12">
|
||
<div class="row mb-10 text-center text-md-start">
|
||
<div class="col-12">
|
||
<h2 class="h3 mb-2 text-dark">Staj Başvuru Formu</h2>
|
||
<div class="divider-citrus"></div>
|
||
<div class="alert alert-info border-0 shadow-sm rounded-4 mb-8 text-start">
|
||
<div class="d-flex">
|
||
<div class="me-3"><i class="uil uil-info-circle fs-24"></i></div>
|
||
<div>
|
||
<h5 class="mb-1">{{ __('career.application_conditions_title', ['default' => 'Başvuru Şartları']) }}</h5>
|
||
<ul class="mb-0 ps-4">
|
||
<li>{{ __('career.condition_not_only_for_internship', ['default' => 'Yalnızca staj yapmak için yapmak isteyen kişiler alınmamaktadır.']) }}</li>
|
||
<li>{{ __('career.condition_intent_letter', ['default' => 'Mesaj bölümünde nasıl bir katkı sağlayacağınızın niyet mektubu iletilmelidir.']) }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<form action="{{ route('career.store') }}" method="POST" enctype="multipart/form-data" class="career-form" id="career-application-form">
|
||
@csrf
|
||
<input type="hidden" name="type" value="internship">
|
||
|
||
<!-- Personal Info Group -->
|
||
<div class="row mb-8 align-items-center">
|
||
<label for="name" class="col-md-3 col-form-label fw-bold text-md-end text-dark mb-2 mb-md-0">{{ __('career.name', ['default' => 'Ad Soyad']) }} <span class="text-citrus">*</span></label>
|
||
<div class="col-md-9">
|
||
<input type="text" name="name" id="name" class="form-control custom-input @error('name') is-invalid @enderror" placeholder="Örn: Ahmet Yılmaz" value="{{ old('name') }}" required>
|
||
@error('name') <div class="invalid-feedback text-start">{{ $message }}</div> @enderror
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-8 align-items-center">
|
||
<label for="email" class="col-md-3 col-form-label fw-bold text-md-end text-dark mb-2 mb-md-0">{{ __('career.email', ['default' => 'E-posta']) }} <span class="text-citrus">*</span></label>
|
||
<div class="col-md-9">
|
||
<input type="email" name="email" id="email" class="form-control custom-input @error('email') is-invalid @enderror" placeholder="Örn: ahmet@example.com" value="{{ old('email') }}" required>
|
||
@error('email') <div class="invalid-feedback text-start">{{ $message }}</div> @enderror
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-8 align-items-center">
|
||
<label for="phone" class="col-md-3 col-form-label fw-bold text-md-end text-dark mb-2 mb-md-0">{{ __('career.phone', ['default' => 'Telefon']) }}</label>
|
||
<div class="col-md-9">
|
||
<input type="text" name="phone" id="phone" class="form-control custom-input @error('phone') is-invalid @enderror" placeholder="Örn: 05XX XXX XX XX" value="{{ old('phone') }}">
|
||
@error('phone') <div class="invalid-feedback text-start">{{ $message }}</div> @enderror
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-8 align-items-center">
|
||
<label for="cv" class="col-md-3 col-form-label fw-bold text-md-end text-dark mb-2 mb-md-0">{{ __('career.cv', ['default' => 'Özgeçmiş (CV)']) }} <span class="text-citrus">*</span></label>
|
||
<div class="col-md-9">
|
||
<div class="input-group">
|
||
<input type="file" name="cv" id="cv" class="form-control custom-input @error('cv') is-invalid @enderror" required>
|
||
</div>
|
||
<div class="form-text text-start text-muted mt-2">PDF, DOC, DOCX dosyaları kabul edilir. (Maks. 5MB)</div>
|
||
@error('cv') <div class="invalid-feedback d-block text-start">{{ $message }}</div> @enderror
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-10">
|
||
<label for="message" class="col-md-3 col-form-label fw-bold text-md-end text-dark mb-2 mb-md-0 pt-md-3">{{ __('career.message', ['default' => 'Mesajınız']) }}</label>
|
||
<div class="col-md-9">
|
||
<textarea name="message" id="message" class="form-control custom-input @error('message') is-invalid @enderror" placeholder="Staj beklentileriniz ve çalışma alanlarınız hakkında bilgi verebilirsiniz..." style="height: 180px">{{ old('message') }}</textarea>
|
||
@error('message') <div class="invalid-feedback text-start">{{ $message }}</div> @enderror
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-9 offset-md-3 text-center text-md-start">
|
||
<button type="submit" id="submit-btn" class="btn btn-citrus btn-lg rounded-pill px-12 transition-all shadow-citrus d-inline-flex align-items-center justify-content-center">
|
||
<span class="btn-text">{{ __('career.submit', ['default' => 'Başvuruyu Gönder']) }}</span>
|
||
<span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
|
||
<i class="uil uil-arrow-right ms-2 fs-20 btn-icon"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
|
||
@push('styles')
|
||
<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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style>
|
||
@endpush
|
||
|
||
@push('scripts')
|
||
<script type="module">
|
||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
|
||
mermaid.initialize({
|
||
startOnLoad: true,
|
||
theme: 'default',
|
||
flowchart: {
|
||
useMaxWidth: true,
|
||
htmlLabels: true,
|
||
curve: 'basis'
|
||
}
|
||
});
|
||
</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('d-none');
|
||
btnIcon.classList.add('d-none');
|
||
|
||
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: 'Başarılı!',
|
||
text: result.data.message,
|
||
confirmButtonColor: '#e31e24',
|
||
confirmButtonText: 'Tamam'
|
||
}).then(() => {
|
||
form.reset();
|
||
});
|
||
} 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 d-block';
|
||
errorDiv.textContent = result.errors[key][0];
|
||
input.closest('.col-md-9').appendChild(errorDiv);
|
||
}
|
||
});
|
||
|
||
Swal.fire({
|
||
icon: 'error',
|
||
title: 'Hata!',
|
||
text: 'Lütfen formdaki hataları kontrol ediniz.',
|
||
confirmButtonColor: '#e31e24',
|
||
});
|
||
}
|
||
|
||
submitBtn.disabled = false;
|
||
spinner.classList.add('d-none');
|
||
btnIcon.classList.remove('d-none');
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
Swal.fire({
|
||
icon: 'error',
|
||
title: 'Hata!',
|
||
text: error.message || 'Başvuru gönderilirken bir hata oluştu. Lütfen tekrar deneyiniz.',
|
||
confirmButtonColor: '#e31e24',
|
||
});
|
||
submitBtn.disabled = false;
|
||
spinner.classList.add('d-none');
|
||
btnIcon.classList.remove('d-none');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
@endpush
|
||
@endsection
|