{% extends 'site/base.html' %}
{% load static %}

{% block title %}

{% endblock title %}


{% block css %}
<link rel="stylesheet" href="{% static 'css/checkout.css' %}">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">



{% endblock css %}


{% block content %}


<section class="inner-section sm-banner single-banner"
  style="background: url('/static/images/single-banner.jpg') no-repeat center;">
  <div class="container">
    <h2>checkout</h2>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item"><a href="shop-4column.html">shop</a></li>
      <li class="breadcrumb-item active" aria-current="page">checkout</li>
    </ol>
  </div>
</section>
<section class="inner-section checkout-part">
  <div class="container">
    <div class="row" x-data="checkoutComponent" @call-update-shop-cart.window="updateCartFromLocalStorage()">
      <form @submit.prevent="submitCheckOut" id="checkoutForm">

        {% if not request.user.is_authenticated %}
        <div class="col-lg-12">
          <div class="alert-info">
            <p>Returning customer? <a href="{% url 'login' %}">Click here to login</a></p>
          </div>
        </div>
        {% endif %}
        <div class="col-lg-12 cart-table-all">
          <div class="account-card">
            <div class="account-title">
              <h4>Your order</h4>
            </div>



            <div>
              <template x-if="cartItems.length > 0">
                <div class="account-content">
                  <div class="table-scroll">
                    <table class="table-list">
                      <thead>
                        <tr>
                          <th scope="col">Product</th>
                          <th scope="col">Name</th>
                          <th scope="col">Price</th>
                          <th scope="col">quantity</th>
                          <th scope="col">Amount</th>
                          <th scope="col">action</th>
                        </tr>
                      </thead>
                      <tbody>
                        <template x-for="(item, index) in cartItems" :key="index">
                          <tr>
                            <td class="table-image"><img x-bind:src="item.img" alt="product"></td>
                            <td class="table-name">
                              <h6 x-text="item.title"></h6>
                            </td>
                            <td class="table-price">
                              <h6 x-text="item.price"></h6>
                            </td>

                            <td class="table-quantity">

                              <div class="cart-action-group">
                                <div class="product-action">
                                  <button type="button" class="action-minus" @click="decrementQuantity(index)"
                                    title="Quantity Minus">
                                    <i class="icofont-minus"></i></button>

                                  <input class="action-input" title="Quantity Number" type="text" name="quantity"
                                    :value="item.quantity" readonly />

                                  <button type="button" class="action-plus" @click="incrementQuantity(index)"
                                    title="Quantity Plus">
                                    <i class="icofont-plus"></i>
                                  </button>
                                </div>
                              </div>

                            </td>
                            <td>
                              <h6 x-text="'৳ ' + (item.quantity * item.price).toFixed(2)"></h6>
                            </td>

                            <td class="table-action">
                             
                              <a class="trash" title="Remove" @click="removeItem(index)">
                                <i class="icofont-trash"></i>
                              </a>
                            </td>
                          </tr>
                        </template>
                      </tbody>
                    </table>
                  </div>

                  <div class="checkout-charge">
                    <ul>
                      <li><span>Sub total</span><span x-text="'৳ ' + subTotal"></span></li>
                      <li><span>Total Items</span><span x-text="totalItems"></span></li>
                      <li><span>Discount</span><span x-text="discount"></span></li>
                      <li><span>Total Amount</span><span x-text="'৳ ' + (totalAmount).toFixed(2)"></span></li>
                    </ul>
                  </div>
                </div>
              </template>
              <template x-if="cartItems.length === 0">
                <p>No items in the cart</p>
              </template>

            </div>







          </div>
        </div>


        <div class="col-lg-12 delivery-info-all">
          <div class="account-card">
            <div class="account-title">
              <h4>delivery address</h4><button type="button" data-bs-toggle="modal" data-bs-target="#address-add">add
                address</button>
            </div>
            <div class="account-content">
              <div class="row">
                <div class="col-md-12 col-lg-12 alert fade show">
                  <div>

                    {% csrf_token %}
                    <div class="row mb-3">
                      <label for="full_name" class="col-sm-2 col-form-label" >Full Name <br> <strong> আপনার নাম :</strong></label>
                      <div class="col-sm-10">
                        <input x-model="formData.full_name" type="text" class="form-control" id="full_name"
                          name="full_name" placeholder="আপনার নাম সম্পূর্ণ  লিখুন">
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label for="mobile_number" class="col-sm-2 col-form-label">Mobile Number <br> <strong>আপনার মোবাইল</strong></label>
                      <div class="col-sm-10">
                        <input x-model="formData.mobile_number" type="text" class="form-control" id="mobile_number"
                          name="mobile_number" placeholder="আপনার মোবাইল নম্বর লিখুন" >
                      </div>
                    </div>
                    
                    <div class="row mb-3">
                      <label for="city" class="col-sm-2 col-form-label">City/Municipality <br> <strong>আপনার শহর এর নাম</strong></label>
                      <div class="col-sm-10">
                        <input x-model="formData.city" type="text" class="form-control" id="city" name="city" placeholder="আপনার শহর এর নাম লিখুন" >
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label for="area" class="col-sm-2 col-form-label">Area <br> <strong>আপনার এলাকার নাম</strong></label>
                      <div class="col-sm-10">
                        <input x-model="formData.area" type="text" class="form-control" id="area" name="area" placeholder="আপনার এলাকার নাম লিখুন" >
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label for="address" class="col-sm-2 col-form-label">Delivery Address <br> <strong>ডেলিভারি ঠিকানা</strong></label>
                      <div class="col-sm-10">
                        <textarea x-model="formData.delivery_address" class="form-control" id="address" name="delivery_address" 
                          rows="4" placeholder="আপনার জেলা ,উপজেলা /থানা, ইউনিয়ন, রাস্তা নম্বর ,বাড়ি নম্বর  লিখুন"></textarea>
                      </div>
                    </div>
                    <fieldset class="row mb-3">
                      <legend class="col-form-label col-sm-2 pt-0">Delivery Option</legend>
                      <div class="col-sm-10">
                        <div class="form-check">
                          <input x-model="formData.delivery_option" class="form-check-input" type="radio"
                            name="delivery_option" id="cash_on_delivery" value="cash_in_delivery" checked>
                          <label class="form-check-label" for="cash_on_delivery">Cash in Delivery</label>
                        </div>
                        <div class="form-check">
                          <input x-model="formData.delivery_option" class="form-check-input" type="radio"
                            name="delivery_option" id="advance_payment" value="advance_payment">
                          <label class="form-check-label" for="advance_payment">Advance Payment</label>
                        </div>
                      </div>
                    </fieldset>
                    <div class="row mb-3">
                      <div class="col-sm-10 offset-sm-2">
                        <div class="form-check">
                          <input x-model="formData.gridCheck1" class="form-check-input" type="checkbox" id="gridCheck1"
                            >
                          <label class="form-check-label" for="gridCheck1">I agree to the terms and conditions</label>
                        </div>
                      </div>
                    </div>




                  </div>



                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="checkout-proced my-2">
          <div class="account-card  py-3">
            <button type="submit" class="btn btn-inline">Confirm Order / Proceed to Payment</a>
          </div>
        </div>
      </form>

    </div>
  </div>
</section>


<section class="intro-part">
  <div class="container">
    <div class="row intro-content">
      <div class="col-sm-6 col-lg-3">
        <div class="intro-wrap">
          <div class="intro-icon"><i class="fas fa-truck"></i></div>
          <div class="intro-content">
            <h5>free home delivery</h5>
            <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="intro-wrap">
          <div class="intro-icon"><i class="fas fa-sync-alt"></i></div>
          <div class="intro-content">
            <h5>instant return policy</h5>
            <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="intro-wrap">
          <div class="intro-icon"><i class="fas fa-headset"></i></div>
          <div class="intro-content">
            <h5>quick support system</h5>
            <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="intro-wrap">
          <div class="intro-icon"><i class="fas fa-lock"></i></div>
          <div class="intro-content">
            <h5>secure payment way</h5>
            <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


{% include 'site/includes/newsletter.html' %}


{% endblock content %}



{% block js %}
{% include 'site/page/order/js_files/checkout_js.html' %}
{% endblock js %}