@extends('frontend.layouts.products-app')

@section('title')
Check Out
@endsection

@section('seo')

@endsection

@section('content')

<link rel="stylesheet" href="{{ asset('css/checkOut.css')}}">

<div class="container mt-5">
  <div class="mt-2">
    <h1>Checkout</h1>
  </div>
  <div class="mt-5">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="check-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Shipping</button>
      </li>&emsp;
      <li class="nav-item" role="presentation">
        <button class="check-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Payment & Review</button>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
        <div class="mt-5">
          <div class="row gy-5">
            <div class="col-md">
              <h1 class="text-black">Personal Details</h1>
              <div class="row mb-2 mt-3 ">
                <div class="col-md">
                  <label for=""><span>First Name<span class="text-red">*</span></span></label>
                  <input class="form-control rounded-1" type="text" aria-label="default input example">
                </div>
                <div class="col-md">
                  <label for=""><span>Last Name<span class="text-red">*</span></span></label>
                  <input class="form-control rounded-1" type="text" aria-label="default input example">
                </div>
              </div>
              <div class="mb-2">
                <label for=""><span>Company Name</span></label>
              <input class="form-control rounded-1" type="text" aria-label="default input example">
              </div>
              <div class="row mb-2">
                <div class="col-md">
                  <label for=""><span>Email Address<span class="text-red">*</span></span></label>
                  <input class="form-control rounded-1" type="text" aria-label="default input example">
                </div>
                <div class="col-md">
                  <label for=""><span>Phone Number<span class="text-red">*</span></span></label>
                  <input class="form-control rounded-1" type="text" aria-label="default input example">
                </div>
              </div>
              <input type="checkbox">&emsp;<span>Create an account?</span>
            </div>
            <div class="col-md">
              <div class="row gx-0">
                <div class="col-md-5 d-flex">
                  <h1 class="text-black">Shipping Information</h1>&emsp;&emsp;<span class="d-lg-block d-none d-sm-none">|</span>
                </div>
                <div class="col-md ps-5 right-col-mob">
                  <input type="checkbox">&emsp;<label for="checkbox"><span>Use this Address for Billing</span></label>
                </div>
              </div>
              <div class="row mb-2 mt-3">
                <div class="col-md">
                  <label for=""><span>First Name<span class="text-red">*</span></span></label>
                  <input class="form-control rounded-1" type="text" aria-label="default input example">
                </div>
                <div class="col-md">
                  <label for=""><span>Last Name<span class="text-red">*</span></span></label>
                  <input class="form-control rounded-1" type="text" aria-label="default input example">
                </div>
              </div>
              <div class="mb-2">
                <label for=""><span>State/Provice<span class="text-red">*</span></span></label>
                <select class="form-select rounded-1" id="validationCustom04" required>
                  <option selected disabled value=""></option>
                  <option>...</option>
                </select>
              </div>
              <div class="row mb-2">
                <div class="col-md">
                  <label for=""><span>City/Municipality<span class="text-red">*</span></span></label>
                  <select class="form-select rounded-1" id="validationCustom04" required>
                    <option selected disabled value=""></option>
                    <option>...</option>
                  </select>
                </div>
                <div class="col-md">
                  <label for=""><span>Barangay<span class="text-red">*</span></span></label>
                  <select class="form-select rounded-1" id="validationCustom04" required>
                    <option selected disabled value=""></option>
                    <option>...</option>
                  </select>
                </div>
              </div>
              <div class="mb-2">
                <label for=""><span>Complete Address<span class="text-red">*</span></span></label>
                <input class="form-control rounded-1" type="text" placeholder="Block No./Unite No., Street, Residence" aria-label="default input example">
              </div>
              <div>
                <label for=""><span>Phone No.<span class="text-red">*</span></span></label>
                <input class="form-control rounded-1" type="text" aria-label="default input example">
              </div>
            </div>
          </div>
          <div class="d-flex justify-content-end mt-5">
            <p data-bs-toggle="tab" data-bs-target="#nav-profile-tab" class="btns p-2 text-red btn-propay rounded-5 btn-see" >PROCEED TO QUOTE & REVIEW <i class="fa-solid fa-arrow-right-long"></i></p>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
        <div class="mt-5">
          <div class="row gy5">
            <div class="col-md">
              <h1 class="text-black">Billing Information</h1>
              <div class="mt-3">
                <div class="row mb-2">
                  <div class="col-md">
                    <label for=""><span>First Name<span class="text-red">*</span></span></label>
                    <input class="form-control rounded-1" type="text" aria-label="default input example">
                  </div>
                  <div class="col-md">
                    <label for=""><span>Last Name<span class="text-red">*</span></span></label>
                    <input class="form-control rounded-1" type="text" aria-label="default input example">
                  </div>
                </div>
                <div class="mb-2">
                  <label for=""><span>Complete Address<span class="text-red">*</span></span></label>
                  <input class="form-control rounded-1" type="text" aria-label="default input example">
                </div>
                <div class="mb-2">
                  <label for=""><span>Phone No.<span class="text-red">*</span></span></label>
                  <input class="form-control rounded-1" type="text" aria-label="default input example">
                </div>
              </div>
            </div>
            <div class="col-md d-flex justify-content-end">
              <div class="border pb-3 w-75 w-sm-100">
                <div class="text-center bg-light p-1">
                  <h1 class="text-black">Your Order Summary</h1>
                </div>
                <div class="mt-3">
                  <div class="p-2">
                    <div class="d-flex justify-content-between border-bottom pb-2 mb-3">
                      <span class="fw-bold">Product</span>
                      <span class="fw-bold">Total</span>
                    </div>
                    <div class="d-flex justify-content-between border-bottom pb-2 mb-3">
                      <div>
                        <span class="fw-bold">SFW123DTB</span> <span class="fw-bold text-red">x 1</span>
                      </div>
                      <span>P20,095</span>
                    </div>
                    <div class="d-flex justify-content-between pb-2 mb-3">
                      <div>
                        <span class="fw-bold">SFW123DTB</span> <span class="fw-bold text-red">x 1</span>
                      </div>
                      <span>P20,095</span>
                    </div>
                    <div class="black-border mb-3"></div>
                    <div class="d-flex justify-content-between pb-2 mb-3">
                      <div>
                        <span>Cart Subtotal</span>
                      </div>
                      <span class="fw-bold">P40,190.00</span>
                    </div>
                    <div class="d-flex justify-content-between pb-2 mb-3">
                      <div>
                        <span>Shipping and Handling</span>
                      </div>
                      <span>P350.00</span>
                    </div>
                    <div class="d-flex justify-content-between pb-2 mb-3">
                      <div>
                        <span>Order Discount</span>
                      </div>
                      <div>
                        <span class="text-red">-P1,200.00</span> <span class="text-muted fst-italic">(Code: 2023znx)</span>
                      </div>
                    </div>
                    <div class="black-border mb-3"></div>
                    <div class="d-flex justify-content-between pb-2 mb-3">
                      <div>
                        <span class="fw-bold">Order Total</span>
                      </div>
                      <div>
                        <span class="text-muted text-decoration-line-through">P40,540.00</span> <span class="text-red fw-bold">P39,340.00</span>
                      </div>
                    </div>
                    <div class="black-border mb-3"></div>
                    <h1 class="text-black">Choose a Payment Method</h1>
                    <div class="mt-3">
                      <div class="accordion accordion-flush" id="accordionFlushExample">
                        <div class="accordion-item">
                          <h2 class="accordion-header" id="flush-headingOne">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                              <input type="checkbox"> <label for="checkbox">&nbsp;<span class="fw-bold">Direct Bank Tranfer</span></label>
                            </button>
                          </h2>
                          <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                            <div class="mt-3">
                              <div class="chat-bubble bg-light">
                                <p>Make your payment directly into our bank account. Please use your Order ID as the payment 
                                  reference. Your order won't be shipped until the funds have cleared in our account.
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="accordion-item">
                          <h2 class="accordion-header" id="flush-headingTwo">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                              <input type="checkbox"> <label for="checkbox">&nbsp;<span class="fw-bold">GCash</span></label>
                            </button>
                          </h2>
                          <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                            <div class="mt-3">
                              <div class="chat-bubble bg-light">
                                <p>Make your payment directly into our bank account. Please use your Order ID as the payment 
                                  reference. Your order won't be shipped until the funds have cleared in our account.
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="accordion-item">
                          <h2 class="accordion-header" id="flush-headingThree">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                              <input type="checkbox"> <label for="checkbox">&nbsp;<span class="fw-bold">Paypal</span></label>
                            </button>
                          </h2>
                          <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                            <div class="mt-3">
                              <div class="chat-bubble bg-light">
                                <p>Make your payment directly into our bank account. Please use your Order ID as the payment 
                                  reference. Your order won't be shipped until the funds have cleared in our account.
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="mt-3">

                    </div>
                    <div class="mt-3">
                    </div>
                    <div class="mt-3">
                    </div>
                    <div class="mt-5">
                      <input type="checkbox"> <label for="checkbox"><span>I have read and agree to the</span> <span class="text-red text-decoration-underline">terms and conditions</span></label>
                    </div>
                    <div class="mt-3">
                      <button class="rounded-5 text-red btns btn-order w-sm-100">SEND TO QUOTE</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>


  <br><br>


  <script>
    $(document).ready(function() {
      $('#nav-profile-tab').addClass('disabled'); // Disable Payment & Review tab button initially
      $('#nav-profile').hide(); // Hide Payment & Review tab pane initially
  
      $('.btn-see').click(function() {
        $('#nav-profile-tab').removeClass('disabled'); // Remove disabled class from Payment & Review tab button when PROCEED TO PAYMENT button is clicked
        $('#nav-profile-tab').tab('show'); // Show Payment & Review tab pane
        $('#nav-home').hide(); // Hide Shipping tab pane
        $('#nav-profile').show(); // Show Payment & Review tab pane
      });
  
      $('#nav-home-tab').click(function() {
        $('#nav-home').show(); // Show Shipping tab pane
        $('#nav-home-tab').tab('show'); // Show Shipping tab button
        $('#nav-profile').hide(); // Hide Payment & Review tab pane
        $('#nav-profile-tab').addClass('disabled'); // Disable Payment & Review tab button
      });
  
      $('#nav-profile-tab').click(function() {
        if (!$('#nav-profile-tab').hasClass('disabled')) { // Check if Payment & Review tab button is enabled
          $('#nav-profile').show(); // Show Payment & Review tab pane
          $('#nav-home').hide(); // Hide Shipping tab pane
        }
      });
  
      $('.place-order-btn').click(function() {
        $('form').submit();
      });
    });
  </script>

@endsection