{% extends 'base.html' %}
{% block content %}

<section class="hero-panel p-4 p-lg-5 mb-4 text-center text-lg-start">
  <h1 class="display-6 fw-semibold mb-2">Store</h1>
  <p class="mb-0">Browse the latest inventory and add products to your cart.</p>
</section>

<div class="row g-4 align-items-start">
  <div class="col-12 col-lg-3">
    <div class="content-card p-3 store-cart">
      <h2 class="h5">Shopping Cart</h2>
      <div id="cart" class="pt-2">
        <!-- Javascript renders the shopping cart -->
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-9">
    <div class="content-card p-4">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <h2 class="h4 mb-0">Available Products</h2>
        <span class="badge text-bg-light border">Live Inventory</span>
      </div>

      <div id="items" class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
        <!-- Items populate here -->
      </div>
    </div>
  </div>
</div>

{% if session.username %}
<div id="loggedIn" data-is-user="true"></div>
{% else %}
<div id="loggedIn" data-is-user="false"></div>
{% endif %}

<div id="getItemsSrc" data-link="{{ url_for('order.get_items') }}"></div>
<div id="placeOrderSrc" data-link="{{ url_for('order.place_order') }}"></div>
<div id="getAddressSrc" data-link="{{ url_for('auth.get_address') }}"></div>
<div id="getPaymentSrc" data-link="{{ url_for('order.get_payment') }}"></div>

<div class="modal fade" id="confirmOrderModal" tabindex="-1" aria-labelledby="confirmOrderModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content content-card border-0">
      <div class="modal-header border-secondary-subtle">
        <h2 class="modal-title h5" id="confirmOrderModalLabel">Confirm Your Order</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted mb-3">Review your cart items before placing this order.</p>
        <div id="checkoutItems" class="d-grid gap-2"></div>
      </div>
      <div class="modal-footer border-secondary-subtle d-flex justify-content-between align-items-center">
        <div id="checkoutTotal" class="fw-semibold"></div>
        <div class="d-flex gap-2">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Back</button>
          <button type="button" class="btn btn-primary" id="confirmOrderBtn">Confirm Order</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="{{ url_for('static', filename='js/store.js') }}"></script>
{% endblock %}