@extends('frontend.layouts.appcreate')

<section style="background: linear-gradient(to bottom right, #fff9f9, #f4f0ff); padding: 60px 0;">
  <div class="container">
    <h4>Create Your Order</h4>

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

      <div class="form-grid">
        <!-- Title -->
        <div class="input-field">
          <label for="title">Title</label>
          <input type="text" id="title" name="title" required>
        </div>

        <!-- Category -->
        <div class="input-field">
          <label for="category">Category</label>
          <select id="category" name="category" required>
            <option value="Custom Essay">Custom Essay</option>
            <option value="Thesis">Thesis</option>
            <option value="Research Paper">Research Paper</option>
          </select>
        </div>

        <!-- Academic Level -->
        <div class="input-field">
          <label for="academic_level">Academic Level</label>
          <select id="academic_level" name="academic_level" required>
            <option value="High School">High School</option>
            <option value="Master’s" selected>Master’s</option>
            <option value="PhD">PhD</option>
          </select>
        </div>

        <!-- Subject Area -->
        <div class="input-field">
          <label for="subject_area">Subject Area</label>
          <select id="subject_area" name="subject_area" required>
            <option value="Custom Essay">Custom Essay</option>
            <option value="Thesis">Thesis</option>
            <option value="Research Paper">Research Paper</option>
          </select>
        </div>

        <!-- Deadline Date -->
        <div class="input-field">
          <label for="deadline_date">Deadline Date</label>
          <input type="date" id="deadline_date" name="deadline_date" required>
        </div>

        <!-- Deadline Time + Duration Hint -->
        <div class="input-field">
          <label for="deadline_time">Deadline Time</label>
          <input type="time" id="deadline_time" name="deadline_time" required>
          <div class="time-hint" id="deadlineHint">Deadline in — set date & time</div>
        </div>

        <!-- Deadline Timezone -->
        <div class="input-field">
          <label for="timezone">Deadline Timezone</label>
          <input type="text" id="timezone" name="timezone" placeholder="e.g. UTC+3 or -05:30">
        </div>

        <!-- Reference Style -->
        <div class="input-field">
          <label for="reference_style">Reference Style</label>
          <select id="reference_style" name="reference_style" required>
            <option value="APA">APA</option>
            <option value="MLA">MLA</option>
            <option value="Chicago">Chicago</option>
          </select>
        </div>

        <!-- Quantity -->
        <div class="input-field ">
          <label for="quantity">Quantity</label>
          <div class="quantity-row">
            <div class="qty-control" aria-label="Quantity selector" role="group">
              <button type="button" class="qty-btn" data-action="dec" aria-label="Decrease">−</button>
              <input id="quantity" name="quantity" class="qty-input" type="text" inputmode="numeric" pattern="[0-9]*" value="1" autocomplete="off" aria-live="polite" />
              <button type="button" class="qty-btn" data-action="inc" aria-label="Increase">+</button>
            </div>

            <div class="qty-type" aria-label="Select quantity type" role="group">
              <span id="labelPages" class="qty-type-label active">pages</span>
              <button type="button" id="qtySwitch" class="qty-switch" aria-pressed="false" aria-label="Toggle pages/words">
                <span class="knob" aria-hidden="true"></span>
              </button>
              <span id="labelWords" class="qty-type-label">words</span>
            </div>
          </div>
          <input type="hidden" id="quantity_type" name="quantity_type" value="pages">
          <div class="qty-hint" id="qtyHint">Approximately 550 words</div>
        </div>

                <!-- Spacing (segmented) -->
        <div class="input-field">
          <label for="spacing">Spacing</label>
          <div id="spacingGroup" class="spacing-group" role="radiogroup" aria-label="Spacing">
            <button type="button" class="spacing-option active" role="radio" aria-checked="true" data-value="Single">single</button>
            <button type="button" class="spacing-option" role="radio" aria-checked="false" data-value="1.5">1.5 lines</button>
            <button type="button" class="spacing-option" role="radio" aria-checked="false" data-value="Double">double</button>
          </div>
          <input type="hidden" id="spacing" name="spacing" value="Single">
        </div>
        
        <!-- Description -->
        <div class="input-field full-width">
          <label for="description">Description</label>
          <textarea id="description" name="description" class="materialize-textarea" required></textarea>
        </div>

        <!-- Attachments -->
        <div class="input-field full-width">
          <label for="attachments">Attachments</label>
          <input type="file" id="attachments" name="attachments[]" multiple>
        </div>

      </div>

      <button type="submit" class="btn blue lighten-1 white-text" style="width: 100%; border-radius: 8px;">Submit Order</button>
    </form>
  </div>
</section>

<!-- SweetAlert success -->
@if(session('success'))
<script>
  Swal && Swal.fire({ title: 'Success!', text: @json(session('success')), icon: 'success', confirmButtonText: 'Ok' });
</script>
@endif

<script>
document.addEventListener('DOMContentLoaded', () => {
  // ---- Date defaults ----
  const today = new Date();
  const yyyy = today.getFullYear();
  const mm = String(today.getMonth() + 1).padStart(2, '0');
  const dd = String(today.getDate()).padStart(2, '0');
  const dateEl = document.getElementById('deadline_date');
  dateEl.min = `${yyyy}-${mm}-${dd}`;
  const nextWeek = new Date(today); nextWeek.setDate(today.getDate() + 7);
  const nextWeekStr = nextWeek.toISOString().split('T')[0];
  if (!dateEl.value) dateEl.value = nextWeekStr;

  // ---- Quantity + spacing ----
  const qtyInput = document.getElementById('quantity');
  const qtyTypeInput = document.getElementById('quantity_type');
  const decBtn = document.querySelector('.qty-btn[data-action="dec"]');
  const incBtn = document.querySelector('.qty-btn[data-action="inc"]');
  const switchBtn = document.getElementById('qtySwitch');
  const labelPages = document.getElementById('labelPages');
  const labelWords = document.getElementById('labelWords');
  const hint = document.getElementById('qtyHint');
  const spacingEl = document.getElementById('spacing');

  const WORDS_PER_PAGE = { 'Double': 275, '1.5': 400, 'Single': 550 };

  const clamp = (n, min, max) => Math.min(Math.max(n, min), max);
  const parseNum = v => { const n = parseInt(String(v).replace(/\D/g, ''), 10); return isNaN(n) ? 0 : n; };
  const currentWpp = () => WORDS_PER_PAGE[spacingEl.value] || 275;

  function setUnit(unit) {
    qtyTypeInput.value = unit;
    const isWords = unit === 'words';
    switchBtn.classList.toggle('on', isWords);
    switchBtn.setAttribute('aria-pressed', String(isWords));
    labelPages.classList.toggle('active', !isWords);
    labelWords.classList.toggle('active', isWords);
    qtyInput.dataset.step = isWords ? '1' : '1';
    qtyInput.dataset.min = isWords ? '100' : '1';
    if (isWords && parseNum(qtyInput.value) < 275) qtyInput.value = '275';
    if (!isWords && parseNum(qtyInput.value) < 1) qtyInput.value = '1';
    updateHint();
  }

  function updateHint() {
    const qty = parseNum(qtyInput.value);
    const unit = qtyTypeInput.value;
    const wpp = currentWpp();
    if (unit === 'pages') {
      hint.textContent = `Approximately ${qty * wpp} words`;
    } else {
      const pages = qty / wpp;
      const rounded = pages >= 1 ? Math.round(pages) : Math.max(1, Math.round(pages * 10) / 10);
      hint.textContent = `Approximately ${rounded} page${rounded === 1 ? '' : 's'}`;
    }
  }

  function step(delta) {
    const step = parseInt(qtyInput.dataset.step || '1', 10);
    const min = parseInt(qtyInput.dataset.min || '1', 10);
    const value = parseNum(qtyInput.value);
    const next = clamp(value + delta * step, min, 1000000);
    qtyInput.value = String(next);
    updateHint();
  }

  decBtn.addEventListener('click', () => step(-1));
  incBtn.addEventListener('click', () => step(1));
  document.querySelectorAll('.spacing-option').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.spacing-option').forEach(b => {
        b.classList.remove('active'); b.setAttribute('aria-checked', 'false');
      });
      btn.classList.add('active'); btn.setAttribute('aria-checked', 'true');
      spacingEl.value = btn.dataset.value;
      updateHint();
    });
  });
  switchBtn.addEventListener('click', () => setUnit(qtyTypeInput.value === 'pages' ? 'words' : 'pages'));
  qtyInput.addEventListener('input', () => {
    qtyInput.value = String(parseNum(qtyInput.value));
    const min = parseInt(qtyInput.dataset.min || '1', 10);
    if (parseNum(qtyInput.value) < min) qtyInput.value = String(min);
    updateHint();
  });
  setUnit('pages');
  updateHint();

  // ---- Deadline duration hint ----
  const dateInput = document.getElementById('deadline_date');
  const timeInput = document.getElementById('deadline_time');
  const tzInput   = document.getElementById('timezone');
  const deadlineHint = document.getElementById('deadlineHint');

  function parseOffsetMinutes(str) {
    if (!str) return null;
    const s = String(str).trim().toUpperCase();
    const m = s.match(/^(?:UTC|GMT)?\s*([+-])?\s*(\d{1,2})(?::?(\d{2}))?$/);
    if (!m) return null;
    const sign = m[1] === '-' ? -1 : 1;
    const hh = parseInt(m[2] || '0', 10);
    const mm = parseInt(m[3] || '0', 10);
    return sign * (hh * 60 + mm);
  }

  function buildTarget() {
    const d = dateInput?.value, t = timeInput?.value;
    if (!d || !t) return null;
    const [y, mo, da] = d.split('-').map(Number);
    const [h, mi]     = t.split(':').map(Number);
    const off = parseOffsetMinutes(tzInput?.value);
    if (off == null) return new Date(y, (mo || 1) - 1, da || 1, h || 0, mi || 0, 0, 0);
    const utcMs = Date.UTC(y, (mo || 1) - 1, da || 1, h || 0, mi || 0, 0, 0) - off * 60000;
    return new Date(utcMs);
  }

  function formatShort(ms) {
    const totalMin = Math.max(0, Math.floor(ms / 60000));
    const d = Math.floor(totalMin / 1440);
    const h = Math.floor((totalMin % 1440) / 60);
    const m = totalMin % 60;
    const out = [];
    if (d) out.push(`${d}day${d === 1 ? '' : 's'}`);
    if (h) out.push(`${h}hr${h === 1 ? '' : 's'}`);
    if (m || (!d && !h)) out.push(`${m}min${m === 1 ? '' : 's'}`);
    return out.join(' ');
  }

  function renderDeadlineHint() {
    if (!deadlineHint) return;
    const target = buildTarget();
    if (!target) { deadlineHint.textContent = 'Deadline in — set date & time'; return; }
    const diff = target - new Date();
    if (diff <= 0) { deadlineHint.textContent = 'Deadline has passed'; return; }
    deadlineHint.textContent = `Deadline in "${formatShort(diff)}"`;
  }

  dateInput?.addEventListener('change', renderDeadlineHint);
  timeInput?.addEventListener('change', renderDeadlineHint);
  tzInput?.addEventListener('input',  renderDeadlineHint);
  renderDeadlineHint();
  setInterval(renderDeadlineHint, 60000);
});
</script>

@if(Auth::guest())
<script>
  document.getElementById('orderForm')?.addEventListener('submit', function (e) {
    e.preventDefault();
    Swal && Swal.fire({
      title: 'You need to log in!',
      text: 'Please log in to submit your order.',
      icon: 'warning',
      confirmButtonText: 'Login',
      showCancelButton: true,
      cancelButtonText: 'Cancel'
    }).then((result) => { if (result.isConfirmed) { window.location.href = "{{ route('login') }}"; } });
  });
</script>
@endif