@extends('layouts.tenant')
@section('title', 'New Repair Job')
@section('page-title', 'New Repair Job')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3 pb-3 border-bottom">
  <div class="d-flex align-items-center gap-3">
    <div class="rounded-3 d-flex align-items-center justify-content-center text-white flex-shrink-0 shadow-sm" style="width:48px;height:48px;background:linear-gradient(135deg, #2563eb, #1d4ed8);">
      <i class="bi bi-tools fs-4"></i>
    </div>
    <div>
      <div class="d-flex align-items-center gap-2">
        <h4 class="fw-extrabold text-body mb-0" style="letter-spacing:-0.4px;">New Repair Order</h4>
        <span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill px-2.5 py-1 small fw-bold" style="font-size:11px;">Intake POS</span>
      </div>
      <p class="text-muted small mb-0 mt-0.5">Register customer device, log fault diagnosis, and issue receipt ticket.</p>
    </div>
  </div>
  <a href="{{ route('tenant.repairs.index', ['slug' => $slug]) }}" class="btn-outline-custom py-2 px-3">
    <i class="bi bi-arrow-left me-1"></i> Back to Orders
  </a>
</div>

@if($errors->any())
<div class="alert alert-danger mb-3 shadow-sm rounded-3">
  <div class="fw-bold mb-1"><i class="bi bi-exclamation-triangle-fill me-2"></i>Please resolve the following errors:</div>
  <ul class="mb-0 ps-3 small">
    @foreach($errors->all() as $error)
      <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif

<form method="POST" action="{{ route('tenant.repairs.store', ['slug' => $slug]) }}" id="repairForm">
@csrf
<div class="row g-3">
  <div class="col-12 col-lg-8">

    {{-- ───── Customer Card ───── --}}
    <div class="card-custom mb-3">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
        <div class="section-title" style="margin:0;">Customer</div>
        <button type="button" class="btn-primary-custom" style="padding:7px 14px;font-size:12.5px;" onclick="openModal('quickCustomerModal')">
          <i class="bi bi-person-plus-fill"></i> Quick Add Customer
        </button>
      </div>

      {{-- Selected customer preview strip --}}
      <div id="selectedCustomerPreview" style="display:none;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border:1.5px solid #c7d2fe;border-radius:12px;padding:12px 16px;margin-bottom:12px;display:flex;align-items:center;gap:12px;">
        <div id="previewAvatar" style="width:40px;height:40px;border-radius:10px;background:#4f46e5;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0;">?</div>
        <div>
          <div id="previewName" style="font-weight:700;font-size:14px;color:#1e293b;"></div>
          <div id="previewMobile" style="font-size:12px;color:#4f46e5;"></div>
        </div>
        <button type="button" onclick="clearCustomer()" style="margin-left:auto;background:none;border:none;color:#94a3b8;font-size:18px;cursor:pointer;line-height:1;" title="Clear selection">✕</button>
      </div>

      <label class="form-label-custom">Select Customer *</label>
      <select class="form-control-custom" name="customer_id" id="customerSelect" required onchange="onCustomerChange(this)">
        <option value="">— Search or select customer —</option>
        @foreach($customers as $c)
        <option value="{{ $c->id }}" {{ old('customer_id') == $c->id ? 'selected' : '' }}>{{ $c->name }} — {{ $c->mobile }}</option>
        @endforeach
      </select>
      @error('customer_id')<div style="color:#dc2626;font-size:12px;margin-top:4px;">{{ $message }}</div>@enderror

      <div style="margin-top:10px;font-size:12px;color:#94a3b8;display:flex;align-items:center;gap:5px;">
        <i class="bi bi-lightbulb"></i>
        New customer? Click <strong style="color:#4f46e5;cursor:pointer;" onclick="openModal('quickCustomerModal')">Quick Add Customer</strong> to add without leaving this form.
      </div>
    </div>

    {{-- ───── Device Information ───── --}}
    <div class="card-custom mb-3">
      <div class="section-title">Device Information</div>
      <div class="row g-3">
        <div class="col-6 col-md-4">
          <label class="form-label-custom">Device Category</label>
          <select class="form-control-custom" name="device_category">
            @foreach(['Mobile', 'Tablet', 'Laptop', 'Smartwatch', 'Other'] as $cat)
              <option value="{{ $cat }}" {{ old('device_category', 'Mobile') == $cat ? 'selected' : '' }}>{{ $cat }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-6 col-md-4">
          <label class="form-label-custom">Brand *</label>
          <input class="form-control-custom" name="brand" id="brandInput" value="{{ old('brand') }}" placeholder="e.g. Samsung" list="brandList" required>
          <datalist id="brandList">
            @foreach(['Samsung','Apple','Huawei','OnePlus','Xiaomi','Oppo','Vivo','Nokia','Sony','LG','Motorola','Google'] as $b)
            <option value="{{ $b }}">
            @endforeach
          </datalist>
        </div>
        <div class="col-12 col-md-4">
          <label class="form-label-custom">Model *</label>
          <input class="form-control-custom" name="model" value="{{ old('model') }}" placeholder="e.g. Galaxy S23" required>
        </div>
        <div class="col-6">
          <label class="form-label-custom">IMEI Number</label>
          <input class="form-control-custom" name="imei" value="{{ old('imei') }}" placeholder="15-digit IMEI" maxlength="20">
        </div>
        <div class="col-6">
          <label class="form-label-custom">Serial Number</label>
          <input class="form-control-custom" name="serial_number" value="{{ old('serial_number') }}" placeholder="Device S/N">
        </div>
        <div class="col-6">
          <label class="form-label-custom">Color</label>
          <input class="form-control-custom" name="color" value="{{ old('color') }}" placeholder="e.g. Midnight Black" list="colorList">
          <datalist id="colorList">
            @foreach(['Black','White','Blue','Silver','Gold','Rose Gold','Green','Purple','Red','Gray'] as $col)
            <option value="{{ $col }}">
            @endforeach
          </datalist>
        </div>
        <div class="col-6">
          <label class="form-label-custom">Passcode / PIN <small class="text-muted">(Encrypted)</small></label>
          <input class="form-control-custom" name="passcode" value="{{ old('passcode') }}" placeholder="Lock code for testing">
        </div>
        <div class="col-12">
          <label class="form-label-custom">Device Condition</label>
          <input class="form-control-custom" name="device_condition" value="{{ old('device_condition') }}" placeholder="Scratch marks, minor dents, back glass cracked…">
        </div>
        <div class="col-12">
          <label class="form-label-custom">Accessories Received</label>
          <input class="form-control-custom" name="accessories" value="{{ old('accessories') }}" placeholder="Charger, Box, Case, SIM tool…">
        </div>
      </div>
    </div>

    {{-- ───── Fault & Notes ───── --}}
    <div class="card-custom mb-3">
      <div class="section-title">Fault &amp; Technician Notes</div>
      <div class="row g-3">
        <div class="col-12">
          <label class="form-label-custom">Customer Complaint *</label>
          <div style="position:relative;">
            <textarea class="form-control-custom" name="complaint" id="complaintArea" rows="3" placeholder="Describe the fault reported by the customer…" required>{{ old('complaint') }}</textarea>
          </div>
          {{-- Quick fault chips --}}
          <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;">
            @foreach(['Screen cracked','Battery draining fast','Not charging','Water damage','Speaker not working','Camera broken','Touch not responding','Phone not turning on','Microphone issue','Network / SIM issue'] as $fault)
            <button type="button" class="fault-chip" onclick="appendFault('{{ $fault }}')">{{ $fault }}</button>
            @endforeach
          </div>
        </div>
        <div class="col-12">
          <label class="form-label-custom">Technician Notes <small style="font-weight:400;">(internal)</small></label>
          <textarea class="form-control-custom" name="technician_notes" rows="2" placeholder="Parts needed, internal remarks…">{{ old('technician_notes') }}</textarea>
        </div>
      </div>
    </div>

  </div>

  {{-- ───── Right column ───── --}}
  <div class="col-12 col-lg-4">
    <div class="card-custom mb-3">
      <div class="section-title">Cost &amp; Schedule</div>
      <div class="row g-3">
        <div class="col-12">
          <label class="form-label-custom">Estimated Cost *</label>
          <div style="position:relative;">
            <span style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-weight:600;">{{ $tenant->currency_symbol }}</span>
            <input class="form-control-custom" style="padding-left:26px;" name="estimated_cost" type="number" step="0.01" min="0" value="{{ old('estimated_cost', '') }}" placeholder="0.00" required>
          </div>
          @error('estimated_cost')<div style="color:#dc2626;font-size:12px;margin-top:4px;">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label-custom">Advance Paid</label>
          <div style="position:relative;">
            <span style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-weight:600;">{{ $tenant->currency_symbol }}</span>
            <input class="form-control-custom" style="padding-left:26px;" name="advance_paid" type="number" step="0.01" min="0" value="{{ old('advance_paid', 0) }}" placeholder="0.00">
          </div>
        </div>
        <div class="col-12">
          <label class="form-label-custom">Received Date *</label>
          <input class="form-control-custom" name="received_date" type="date" value="{{ old('received_date', today()->toDateString()) }}" required>
        </div>
        <div class="col-12">
          <label class="form-label-custom">Expected Delivery Date</label>
          <input class="form-control-custom" name="expected_delivery_date" type="date" value="{{ old('expected_delivery_date') }}">
        </div>
        <div class="col-12">
          <label class="form-label-custom">Assign Technician</label>
          <select class="form-control-custom" name="technician_id">
            <option value="">— No technician assigned —</option>
            @foreach($technicians as $tech)
            <option value="{{ $tech->id }}" {{ old('technician_id') == $tech->id ? 'selected' : '' }}>{{ $tech->name }}</option>
            @endforeach
          </select>
        </div>
      </div>
    </div>

    <div class="row g-2">
      <div class="col-6">
        <button type="submit" name="action" value="save" class="btn-outline-custom w-100 justify-content-center py-2 text-nowrap">
          <i class="bi bi-floppy-fill me-1"></i> Save Repair Job
        </button>
      </div>
      <div class="col-6">
        <button type="submit" name="action" value="print" class="btn-primary-custom w-100 justify-content-center py-2 text-nowrap" style="background:linear-gradient(135deg, #10b981 0%, #059669 100%);">
          <i class="bi bi-printer-fill me-1"></i> Save &amp; Print Ticket
        </button>
      </div>
    </div>
  </div>
</div>
</form>

{{-- ═══════════════════════════════════════════════════ --}}
{{-- QUICK ADD CUSTOMER MODAL                           --}}
{{-- ═══════════════════════════════════════════════════ --}}
<div class="modal-custom" id="quickCustomerModal" style="z-index:2000;">
  <div class="modal-box" style="max-width:480px;">

    {{-- Header --}}
    <div class="modal-header-custom" style="padding:22px 24px 0;">
      <div style="display:flex;align-items:center;gap:12px;">
        <div style="width:42px;height:42px;border-radius:11px;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-size:19px;color:#4f46e5;">
          <i class="bi bi-person-plus-fill"></i>
        </div>
        <div>
          <div style="font-size:17px;font-weight:800;color:var(--text);">Quick Add Customer</div>
          <div style="font-size:12px;color:var(--text-muted);margin-top:1px;">Add a new customer and select instantly</div>
        </div>
      </div>
      <button class="btn-icon" onclick="closeModal('quickCustomerModal')" style="flex-shrink:0;"><i class="bi bi-x-lg"></i></button>
    </div>

    {{-- Body --}}
    <div class="modal-body-custom" style="padding:20px 24px;">
      <div id="quickFormError" style="display:none;background:#fee2e2;border:1px solid #fca5a5;border-radius:10px;padding:10px 14px;font-size:13px;color:#991b1b;margin-bottom:14px;"></div>

      <div class="row g-3">
        <div class="col-12">
          <label class="form-label-custom">Full Name <span style="color:#ef4444;">*</span></label>
          <div style="position:relative;">
            <i class="bi bi-person" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);"></i>
            <input class="form-control-custom" id="qcName" style="padding-left:36px;" placeholder="e.g. Ali Hassan" autocomplete="off">
          </div>
        </div>

        <div class="col-12">
          <label class="form-label-custom">Mobile Number <span style="color:#ef4444;">*</span></label>
          <div style="position:relative;">
            <i class="bi bi-telephone" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);"></i>
            <input class="form-control-custom" id="qcMobile" style="padding-left:36px;" placeholder="e.g. 07700 900123" type="tel" autocomplete="off">
          </div>
        </div>

        <div class="col-12">
          <label class="form-label-custom">Email <small style="font-weight:400;color:var(--text-muted);">(optional)</small></label>
          <div style="position:relative;">
            <i class="bi bi-envelope" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);"></i>
            <input class="form-control-custom" id="qcEmail" style="padding-left:36px;" placeholder="email@example.com" type="email" autocomplete="off">
          </div>
        </div>

        <div class="col-12">
          <label class="form-label-custom">Address <small style="font-weight:400;color:var(--text-muted);">(optional)</small></label>
          <div style="position:relative;">
            <i class="bi bi-geo-alt" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);"></i>
            <input class="form-control-custom" id="qcAddress" style="padding-left:36px;" placeholder="Street, City, Postcode" autocomplete="off">
          </div>
        </div>
      </div>
    </div>

    {{-- Footer --}}
    <div class="modal-footer-custom" style="padding:0 24px 22px;">
      <button type="button" class="btn-outline-custom" onclick="closeModal('quickCustomerModal')">
        Cancel
      </button>
      <button type="button" class="btn-primary-custom" id="qcSaveBtn" onclick="saveQuickCustomer()">
        <i class="bi bi-person-check-fill"></i> Add &amp; Select
      </button>
    </div>

  </div>
</div>

<style>
  /* ── Fault quick-chips ── */
  .fault-chip {
    background: var(--body-bg);
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
  }
  .fault-chip:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
  }

  /* ── Modal loading spinner overlay ── */
  #qcLoadingOverlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.75);
    border-radius: 16px;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }
  [data-theme="dark"] #qcLoadingOverlay { background: rgba(30,41,59,.75); }
  .spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .6s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── Success pulse on dropdown ── */
  @keyframes pulse-success {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
    70%  { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  }
  .select-pulse { animation: pulse-success .6s ease; border-color: #10b981 !important; }
</style>

@push('scripts')
<script>
/* ───────────────────────────────────────────
   Customer dropdown preview
─────────────────────────────────────────── */
function onCustomerChange(select) {
  const val  = select.value;
  const text = select.options[select.selectedIndex]?.text || '';
  const preview = document.getElementById('selectedCustomerPreview');

  if (!val) { preview.style.display = 'none'; return; }

  const parts = text.split(' — ');
  document.getElementById('previewName').textContent   = parts[0] || text;
  document.getElementById('previewMobile').textContent = parts[1] || '';
  document.getElementById('previewAvatar').textContent = (parts[0] || '?')[0].toUpperCase();
  preview.style.display = 'flex';
}

function clearCustomer() {
  const sel = document.getElementById('customerSelect');
  sel.value = '';
  document.getElementById('selectedCustomerPreview').style.display = 'none';
}

/* Run on page load if old() value was set */
document.addEventListener('DOMContentLoaded', () => {
  const sel = document.getElementById('customerSelect');
  if (sel && sel.value) onCustomerChange(sel);
});

/* ───────────────────────────────────────────
   Fault chip appending
─────────────────────────────────────────── */
function appendFault(text) {
  const ta = document.getElementById('complaintArea');
  const existing = ta.value.trim();
  ta.value = existing ? existing + ', ' + text : text;
  ta.focus();
}

/* ───────────────────────────────────────────
   Quick Add Customer — AJAX submit
─────────────────────────────────────────── */
function saveQuickCustomer() {
  const name    = document.getElementById('qcName').value.trim();
  const mobile  = document.getElementById('qcMobile').value.trim();
  const email   = document.getElementById('qcEmail').value.trim();
  const address = document.getElementById('qcAddress').value.trim();
  const errBox  = document.getElementById('quickFormError');
  const saveBtn = document.getElementById('qcSaveBtn');

  // Client-side validation
  errBox.style.display = 'none';
  if (!name) { showQcError('Full name is required.'); document.getElementById('qcName').focus(); return; }
  if (!mobile) { showQcError('Mobile number is required.'); document.getElementById('qcMobile').focus(); return; }

  // Loading state
  saveBtn.disabled = true;
  saveBtn.innerHTML = '<span class="spinner" style="width:16px;height:16px;border-width:2px;display:inline-block;vertical-align:middle;margin-right:6px;"></span> Saving…';

  fetch('{{ route("tenant.customers.quick-store", ["slug" => $slug]) }}', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
      'Accept': 'application/json',
    },
    body: JSON.stringify({ name, mobile, email: email || null, address: address || null }),
  })
  .then(r => r.json())
  .then(data => {
    if (data.success) {
      injectCustomerAndSelect(data.customer);
      closeModal('quickCustomerModal');
      resetQuickForm();
      showSuccessToast('✓ ' + data.customer.name + ' added and selected!');
    } else {
      const firstError = data.errors ? Object.values(data.errors)[0][0] : 'Failed to save. Please try again.';
      showQcError(firstError);
    }
  })
  .catch(() => showQcError('Network error. Please check your connection.'))
  .finally(() => {
    saveBtn.disabled = false;
    saveBtn.innerHTML = '<i class="bi bi-person-check-fill"></i> Add &amp; Select';
  });
}

function injectCustomerAndSelect(customer) {
  const sel = document.getElementById('customerSelect');

  // Add new option at the top (after the blank one)
  const opt = new Option(customer.label, customer.id, true, true);
  opt.setAttribute('data-new', 'true');
  sel.insertBefore(opt, sel.options[1]);
  sel.value = customer.id;

  // Trigger preview update
  onCustomerChange(sel);

  // Pulse the select to show it worked
  sel.classList.add('select-pulse');
  setTimeout(() => sel.classList.remove('select-pulse'), 800);
}

function showQcError(msg) {
  const box = document.getElementById('quickFormError');
  box.textContent = msg;
  box.style.display = 'block';
}

function resetQuickForm() {
  document.getElementById('qcName').value    = '';
  document.getElementById('qcMobile').value  = '';
  document.getElementById('qcEmail').value   = '';
  document.getElementById('qcAddress').value = '';
  document.getElementById('quickFormError').style.display = 'none';
}

function showSuccessToast(msg) {
  const t = document.createElement('div');
  t.className = 'alert-toast success';
  t.style.cssText = 'bottom:28px;right:24px;';
  t.innerHTML = msg;
  document.body.appendChild(t);
  setTimeout(() => t.remove(), 4000);
}

/* Open modal and focus first field */
const _origOpen = window.openModal;
window.openModal = function(id) {
  if (typeof _origOpen === 'function') _origOpen(id);
  else document.getElementById(id).classList.add('show');
  if (id === 'quickCustomerModal') {
    setTimeout(() => document.getElementById('qcName')?.focus(), 120);
  }
};

/* Enter key submits the quick form */
['qcName','qcMobile','qcEmail','qcAddress'].forEach(id => {
  document.getElementById(id)?.addEventListener('keydown', e => {
    if (e.key === 'Enter') { e.preventDefault(); saveQuickCustomer(); }
  });
});

/* Prevent double-click multiple submissions */
document.getElementById('repairForm')?.addEventListener('submit', function() {
  setTimeout(() => {
    const btns = this.querySelectorAll('button[type="submit"]');
    btns.forEach(b => {
      b.disabled = true;
      b.classList.add('opacity-75');
    });
  }, 10);
});
</script>
@endpush
@endsection