@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', ['default' => 'İş Başvurusu']) }}</h1>
      <p class="text-lg text-slate-600 leading-relaxed">{{ __('career.job_application_description', ['default' => 'Ekibimize katılmak için aşağıdaki formu doldurarak CV\'nizi iletebilirsiniz.']) }}</p>
    </div>
  </div>
</section>

<section class="wrapper bg-white py-12 lg:py-20">
  <div class="container px-4">
    <div class="max-w-5xl mx-auto mb-16">
        <div class="bg-blue-50 border-l-4 border-blue-500 p-8 rounded-r-2xl shadow-sm">
            <h4 class="text-xl font-bold text-blue-900 mb-4">Değerli Geliştirici Adayı,</h4>
            <div class="text-blue-800 space-y-4 leading-relaxed">
                <p>Trunçgil Teknoloji olarak geliştirmekte olduğumuz Laravel tabanlı yazılım projemiz için her seviyeden freelance geliştiricilerle çalışıyoruz. İş modeli olarak <strong>issue/task bazlı ödeme sistemi</strong> uygulanmakta olup, görevler önceden belirlenmiş ücretlerle adaylara sunulmaktadır.</p>
                <p>Aşağıdaki bilgileri sizden istememizin temel sebebi, başvurunuzun değerlendirilmesi sürecinde projemizin kaynak kodlarına sınırlı da olsa erişim sağlamamız gerektiğidir. Bu nedenle, hem yasal güvenliği sağlamak hem de tarafların haklarını korumak adına, aşağıdaki <strong>Gizlilik Sözleşmesi (NDA)</strong> ve <strong>Bağımsız Sözleşmeli Sözleşmesi</strong> belgelerinin incelenmesi ve imzalanmış hallerinin başvuru esnasında iletilmesi gerekmektedir.</p>
                <p>Lütfen aşağıdaki formu doldurunuz ve imzalanmış belgeleri PDF formatında tek bir dosya veya zip olarak yükleyiniz.</p>
                <p>Bilgileriniz gizlilik içerisinde yalnızca başvuru süreci ve taraflar arası yasal koruma amacıyla kullanılacaktır.</p>
                <p>Teşekkür ederiz.</p>
                <div class="pt-4 border-t border-blue-200 mt-4 text-sm font-medium">
                    TRUNÇGİL TEKNOLOJİ SANAYİ VE TİCARET LİMİTED ŞİRKETİ<br>
                    Adres: Çamtepe Mah. Mahmut Tevfik Atay Bul. Gaziantep Teknopark No: 4A İç Kapı No: 1 Şahinbey / Gaziantep<br>
                    E-posta: info@truncgil.com.tr<br>
                    Vergi No: 8591492435 – Şahinbey V.D. | MERSİS: 0859149243500001
                </div>
            </div>
        </div>
    </div>

    <div class="text-center mb-12">
      <h2 class="text-xs uppercase font-bold tracking-widest text-[#e31e24] mb-2">Çalışma Modelimiz</h2>
      <h3 class="text-3xl md:text-4xl font-extrabold text-slate-900">Issue Bazlı Uzaktan Çalışma</h3>
    </div>

    <div class="flex flex-col lg:flex-row items-center gap-12 mb-20 max-w-6xl mx-auto">
      <div class="w-full lg:w-3/5">
        <div class="bg-white p-4 md:p-8 rounded-3xl shadow-2xl border border-slate-100 overflow-hidden flex justify-center">
          <pre class="mermaid">
            graph TD
              A[Başvuru Formunun Doldurulması] --> B[Ön Değerlendirme]
              B --> C[Teknik Mülakat / Tanışma]
              C --> D[Sözleşmelerin Onaylanması]
              D --> E[Sisteme Kayıt ve Erişim]
              E --> F[Görev Atanması (Issue/Task)]
              F --> G[Görevin Tamamlanması]
              G --> H[Kontrol ve Ödeme]
              
              style A fill:#f8fafc,stroke:#cbd5e1,stroke-width:2px
              style H fill:#e31e24,stroke:#fff,stroke-width:2px,color:#fff
              style D fill:#fff1f2,stroke:#fecdd3
          </pre>
        </div>
      </div>
      <div class="w-full lg:w-2/5 space-y-8">
        <h4 class="text-2xl font-bold text-slate-900">Şartlar ve Koşullar</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">Tamamen Uzaktan:</span>
              <p class="text-sm text-slate-500">Dünyanın her yerinden, kendi çalışma ortamınızda görev alabilirsiniz.</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">Bağımsız Sözleşmeli:</span>
              <p class="text-sm text-slate-500">Freelance çalışma modeli ile projelerimize katkı sağlarsınız.</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">Zorunlu Belgeler:</span>
              <p class="text-sm text-slate-500">Güvenlik gereği NDA ve Bağımsız Sözleşmeli belgelerinin imzalanması zorunludur.</p>
              <div class="mt-2 flex flex-wrap gap-3">
                <a href="https://docs.google.com/document/d/1WwDo_zgx4KjdnX6ohJaCfPQSS0-eRN41OB1HYvAmDO4/edit?usp=sharing" target="_blank" class="text-xs font-bold text-blue-600 hover:underline flex items-center gap-1">
                    <i class="uil uil-file-download"></i> Gizlilik Sözleşmesi (NDA)
                </a>
                <a href="https://docs.google.com/document/d/1VofpJIxmQmxSLk6OxsDjCtrMte0UkAFCSaQfZCS2DP8/edit?usp=sharing" target="_blank" class="text-xs font-bold text-blue-600 hover:underline flex items-center gap-1">
                    <i class="uil uil-file-download"></i> Bağımsız Sözleşmeli Sözleşmesi
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <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">Başvuru Formu</h2>
            <p class="text-slate-500">Lütfen tüm alanları eksiksiz doldurunuz.</p>
            <div class="w-12 h-1 bg-[#e31e24] rounded-full mx-auto mt-4"></div>
          </div>

          <form action="{{ route('career.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6" id="career-application-form">
            @csrf
            <input type="hidden" name="type" value="job">
            
            <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', ['default' => 'Ad Soyad']) }} <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="Örn: Ahmet Yılmaz" value="{{ old('name') }}" required>
              </div>
            </div>

            <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', ['default' => 'E-posta']) }} <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="Örn: ahmet@example.com" value="{{ old('email') }}" required>
              </div>
            </div>

            <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', ['default' => 'Telefon']) }}</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="Örn: 05XX XXX XX XX" value="{{ old('phone') }}">
              </div>
            </div>

            <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', ['default' => 'Özgeçmiş ve İmzalı Belgeler']) }} <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">PDF veya ZIP (Maks. 5MB). Lütfen CV ve imzalı NDA/Sözleşme belgelerini yükleyiniz.</p>
              </div>
            </div>

            <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', ['default' => 'Mesajınız']) }}</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="Yetenekleriniz, deneyimleriniz ve eklemek istedikleriniz...">{{ old('message') }}</textarea>
              </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
              <div class="md:col-start-4 md:col-span-9">
                <button type="submit" id="submit-btn" class="w-full md:w-auto 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', ['default' => 'Başvuruyu Gönder']) }}</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>
          </form>
        </div>
      </div>
    </div>
  </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;
  }

  .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;
  }
</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('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: '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('.md\\:col-span-9').appendChild(errorDiv);
                    }
                });
                
                Swal.fire({
                    icon: 'error',
                    title: 'Hata!',
                    text: '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: 'Hata!',
                text: 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