@extends('layouts.base')
@section('title','Arsh LabKit Mart | Lab Kits & Diagnostic Supplies')
@section('content')
<header class="store-header">
  <a class="brand" href="{{ route('home') }}"><span class="brand-flask">⚗</span><span><strong><em>Arsh</em> LabKit Mart</strong><small>Lab Kits &amp; Diagnostic Supplies</small></span></a>
  <nav class="store-nav"><a class="active" href="#home">⌂ Home</a><a href="#products">♧ Products</a><a href="#inquiry">♧ Inquiry</a><a href="#about">♧ About Us</a><a href="#contact">♧ Contact</a></nav>
  <a class="icon-link" href="#products" aria-label="Search">⌕</a><a class="icon-link cart-link" href="#products" aria-label="Cart">🛒 <b id="cart-count">0</b></a>@if(!empty($whatsapp))<a class="whatsapp-button" target="_blank" rel="noopener" href="https://wa.me/{{ preg_replace('/\\D+\\/', '', $whatsapp) }}">◉ WhatsApp</a>@else<a class="whatsapp-button" href="#contact" title="WhatsApp number will be available soon">◉ Contact Us</a>@endif
</header>
<main class="store-grid" id="home">
  <section class="hero-panel">
    <div class="hero-copy"><h1>Lab Kits &amp;<br>Diagnostic Supplies</h1><p>High Quality | Reliable | Best Price</p><a class="shop-button" href="#products">Shop Now <span>→</span></a></div>
    <div class="hero-art" aria-hidden="true"><div class="tube tube-a"></div><div class="tube tube-b"></div><div class="box-art">Vacutainer<small>Blood Collection Tube</small></div><div class="glove-art">✦</div></div>
  </section>
  <section class="products-panel" id="products"><div class="section-head"><h2>Our Products</h2><a href="#products">View All →</a></div><div class="product-grid">
    @forelse($products as $product)
      <article class="product-card"><div class="product-image">{{ $product->image_path ? '' : '🧪' }}@if($product->image_path)<img src="{{ asset('storage/'.$product->image_path) }}" alt="{{ $product->name }}">@endif</div><h3>{{ $product->name }}</h3><p class="price">₹ {{ number_format($product->selling_price,2) }} <small>/ {{ $product->category ?: 'Unit' }}</small></p><button class="add-cart" type="button" data-id="{{ $product->id }}" data-product="{{ $product->name }}" data-price="{{ $product->selling_price }}">🛒 Add to Cart</button></article>
    @empty
      @foreach([['Blood Collection Tube (3 ml)','8.50','🧪'],['Vacutainer Tube (5 ml)','11.00','🧫'],['Needle & Syringe (5 ml)','6.00','💉'],['Urine Container (60 ml)','7.00','🥼'],['Gloves (Nitrile) (100 Pcs)','220.00','🧤'],['Microscope Slides (50 Pcs)','110.00','🔬']] as $p)
      <article class="product-card"><div class="product-image">{{ $p[2] }}</div><h3>{{ $p[0] }}</h3><p class="price">₹ {{ $p[1] }} <small>/ Pc</small></p><button class="add-cart" type="button" data-id="" data-product="{{ $p[0] }}" data-price="{{ $p[1] }}">🛒 Add to Cart</button></article>
      @endforeach
    @endforelse
  </div></section>
  <aside class="inquiry-panel" id="inquiry"><div class="inquiry-heading">▤ &nbsp; Lab Inquiry Form</div>
    @if($errors->any())<div class="form-errors">Please check the required fields. @foreach($errors->all() as $error)<div>{{ $error }}</div>@endforeach</div>@endif
    <form method="post" action="{{ route('inquiry.whatsapp') }}">@csrf
      <div class="form-two"><label>Full Name <b>*</b><input name="full_name" required placeholder="Enter your name" value="{{ old('full_name') }}"></label><label>Mobile Number <b>*</b><input name="mobile" required inputmode="tel" pattern="[0-9+() -]{8,20}" placeholder="Enter 10 digit number" value="{{ old('mobile') }}"></label></div>
      <label>Lab Name <b>*</b><input name="lab_name" required placeholder="Enter lab name" value="{{ old('lab_name') }}"></label>
      <div class="form-two"><label>City <b>*</b><input name="city" required placeholder="Enter city" value="{{ old('city') }}"></label><label>State <b>*</b><select name="state" required><option value="">Select State</option>@foreach(['Andhra Pradesh','Bihar','Delhi','Gujarat','Haryana','Jharkhand','Karnataka','Madhya Pradesh','Maharashtra','Rajasthan','Tamil Nadu','Uttar Pradesh','West Bengal','Other'] as $state)<option @selected(old('state')===$state)>{{ $state }}</option>@endforeach</select></label></div>
      <label>Select Products (Multiple)<select name="products[]" multiple class="multi-products">@foreach($products as $product)<option value="{{ $product->name }}">{{ $product->name }}</option>@endforeach @if($products->isEmpty())@foreach(['Blood Collection Tube (3 ml)','Vacutainer Tube (5 ml)','Needle & Syringe (5 ml)','Urine Container (60 ml)','Gloves (Nitrile)','Microscope Slides'] as $p)<option>{{ $p }}</option>@endforeach @endif</select><small>Use Ctrl (computer) or tap to select multiple items.</small></label>
      <label>Message / Requirement <b>*</b><select name="message_type" required><option value="">Select Message (8–10 Options)</option>@foreach(['Price Enquiry','Bulk Order','Product Availability','Request Quotation','Distributor Enquiry','Product Details','Delivery Information','Sample Request','Payment Enquiry','Other Requirement'] as $msg)<option @selected(old('message_type')===$msg)>{{ $msg }}</option>@endforeach</select></label>
      <label>Additional Message<textarea name="message" rows="2" placeholder="Optional details">{{ old('message') }}</textarea></label>
      <button class="submit-inquiry" type="submit">◉ Submit Inquiry on WhatsApp</button>
    </form>
  </aside>
  <section class="benefits" id="about"><div><span>♙</span><b>Quality<br>Assured</b></div><div><span>🚚</span><b>Fast<br>Delivery</b></div><div><span>₹</span><b>Best<br>Price</b></div><div><span>♢</span><b>Secure<br>Purchase</b></div><div><span>◉</span><b>Customer<br>Support</b></div></section>
</main>
<div class="cart-modal" id="cart-modal" hidden><div class="cart-modal-card"><button type="button" class="cart-modal-close" id="close-cart-modal" aria-label="Close">×</button><h2>Complete Your Order</h2><p>Order details will be saved, then WhatsApp will open. You must press Send in WhatsApp.</p><div id="cart-modal-items" class="cart-modal-items"></div><form method="post" action="{{ route('order.whatsapp') }}" id="cart-order-form">@csrf<input type="hidden" name="items_json" id="cart-items-json"><label>Full Name *<input name="customer_name" required maxlength="120"></label><label>Mobile Number *<input name="mobile" required inputmode="tel" pattern="[0-9+() -]{8,20}"></label><label>Address<textarea name="address" rows="2"></textarea></label><div class="form-two"><label>City<input name="city"></label><label>State<input name="state"></label></div><button type="submit" class="submit-inquiry">Save Order &amp; Continue to WhatsApp</button></form></div></div>
<footer class="store-footer" id="contact">Arsh LabKit Mart · Lab Kits &amp; Diagnostic Supplies</footer>
@endsection