@extends('layouts.site')
@section('title', app()->getLocale()==='en' ? 'Pitch Your Idea' : 'قدّم فكرتك')
@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'?'Pitch Your Idea':'قدّم فكرتك' }}</h1>
    <p class="page-lead">{{ app()->getLocale()==='en'?'Whether you are at idea stage or already generating revenue.':'سواء كنت في مرحلة الفكرة أو تحقق إيرادات بالفعل.' }}</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="pitch-steps" aria-label="{{ app()->getLocale()==='en'?'Pitch 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'?'Basics':'الأساسيات' }}</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'?'Stage':'المرحلة' }}</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'?'Market':'السوق' }}</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'?'Business':'النموذج' }}</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'?'Assets':'الأصول' }}</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'?'Fit':'الملاءمة' }}</span></li>
    </ol>

    <form method="POST" action="{{ route('pitch.store') }}" class="ald-form feat-card" style="padding:1.5rem;" id="pitch-form">
        @csrf
        <div class="wizard-pane on" data-pane="0">
            <div><label>{{ app()->getLocale()==='en'?'Company / Project Name':'اسم الشركة / المشروع' }} *</label><input name="company_name" value="{{ old('company_name') }}" required></div>
            <div><label>{{ app()->getLocale()==='en'?'Founder name':'اسم المؤسس' }} *</label><input name="founder_name" value="{{ old('founder_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') }}"></div>
            <div><label>Website / LinkedIn</label><input name="website" value="{{ old('website') }}"></div>
            <div>
                <label>{{ app()->getLocale()==='en'?'Which best describes you?':'أي وصف يناسبك؟' }} *</label>
                <label style="font-weight:400;"><input type="radio" name="founder_type" value="solo" {{ old('founder_type','solo')==='solo'?'checked':'' }}> {{ app()->getLocale()==='en'?'Solo founder':'مؤسس منفرد' }}</label>
                <label style="font-weight:400;"><input type="radio" name="founder_type" value="team" {{ old('founder_type')==='team'?'checked':'' }}> {{ app()->getLocale()==='en'?'Co-founder team':'فريق مؤسسين' }}</label>
            </div>
            <div><label>{{ app()->getLocale()==='en'?'Elevator pitch':'الوصف المختصر' }} *</label><textarea name="elevator_pitch" rows="3" required>{{ old('elevator_pitch') }}</textarea></div>
        </div>
        <div class="wizard-pane" data-pane="1">
            <div><label>{{ app()->getLocale()==='en'?'Current stage':'المرحلة الحالية' }}</label>
                <select name="stage">
                    @foreach(['Idea','MVP','Traction','Revenue','Scaling'] as $s)
                    <option value="{{ $s }}" @selected(old('stage')===$s)>{{ $s }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="wizard-pane" data-pane="2">
            <div><label>{{ app()->getLocale()==='en'?'Target market':'السوق المستهدف' }}</label><textarea name="market" rows="4">{{ old('market') }}</textarea></div>
        </div>
        <div class="wizard-pane" data-pane="3">
            <div><label>{{ app()->getLocale()==='en'?'Business model':'نموذج العمل' }}</label><textarea name="business_model" rows="4">{{ old('business_model') }}</textarea></div>
        </div>
        <div class="wizard-pane" data-pane="4">
            <div><label>{{ app()->getLocale()==='en'?'Assets / IP / Traction':'الأصول / الملكية الفكرية / الجذب' }}</label><textarea name="assets" rows="4">{{ old('assets') }}</textarea></div>
        </div>
        <div class="wizard-pane" data-pane="5">
            <div><label>{{ app()->getLocale()==='en'?'Why Aldakkah?':'لماذا الدكة؟' }}</label><textarea name="fit" rows="4">{{ old('fit') }}</textarea></div>
            <button type="submit" class="btn btn-gold">{{ app()->getLocale()==='en'?'Submit Pitch':'إرسال الفكرة' }}</button>
        </div>
        <div style="display:flex;gap:.8rem;margin-top:1rem;">
            <button type="button" class="btn btn-outline" id="pitch-back" disabled>{{ app()->getLocale()==='en'?'Back':'رجوع' }}</button>
            <button type="button" class="btn btn-gold" id="pitch-next">{{ app()->getLocale()==='en'?'Next':'التالي' }}</button>
        </div>
    </form>
</div>
</section>
@endsection
@push('scripts')
<script>
(function(){
  let i=0;
  const form=document.getElementById('pitch-form');
  const panes=[...form.querySelectorAll('.wizard-pane')];
  const steps=[...document.querySelectorAll('#pitch-steps .wizard-step')];
  const back=document.getElementById('pitch-back');
  const next=document.getElementById('pitch-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); };

  // Hidden required fields block native submit with no visible error.
  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=btn.dataset.busy||'{{ app()->getLocale()==='en'?'Sending…':'جاري الإرسال…' }}'; }
  });

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