@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
  <div class="rscnAccountSection">
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <div class="rscnUserInfoBox d-flex justify-content-center">
            <div class="rscnUserInfoContent text-center w-100">
              <img src="{{asset('frontend/assets/images/user.png')}}" class="rscnUserImg">
              <div class="rscnUserName">Mais Ali</div>
              <div class="rscnUserRole">user</div>
            </div>
          </div>
          <div class="rscnUserMenuBox">
            <h4>Dashboard</h4>
            <ul class="list-unstyled rscnUserList">
              <li>
                <a id="dashboard" class="d-flex align-items-center">
                  <img src="{{asset('frontend/assets/images/dashboardIcon.svg')}}" class="rscnUserListIcon">
                  <span>My Dashboard</span>
                </a>
              </li>
              <li>
                <a id="personal_information" class="d-flex align-items-center">
                  <img src="{{asset('frontend/assets/images/user_icon.svg')}}" class="rscnUserListIcon">
                  <span>Personal information</span>
                </a>
              </li>
              <li>
                <a id="orders_tracking" class="d-flex align-items-center">
                  <img src="{{asset('frontend/assets/images/Orders_tracking.svg')}}" class="rscnUserListIcon">
                  <span>Orders tracking</span>
                </a>
              </li>
              <li>
                <a id="bookings_history" class="d-flex align-items-center">
                  <img src="{{asset('frontend/assets/images/booking_history.svg')}}" class="rscnUserListIcon">
                  <span>Bookings history</span>
                </a>
              </li>
              <li>
                <a id="become_member" class="d-flex align-items-center">
                  <img src="{{asset('frontend/assets/images/Become_member.svg')}}" class="rscnUserListIcon">
                  <span>Become a member</span>
                </a>
              </li>
              <li>
                <a id="membership_card" class="d-flex align-items-center">
                  <img src="{{asset('frontend/assets/images/MembershipCard.svg')}}" class="rscnUserListIcon">
                  <span>Membership Card</span>
                </a>
              </li>
              <li>
                <a id="contact_us" class="d-flex align-items-center">
                  <img src="{{asset('frontend/assets/images/ContactUs.svg')}}" class="rscnUserListIcon">
                  <span>Contact Us</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md-9">
          @include('front.pages.informative_pages.user_account.personal_information')
          @include('front.pages.informative_pages.user_account.booking_history')
          @include('front.pages.informative_pages.user_account.become_member')
          @include('front.pages.informative_pages.user_account.contact_us')
        </div>
      </div>
    </div>
  </div>
@endsection
@push('post_script')
  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script>
  <script>
    $(function () {
      $('#interest').multipleSelect()
    });

    $( document ).ready(function() {
      $("#personal_information_box").show();
      $("#dashboard_box,#orders_tracking_box,#bookings_history_box,#become_member_box,#membership_card_box,#contact_us_box").hide();
    });
    
    // $("#dashboard").click(function() {
    //   $("#dashboard_box").show();
    //   $("#personal_information_box,#orders_tracking_box,#bookings_history_box,#become_member_box,#membership_card_box,#contact_us_box").hide();
    // });

    $("#personal_information").click(function() {
      $("#personal_information_box").show();
      $("#dashboard_box,#orders_tracking_box,#bookings_history_box,#become_member_box,#membership_card_box,#contact_us_box").hide();
    });

    // $("#orders_tracking").click(function() {
    //   $("#orders_tracking_box").show();
    //   $("#dashboard_box,#personal_information_box,#bookings_history_box,#become_member_box,#membership_card_box,#contact_us_box").hide();
    // });

    $("#bookings_history").click(function() {
      $("#bookings_history_box").show();
      $("#dashboard_box,#personal_information_box,#orders_tracking_box,#become_member_box,#membership_card_box,#contact_us_box").hide();
    });

    $("#become_member").click(function() {
      $("#become_member_box").show();
      $("#dashboard_box,#personal_information_box,#orders_tracking_box,#bookings_history_box,#membership_card_box,#contact_us_box").hide();
    });

    // $("#membership_card").click(function() {
    //   $("#membership_card_box").show();
    //   $("#dashboard_box,#personal_information_box,#orders_tracking_box,#bookings_history_box,#become_member_box,#contact_us_box").hide();
    // });

    $("#contact_us").click(function() {
      $("#contact_us_box").show();
      $("#dashboard_box,#personal_information_box,#orders_tracking_box,#bookings_history_box,#become_member_box,#membership_card_box").hide();
    });

  </script>

@endpush