@extends(auth()->check() ? 'user.layout' : 'user.public.layout')

@section('title','অর্ডার করুন')

@section('content')
<style>
:root{
  --orange:#ff5a00;
  --orange2:#ff7a00;
  --red:#ff303c;
  --bg:#f8fafc;
  --text:#111827;
  --muted:#64748b;
  --border:#e5e7eb;
  --footer-space:120px;
}

.order-page{
  background:var(--bg);
  min-height:100vh;
  padding:12px 12px var(--footer-space);
  color:var(--text);
}

.top-card,
.order-card,
.calc-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
}

.product-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.product-title{
  flex:1;
  font-size:17px;
  line-height:1.35;
  font-weight:900;
  color:var(--text);
}

.price-side{
  text-align:right;
  color:var(--orange);
  font-weight:900;
  min-width:68px;
}

.price-side small{
  display:block;
  font-size:11px;
}

.price-side strong{
  font-size:21px;
}

.product-row{
  display:flex;
  gap:12px;
  align-items:center;
}

.product-img{
  width:78px;
  height:78px;
  border-radius:12px;
  object-fit:cover;
  background:#fff;
  border:1px solid var(--border);
}

.qty-area{
  flex:1;
  min-width:0;
  border-left:1px solid var(--border);
  padding-left:12px;
}

.qty-label{
  font-size:14px;
  font-weight:900;
  margin-bottom:8px;
}

.qty-label span{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.qty-box{
  width:150px;
  max-width:100%;
  height:42px;
  display:grid;
  grid-template-columns:40px 1fr 40px;
  border:1px solid var(--border);
  border-radius:9px;
  overflow:hidden;
  background:#fff;
}

.qty-btn{
  border:0;
  background:#fff5ed;
  color:var(--orange);
  font-size:21px;
  font-weight:900;
}

.qty-input{
  width:100%;
  border:0;
  outline:0;
  text-align:center;
  color:#fff;
  background:var(--orange);
  font-size:17px;
  font-weight:900;
}

.card-title{
  font-size:15px;
  font-weight:900;
  color:var(--text);
  margin-bottom:10px;
}

.option-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.option-radio input{
  display:none;
}

.option-radio span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border:1px solid #ffd6bf;
  background:#fff7f2;
  color:var(--text);
  border-radius:8px;
  padding:7px 11px;
  font-size:12px;
  font-weight:900;
}

.option-radio input:checked + span{
  background:var(--orange);
  color:#fff;
  border-color:var(--orange);
}

.reseller-box{
  background:#fff5ed;
  border:1px solid #ffd6bf;
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
}

.reseller-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.small-label{
  font-size:13px;
  font-weight:900;
  margin-bottom:7px;
}

.small-label span{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}

.sell-input,
.income-box{
  width:100%;
  height:44px;
  border-radius:9px;
  font-size:16px;
  font-weight:900;
  text-align:center;
}

.sell-input{
  border:1px solid var(--border);
  background:#fff;
  outline:0;
  color:var(--text);
}

.income-box{
  background:var(--orange);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.help-text{
  margin-top:8px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  line-height:1.5;
}

.calc-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid #f1f5f9;
}

.calc-row:last-child{
  border-bottom:0;
}

.calc-left{
  font-size:14px;
  font-weight:900;
  color:var(--text);
}

.calc-left small{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  margin-top:2px;
}

.calc-val{
  font-size:17px;
  font-weight:900;
  color:var(--text);
  white-space:nowrap;
}

.calc-val.orange{
  color:var(--orange);
}

.file-input{
  width:100%;
  min-height:42px;
  border:1px solid var(--border);
  border-radius:9px;
  padding:9px;
  background:#fff;
  font-size:12px;
  font-weight:800;
}

.next-bar{
  margin-top:14px;
}

.next-btn{
  width:100%;
  height:46px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,var(--orange2),var(--red));
  color:#fff;
  font-size:15px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:10px;
}

@media(max-width:420px){
  .product-title{font-size:16px}
  .product-img{width:74px;height:74px}
  .qty-box{width:140px;height:40px;grid-template-columns:38px 1fr 38px}
  .reseller-grid{gap:7px}
  .sell-input,.income-box{height:42px;font-size:15px}
}
</style>

@php
  $isReseller = auth()->check() && (int)(auth()->user()->is_active ?? 0) === 1;
  $productImage = $product->images->first()?->image_url ?? asset('images/default-product.png');
@endphp

<div class="order-page">

  <form method="POST" action="{{ route('user.order.start.store', $product->slug) }}" enctype="multipart/form-data">
    @csrf

    <div class="top-card">
      <div class="product-head">
        <div class="product-title">{{ $product->name }}</div>
        <div class="price-side">
          <small>৳</small>
          <strong>{{ number_format($display['final'],0) }}</strong>
        </div>
      </div>

      <div class="product-row">
        <img class="product-img" src="{{ $productImage }}" alt="{{ $product->name }}">

        <div class="qty-area">
          <div class="qty-label">
            পরিমাণ <span>(স্টক: {{ $product->stock }})</span>
          </div>

          <div class="qty-box">
            <button type="button" class="qty-btn" onclick="changeQty(-1)">−</button>
            <input id="qty" name="quantity" type="number" min="1" max="{{ max(1,$product->stock) }}" value="1" class="qty-input" oninput="calcTotal()">
            <button type="button" class="qty-btn" onclick="changeQty(1)">+</button>
          </div>
        </div>
      </div>
    </div>

    @if($product->has_size && is_array($product->sizes) && count($product->sizes))
      <div class="order-card">
        <div class="card-title">সাইজ নির্বাচন করুন</div>
        <div class="option-list">
          @foreach($product->sizes as $size)
            <label class="option-radio">
              <input type="radio" name="size" value="{{ $size }}" required>
              <span>{{ $size }}</span>
            </label>
          @endforeach
        </div>
      </div>
    @endif

    @if($product->has_color && is_array($product->colors) && count($product->colors))
      <div class="order-card">
        <div class="card-title">কালার নির্বাচন করুন</div>
        <div class="option-list">
          @foreach($product->colors as $color)
            <label class="option-radio">
              <input type="radio" name="color" value="{{ $color }}" required>
              <span>{{ $color }}</span>
            </label>
          @endforeach
        </div>
      </div>
    @endif

    @if($isReseller)
      <div class="reseller-box">
        <div class="reseller-grid">
          <div>
            <div class="small-label">
              বিক্রয় মূল্য
              <span>প্রতি আইটেম</span>
            </div>

            <input
              id="sellPrice"
              name="reseller_sell_price"
              type="number"
              step="0.01"
              min="{{ $display['final'] }}"
              max="{{ $product->reseller_max_price }}"
              value="{{ $product->reseller_max_price }}"
              class="sell-input"
              oninput="calcTotal()"
              required
            >
          </div>

          <div>
            <div class="small-label">
              আপনার আয়
              <span>প্রতি আইটেম</span>
            </div>

            <div class="income-box">
              ৳<span id="unitIncomeText">0</span>
            </div>
          </div>
        </div>

        <div class="help-text">
          সর্বনিম্ন ৳{{ number_format($display['final'],0) }} — সর্বোচ্চ ৳{{ number_format($product->reseller_max_price,0) }}
        </div>
      </div>
    @endif

    <div class="calc-card">
      <div class="calc-row">
        <div class="calc-left">
          প্রোডাক্ট মূল্য
          <small>৳{{ number_format($display['final'],0) }} × <span class="qtySmall">1</span></small>
        </div>
        <div class="calc-val">৳<span id="productTotalText">0</span></div>
      </div>

      @if($isReseller)
        <div class="calc-row">
          <div class="calc-left">
            আপনার আয়
            <small>৳<span id="unitIncomeSmall">0</span> × <span class="qtySmall">1</span></small>
          </div>
          <div class="calc-val orange">৳<span id="incomeText">0</span></div>
        </div>
      @endif

      <div class="calc-row">
        <div class="calc-left">
          সর্বমোট মূল্য
          <small>৳<span id="unitSellSmall">0</span> × <span class="qtySmall">1</span></small>
        </div>
        <div class="calc-val orange">৳<span id="subtotalText">0</span></div>
      </div>

      <div class="help-text">ডেলিভারি চার্জ পরের ধাপে জেলা অনুযায়ী যোগ হবে।</div>
    </div>

    <div class="order-card">
      <div class="card-title">রেফারেন্স ছবি, চাইলে দিন</div>
      <input type="file" name="reference_images[]" multiple accept="image/*" class="file-input">
      <div class="help-text">সর্বোচ্চ ৩টি ছবি দিতে পারবেন।</div>
    </div>

    <div class="next-bar">
      <button type="submit" class="next-btn">
        পরবর্তী ধাপ <i class="fa-solid fa-arrow-right"></i>
      </button>
    </div>

  </form>
</div>

<script>
const basePrice = {{ (float)$display['final'] }};
const isReseller = {{ $isReseller ? 'true' : 'false' }};

function money(n){
  return Math.round(Number(n || 0));
}

function changeQty(step){
  const qty = document.getElementById('qty');
  let val = parseInt(qty.value || 1) + step;
  val = Math.max(1, Math.min(val, parseInt(qty.max)));
  qty.value = val;
  calcTotal();
}

function calcTotal(){
  const qtyEl = document.getElementById('qty');
  let qty = parseInt(qtyEl.value || 1);
  const max = parseInt(qtyEl.max || 1);

  qty = Math.max(1, Math.min(qty, max));
  qtyEl.value = qty;

  let sellUnit = basePrice;

  if(isReseller){
    const sellInput = document.getElementById('sellPrice');
    sellUnit = parseFloat(sellInput.value || basePrice);
  }

  const unitIncome = isReseller ? Math.max(0, sellUnit - basePrice) : 0;

  document.getElementById('productTotalText').innerText = money(basePrice * qty);
  document.getElementById('subtotalText').innerText = money(sellUnit * qty);
  document.getElementById('unitSellSmall').innerText = money(sellUnit);

  document.querySelectorAll('.qtySmall').forEach(el => el.innerText = qty);

  const unitIncomeText = document.getElementById('unitIncomeText');
  if(unitIncomeText) unitIncomeText.innerText = money(unitIncome);

  const incomeText = document.getElementById('incomeText');
  if(incomeText) incomeText.innerText = money(unitIncome * qty);

  const unitIncomeSmall = document.getElementById('unitIncomeSmall');
  if(unitIncomeSmall) unitIncomeSmall.innerText = money(unitIncome);
}

calcTotal();
</script>
@endsection