@extends('layouts.site')
@section('title', app()->getLocale()==='en' ? 'Become a Co-Founder' : 'انضم كمؤسس مشارك')
@section('content')
<section class="section section-cream page-v4" style="padding-top:3rem;">
<div class="container wizard">
    <a href="{{ route('home') }}">← {{ __('Home') }}</a>
    <h1 class="sec-title" style="margin-top:1rem;">{{ app()->getLocale()==='en'?'Become a Co-Founder':'انضم كمؤسس مشارك' }}</h1>
    <p class="page-lead">{{ app()->getLocale()==='en'?'Join our network of exceptional entrepreneurs.':'انضم إلى شبكتنا من رواد الأعمال المتميزين.' }}</p>

    @if(session('success'))
    <div class="ald-alert ok">{{ session('success') }}</div>
    @endif

    @if($errors->any())
    <div class="ald-alert err"><ul>@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
    @endif

    <ol class="wizard-steps" id="cf-steps" aria-label="{{ app()->getLocale()==='en'?'Application steps':'خطوات التقديم' }}">
        <li class="wizard-step on" data-i="0"><span class="wizard-step__num" aria-hidden="true"></span><span class="wizard-step__label">{{ app()->getLocale()==='en'?'Personal':'شخصي' }}</span></li>
        <li class="wizard-step" data-i="1"><span class="wizard-step__num" aria-hidden="true"></span><span class="wizard-step__label">{{ app()->getLocale()==='en'?'Background':'الخلفية' }}</span></li>
        <li class="wizard-step" data-i="2"><span class="wizard-step__num" aria-hidden="true"></span><span class="wizard-step__label">{{ app()->getLocale()==='en'?'Achievements':'الإنجازات' }}</span></li>
        <li class="wizard-step" data-i="3"><span class="wizard-step__num" aria-hidden="true"></span><span class="wizard-step__label">{{ app()->getLocale()==='en'?'Skills':'المهارات' }}</span></li>
        <li class="wizard-step" data-i="4"><span class="wizard-step__num" aria-hidden="true"></span><span class="wizard-step__label">{{ app()->getLocale()==='en'?'Motivation':'الدافع' }}</span></li>
        <li class="wizard-step" data-i="5"><span class="wizard-step__num" aria-hidden="true"></span><span class="wizard-step__label">{{ app()->getLocale()==='en'?'Documents':'المستندات' }}</span></li>
    </ol>

    <form method="POST" action="{{ route('cofounder.store') }}" enctype="multipart/form-data" class="ald-form feat-card" style="padding:1.5rem;" id="cf-form">
        @csrf
        <div class="wizard-pane on" data-pane="0">
            <div><label>{{ __('Name') }} *</label><input name="full_name" value="{{ old('full_name') }}" required></div>
            <div><label>{{ __('Email') }} *</label><input type="email" name="email" value="{{ old('email') }}" required></div>
            <div><label>{{ __('Mobile') }} *</label><input name="phone" value="{{ old('phone') }}" required></div>
            <div><label>LinkedIn</label><input name="linkedin" value="{{ old('linkedin') }}"></div>
            <div><label>Website / Portfolio</label><input name="website" value="{{ old('website') }}"></div>
        </div>
        <div class="wizard-pane" data-pane="1"><div><label>{{ app()->getLocale()==='en'?'Background':'الخلفية المهنية' }}</label><textarea name="background" rows="5">{{ old('background') }}</textarea></div></div>
        <div class="wizard-pane" data-pane="2"><div><label>{{ app()->getLocale()==='en'?'Achievements':'الإنجازات' }}</label><textarea name="achievements" rows="5">{{ old('achievements') }}</textarea></div></div>
        <div class="wizard-pane" data-pane="3"><div><label>{{ app()->getLocale()==='en'?'Skills':'المهارات' }}</label><textarea name="skills" rows="5">{{ old('skills') }}</textarea></div></div>
        <div class="wizard-pane" data-pane="4"><div><label>{{ app()->getLocale()==='en'?'Motivation':'الدافع' }}</label><textarea name="motivation" rows="5">{{ old('motivation') }}</textarea></div></div>
        <div class="wizard-pane" data-pane="5">
            <div><label>CV (PDF/DOC)</label><input type="file" name="cv" accept=".pdf,.doc,.docx"></div>
            <button type="submit" class="btn btn-gold">{{ app()->getLocale()==='en'?'Submit Application':'إرسال الطلب' }}</button>
        </div>
        <div style="display:flex;gap:.8rem;margin-top:1rem;">
            <button type="button" class="btn btn-outline" id="cf-back" disabled>{{ app()->getLocale()==='en'?'Back':'رجوع' }}</button>
            <button type="button" class="btn btn-gold" id="cf-next">{{ app()->getLocale()==='en'?'Next':'التالي' }}</button>
        </div>
    </form>
</div>
</section>
@endsection
@push('scripts')
<script>
(function(){
  let i=0;
  const form=document.getElementById('cf-form');
  const panes=[...form.querySelectorAll('.wizard-pane')];
  const steps=[...document.querySelectorAll('#cf-steps .wizard-step')];
  const back=document.getElementById('cf-back');
  const next=document.getElementById('cf-next');

  function go(n){
    i=Math.max(0,Math.min(panes.length-1,n));
    panes.forEach((p,x)=>p.classList.toggle('on',x===i));
    steps.forEach((s,x)=>{
      s.classList.toggle('on',x===i);
      s.classList.toggle('done',x<i);
      s.setAttribute('aria-current', x===i ? 'step' : 'false');
    });
    back.disabled=i===0;
    next.style.display=i===panes.length-1?'none':'';
  }

  function firstInvalid(pane){
    return [...pane.querySelectorAll('input,select,textarea')].find(el=>!el.checkValidity())||null;
  }

  function validatePane(pane){
    const bad=firstInvalid(pane);
    if(!bad) return true;
    go(Number(pane.dataset.pane));
    bad.focus({preventScroll:false});
    bad.reportValidity();
    return false;
  }

  back.onclick=()=>go(i-1);
  next.onclick=()=>{ if(validatePane(panes[i])) go(i+1); };

  form.setAttribute('novalidate','novalidate');
  form.addEventListener('submit',function(e){
    for(const pane of panes){
      if(!validatePane(pane)){ e.preventDefault(); return; }
    }
    const btn=form.querySelector('[type="submit"]');
    if(btn){ btn.disabled=true; btn.textContent='{{ app()->getLocale()==='en'?'Sending…':'جاري الإرسال…' }}'; }
  });

  go(0);
})();
</script>
@endpush