@extends('layouts.app')
@section('title', 'Request a Nabola Machine')

@push('styles')
<style>
/* ── WIZARD ── */
.wizard-wrap{max-width:720px;margin:0 auto;}
.wizard-progress{display:flex;align-items:center;margin-bottom:2.5rem;position:relative;}
.wizard-progress::before{content:'';position:absolute;top:18px;left:0;right:0;height:2px;background:rgba(255,255,255,.08);z-index:0;}
.wp-step{display:flex;flex-direction:column;align-items:center;gap:.4rem;flex:1;position:relative;z-index:1;}
.wp-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;transition:.4s;border:2px solid rgba(255,255,255,.1);background:var(--dark);color:var(--muted);}
.wp-dot.done{background:var(--green);border-color:var(--gl);color:#fff;}
.wp-dot.active{background:linear-gradient(135deg,#4338ca,#6366f1);border-color:#6366f1;color:#fff;box-shadow:0 0 0 4px rgba(99,102,241,.2);}
.wp-label{font-size:.68rem;font-weight:700;color:var(--muted);text-align:center;transition:.3s;}
.wp-label.active{color:#a5b4fc;}
.wp-label.done{color:var(--gl);}

/* ── STEP PANELS ── */
.step-panel{display:none;animation:stepIn .4s ease;}
.step-panel.active{display:block;}
@keyframes stepIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

/* ── QUESTION CARDS ── */
.q-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;margin-bottom:1rem;transition:.3s;cursor:pointer;position:relative;overflow:hidden;}
.q-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(99,102,241,.06),transparent);opacity:0;transition:.3s;border-radius:16px;}
.q-card:hover{border-color:rgba(99,102,241,.3);transform:translateY(-2px);}
.q-card:hover::before{opacity:1;}
.q-card.selected{border-color:#6366f1;background:rgba(99,102,241,.08);}
.q-card.selected::before{opacity:1;}
.q-card input[type="radio"]{position:absolute;opacity:0;width:0;height:0;}
.q-icon{font-size:2rem;margin-bottom:.65rem;display:block;}
.q-title{font-weight:800;font-size:.95rem;margin-bottom:.25rem;}
.q-desc{font-size:.78rem;color:var(--muted);line-height:1.5;}
.q-check{position:absolute;top:.85rem;right:.85rem;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:.65rem;transition:.3s;}
.q-card.selected .q-check{background:#6366f1;border-color:#6366f1;color:#fff;}

/* ── FORM FIELDS ── */
.wf{margin-bottom:1rem;}
.wf label{display:block;font-size:.72rem;font-weight:700;color:var(--muted);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.4px;}
.wf input,.wf select,.wf textarea{width:100%;background:rgba(255,255,255,.04);border:1.5px solid var(--border);border-radius:10px;padding:.6rem .9rem;color:var(--text);font-size:.875rem;outline:none;transition:.2s;font-family:inherit;}
.wf input:focus,.wf select:focus,.wf textarea:focus{border-color:#6366f1;background:rgba(99,102,241,.04);}
.wf select option{background:#0d1520;}
.wf-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;}
@media(max-width:600px){.wf-grid{grid-template-columns:1fr;}}

/* ── NAV BUTTONS ── */
.wizard-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.75rem;gap:.75rem;}
.wbtn{padding:.65rem 1.5rem;border-radius:50px;font-weight:700;font-size:.875rem;cursor:pointer;border:none;transition:.2s;display:inline-flex;align-items:center;gap:.4rem;}
.wbtn-next{background:linear-gradient(135deg,#4338ca,#6366f1);color:#fff;}
.wbtn-next:hover{opacity:.9;transform:translateY(-1px);}
.wbtn-back{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--border);}
.wbtn-back:hover{background:rgba(255,255,255,.1);}
.wbtn-submit{background:linear-gradient(135deg,var(--green),var(--gl));color:#fff;}
.wbtn-submit:hover{opacity:.9;transform:translateY(-1px);}

/* ── AGREEMENT ── */
.agreement-box{background:rgba(76,175,80,.05);border:1px solid rgba(76,175,80,.15);border-radius:14px;padding:1.25rem;margin-bottom:1.25rem;}
.agreement-box ul{padding-left:1.25rem;color:rgba(255,255,255,.6);font-size:.82rem;line-height:2;}
.sign-row{display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;margin-top:.85rem;}
.sign-row input{accent-color:var(--gl);width:18px;height:18px;flex-shrink:0;margin-top:.15rem;}
</style>
@endpush

@section('content')
<div class="wizard-wrap">

  <div class="page-header" style="text-align:center;margin-bottom:2rem;">
    <h1>🤖 Request a Nabola Machine</h1>
    <p>Get a recycling machine installed at your home, street, or community</p>
  </div>

  @if($errors->any())
  <div class="alert alert-error" style="margin-bottom:1.5rem;"><i class="fas fa-exclamation-circle"></i> {{ $errors->first() }}</div>
  @endif

  {{-- Progress --}}
  <div class="wizard-progress">
    @foreach(['Request Type','Your Details','Location','Agreement'] as $i=>$label)
    <div class="wp-step">
      <div class="wp-dot {{ $i===0?'active':'' }}" id="dot{{ $i }}">{{ $i+1 }}</div>
      <div class="wp-label {{ $i===0?'active':'' }}" id="lbl{{ $i }}">{{ $label }}</div>
    </div>
    @endforeach
  </div>

  <form method="POST" action="{{ route('machine-request.store') }}" enctype="multipart/form-data" id="wizardForm">
    @csrf

    {{-- ── STEP 1: Request Type ── --}}
    <div class="step-panel active" id="step0">
      <div style="font-size:1rem;font-weight:800;margin-bottom:1.25rem;color:#a5b4fc;">What type of machine request is this?</div>

      <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem;">
        @foreach([
          ['residential','🏠','Home Request','For your personal home or apartment. You are the head of household.'],
          ['estate','🏘️','Estate / Compound','For a shared compound, estate, or gated community.'],
          ['commercial','🏢','Street / Community','For a public street, market, or community area.'],
          ['school','🎓','School / Institution','For a school, university, or educational institution.'],
          ['office','💼','Office / Workplace','For an office building or workplace.'],
        ] as [$val,$icon,$title,$desc])
        <label class="q-card" onclick="selectCard(this,'property_type','{{ $val }}')">
          <input type="radio" name="property_type" value="{{ $val }}" {{ old('property_type')==$val?'checked':'' }}>
          <div class="q-check">✓</div>
          <span class="q-icon">{{ $icon }}</span>
          <div class="q-title">{{ $title }}</div>
          <div class="q-desc">{{ $desc }}</div>
        </label>
        @endforeach
      </div>

      {{-- Conditional questions based on type --}}
      <div id="homeQuestions" style="display:none;">
        <div style="font-size:.9rem;font-weight:800;margin-bottom:1rem;color:#a5b4fc;">A few quick questions about your home:</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
          <label class="q-card" onclick="selectCard(this,'is_head_of_family','yes')" style="padding:1rem;">
            <input type="radio" name="is_head_of_family" value="yes">
            <div class="q-check">✓</div>
            <span class="q-icon" style="font-size:1.5rem;">👨‍👩‍👧‍👦</span>
            <div class="q-title" style="font-size:.875rem;">Yes, I'm the head of household</div>
          </label>
          <label class="q-card" onclick="selectCard(this,'is_head_of_family','no')" style="padding:1rem;">
            <input type="radio" name="is_head_of_family" value="no">
            <div class="q-check">✓</div>
            <span class="q-icon" style="font-size:1.5rem;">🙋</span>
            <div class="q-title" style="font-size:.875rem;">No, I'm a household member</div>
          </label>
        </div>
        <div class="wf" style="margin-top:1rem;">
          <label>How many people live in your household?</label>
          <input type="number" name="household_size" min="1" max="50" placeholder="e.g. 5" class="form-control" value="{{ old('household_size') }}">
        </div>
        <div class="wf">
          <label>How many machines do you need?</label>
          <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;">
            @foreach([1,2,3,4] as $n)
            <label class="q-card" onclick="selectCard(this,'machines_needed','{{ $n }}')" style="padding:.85rem;text-align:center;">
              <input type="radio" name="machines_needed" value="{{ $n }}">
              <div class="q-check" style="top:.4rem;right:.4rem;">✓</div>
              <div style="font-size:1.5rem;font-weight:900;color:#a5b4fc;">{{ $n }}</div>
              <div style="font-size:.7rem;color:var(--muted);">machine{{ $n>1?'s':'' }}</div>
            </label>
            @endforeach
          </div>
        </div>
      </div>

      <div id="communityQuestions" style="display:none;">
        <div style="font-size:.9rem;font-weight:800;margin-bottom:1rem;color:#a5b4fc;">Tell us about your community:</div>
        <div class="wf">
          <label>Estimated daily users of the machine</label>
          <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;">
            @foreach(['10-50'=>'Small','50-200'=>'Medium','200-500'=>'Large','500+'=>'Very Large'] as $range=>$size)
            <label class="q-card" onclick="selectCard(this,'community_size','{{ $range }}')" style="padding:.85rem;text-align:center;">
              <input type="radio" name="community_size" value="{{ $range }}">
              <div class="q-check" style="top:.4rem;right:.4rem;">✓</div>
              <div style="font-size:.82rem;font-weight:800;color:#a5b4fc;">{{ $range }}</div>
              <div style="font-size:.68rem;color:var(--muted);">{{ $size }}</div>
            </label>
            @endforeach
          </div>
        </div>
        <div class="wf">
          <label>Are you an authorized representative of this community/street?</label>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;">
            @foreach(['yes'=>'Yes, I am authorized','no'=>'No, but I want to apply'] as $v=>$l)
            <label class="q-card" onclick="selectCard(this,'is_representative','{{ $v }}')" style="padding:1rem;">
              <input type="radio" name="is_representative" value="{{ $v }}">
              <div class="q-check">✓</div>
              <div style="font-weight:700;font-size:.855rem;">{{ $l }}</div>
            </label>
            @endforeach
          </div>
        </div>
      </div>

      <div class="wizard-nav">
        <div></div>
        <button type="button" class="wbtn wbtn-next" onclick="nextStep(0)">Next <i class="fas fa-arrow-right"></i></button>
      </div>
    </div>

    {{-- ── STEP 2: Your Details ── --}}
    <div class="step-panel" id="step1">
      <div style="font-size:1rem;font-weight:800;margin-bottom:1.25rem;color:#a5b4fc;">Your contact information</div>
      <div class="wf-grid">
        <div class="wf">
          <label>Full Name *</label>
          <input type="text" name="full_name" value="{{ old('full_name', auth()->user()->name) }}" required placeholder="Your full name">
        </div>
        <div class="wf">
          <label>Phone Number *</label>
          <input type="text" name="phone" value="{{ old('phone', auth()->user()->phone) }}" required placeholder="+234...">
        </div>
        <div class="wf" style="grid-column:1/-1">
          <label>Email Address *</label>
          <input type="email" name="email" value="{{ old('email', auth()->user()->email) }}" required>
        </div>
      </div>

      <div style="font-size:.9rem;font-weight:800;margin:1.25rem 0 1rem;color:#a5b4fc;">Why do you want a Nabola machine?</div>
      <div class="wf">
        <textarea name="reason" rows="4" required minlength="20" placeholder="Describe why your location needs a Nabola machine and how it will benefit your household/community...">{{ old('reason') }}</textarea>
      </div>

      <div class="wf">
        <label>Estimated Daily Users *</label>
        <input type="number" name="estimated_users" value="{{ old('estimated_users', 5) }}" min="1" required placeholder="How many people will use it daily?">
      </div>

      <div class="wizard-nav">
        <button type="button" class="wbtn wbtn-back" onclick="prevStep(1)"><i class="fas fa-arrow-left"></i> Back</button>
        <button type="button" class="wbtn wbtn-next" onclick="nextStep(1)">Next <i class="fas fa-arrow-right"></i></button>
      </div>
    </div>

    {{-- ── STEP 3: Location ── --}}
    <div class="step-panel" id="step2">
      <div style="font-size:1rem;font-weight:800;margin-bottom:1.25rem;color:#a5b4fc;">Where should the machine be installed?</div>
      <div class="wf-grid">
        <div class="wf">
          <label>State *</label>
          <select name="state" required>
            <option value="">Select State</option>
            @foreach(['Abia','Adamawa','Akwa Ibom','Anambra','Bauchi','Bayelsa','Benue','Borno','Cross River','Delta','Ebonyi','Edo','Ekiti','Enugu','FCT','Gombe','Imo','Jigawa','Kaduna','Kano','Katsina','Kebbi','Kogi','Kwara','Lagos','Nasarawa','Niger','Ogun','Ondo','Osun','Oyo','Plateau','Rivers','Sokoto','Taraba','Yobe','Zamfara'] as $s)
            <option value="{{ $s }}" {{ old('state')==$s?'selected':'' }}>{{ $s }}</option>
            @endforeach
          </select>
        </div>
        <div class="wf">
          <label>LGA *</label>
          <input type="text" name="lga" value="{{ old('lga') }}" required placeholder="Local Government Area">
        </div>
        <div class="wf" style="grid-column:1/-1">
          <label>Street Address *</label>
          <input type="text" name="street_address" value="{{ old('street_address') }}" required placeholder="House number, street name">
        </div>
        <div class="wf" style="grid-column:1/-1">
          <label>Nearest Landmark</label>
          <input type="text" name="landmark" value="{{ old('landmark') }}" placeholder="e.g. Near GTBank, opposite primary school">
        </div>
      </div>

      <div class="wf" style="margin-top:.5rem;">
        <label>Proof Document (optional — utility bill, ID, or property document)</label>
        <input type="file" name="proof_document" accept=".pdf,.jpg,.jpeg,.png" style="background:rgba(255,255,255,.04);border:1.5px solid var(--border);border-radius:10px;padding:.55rem .85rem;color:var(--text);font-size:.82rem;width:100%;">
        <div style="font-size:.7rem;color:var(--muted);margin-top:.25rem;">Max 5MB · PDF, JPG, PNG</div>
      </div>

      <div class="wizard-nav">
        <button type="button" class="wbtn wbtn-back" onclick="prevStep(2)"><i class="fas fa-arrow-left"></i> Back</button>
        <button type="button" class="wbtn wbtn-next" onclick="nextStep(2)">Next <i class="fas fa-arrow-right"></i></button>
      </div>
    </div>

    {{-- ── STEP 4: Agreement ── --}}
    <div class="step-panel" id="step3">
      <div style="font-size:1rem;font-weight:800;margin-bottom:1.25rem;color:#a5b4fc;">Review & Sign Agreement</div>

      <div class="agreement-box">
        <div style="font-weight:800;font-size:.9rem;color:var(--gl);margin-bottom:.75rem;"><i class="fas fa-file-signature"></i> Nabola Machine Placement Agreement</div>
        <ul>
          <li>I authorize Nabola to install and maintain a recycling machine at my stated address</li>
          <li>I will ensure the machine is accessible to household/community members</li>
          <li>I will report any damage, theft, or issues to Nabola promptly</li>
          <li>I will not relocate or tamper with the machine without Nabola's written consent</li>
          <li>I understand that installation may be free or subject to a fee set by Nabola admin</li>
          <li>I confirm that all information provided in this form is accurate and truthful</li>
          <li>I agree to Nabola's <a href="/terms" style="color:var(--gl);">Terms of Service</a> and <a href="/privacy" style="color:var(--gl);">Privacy Policy</a></li>
        </ul>
        <label class="sign-row">
          <input type="checkbox" name="signed_agreement" value="1" id="agreeCheck" required>
          <span style="font-size:.875rem;font-weight:700;">I have read and agree to all the above terms and conditions *</span>
        </label>
      </div>

      {{-- Summary --}}
      <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;padding:1.25rem;margin-bottom:1.25rem;">
        <div style="font-weight:800;font-size:.875rem;margin-bottom:.75rem;color:var(--text);">📋 Request Summary</div>
        <div id="summaryContent" style="font-size:.82rem;color:var(--muted);line-height:2;"></div>
      </div>

      <div class="wizard-nav">
        <button type="button" class="wbtn wbtn-back" onclick="prevStep(3)"><i class="fas fa-arrow-left"></i> Back</button>
        <button type="submit" class="wbtn wbtn-submit"><i class="fas fa-paper-plane"></i> Submit Request</button>
      </div>
    </div>

  </form>
</div>

@push('scripts')
<script>
let currentStep = 0;
const totalSteps = 4;

function selectCard(el, name, val) {
  // Deselect all cards with same name
  document.querySelectorAll(`input[name="${name}"]`).forEach(inp => {
    inp.closest('.q-card')?.classList.remove('selected');
  });
  el.classList.add('selected');
  el.querySelector('input').checked = true;

  // Show conditional questions
  if (name === 'property_type') {
    const homeTypes = ['residential'];
    const communityTypes = ['estate','commercial','school','office'];
    document.getElementById('homeQuestions').style.display = homeTypes.includes(val) ? 'block' : 'none';
    document.getElementById('communityQuestions').style.display = communityTypes.includes(val) ? 'block' : 'none';
  }
}

function updateProgress(step) {
  for (let i = 0; i < totalSteps; i++) {
    const dot = document.getElementById('dot' + i);
    const lbl = document.getElementById('lbl' + i);
    dot.className = 'wp-dot ' + (i < step ? 'done' : i === step ? 'active' : '');
    lbl.className = 'wp-label ' + (i < step ? 'done' : i === step ? 'active' : '');
    if (i < step) dot.innerHTML = '✓';
    else dot.innerHTML = i + 1;
  }
}

function nextStep(from) {
  // Basic validation
  if (from === 0) {
    const type = document.querySelector('input[name="property_type"]:checked');
    if (!type) { alert('Please select a request type.'); return; }
  }
  if (from === 1) {
    const name = document.querySelector('[name="full_name"]').value;
    const reason = document.querySelector('[name="reason"]').value;
    if (!name || reason.length < 20) { alert('Please fill in all required fields.'); return; }
  }
  if (from === 2) {
    const state = document.querySelector('[name="state"]').value;
    const addr = document.querySelector('[name="street_address"]').value;
    if (!state || !addr) { alert('Please fill in your location details.'); return; }
  }

  document.getElementById('step' + from).classList.remove('active');
  currentStep = from + 1;
  document.getElementById('step' + currentStep).classList.add('active');
  updateProgress(currentStep);

  if (currentStep === 3) buildSummary();
  window.scrollTo({top: 0, behavior: 'smooth'});
}

function prevStep(from) {
  document.getElementById('step' + from).classList.remove('active');
  currentStep = from - 1;
  document.getElementById('step' + currentStep).classList.add('active');
  updateProgress(currentStep);
  window.scrollTo({top: 0, behavior: 'smooth'});
}

function buildSummary() {
  const type = document.querySelector('input[name="property_type"]:checked')?.value || '';
  const name = document.querySelector('[name="full_name"]')?.value || '';
  const state = document.querySelector('[name="state"]')?.value || '';
  const lga = document.querySelector('[name="lga"]')?.value || '';
  const addr = document.querySelector('[name="street_address"]')?.value || '';
  const users = document.querySelector('[name="estimated_users"]')?.value || '';

  document.getElementById('summaryContent').innerHTML = `
    <div>📍 <strong>Type:</strong> ${type.charAt(0).toUpperCase() + type.slice(1)}</div>
    <div>👤 <strong>Applicant:</strong> ${name}</div>
    <div>🗺️ <strong>Location:</strong> ${addr}, ${lga}, ${state}</div>
    <div>👥 <strong>Est. Daily Users:</strong> ${users}</div>
  `;
}

// Pre-select if old values exist
document.addEventListener('DOMContentLoaded', () => {
  const oldType = '{{ old("property_type") }}';
  if (oldType) {
    const inp = document.querySelector(`input[name="property_type"][value="${oldType}"]`);
    if (inp) selectCard(inp.closest('.q-card'), 'property_type', oldType);
  }
});
</script>
@endpush
@endsection