<%- include('../partials/header') -%>
  <link rel="stylesheet" href="/checkout/checkout.css">

  <div class="container">
    <div class="text-center">
      <h2>Checkout form</h2>
    </div>
    <form id="main_form" class="row needs-validation" target="_blank" style="justify-content: space-around;"
      method="POST" action="/checkout" onsubmit="return generate_quote(this)">
      <div class="col-md-6 order-md-2 mb-4 card part">
        <h4 class="d-flex justify-content-between align-items-center mb-3">
          <span class="text-muted">Your Cart</span>
          <span id="edit-cart" class="small" onclick="fill_cart()" data-bs-toggle="modal"
            data-bs-target="#cartModal">Modify</span>
        </h4>
        <ul id="products" class="list-group mb-3">
          <% full_products_cart.forEach(function(f_product){ %>
            <li class="list-group-item d-flex justify-content-between lh-condensed">
              <div class="col-sm-3 col-xs-3">
                <img class="img-responsive" src="<%=f_product.product.images[0].secure_url%>"
                  style="max-width: 100%;" />
              </div>
              <div>
                <h6 class="my-0">
                  <%=f_product.product.name%>
                </h6>
                <small class="text-muted">Quantity: <%=f_product.qty%></small>
              </div>
              <div>
                <span class="text-muted" style="white-space: nowrap;">
                  <%=f_product.product.price%> DH
                </span>
                <!--span class="text-muted" style="white-space: nowrap;">TTC: <%=f_product.product.TTC%> DH</span-->
              </div>
            </li>
            <input type="hidden" name="products[product]" value="<%=f_product.product._id%>">
            <input type="hidden" name="products[qty]" value="<%=f_product.qty%>">
            <% }); %>
              <li class="list-group-item d-flex justify-content-between">
                <span>SubTotal</span>
                <strong>
                  <%=total%> DH
                </strong>
              </li>
              <li class="list-group-item">
                <div class="col-md-3 mb-3" style="width: 100%;">
                  <label for="">Payment Method</label>
                  <br>
                  <div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input payment_radio" type="radio" name="payment_method"
                        id="payment_method1" value="Cash in delivery" required>
                      <label class="form-check-label" for="payment_method1">Cash in delivery</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input payment_radio" type="radio" name="payment_method"
                        id="payment_method3" value="Local pickup">
                      <label class="form-check-label" for="payment_method3">Local pickup</label>
                    </div>
                  </div>
                </div>
              </li>
              <li style="display: none !important;" id="shipping_li"
                class="list-group-item d-flex justify-content-between">
                <span>Shipping</span> <input type="hidden" id="shipping_hid" name="shipping" value="0">
                <strong id="shipping_fee">0 DH</strong>
              </li>
              <li style="display: none !important;" id="total_li"
                class="list-group-item d-flex justify-content-between">
                <span>Total</span><input type="hidden" id="initial_total" name="total" value="<%=total%>">
                <strong id="total"></strong>
              </li>
              <!--li style="display: none !important;" id="total_li" class="list-group-item d-flex justify-content-between">
            <span>Total TTC</span><input type="hidden" id="init_ttc" name="TTC" value="<%=TTC%>">
            <strong id="ttc"></strong>
          </li-->
        </ul>
        <div id="action_div">
          <button name="btn_quote" class="btn btn-primary btn-lg btn-block" type="submit">GENERATE QUOTE</button>
          <button name="btn_order" class="btn btn-primary btn-lg btn-block" type="submit">ORDER</button>
        </div>
      </div>
      <div class="col-md-6 order-md-1 card part">
        <h4 class="mb-3">Billing Adress:</h4>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="firstName">First Name</label>
            <input name="fname" type="text" class="form-control" id="firstName" placeholder=""
              value="<%=currentUser?.first_name%>" required>
            <div class="invalid-feedback">
              Valid first name is required.
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <label for="lastName">Last Name</label>
            <input name="lname" type="text" class="form-control" id="lastName" placeholder=""
              value="<%=currentUser?.last_name%>" required>
            <div class="invalid-feedback">
              Valid last name is required.
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="you@example.com"
              value="<%=currentUser?.email%>" required>
            <div class="invalid-feedback">
              Please enter a valid email address for shipping updates.
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <label for="phone">Phone number</label>
            <input type="tel" class="form-control" id="phone" name="phone" placeholder="06..."
              value="<%=currentUser?.phone%>" required>
            <div class="invalid-feedback">
              Please enter a valid phone number for updates.
            </div>
          </div>
        </div>

        <div class="mb-3">
          <label for="address">Adress</label>
          <input name="adress" type="text" class="form-control" id="adress" placeholder="1234 Main St"
            value="<%=currentUser?.adress%>" required>
          <div class="invalid-feedback">
            Please enter your shipping address.
          </div>
        </div>

        <div class="mb-3">
          <label for="address2">Adress 2 <span class="text-muted">(optionnel)</span></label>
          <input type="text" name="adress2" class="form-control" id="address2" placeholder="Apartment or suite">
        </div>

        <div class="row">
          <div class="col-md-5 mb-3">
            <label for="country">Country</label>
            <input name="country" type="text" class="form-control" id="country" placeholder=""
              value="<%=currentUser?.country%>" required>
            <div class="invalid-feedback">
              Please select a valid country.
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <label for="state">City</label>
            <input name="city" type="text" class="form-control" id="city" placeholder="" value="<%=currentUser?.city%>"
              required>
            <div class="invalid-feedback">
              Please provide a valid state.
            </div>
          </div>
          <div class="col-md-3 mb-3">
            <label for="zip">Zip code</label>
            <input name="zip" type="text" class="form-control" id="zip" placeholder="" value="<%=currentUser?.zip%>"
              required>
            <div class="invalid-feedback">
              Zip code required.
            </div>
          </div>
        </div>
        <!--hr class="mb-4">
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="same-address">
            <label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
          </div>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="save-info">
            <label class="custom-control-label" for="save-info">Save this information for next time</label>
          </div>
          <hr class="mb-4">
  
          <h4 class="mb-3">Payment</h4>
  
          <div class="d-block my-3">
            <div class="custom-control custom-radio">
              <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
              <label class="custom-control-label" for="credit">Credit card</label>
            </div>
            <div class="custom-control custom-radio">
              <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
              <label class="custom-control-label" for="debit">Debit card</label>
            </div>
            <div class="custom-control custom-radio">
              <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
              <label class="custom-control-label" for="paypal">PayPal</label>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="cc-name">Name on card</label>
              <input type="text" class="form-control" id="cc-name" placeholder="" required>
              <small class="text-muted">Full name as displayed on card</small>
              <div class="invalid-feedback">
                Name on card is required
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <label for="cc-number">Credit card number</label>
              <input type="text" class="form-control" id="cc-number" placeholder="" required>
              <div class="invalid-feedback">
                Credit card number is required
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3 mb-3">
              <label for="cc-expiration">Expiration</label>
              <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
              <div class="invalid-feedback">
                Expiration date required
              </div>
            </div>
            <div class="col-md-3 mb-3">
              <label for="cc-cvv">CVV</label>
              <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
              <div class="invalid-feedback">
                Security code required
              </div>
            </div>
          </div>
          <hr class="mb-4"-->
        <% if(currentUser){ %>
          <div class="row">
            <span id="hide-shipping" style="cursor: pointer;text-decoration: underline;"
              onclick="$('#shipping_div').toggle('slow');">
              Ship to different adress</span>
          </div>
          <% } %>
            <div id="shipping_div">
              <h4 id="ship_title" class="mb-3">Shipping Adress:</h4>
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="firstName">First Name</label>
                  <input name="billing_fname" type="text" class="form-control" id="billing_fname" placeholder=""
                    value="<%=currentUser?.first_name%>">
                  <div class="invalid-feedback">
                    Valid first name is required.
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="lastName">Last Name</label>
                  <input name="billing_lname" type="text" class="form-control" id="billing_lname" placeholder=""
                    value="<%=currentUser?.last_name%>">
                  <div class="invalid-feedback">
                    Valid last name is required.
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="email">Email</label>
                  <input type="email" class="form-control" id="billing_email" name="billing_email"
                    placeholder="you@example.com" value="<%=currentUser?.email%>">
                  <div class="invalid-feedback">
                    Please enter a valid email address for shipping updates.
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="phone">Phone number</label>
                  <input type="tel" class="form-control" id="billing_phone" name="billing_phone" placeholder="06..."
                    value="<%=currentUser?.phone%>">
                  <div class="invalid-feedback">
                    Please enter a valid phone number for updates.
                  </div>
                </div>
              </div>

              <div class="mb-3">
                <label for="address">Adress</label>
                <input name="billing_adress" type="text" class="form-control" id="billing_adress"
                  placeholder="1234 Main St" value="<%=currentUser?.adress%>">
                <div class="invalid-feedback">
                  Please enter your shipping address.
                </div>
              </div>

              <div class="mb-3">
                <label for="address2">Adress 2 <span class="text-muted">(optionnel)</span></label>
                <input type="text" name="billing_adress2" class="form-control" id="billing_adress2"
                  placeholder="Apartment or suite">
              </div>

              <div class="row">
                <div class="col-md-5 mb-3">
                  <label for="country">Country</label>
                  <input name="billing_country" type="text" class="form-control" id="billing_country" placeholder=""
                    value="<%=currentUser?.country%>">
                  <div class="invalid-feedback">
                    Please select a valid country.
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="state">City</label>
                  <input name="billing_city" type="text" class="form-control" id="billing_city" placeholder=""
                    value="<%=currentUser?.city%>">
                  <div class="invalid-feedback">
                    Please provide a valid state.
                  </div>
                </div>
                <div class="col-md-3 mb-3">
                  <label for="zip">Zip code</label>
                  <input name="billing_zip" type="text" class="form-control" id="billing_zip" placeholder=""
                    value="<%=currentUser?.zip%>">
                  <div class="invalid-feedback">
                    Zip code required.
                  </div>
                </div>
              </div>
            </div>
      </div>

    </form>

  </div>

  <script src="/checkout/checkout.js"></script>
  <%- include('../partials/footer') -%>