@extends('frontend.layouts.app')

@section('seo')
<title>Checkout | eg APPAREL</title>
<meta property="og:locale"          content="en_US" />
<meta property="og:url"             content="" />
<meta property="og:type"            content="website" />
<meta property="og:title"           content="Checkout | eg APPAREL" />
<meta property="og:description"     content="" />
<meta property="og:site_name"       content="Checkout | eg APPAREL" />
<meta property="og:image"           content="{{ asset('resources/web_thumb.jpg') }}" />
<meta property="og:thumbnail"           content="{{ asset('resources/web_thumb.jpg') }}" />
@endsection


@section('content')
<div class="container py-5">
  <div class="text-center mb-5">
    <h1>Checkout</h1>
  </div>

  {{-- BILLING DETAILS --}}
  <section>
    <div class="mb-5">
      <span class="fs-5 fw-bold">BILLING DETAILS</span>
    </div>
    
    <div class="row gx-5 gy-3 mb-5">
      <div class="col-12 col-sm-12 col-md-12 col-lg-6">

        <div class="mb-3">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
              <label for="exampleFormControlInput1" class="form-label">First Name*</label>
              <input type="text" class="form-control rounded-0 form-black" id="exampleFormControlInput1">
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
              <label for="exampleFormControlInput1" class="form-label">Last Name*</label>
              <input type="text" class="form-control rounded-0 form-black" id="exampleFormControlInput1">
            </div>
          </div>
        </div>

        <div class="mb-3">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
              <label for="exampleFormControlInput1" class="form-label">Email Address*</label>
              <input type="email" class="form-control rounded-0 form-black" id="exampleFormControlInput1">
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
              <label for="exampleFormControlInput1" class="form-label">Phone No.*</label>
              <input type="number" class="form-control rounded-0 form-black" id="exampleFormControlInput1">
            </div>
          </div>
        </div>

        <div class="mb-3">
          <label for="exampleFormControlInput1" class="form-label">Street Address*</label>
            <input type="number" class="form-control rounded-0 form-black" id="exampleFormControlInput1">
        </div>

        <div class="mb-3">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
              <label for="exampleFormControlInput1" class="form-label">Postcode / Zip</label>
              <input type="number" class="form-control rounded-0 form-black" id="exampleFormControlInput1">
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
              <label for="exampleFormControlInput1" class="form-label">Town / City*</label>
              <input type="text" class="form-control rounded-0 form-black" id="exampleFormControlInput1">
            </div>
          </div>
        </div>

        <div class="mb-3">
          <label for="exampleFormControlInput1" class="form-label">Country*</label>
          <select class="form-select rounded-0 form-black shadow-none" aria-label="Default select example">
            <option selected value="1">Philippines</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>
        </div>

      </div>

      <div class="col-12 col-sm-12 col-md-12 col-lg-6">
        <label for="exampleFormControlInput1" class="form-label">Orders Notes (Optional)</label>
        <textarea type="text" rows="5" class="form-control rounded-0 form-black" placeholder="Note about your order ,e.g special notes for delivery." id="exampleFormControlInput1"></textarea>
      </div>
    </div>

  </section>

  {{-- ORDER --}}
  <section class="mb-5">
    <div class="bg-black p-2">
      <div class="row d-flex justify-content-center w-100">
        <div class="col-12 col-sm-12 col-md-12 col-lg-11">
          <div class="row">
            <div class="col-6 col-sm-6 col-md-6 col-lg-7">
              <div class="text-white">
                <span class="fw-bold">PRODUCTS</span>
              </div>
            </div>
            <div class="col-6 col-sm-6 col-md-6 col-lg-5">
              <div class="text-white">
                <span class="fw-bold">TOTAL</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="border border-top-0 p-2">
      <div class="row d-flex justify-content-center w-100">
        <div class="col-12 col-sm-12 col-md-12 col-lg-11">
          <div class="row">
            <div class="col-6 col-sm-6 col-md-6 col-lg-7">
              <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-3">
                  <div class="border bg-white w-75" style="height:5rem;"></div>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-9 d-flex align-items-center">
                  <div>
                    <span class="fw-bold">eg TRENDS CROP TOP TEE</span><br>
                    <span>Size S, Color: Khaki</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-6 col-sm-6 col-md-6 col-lg-5 d-flex align-items-center">
              <span>P160.00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="border border-top-0 p-2">
      <div class="row d-flex justify-content-center w-100">
        <div class="col-12 col-sm-12 col-md-12 col-lg-11">
          <div class="row">
            <div class="col-6 col-sm-6 col-md-6 col-lg-7">
              <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-3">
                  <div class="border bg-white w-75" style="height:5rem;"></div>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-9 d-flex align-items-center">
                  <div>
                    <span class="fw-bold">eg TRENDS CROP TOP TEE</span><br>
                    <span>Size S, Color: Khaki</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-6 col-sm-6 col-md-6 col-lg-5 d-flex align-items-center">
              <span>P160.00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="border border-top-0 p-4">
      <div class="row d-flex justify-content-center w-100">
        <div class="col-12 col-sm-12 col-md-12 col-lg-11">
          <div class="row">
            <div class="col-6 col-sm-6 col-md-6 col-lg-7">
              <span>SUBTOTAL</span>
            </div>
            <div class="col-6 col-sm-6 col-md-6 col-lg-5 d-flex align-items-center">
              <span>P340.00</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="border border-top-0 p-4">
      <div class="row d-flex justify-content-center w-100">
        <div class="col-12 col-sm-12 col-md-12 col-lg-11">
          <div class="row">
            <div class="col-6 col-sm-6 col-md-6 col-lg-7">
              <span class="fw-bold">TOTAL</span>
            </div>
            <div class="col-6 col-sm-6 col-md-6 col-lg-5 d-flex align-items-center">
              <span class="fw-bold">P340.00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="p-4 bg-light">
      <div class="accordion mb-5" id="accordionExample">
        <div class="accordion-item border-0">
          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button border-0 bg-light shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" checked id="flexCheckDefault">
                <label class="form-check-label fw-bold text-black" for="flexCheckDefault">
                  PAYMENT METHOD 1
                </label>
              </div>
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body bg-light">
              <p>Please send a check to Store Name, Store Street, Store Town, Store State / Country, Store Postcode.</p>
            </div>
          </div>
        </div>
        <div class="accordion-item border-0">
          <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed border-0 bg-light shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault1">
                <label class="form-check-label fw-bold text-black" for="flexCheckDefault1">
                  PAYMENT METHOD 2
                </label>
              </div>
            </button>
          </h2>
          <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body bg-light">
              <p>Please send a check to Store Name, Store Street, Store Town, Store State / Country, Store Postcode.</p>
            </div>
          </div>
        </div>
      </div>

      <button class="btn btn-primary shadow-none bg-transparent rounded-circle text-black py-3 px-4 align-bottom button-alt type2-alt">
        <span class="btn-text-alt">Place Order</span>
      </button>
    </div>
  </section>

</div>
@endsection

@section('js')
<script>
// Get all the accordion buttons
const accordionButtons = document.querySelectorAll('.accordion-button');

// Add event listeners to each accordion button
accordionButtons.forEach(button => {
  button.addEventListener('click', function() {
    const checkbox = this.querySelector('.form-check-input');
    const accordionBody = this.nextElementSibling;

    // Check if the checkbox is already checked
    const isAlreadyChecked = checkbox.checked;

    // Deselect all checkboxes
    document.querySelectorAll('.form-check-input').forEach(checkbox => {
      checkbox.checked = false;
    });

    // Toggle the checkbox state
    checkbox.checked = !isAlreadyChecked;

    if (checkbox.checked) {
      accordionBody.classList.add('show'); // Open the accordion body
    } else {
      accordionBody.classList.remove('show'); // Collapse the accordion body
    }
  });
});

</script>
@endsection