@extends('layouts.app')
@section('title', 'Waste Weight Estimator')

@push('styles')
<style>
.est-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem;}
.waste-item{background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:1.25rem;cursor:pointer;transition:.3s;text-align:center;user-select:none;}
.waste-item:hover{border-color:rgba(76,175,80,.3);transform:translateY(-2px);}
.waste-item.selected{border-color:var(--gl);background:rgba(76,175,80,.08);}
.wi-icon{font-size:2rem;margin-bottom:.5rem;display:block;}
.wi-name{font-weight:700;font-size:.875rem;margin-bottom:.25rem;}
.wi-unit{font-size:.72rem;color:var(--muted);}
.wi-qty{display:flex;align-items:center;gap:.5rem;justify-content:center;margin-top:.75rem;}
.wi-qty button{width:28px;height:28px;border-radius:50%;background:rgba(76,175,80,.1);border:1px solid rgba(76,175,80,.2);color:var(--gl);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;}
.wi-qty button:hover{background:rgba(76,175,80,.2);}
.wi-qty span{font-size:1rem;font-weight:800;min-width:24px;text-align:center;}
.result-card{background:linear-gradient(135deg,#0f2318,#1a3a22);border:1px solid rgba(76,175,80,.25);border-radius:18px;padding:2rem;text-align:center;margin-top:1.5rem;}
.result-kg{font-size:3rem;font-weight:900;color:var(--gl);line-height:1;}
.result-nc{font-size:1.2rem;color:rgba(255,255,255,.6);margin-top:.35rem;}
.result-co2{font-size:.875rem;color:rgba(52,211,153,.7);margin-top:.25rem;}
</style>
@endpush

@section('content')
<div class="page-header">
  <h1>⚖️ Waste Weight Estimator</h1>
  <p>Estimate how much your waste weighs and how many coins you'll earn before scheduling a pickup</p>
</div>

<div style="display:grid;grid-template-columns:1fr 320px;gap:1.5rem;align-items:start;">

  <div>
    <div style="font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.85rem;">Select your waste items:</div>
    <div class="est-grid" id="wasteGrid">
      @foreach([
        ['🍶','Plastic Bottles','1 bottle ≈ 0.025 kg',0.025,'plastic'],
        ['📦','Cardboard Box','1 box ≈ 0.5 kg',0.5,'cardboard'],
        ['🗞️','Newspaper/Paper','1 bundle ≈ 0.3 kg',0.3,'paper'],
        ['🥫','Metal Cans','1 can ≈ 0.015 kg',0.015,'metal'],
        ['🍾','Glass Bottles','1 bottle ≈ 0.3 kg',0.3,'glass'],
        ['📱','Old Phone','1 phone ≈ 0.15 kg',0.15,'ewaste'],
        ['💻','Laptop/Computer','1 unit ≈ 2.5 kg',2.5,'ewaste'],
        ['🛍️','Plastic Bags','10 bags ≈ 0.1 kg',0.1,'plastic'],
        ['🪣','Bucket/Container','1 unit ≈ 0.4 kg',0.4,'plastic'],
        ['🔋','Batteries','1 pack ≈ 0.2 kg',0.2,'ewaste'],
        ['👕','Old Clothes','1 kg bag ≈ 1 kg',1.0,'textile'],
        ['🪑','Furniture','1 chair ≈ 5 kg',5.0,'mixed'],
      ] as [$icon,$name,$unit,$kg,$type])
      <div class="waste-item" data-kg="{{ $kg }}" data-name="{{ $name }}" onclick="toggleItem(this)">
        <span class="wi-icon">{{ $icon }}</span>
        <div class="wi-name">{{ $name }}</div>
        <div class="wi-unit">{{ $unit }}</div>
        <div class="wi-qty" style="display:none;">
          <button onclick="event.stopPropagation();changeQty(this,-1)">−</button>
          <span class="qty">1</span>
          <button onclick="event.stopPropagation();changeQty(this,1)">+</button>
        </div>
      </div>
      @endforeach
    </div>

    {{-- Custom item --}}
    <div class="card" style="margin-top:1rem;">
      <div class="card-title" style="font-size:.875rem;"><i class="fas fa-plus"></i> Add Custom Item</div>
      <div style="display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap;">
        <div class="form-group" style="flex:2;margin:0;">
          <label>Item Name</label>
          <input type="text" id="customName" class="form-control" placeholder="e.g. Old TV">
        </div>
        <div class="form-group" style="flex:1;margin:0;">
          <label>Weight (kg)</label>
          <input type="number" id="customKg" class="form-control" min="0.1" step="0.1" placeholder="e.g. 3.5">
        </div>
        <button onclick="addCustom()" class="btn btn-green btn-sm" style="margin-bottom:0;">Add</button>
      </div>
    </div>
  </div>

  {{-- Result Panel --}}
  <div style="position:sticky;top:80px;">
    <div class="result-card">
      <div style="font-size:.78rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem;">Estimated Weight</div>
      <div class="result-kg" id="totalKg">0.0 <span style="font-size:1.2rem;color:rgba(255,255,255,.4);">kg</span></div>
      <div class="result-nc" id="totalNc">≈ 0 NC</div>
      <div class="result-co2" id="totalCo2">0 kg CO₂ saved</div>
      <div style="margin:1.5rem 0;height:1px;background:rgba(255,255,255,.08);"></div>
      <div id="itemList" style="font-size:.78rem;color:rgba(255,255,255,.5);text-align:left;min-height:40px;"></div>
      <div style="margin-top:1.25rem;">
        <a href="{{ route('waste.index') }}" class="btn btn-green" style="width:100%;justify-content:center;">
          <i class="fas fa-truck"></i> Schedule Pickup
        </a>
        <a href="{{ route('recycle.smart') }}" class="btn btn-outline" style="width:100%;justify-content:center;margin-top:.5rem;">
          <i class="fas fa-robot"></i> Use Smart Machine
        </a>
      </div>
    </div>

    <div class="card" style="margin-top:1rem;">
      <div class="card-title" style="font-size:.82rem;"><i class="fas fa-info-circle"></i> How Coins Work</div>
      <div style="font-size:.78rem;color:var(--muted);line-height:1.8;">
        <div>• Pickup: ~10 NC per kg confirmed</div>
        <div>• Machine code: fixed value per code</div>
        <div>• Premium: 2x coins on all pickups</div>
        <div>• Min pickup: 0.5 kg recommended</div>
      </div>
    </div>
  </div>

</div>

@push('scripts')
<script>
const NC_PER_KG = 10;
const items = {};

function toggleItem(el) {
  const name = el.dataset.name || el.querySelector('.wi-name').textContent;
  const kg = parseFloat(el.dataset.kg);
  if (el.classList.contains('selected')) {
    el.classList.remove('selected');
    el.querySelector('.wi-qty').style.display = 'none';
    delete items[name];
  } else {
    el.classList.add('selected');
    el.querySelector('.wi-qty').style.display = 'flex';
    items[name] = { kg, qty: 1 };
  }
  recalc();
}

function changeQty(btn, delta) {
  const card = btn.closest('.waste-item');
  const name = card.dataset.name || card.querySelector('.wi-name').textContent;
  const qtyEl = card.querySelector('.qty');
  let qty = parseInt(qtyEl.textContent) + delta;
  if (qty < 1) qty = 1;
  qtyEl.textContent = qty;
  if (items[name]) items[name].qty = qty;
  recalc();
}

function addCustom() {
  const name = document.getElementById('customName').value.trim();
  const kg = parseFloat(document.getElementById('customKg').value);
  if (!name || !kg) return;
  items[name] = { kg, qty: 1 };
  document.getElementById('customName').value = '';
  document.getElementById('customKg').value = '';
  recalc();
}

function recalc() {
  let total = 0;
  const lines = [];
  Object.entries(items).forEach(([name, {kg, qty}]) => {
    const w = kg * qty;
    total += w;
    lines.push(`${name} ×${qty} = ${w.toFixed(2)}kg`);
  });

  document.getElementById('totalKg').innerHTML = `${total.toFixed(2)} <span style="font-size:1.2rem;color:rgba(255,255,255,.4);">kg</span>`;
  document.getElementById('totalNc').textContent = `≈ ${Math.round(total * NC_PER_KG)} NC (₦${(total * NC_PER_KG * 10).toLocaleString()})`;
  document.getElementById('totalCo2').textContent = `${(total * 2.5).toFixed(2)} kg CO₂ saved`;
  document.getElementById('itemList').innerHTML = lines.map(l => `<div style="padding:.2rem 0;border-bottom:1px solid rgba(255,255,255,.04);">${l}</div>`).join('') || '<div style="color:rgba(255,255,255,.2);">No items selected yet</div>';
}
</script>
@endpush
@endsection