@extends('layouts.front-layout')
@section('title') Shipping And Return @endsection

@section('content')

<style>
/* .nav-pills .nav-link.active {
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
} */

/* .nav-link.active {
    border: 2px solid #333;
    background-color: #f2f2f2;
} */
.cursor-pointer {
  cursor: pointer;
}
.list-group-item {
  transition: background 0.3s;
}
.list-group-item:hover {
  background-color: #f9f9f9;
}
.arrow {
  transition: transform 0.3s;
}
.rotate {
  transform: rotate(90deg);
}

.actions {
  display: flex;
  gap: 1rem;
  font-family: Arial, sans-serif;
}
.actions a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-decoration: none;
  background-color: #f9f9f9;
  transition: 0.3s ease;
}
.actions a:hover {
  background-color: #eaeaea;
}
.icon {
  font-size: 1.5rem;
}

</style>
    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{asset('upload/images/unnamed.jpg')}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        {{-- <h2>SHIPPING & RETURNS</h2> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->



    <!-- Include this Bootstrap CSS if not already -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">


<!-- Begin: Dashboard Section with GSAP -->
<section class="account-dashboard py-5">
  <div class="container">
    <h3 class="text-center mb-4">My Account</h3>

    <!-- Begin: Card Style Navigation Tabs -->
    <div class="row g-4 mb-4">
      <div class="col-md-4">
        <button class="card p-4 shadow-sm w-100 text-start nav-link" id="v-pills-dashboard-tab"
          data-bs-toggle="pill" data-bs-target="#v-pills-dashboard" type="button" role="tab"
          aria-controls="v-pills-dashboard" aria-selected="false">
          <h5 class="mb-0">Dashboard</h5>
        </button>
      </div>
      <div class="col-md-4">
        <button class="card p-4 shadow-sm w-100 text-start nav-link active" id="v-pills-orders-tab"
          data-bs-toggle="pill" data-bs-target="#v-pills-orders" type="button" role="tab"
          aria-controls="v-pills-orders" aria-selected="true">
          <h5 class="mb-0">Orders</h5>
        </button>
      </div>
      <div class="col-md-4">
        <button class="card p-4 shadow-sm w-100 text-start nav-link" id="v-pills-address-tab"
          data-bs-toggle="pill" data-bs-target="#v-pills-address" type="button" role="tab"
          aria-controls="v-pills-address" aria-selected="false">
          <h5 class="mb-0">Address</h5>
        </button>
      </div>
      <div class="col-md-4">
        <button class="card p-4 shadow-sm w-100 text-start nav-link" id="v-pills-account-details-tab"
          data-bs-toggle="pill" data-bs-target="#v-pills-account-details" type="button" role="tab"
          aria-controls="v-pills-account-details" aria-selected="false">
          <h5 class="mb-0">Account Details</h5>
        </button>
      </div>
      <div class="col-md-4">
        <button class="card p-4 shadow-sm w-100 text-start nav-link" id="v-pills-wishlist-tab"
          data-bs-toggle="pill" data-bs-target="#v-pills-wishlist" type="button" role="tab"
          aria-controls="v-pills-wishlist" aria-selected="false">
          <h5 class="mb-0">Wishlist</h5>
        </button>
      </div>
      <div class="col-md-4">
        <button class="card p-4 shadow-sm w-100 text-start nav-link" id="v-pills-logout-tab"
          data-bs-toggle="pill" data-bs-target="#v-pills-logout" type="button" role="tab"
          aria-controls="v-pills-logout" aria-selected="false">
          <h5 class="mb-0">Logout</h5>
        </button>
      </div>
    </div>

    <!-- Begin: Tab Content -->
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade" id="v-pills-dashboard" role="tabpanel" aria-labelledby="v-pills-dashboard-tab">
        <h4>Dashboard</h4>
        <p>Welcome to your dashboard!</p>
      </div>
      <div class="tab-pane fade show active" id="v-pills-orders" role="tabpanel" aria-labelledby="v-pills-orders-tab">
        <h4>Orders</h4>
        <p>Your recent orders will be displayed here.</p>
      </div>
      <div class="tab-pane fade" id="v-pills-address" role="tabpanel" aria-labelledby="v-pills-address-tab">
        <h4>Address</h4>
        <p>1234 Fashion Street, New York</p>
      </div>
      <div class="tab-pane fade" id="v-pills-account-details" role="tabpanel" aria-labelledby="v-pills-account-details-tab">
        <h4>Account Details</h4>
        <p>Name: John Doe<br>Email: john@example.com</p>
      </div>
      <div class="tab-pane fade" id="v-pills-wishlist" role="tabpanel" aria-labelledby="v-pills-wishlist-tab">
        <h4>Wishlist</h4>
        <p>You have no items in your wishlist.</p>
      </div>
      <div class="tab-pane fade" id="v-pills-logout" role="tabpanel" aria-labelledby="v-pills-logout-tab">
        <h4>Logout</h4>
        <p>Are you sure you want to logout?</p>
        <form action="" method="POST">
          @csrf
          <button class="btn btn-danger">Logout</button>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- Bootstrap 5 JS (required for tabs) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
  document.querySelectorAll("#help-list li").forEach((item) => {
    const toggle = item.querySelector("div");
    const content = item.querySelector(".help-content");
    const arrow = item.querySelector(".arrow");

    toggle.addEventListener("click", () => {
      const isOpen = content.style.display === "block";

      // Close all open tabs
      document.querySelectorAll(".help-content").forEach(c => {
        gsap.to(c, { height: 0, autoAlpha: 0, duration: 0.3 });
        c.style.display = "none";
      });
      document.querySelectorAll(".arrow").forEach(a => a.classList.remove("rotate"));

      // Open the clicked one
      if (!isOpen) {
        content.style.display = "block";
        gsap.fromTo(content,
          { height: 0, autoAlpha: 0 },
          { height: "auto", autoAlpha: 1, duration: 0.4, ease: "power2.out" }
        );
        arrow.classList.add("rotate");
      }
    });
  });
</script>

@endsection