@extends('layouts.app')

@section('title', 'Checkout')

@php
  $fees = ['inside' => \App\Services\Cart::shippingFee('inside'), 'outside' => \App\Services\Cart::shippingFee('outside')];
  $area = old('area', 'inside');
  $pay = old('payment_method', 'cod');
  $t = $totals[$area];
  $err = fn ($k) => $errors->has($k) ? 'error' : '';
@endphp

@section('content')
<div class="container">

  <div class="steps">
    <div class="step done"><b>✓</b>Cart</div>
    <div class="step {{ $placed ? 'done' : 'on' }}"><b>{{ $placed ? '✓' : '2' }}</b>Shipping & Payment</div>
    <div class="step {{ $placed ? 'done' : '' }}"><b>{{ $placed ? '✓' : '3' }}</b>Confirmation</div>
  </div>

  @error('cart')<div class="flash-msg bad" style="margin-bottom:16px">{{ $message }}</div>@enderror

  <form class="co-layout" id="coForm" method="POST" action="{{ route('checkout.store') }}" novalidate>
    @csrf

    {{-- ===================== LEFT ===================== --}}
    <div>
      <div class="co-card">
        <div class="co-title">Order Review <span class="num" id="itemNum">{{ $items->isNotEmpty() ? $items->sum('qty').' টি আইটেম' : '' }}</span></div>
        <div id="coItems">
          @forelse ($items as $i)
            <div class="co-item" data-k="{{ $i->key }}">
              <div class="thumb">@if ($i->image)<img src="{{ asset('storage/'.$i->image) }}" alt="" style="width:100%;height:100%;object-fit:cover;border-radius:10px">@else{{ $i->icon ?: '📦' }}@endif</div>
              <div class="info">
                <h4><a href="{{ route('product.show', $i->product) }}">{{ $i->name }}</a></h4>
                @if ($i->size || $i->color)<small style="display:block;color:var(--muted)">{{ collect([$i->size ? 'Size: '.$i->size : null, $i->color ? 'Color: '.$i->color : null])->filter()->implode(' · ') }}</small>@endif
                <span class="unit">৳{{ number_format($i->price) }} @if ($i->old)<s style="margin-left:4px">৳{{ number_format($i->old) }}</s>@endif @if ($i->campaign)<small style="color:var(--sale);font-weight:600">· {{ $i->campaign->title }}</small>@endif</span><br>
                <div class="qty">
                  <button type="button" data-a="dec" @disabled($i->qty <= 1) aria-label="Decrease">−</button>
                  <span>{{ $i->qty }}</span>
                  <button type="button" data-a="inc" @disabled($i->qty >= $i->max_qty) aria-label="Increase">+</button>
                </div>
              </div>
              <div class="line">৳{{ number_format($i->line) }}</div>
              <button type="button" class="rm" data-a="rm" aria-label="Remove"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 4h12M6 4V2h4v2M3.5 4l.8 10h7.4l.8-10"/></svg></button>
            </div>
          @empty
            <div class="co-empty"><div>🛒</div>আপনার কার্ট খালি<br><a href="{{ route('categories.index') }}" class="btn btn-primary">শপিং শুরু করুন →</a></div>
          @endforelse
        </div>
        @if ($items->isNotEmpty())
          {{-- aro product kinte: shop e giye add korle cart e jog hobe, abar checkout e fire ashbe --}}
          <a href="{{ route('categories.index') }}" class="co-more">＋ Add More Product <small>আরও পণ্য যোগ করুন</small></a>
        @endif
      </div>

      <div class="co-card">
        <div class="co-title">Shipping Address</div>

        <div class="f-group {{ $err('name') }}">
          <label for="sName">নাম <span style="color:var(--danger)">*</span></label>
          <input id="sName" name="name" type="text" value="{{ old('name') }}" placeholder="আপনার পুরো নাম" autocomplete="name">
          <div class="f-err">{{ $errors->first('name') ?: 'নাম লিখুন' }}</div>
        </div>

        <div class="f-row">
          <div class="f-group {{ $err('phone') }}">
            <label for="sPhone">ফোন নম্বর <span style="color:var(--danger)">*</span></label>
            <div class="phone-in"><span class="cc"><i class="flag"></i>+88</span><input id="sPhone" name="phone" type="tel" maxlength="11" value="{{ old('phone') }}" placeholder="01XXXXXXXXX" autocomplete="tel-national"></div>
            <div class="f-err">{{ $errors->first('phone') ?: 'সঠিক মোবাইল নম্বর দিন (01XXXXXXXXX)' }}</div>
          </div>
          <div class="f-group {{ $err('phone_alt') }}">
            <label for="sPhone2">বিকল্প ফোন নম্বর <small>(optional)</small></label>
            <div class="phone-in"><span class="cc">+88</span><input id="sPhone2" name="phone_alt" type="tel" maxlength="11" value="{{ old('phone_alt') }}" placeholder="01XXXXXXXXX"></div>
            <div class="f-err">{{ $errors->first('phone_alt') ?: 'সঠিক মোবাইল নম্বর দিন' }}</div>
          </div>
        </div>

        <div class="f-group">
          <label>ডেলিভারি এরিয়া সিলেক্ট করুন <span style="color:var(--danger)">*</span></label>
          <div class="radio-cards">
            <label class="r-card">
              <input type="radio" name="area" value="inside" @checked($area === 'inside')>
              <span><span style="font-size:24px">🏙️</span><span><b>ঢাকার মধ্যে</b><small>Inside Dhaka · ১-২ দিন</small><br><span class="fee">৳{{ number_format($fees['inside']) }}</span></span></span>
            </label>
            <label class="r-card">
              <input type="radio" name="area" value="outside" @checked($area === 'outside')>
              <span><span style="font-size:24px">🚚</span><span><b>ঢাকার বাইরে</b><small>Outside Dhaka · ৩-৫ দিন</small><br><span class="fee">৳{{ number_format($fees['outside']) }}</span></span></span>
            </label>
          </div>
        </div>

        <div class="f-group {{ $err('address') }}">
          <label for="sAddr">ঠিকানা <span style="color:var(--danger)">*</span></label>
          <textarea id="sAddr" name="address" placeholder="বাসা/ফ্ল্যাট নং, রোড, এলাকা, থানা, জেলা" style="min-height:90px" autocomplete="street-address">{{ old('address') }}</textarea>
          <div class="f-err">{{ $errors->first('address') ?: 'পূর্ণ ঠিকানা লিখুন (অন্তত ১০ অক্ষর)' }}</div>
        </div>
      </div>
    </div>

    {{-- ===================== RIGHT ===================== --}}
    <div class="co-side">
      <div class="co-card">
        <div class="co-title">Payment Method</div>
        <div class="radio-cards" id="payCards">
          @foreach (['cod' => ['💵', 'Cash on Delivery', 'পণ্য হাতে পেয়ে'], 'bkash' => ['bKash', 'bKash', 'Mobile wallet'], 'nagad' => ['Nagad', 'Nagad', 'Mobile wallet'], 'ssl' => ['SSL', 'SSLCommerz', 'Card / Net banking']] as $v => [$logo, $name, $sub])
            <label class="r-card">
              <input type="radio" name="payment_method" value="{{ $v }}" @checked($pay === $v)>
              <span><span class="pay-logo {{ $v }}">{{ $logo }}</span><span><b>{{ $name }}</b><small>{{ $sub }}</small></span></span>
            </label>
          @endforeach
        </div>
        <div class="pay-note" id="payNote"></div>
      </div>

      <div class="co-card">
        <div class="co-title">Order Summary</div>
        <div class="sum-row"><span>Total Products</span><b id="sumQty">{{ str_pad($items->sum('qty'), 2, '0', STR_PAD_LEFT) }}</b></div>
        <div class="sum-row"><span>Subtotal</span><b id="sumSub">৳{{ number_format($t['subtotal']) }}</b></div>
        <div class="sum-row"><span>ডেলিভারি চার্জ</span><b id="sumShip">৳{{ number_format($t['shipping']) }}</b></div>
        <div class="sum-row disc" id="discRow" @if (! $t['discount']) hidden @endif><span>Coupon (<span id="discCode">{{ $t['coupon'] }}</span>)</span><b id="sumDisc">-৳{{ number_format($t['discount']) }}</b></div>
        <div class="sum-row total"><span>TOTAL</span><b id="sumTotal">৳{{ number_format($t['total']) }}</b></div>
        <div class="save-tag" id="saveTag" @if (! $t['saved']) hidden @endif>🎉 এই অর্ডারে আপনি ৳{{ number_format($t['saved']) }} সাশ্রয় করছেন!</div>

        <div style="margin-top:18px">
          <label for="coupon" style="font-weight:600;font-size:14px">🎟️ কুপন কোড থাকলে ব্যবহার করুন</label>
          <div class="coupon">
            <input id="coupon" type="text" value="{{ $t['coupon'] }}" placeholder="Have coupon code? Apply here">
            <button type="button" id="applyCoupon">Apply</button>
          </div>
          <div class="coupon-msg {{ $t['coupon'] ? 'ok' : '' }}" id="couponMsg">
            @if ($t['coupon'])✓ "{{ $t['coupon'] }}" প্রয়োগ হয়েছে — {{ $t['coupon_label'] }} <a href="#" id="rmCoupon" style="color:var(--muted);margin-left:6px">Remove</a>@endif
          </div>
        </div>
      </div>

      <div class="co-card">
        <div class="co-title">Special Notes <small>(Optional)</small></div>
        <div class="f-group" style="margin-bottom:16px">
          <textarea id="sNote" name="note" placeholder="যেমন: বিকেল ৫টার পর ডেলিভারি দিন" style="min-height:80px">{{ old('note') }}</textarea>
        </div>
        <label class="agree {{ $errors->has('agree') ? 'error' : '' }}" id="agreeWrap">
          <input type="checkbox" name="agree" value="1" id="agree" @checked(old('agree', true))>
          <span>I agree to the <a href="{{ route('contact') }}">terms and conditions</a>, <a href="{{ route('contact') }}">return policy</a> & <a href="{{ route('contact') }}">privacy policy</a></span>
        </label>
        <button type="submit" class="btn btn-primary place-btn" id="placeBtn" @disabled($items->isEmpty())>প্রোডাক্টটি ক্রয় করুন</button>
        <div class="secure">🔒 আপনার তথ্য সম্পূর্ণ নিরাপদ</div>
        <a href="{{ route('home') }}" class="back-home">← Return to home</a>
      </div>
    </div>
  </form>
</div>

<div class="co-bar">
  <div><small>Total payable</small><b id="barTotal">৳{{ number_format($t['total']) }}</b></div>
  <button type="button" class="btn btn-primary" onclick="document.getElementById('placeBtn').click()">অর্ডার করুন →</button>
</div>

{{-- ================= SUCCESS MODAL (order place howar por) ================= --}}
@if ($placed)
<div class="modal show" id="okModal">
  <div class="modal-box">
    <div class="ok">✓</div>
    <h3>অর্ডার সফল হয়েছে! 🎉</h3>
    <p>ধন্যবাদ <b>{{ \Illuminate\Support\Str::before($placed->customer_name, ' ') ?: $placed->customer_name }}</b>, আপনার অর্ডারটি আমরা পেয়েছি। শীঘ্রই কল করে কনফার্ম করা হবে।</p>
    <div class="order-id">
      <div>Order ID<b>#{{ $placed->order_number }}</b></div>
      <div>Total<b>৳{{ number_format($placed->total) }}</b></div>
      <div>Payment<b>{{ $placed->payment_label }}</b></div>
      <div>Delivery<b>{{ $placed->area === 'inside' ? '১-২ দিন' : '৩-৫ দিন' }}</b></div>
    </div>
    <div class="btns">
      <a href="{{ route('track.show', $placed) }}" class="btn btn-outline">📦 Track Order</a>
      <a href="{{ route('home') }}" class="btn btn-primary">Continue Shopping</a>
    </div>
  </div>
</div>
@endif
@endsection

@push('scripts')
<script>
(() => {
  let totals = @json($totals);
  const fmt = n => "৳" + tk(Math.round(n));
  const area = () => $("input[name=area]:checked").value;
  const NOTES = {
    cod: "💵 পণ্য হাতে পেয়ে ডেলিভারি ম্যানকে টাকা দিন।",
    bkash: "📱 অর্ডার কনফার্ম হলে bKash পেমেন্টের নির্দেশনা পাঠানো হবে।",
    nagad: "📱 অর্ডার কনফার্ম হলে Nagad পেমেন্টের নির্দেশনা পাঠানো হবে।",
    ssl: "💳 Visa, Mastercard, Amex ও Net Banking — SSLCommerz-এর নিরাপদ গেটওয়েতে।",
  };

  function paint() {
    const t = totals[area()];
    $("#sumSub").textContent = fmt(t.subtotal);
    $("#sumShip").innerHTML = t.shipping < t.base_shipping ? `<s style="color:var(--muted);font-weight:400">${fmt(t.base_shipping)}</s> ${fmt(0)}` : fmt(t.shipping);
    $("#discRow").hidden = !t.discount;
    $("#discCode").textContent = t.coupon || "";
    $("#sumDisc").textContent = "-" + fmt(t.discount);
    $("#sumTotal").textContent = fmt(t.total);
    $("#barTotal").textContent = fmt(t.total);
    $("#saveTag").hidden = !t.saved;
    $("#saveTag").textContent = `🎉 এই অর্ডারে আপনি ${fmt(t.saved)} সাশ্রয় করছেন!`;
  }
  $$("input[name=area]").forEach(r => r.addEventListener("change", paint));
  const payNote = () => ($("#payNote").textContent = NOTES[$("input[name=payment_method]:checked").value]);
  $$("input[name=payment_method]").forEach(r => r.addEventListener("change", payNote));
  payNote();
  paint();

  // qty / remove -> server
  $("#coItems").addEventListener("click", async e => {
    const b = e.target.closest("button[data-a]");
    if (!b) return;
    const row = b.closest(".co-item"), key = row.dataset.k;
    const qty = +$(".qty span", row).textContent;
    try {
      const data = b.dataset.a === "rm"
        ? await api(`{{ url('cart') }}/${encodeURIComponent(key)}`, "DELETE")
        : await api(`{{ url('cart') }}/${encodeURIComponent(key)}`, "PATCH", { qty: qty + (b.dataset.a === "inc" ? 1 : -1) });
      totals = data.totals;
      paintCart(data.cart);
      const item = data.items.find(i => i.key === key);
      if (!item) {
        row.remove();
        toast("কার্ট থেকে সরানো হয়েছে");
        if (!data.items.length) location.reload();
      } else {
        $(".qty span", row).textContent = item.qty;
        $(".line", row).textContent = fmt(item.line);
        $('[data-a="dec"]', row).disabled = item.qty <= 1;
        $('[data-a="inc"]', row).disabled = item.qty >= item.max_qty;
      }
      $("#itemNum").textContent = data.cart.count ? `${data.cart.count} টি আইটেম` : "";
      $("#sumQty").textContent = String(data.cart.count).padStart(2, "0");
      paint();
    } catch (err) { toast("⚠️ " + err.message); }
  });

  // coupon
  async function applyCoupon() {
    const code = $("#coupon").value.trim(), msg = $("#couponMsg");
    try {
      const data = await api(@json(route('checkout.coupon')), "POST", { code });
      totals = data.totals;
      msg.className = "coupon-msg ok";
      msg.innerHTML = `✓ ${data.message} <a href="#" id="rmCoupon" style="color:var(--muted);margin-left:6px">Remove</a>`;
      paint();
    } catch (err) {
      msg.className = "coupon-msg bad";
      msg.textContent = "❌ " + err.message;
    }
  }
  $("#applyCoupon").onclick = applyCoupon;
  $("#coupon").addEventListener("keydown", e => { if (e.key === "Enter") { e.preventDefault(); applyCoupon(); } });
  $("#couponMsg").addEventListener("click", async e => {
    if (e.target.id !== "rmCoupon") return;
    e.preventDefault();
    const data = await api(@json(route('checkout.coupon.remove')), "DELETE");
    totals = data.totals;
    $("#coupon").value = ""; $("#couponMsg").textContent = "";
    paint();
  });

  // client-side validation (server-o validate kore)
  const phoneOk = v => /^01[3-9]\d{8}$/.test(v);
  const rules = { sName: v => v.trim().length >= 2, sPhone: phoneOk, sPhone2: v => !v.trim() || phoneOk(v.trim()), sAddr: v => v.trim().length >= 10 };
  const check = id => { const ok = rules[id]($("#" + id).value); $("#" + id).closest(".f-group").classList.toggle("error", !ok); return ok; };
  Object.keys(rules).forEach(id => $("#" + id).addEventListener("blur", () => check(id)));
  ["sPhone", "sPhone2"].forEach(id => $("#" + id).addEventListener("input", e => (e.target.value = e.target.value.replace(/\D/g, ""))));
  $("#coForm").addEventListener("submit", e => {
    const ok = Object.keys(rules).map(check).every(Boolean);
    const agreed = $("#agree").checked;
    $("#agreeWrap").classList.toggle("error", !agreed);
    if (!ok || !agreed) {
      e.preventDefault();
      const first = $(".f-group.error input, .f-group.error select, .f-group.error textarea");
      first?.scrollIntoView({ behavior: "smooth", block: "center" });
      toast(ok ? "⚠️ Terms & conditions-এ সম্মতি দিন" : "⚠️ লাল চিহ্নিত ঘরগুলো ঠিক করুন");
      return;
    }
    $("#placeBtn").disabled = true;
    $("#placeBtn").textContent = "অর্ডার প্রসেস হচ্ছে...";
  });
})();
</script>
@endpush