@extends('layouts.site')

@section('content')
<section class="wrapper bg-[#f0f7ff]">
  <div class="container pt-16 pb-8 text-center">
    <div class="max-w-3xl mx-auto">
      <h1 class="text-5xl font-bold mb-4 text-slate-900 tracking-tight">{{ __('career.internship_title', ['default' => 'Staj Başvurusu']) }}</h1>
      <p class="text-lg text-slate-600 leading-relaxed">{{ __('career.internship_description', ['default' => 'Uzaktan staj programımız hakkında bilgi alın ve başvurunuzu yapın.']) }}</p>
    </div>
  </div>
</section>

<section class="wrapper bg-white py-12 lg:py-20">
  <div class="container px-4">
    <div class="text-center mb-12">
      <h2 class="text-xs uppercase font-bold tracking-widest text-[#e31e24] mb-2">{{ __('career.remote_work_title', ['default' => 'Süreç Nasıl İşliyor?']) }}</h2>
      <h3 class="text-3xl md:text-4xl font-extrabold text-slate-900">{{ __('career.remote_work_title', ['default' => 'Tamamen Uzaktan Staj Deneyimi']) }}</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[İ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:#f8fafc,stroke:#cbd5e1,stroke-width:2px
              style G fill:#e31e24,stroke:#fff,stroke-width:2px,color:#fff
              style B 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">{{ __('career.application_conditions_title', ['default' => 'Başvuru Şartları ve Çalışma Modeli']) }}</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.daily_standup', ['default' => 'Günlük Standup:']) }}</span>
              <p class="text-sm text-slate-500">{{ __('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 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.flexible_projects', ['default' => 'Esnek Projeler:']) }}</span>
              <p class="text-sm text-slate-500">{{ __('career.flexible_projects_desc', ['default' => 'Projelerimizde esneklik esastır. Yeteneklerinize uygun gerçek projelerde görev alırsı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">{{ __('career.focus_on_development', ['default' => 'Gelişim Odaklılık:']) }}</span>
              <p class="text-sm text-slate-500">{{ __('career.condition_not_only_for_internship', ['default' => 'Yalnızca staj yapmak için yapmak isteyen kişiler alınmamaktadır.']) }}</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.intent_letter', ['default' => 'Niyet Mektubu:']) }}</span>
              <p class="text-sm text-slate-500">{{ __('career.condition_intent_letter', ['default' => 'Mesaj bölümünde nasıl bir katkı sağlayacağınızın niyet mektubu iletilmelidir.']) }}</p>
            </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">
            <h2 class="text-2xl font-bold text-slate-900 mb-2">Staj Başvuru Formu</h2>
            <div class="w-12 h-1 bg-[#e31e24] rounded-full"></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="internship">
            
            <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ş (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">PDF, DOC, DOCX (Maks. 5MB)</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="Staj beklentileriniz ve çalışma alanlarınız hakkında bilgi verebilirsiniz...">{{ 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('.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('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