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

<section class="wrapper bg-light">
  <div class="container pt-5 pb-14 pb-md-16">
    <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">Başvuru Formu</h2>
                <div class="divider-citrus"></div>
              </div>
            </div>

@if(session('success'))
              <div class="alert alert-success mt-4 mb-10 border-0 shadow-sm rounded-3">
                <div class="d-flex align-items-center">
                  <i class="uil uil-check-circle fs-24 me-3 text-success"></i>
                  <div class="fw-medium text-success">{{ session('success') }}</div>
                </div>
              </div>
            @endif

            <form action="{{ route('career.store') }}" method="POST" enctype="multipart/form-data" class="career-form" id="career-application-form">
              @csrf
              
              <!-- 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="Başvurunuzla ilgili iletmek istediklerinizi yazabilirsiniz..." 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" onclick="if(typeof trackEvent === 'function') trackEvent('career_form_submit_attempt', {form_name: 'career_application'})">
                    <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);
  }

  @media (max-width: 767.98px) {
    .career-form .custom-input {
      width: 100%;
      min-width: 100%;
    }
  }

  .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;
  }

  .career-form .custom-input::placeholder {
    color: #94a3b8;
    font-style: normal;
    opacity: 0.7;
  }

  .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;
  }

</style>
@endpush
@push('scripts')
<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();

        // Loading state
        submitBtn.disabled = true;
        spinner.classList.remove('d-none');
        btnIcon.classList.add('d-none');
        
        // Clear previous errors
        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': document.querySelector('meta[name="csrf-token"]')?.content || '{{ 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();
                    // Optional: redirect or hide form
                    // window.location.reload();
                });
                
                if (typeof trackEvent === 'function') {
                    trackEvent('career_form_success', {form_name: 'career_application'});
                }
            } 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];
                        
                        if (input.type === 'file') {
                            input.closest('.col-md-9').appendChild(errorDiv);
                        } else {
                            input.parentElement.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