@extends('frontend.layout')
@section('content')
  <style>

.banner_bg_main{
/* background:none; */
background-size:cover;
object-fit:cover;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    float: left;
  background-image: url('https://img.freepik.com/free-photo/happy-couple-using-s-digital-tablet-shopping-mall_329181-1750.jpg?w=740&t=st=1669289270~exp=1669289870~hmac=f42d574ac7833b7c30533adcdb42368bccce0a3591fb96cb37a216fda8118698') !important;
	/* background-image: url('{{asset('assets/backend/images/t1.jpg')}}'); */

}

    label.error.fail-alert {
border: 2px solid red;
border-radius: 4px;
line-height: 1;
padding: 2px 0 6px 6px;
background: #ffe6eb;
}
input.valid.success-alert {
border: 2px solid #4CAF50;
color: green;
}
.fashion_taital {
  width: 100%;
  font-size: 30px;
  color: #30302e;
  text-align: center;
  font-weight: bold;
}

body{
    background:#eee;
}

.card {
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0,0,0,.125);
    border-radius: 1rem;
}

.card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.5rem 1.5rem;
}
#submit_mob{
  display:none;
}
#submit_web{
  display:block;
}
@media screen and (max-width: 640px){
  #submit_mob{
  display:block;
}
#submit_web{
  display:none;
}

}

label {
  padding: 4px 6px;
  line-height: 190%;
  outline-style: none;
  transition: all .6s;
}

.hiddenCB div {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hiddenCB input[type="checkbox"],
.hiddenCB input[type="radio"] {
  display: none;
  
}

.hiddenCB label {
  
  cursor: pointer;
  
}

.hiddenCB input[type="checkbox"]+label:hover{
  /* background: rgba(0, 128, 128, .8); */
  /* background-color: #30302e; */
  background: rgb(48, 48, 46.8);
  /* color:white; */
}

.hiddenCB input[type="checkbox"]:checked+label {
  /* background: rgba(0, 128, 128, .4); */
  background: rgb(48, 48, 46.4);
   color:white;
}

.hiddenCB input[type="checkbox"]:checked+label:hover{
  /* background: rgba(0, 128, 128, 0, .7); */
  background: rgb(48, 48, 46.7);
  /* background-color: #f26522;; */
}

.box_main{height:430px !important;}


.btn_disabled
        {
            background: none repeat scroll 0 0 burlyWood !important;
            cursor: default !important;
        }






        *,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button[aria-selected="false"] {
    background-color: hsl(207, 100%, 100%);
    color: var(--accent-dark);
    outline: 1px solid #0003;
}

button[aria-selected="true"] {
    background: var(--accent-blue);
    color: var(--text-clr);
    font-weight: 600;
}

button[aria-selected="false"]:where(:hover, :focus-visible) {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

button[aria-selected="false"]:where(:hover, :focus-visible) .icon__for--tab {
    color: var(--accent-blue);
}

button[aria-selected="false"]:where(:hover, :focus-visible) .text__for--tab {
    color: var(--text-clr);
}

button[aria-selected="false"]:active {
    background-color: hsl(207, 100%, 90%);
    transform: scale(0.95);
}

button[aria-selected="true"] .icon__for--tab {
    color: #fff;
}

.tab__navigation:is(:hover, :focus-visible)
    button[aria-selected="false"]:not(:hover) {
    opacity: 0.8;
    background-color: hsl(207, 10%, 91%);
}

:root {
    --accent-blue: hsl(207, 74%, 61%);
    --accent-dark: hsl(207, 10%, 45%);
    --text-clr: hsl(210, 10%, 30%);

    --space-025: 0.25rem;
    --space-05: 0.5rem;
    --space-075: 0.75rem;
    --space-1: 1rem;
    --space-125: 1.25rem;
    --space-15: 1.5rem;
    --space-2: 2rem;

    --width-max: 50rem;
    --width-min: 22.5rem;
    /* --fullSize: 100%; */
    --fullHeight: 100vh;
    --flex-flow: 38rem;
    --padding--flow: calc(var(--fullSize) - var(--space-2));
}



.tabs {
    max-inline-size: min(var(--padding--flow), var(--width-max));
    min-inline-size: var(--width-min);
    margin: auto;
    border-radius: 0.35rem;
    gap: var(--space-1) 0;
    background: hsl(207, 10%, 96%);
    box-shadow: 0 0.5em 0.35em #0003, 0 0.8em 1.4em #0003;
}

.content--flow {
    --sidebar-width: 13rem;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.sidebar {
    padding: var(--space-05);
    flex: 1 1 var(--sidebar-width);
}

.tab__navigation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-05);
    height: var(--fullSize);
}

.tab__button {
    display: flex;
    align-items: center;
    height: 3rem;
    flex: auto;
    gap: 0.55rem;
    border: none;
    outline: none;
}

.tab__button > * {
    padding: var(--space-05);
}

.icon__for--tab {
    display: inline-flex;
    height: 2rem;
    margin-inline: var(-space-05);
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
}

.icon__for--tab > i.fas {
    margin: 0;
    justify-content: flex-start;
    display: inline-flex;
    font-size: 1.125rem;
}

.text__for--tab {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    line-height: 1;
    margin-inline: auto;
    font-size: 1rem;
}

@media (max-width: 639px) {
    .sidebar {
        padding: unset;
    }
    .tab__button {
        flex-direction: column;
        border-radius: 0;
        min-height: 3.25rem;
        gap: 0;
    }

    .tab__button > * + * {
        min-height: 1rem;
    }
}

@media (max-width: 560px) {
    .text__for--tab {
        display: none;
    }
    .icon__for--tab {
        margin: auto;
    }
}

.content__area {
    display: flex;
    flex-grow: 999;
    min-height: 20rem;
    justify-content: start;
    flex-basis: calc((var(--flex-flow) - var(--fullSize)) * 999);
    position: relative;
}

.tab__content {
    display: flex;
    flex: 1;
    justify-content: center;
    margin-inline: auto;
    padding: var(--space-05);
}

.span-tag {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 1;
    color: var(--accent-dark);
    opacity: 0.2;
    font-size: clamp(4rem, (-1.97rem + 20.78vw), 7rem);
    font-weight: 900;
}

.title {
    line-height: 1.6;
    padding-block-start: var(--space-1);
    color: var(--accent-blue);
    text-align: center;
    font-size: 2rem;
    text-transform: capitalize;
}

.text {
    max-width: 45ch;
    text-align: center;
    margin-inline: var(--space-1);
    color: var(--text-clr);
    font-size: 1.125rem;
}

        
</style>

  <!-- banner section start -->
  
  <div class="banner_section layout_padding">
            <div class="container">
               <div id="my_slider" class="carousel slide" data-ride="carousel">
                  <div class="carousel-inner">
                     <div class="carousel-item active">
                        <div class="row">
                           <div class="col-sm-12">
                              <h1 class="banner_taital">Get Start <br>Earn More , Smile More</h1>
                              <div class="buynow_bt"><a href="#">GET STARTED</a></div>
                           </div>
                        </div>
                     </div>
                     <div class="carousel-item">
                        <div class="row">
                           <div class="col-sm-12">
                           <h1 class="banner_taital"> Your<br> Complete Shopping Solution</h1>
                            <div class="buynow_bt"><a href="#">GET STARTED</a></div>
                           </div>
                        </div>
                     </div>
                     <div class="carousel-item">
                        <div class="row">
                           <div class="col-sm-12">
                           <h1 class="banner_taital">Get Start <br>Shop on Aman</h1>

                            <div class="buynow_bt"><a href="#">GET STARTED</a></div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <a class="carousel-control-prev" href="#my_slider" role="button" data-slide="prev">
                  <i class="fa fa-angle-left"></i>
                  </a>
                  <a class="carousel-control-next" href="#my_slider" role="button" data-slide="next">
                  <i class="fa fa-angle-right"></i>
                  </a>
               </div>
            </div>
         </div>
         <!-- banner section end -->
      </div>
      <!-- banner bg main end -->
     
 <!-- fashion section start -->
 <div class="fashion_section">
         <div id="main_slider" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
               <div class="carousel-item active">
                  <div class="container">
                     <h1 class="fashion_taital" style="padding-top:20px;">our businesses</h1>
                     <div class="fashion_section_2">
                        <div class="row">
                           <div class="col-lg-4 col-sm-4">
                              <div class="box_main">
                                 <h4 class="shirt_text">Nabina Kitchen Factory</h4>
                                 <p class="price_text">Kitchen & Doors  <span style="color: #262626;"></span></p>
                                 <div class="tshirt_img"><img src="https://nabinagroup.com/wp-content/uploads/2021/11/Nabina-Lereve-Showroom-Kitchen11.jpg"></div>
                                 <!-- <div class="btn_main">
                                    <div class="buy_bt"><a href="#">Buy Now</a></div>
                                    <div class="seemore_bt"><a href="#">See More</a></div>
                                 </div> -->
                              </div>
                           </div>
                           <div class="col-lg-4 col-sm-4">
                              <div class="box_main">
                                 <h4 class="shirt_text">Nabina Building Materials</h4>
                                 <p class="price_text">Building Materials  <span style="color: #262626;"></span></p>
                                 <div class="tshirt_img"><img src="{{asset('assets/frontend/images/n_building.jpg')}}"></div>
                                 <!-- <div class="btn_main">
                                    <div class="buy_bt"><a href="#">Buy Now</a></div>
                                    <div class="seemore_bt"><a href="#">See More</a></div>
                                 </div> -->
                              </div>
                           </div>
                           <div class="col-lg-4 col-sm-4">
                              <div class="box_main">
                                 <h4 class="shirt_text">Nabina Marble Factory</h4>
                                 <p class="price_text">Solid Surface & Marble  <span style="color: #262626;"></span></p>
                                 <div class="tshirt_img"><img src="{{asset('assets/frontend/images/n_marble.jpg')}}"></div>
                                 <!-- <div class="btn_main">
                                    <div class="buy_bt"><a href="#">Buy Now</a></div>
                                    <div class="seemore_bt"><a href="#">See More</a></div>
                                 </div> -->
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="carousel-item">
                  <div class="container">
                     <h1 class="fashion_taital" style="padding-top:20px;">our businesses </h1>
                     <div class="fashion_section_2">
                        <div class="row">
                           <div class="col-lg-4 col-sm-4">
                              <div class="box_main">
                                 <h4 class="shirt_text">Nabina Contracting</h4>
                                 <p class="price_text">Real Estate Developer  <span style="color: #262626;"></span></p>
                                 <div class="tshirt_img" style="display:inline-block; "><img src="{{asset('assets/frontend/images/n_con.jpg')}}"></div>
                                 <!-- <div class="btn_main">
                                    <div class="buy_bt"><a href="#">Buy Now</a></div>
                                    <div class="seemore_bt"><a href="#">See More</a></div>
                                 </div> -->
                              </div>
                           </div>
                           <div class="col-lg-4 col-sm-4">
                              <div class="box_main">
                                 <h4 class="shirt_text">Nabina Real Estate</h4>
                                 <p class="price_text">Property Management  <span style="color: #262626;"></span></p>
                                 <div class="tshirt_img " style="display:inline-block;"><img src="{{asset('assets/frontend/images/n_real.jpg')}}"></div>
                                 <!-- <div class="btn_main">
                                    <div class="buy_bt"><a href="#">Buy Now</a></div>
                                    <div class="seemore_bt"><a href="#">See More</a></div>
                                 </div> -->
                              </div>
                           </div>
                           <div class="col-lg-4 col-sm-4" style="">
                              <div class="box_main">
                                 <h4 class="shirt_text">Nabina Auto Service Centre</h4>
                                 <p class="price_text">Vehicle Services  <span style="color: #262626;"></span></p>
                                 <div class="tshirt_img img-fluid" ><img style="height:207px;" src="{{asset('assets/frontend/images/n_auto.jpg')}}"></div>
                                 <!-- <div class="btn_main">
                                    <div class="buy_bt"><a href="#">Buy Now</a></div>
                                    <div class="seemore_bt"><a href="#">See More</a></div>
                                 </div> -->
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="carousel-item">
                  <div class="container">
                     <h1 class="fashion_taital">our businesses</h1>
                     <div class="fashion_section_2">
                        <div class="row">
                           <div class="col-lg-4 col-sm-4">
                              <div class="box_main" >
                                 <h4 class="shirt_text">Nabina Elevators & Escalators</h4>
                                 <p class="price_text">Elevators & Escalators <span style="color: #262626;"></span></p>
                                 <div class="tshirt_img" ><img src="{{asset('assets/frontend/images/n_ele.JPG')}}"></div>
                                 <!-- <div class="btn_main">
                                    <div class="buy_bt"><a href="#">Buy Now</a></div>
                                    <div class="seemore_bt"><a href="#">See More</a></div>
                                 </div> -->
                              </div>
                           </div>
                           <div class="col-lg-4 col-sm-4">
                              <div class="box_main" >
                                 <h4 class="shirt_text">Nabina Gallery</h4>
                                 <p class="price_text">Nabina Exclusive Gallery..!!  <span style="color: #262626;"></span></p>
                                 <div class="tshirt_img" ><img style="height:207px;width:310px;background-size:cover;" src="{{asset('assets/frontend/images/n_gallery.JPG')}}"></div>
                                 <!-- <div class="btn_main">
                                    <div class="buy_bt"><a href="#">Buy Now</a></div>
                                    <div class="seemore_bt"><a href="#">See More</a></div>
                                 </div> -->
                              </div>
                           </div>
                           <div class="col-lg-4 col-sm-4">
                              <div class="box_main">
                                 <h4 class="shirt_text">Nabina Contracting</h4>
                                 <p class="price_text">Real Estate Developer  <span style="color: #262626;"></span></p>
                                 <div class="tshirt_img" style="display:inline-block; "><img src="{{asset('assets/frontend/images/n_con.jpg')}}"></div>
                                 <!-- <div class="btn_main">
                                    <div class="buy_bt"><a href="#">Buy Now</a></div>
                                    <div class="seemore_bt"><a href="#">See More</a></div>
                                 </div> -->
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <a class="carousel-control-prev" href="#main_slider" role="button" data-slide="prev">
            <i class="fa fa-angle-left"></i>
            </a>
            <a class="carousel-control-next" href="#main_slider" role="button" data-slide="next">
            <i class="fa fa-angle-right"></i>
            </a>
         </div>
      </div>







<div class="col-md-12">
      <article class="tabs content--flow">

<aside class="sidebar">
    <nav role="tablist" class="tab__navigation">
        <button role="tab" aria-selected="true" class="tab__button" id="1">
            <span class="icon__for--tab">
                <i class="fas fa-home"></i>
            </span>
            <span class="text__for--tab">Tab 01</span>
        </button>
        <button role="tab" aria-selected="false" class="tab__button" id="2">
            <span class="icon__for--tab">
                <i class="fas fa-user"></i>
            </span>
            <span class="text__for--tab">Tab 02</span>
        </button>
        <button role="tab" aria-selected="false" class="tab__button" id="3">
            <span class="icon__for--tab">
                <i class="fas fa-cogs"></i>
            </span>
            <span class="text__for--tab">Tab 03</span>
        </button>
        <button role="tab" aria-selected="false" class="tab__button" id="4">
            <span class="icon__for--tab">
                <i class="fas fa-shield-alt"></i>
            </span>
            <span class="text__for--tab">Tab 04</span>
        </button>
        <button role="tab" aria-selected="false" class="tab__button" id="5">
            <span class="icon__for--tab">
                <i class="fas fa-power-off"></i>
            </span>
            <span class="text__for--tab">Tab 05</span>
        </button>
    </nav>
</aside>
<main class="content__area">
    <div class="tab__content">
        <div role="tabpanel" aria-labelledby="1">
            <h1 class="title">First Tab</h1>
            <span class="span-tag">01</span>
            <p class="text">Just A basic tab navigation example, nothing fancy.

                And as always, if you find some improvements or bugs, please let me know!

            </p>
        </div>
        <div role="tabpanel" aria-labelledby="2" hidden>
            <h1 class="title">2nd Tab</h1>
            <span class="span-tag">02</span>

            <p class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, excepturi minus! Id praesentium esse atque veniam ullam vero accusamus, nesciunt libero dolore dignissimos consequatur quas, qui maiores in!
            </p>
        </div>
        <div role="tabpanel" aria-labelledby="3" hidden>
            <h1 class="title">Third Tab</h1>
            <span class="span-tag">03</span>

            <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. In aspernatur doloremque iusto
                incidunt,
                asperiores dicta amet ad porro vero quidem.</p>
        </div>
        <div role="tabpanel" aria-labelledby="4" hidden>
            <h1 class="title">Fourth Tab</h1>
            <span class="span-tag">04</span>

            <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse at delectus vel voluptate consequatur ea vero odio, quo quae aliquid ad! Repellat ipsam voluptatem nulla.</p>
        </div>
        <div role="tabpanel" aria-labelledby="5" hidden>
            <h1 class="title">Last Tab</h1>
            <span class="span-tag">05</span>

            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, libero voluptas nihil sit unde eveniet minus quia architecto!</p>
        </div>
    </div>
</main>
</article>



</div>


























      <!-- fashion section end -->


    
                @guest
      <div class="container-fluid" style="margin-top:-20px;margin-bottom:50px;">

<div class="container">
<h2><a id="cus_reg"></a></h2>
  <div class="d-flex justify-content-between align-items-lg-center py-3 flex-column flex-lg-row">
    <h2 class="fashion_taital">Customer Registration</h2>
   
  </div>
<!-- <form class="form-control" action="{{url('/user-registration')}}" method="post" ></form> -->
<form id="jquery-val-form" method="post" enctype="multipart/form-data" action="javascript:void(0)">

{{ csrf_field() }}
<!-- <input name="_token" type="hidden" value="{{ csrf_token() }}"> -->

<div class="row">

    <div class="col-lg-8">

      <div class="card mb-4">
        <div class="card-body">
          <h3 class="h6 mb-4">Basic information</h3>
          <!-- <span class="alert alert-success" ><h4></h4></span> -->
          <div class="alert alert-success" role="alert" id="dng">
  
          </div>
          <div class="row">
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">Full name <span>(required, at least 3 characters)</span></label>
                <input name="name" required  placeholder="" type="text" class="form-control">
              </div>
            </div>
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">Email <span>(required)</span></label>
                <input name="email" required type="email" class="form-control">
                <!-- <span class="text-danger error-text email_err"></span> -->

              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">Phone number</label>
                <input name="phone" type="text" class="form-control">
              </div>
            </div>
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">Password</label>
                <input name="password" type="password" class="form-control">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card mb-4">
        <div class="card-body">
          <h3 class="h6 mb-4">Address</h3>
          <div class="mb-3">
            <label class="form-label">Address Line</label>
            <input name="address" type="text" class="form-control">
            <span class="text-danger error-text address_err"></span>

          </div>
          <!-- <div class="mb-3">
            <label class="form-label">Address Line 2</label>
            <input type="text" class="form-control">
          </div> -->
          <div class="row">
           

            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">Building Number <span>(required)</span></label>
                <input name="building_number" required type="input" class="form-control" >
                <!-- <span class="text-danger error-text email_err"></span> -->

              </div>
            </div>

            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">Street <span>(required)</span></label>
                <input name="street" required type="input" class="form-control">
                <!-- <span class="text-danger error-text email_err"></span> -->

              </div>
            </div>

            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">Zone <span>(required)</span></label>
                <input name="zone" required type="input" class="form-control">
                <!-- <span class="text-danger error-text email_err"></span> -->

              </div>
            </div>
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">City</label>
                <!-- <select id class="select2 form-control select2-hidden-accessible" data-select2-placeholder="Select country" data-select2-id="select2-data-1-gy14" tabindex="-1" aria-hidden="true">
                  <option data-select2-id="select2-data-3-ibs9"></option>
                  <option value="AF">Afghanistan</option>
                  <option value="BS">Bahamas</option>
                  <option value="KH">Cambodia</option>
                  <option value="DK">Denmark</option>
                  <option value="TL">East Timor</option>
                  <option value="GM">Gambia</option>
                </select><span class="select2 select2-container select2-container--bootstrap-5" dir="ltr" data-select2-id="select2-data-2-46y9" style="width: 391px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-vp8l-container" aria-controls="select2-vp8l-container"><span class="select2-selection__rendered" id="select2-vp8l-container" role="textbox" aria-readonly="true" title="Select country"><span class="select2-selection__placeholder">Select country</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span> -->
                <select required name="city_id" id="city_id" class="form-control">
                            <option value="">Select City</option>
                            @foreach ($cities as $data)
                            <option value="{{$data->id}}">
                                {{$data->name}}
                            </option>
                            @endforeach
                        </select>
              
               </div>
            </div>
            <!-- <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">Cities</label>
                <select name="city_id" id="city" class="select2 form-control select2-hidden-accessible" data-select2-placeholder="Select state" data-select2-id="select2-data-4-680y" tabindex="-1" aria-hidden="true">
                
                </select><span class="select2 select2-container select2-container--bootstrap-5" dir="ltr" data-select2-id="select2-data-5-np4c" style="width: 391px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-2fn7-container" aria-controls="select2-2fn7-container"><span class="select2-selection__rendered" id="select2-2fn7-container" role="textbox" aria-readonly="true" title="Select City"><span class="select2-selection__placeholder">Select City</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
              </div>
            </div> -->
          </div>
          <div class="row">
            <div class="col-lg-6">
              <!-- <div class="mb-3">

                <label class="form-label">City</label>
                <select class="select2 form-control select2-hidden-accessible" data-select2-placeholder="Select city" data-select2-id="select2-data-7-809c" tabindex="-1" aria-hidden="true">
                  <option data-select2-id="select2-data-9-k35n"></option>
                  <option value="b">Bangkok</option>
                  <option value="d">Dubai</option>
                  <option value="h">Hong Kong</option>
                  <option value="k">Kuala Lumpur</option>
                  <option value="l">London</option>
                  <option value="n">New York City</option>
                  <option value="m">Macau</option>
                  <option value="p">Paris</option>
                </select><span class="select2 select2-container select2-container--bootstrap-5" dir="ltr" data-select2-id="select2-data-8-3peu" style="width: 391px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-jdfi-container" aria-controls="select2-jdfi-container"><span class="select2-selection__rendered" id="select2-jdfi-container" role="textbox" aria-readonly="true" title="Select city"><span class="select2-selection__placeholder">Select city</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
              </div> -->
            </div>
            
                <div class="col-lg-12">
                  <div class="hiddenCB">
                  <h6>Hobbies</h6>
                  <!-- <label class="form-label">Hobby(s) </label> -->

                  <div>
                    <input type="checkbox" name="hobby[]" value="Fashion" id="cb1" /><label for="cb1">Fashion</label>
                    <input type="checkbox" name="hobby[]" value="Sports" id="cb2" /><label for="cb2">Sports</label>
                    <input type="checkbox" name="hobby[]" value="Gadgets" id="cb3" /><label for="cb3">Gadgets</label>

                    <input type="checkbox" name="hobby[]" value="Blogging" id="cb1" /><label for="cb1">Blogging</label>
                    <input type="checkbox" name="hobby[]" value="Reading" id="cb2" /><label for="cb2">Reading</label>
                    <input type="checkbox" name="hobby[]" value="Short-Term Investing" id="cb3" /><label for="cb3">Short-Term Investing</label>
                    <input type="checkbox" name="hobby[]" value="Cooking" id="cb3" /><label for="cb3">Cooking</label>

                    <!-- <input type="checkbox" name="choice" id="cb4" /><label for="cb4">Choice D</label> -->

                  </div>
                </div>
              <div class="mb-3">
                <!-- <label class="form-label">ZIP code</label>
                <input type="text" class="form-control"> -->
                <h6 class=" form-label mb-0" style="color:grey">Program Rules</h6>
                <small>By confirming, you are agreeing our Program Rules.</small>
                <input  id="agree" name="rule" style="margin-left:10px;" class="form-check-input" type="checkbox" role="switch">

              </div>
              
              <div class="hstack gap-3" id="submit_web">
      <button class="btn btn-secondary btn-block btn-sm btn-icon-text"><i class="bi bi-save"></i> <span class="text">Register</span></button>
    </div>
            </div>
          </div>
        </div>
      </div>
    </div>
   
    <div class="col-lg-4">

      <!-- <div class="card mb-4">
        <div class="card-body">
          <h3 class="h6">Status</h3>
          <select class="form-select">
            <option value="draft" selected="">Draft</option>
            <option value="active">Active</option>
            <option value="active">Inactive</option>
          </select>
        </div>
      </div> -->
 
      <div class="card mb-4">
        <div class="card-body">
          <h3 class="h6">QID NUMBER <span>(required)</span></h3>
          <input  name="qid_number"  class="form-control required" type="input" required>
        </div>
        <hr>
        <div class="card-body">
          <h3 class="h6">Upload QID <span></span></h3>
          <input name="qid_doc"  class="form-control" type="file">
          <span class="text-danger" id="file-input-error"></span>
        </div>
        <hr>
        <div class="card-body">
          <h3 class="h6">Date of Birth</h3>
          <input name="dob" class="form-control" type="date">
        </div>
        <div class="card-body" id="submit_mob">
        <div class="hstack gap-3">
          <button id="reg_btn" class="btn btn-secondary btn-block btn-sm btn-icon-text"><i class="bi bi-save"></i> <span class="text">Register</span></button>
        </div>
        </div>
        <!-- <div class="card-body">
          <h3 class="h6">Business Type</h3>
        
          <select class="form-select form-control" id="business_id" name="business_id">
          <option value="">Select Business</option>
           @foreach ($business as $data)
              <option value="{{$data->id}}">
                    {{$data->company_name}}
              </option>
          @endforeach
          </select>
        </div> -->
        
      </div>
    
      <!-- <div class="card mb-4">
        <div class="card-body">
          <h3 class="h6">Notes</h3>
          <textarea class="form-control" rows="3"></textarea>
        </div>
      </div> -->
     
      <!-- <div class="card mb-4">
        <div class="card-body">
          <h3 class="h6">Notification Settings</h3>
          <ul class="list-group list-group-flush mx-n2">
            <li class="list-group-item px-0 d-flex justify-content-between align-items-start">
              <div class="ms-2 me-auto">
              <h6 class="mb-0">Program Rules</h6>
                <small>By confirming, you are agreeing our Program Rules.</small>
              </div>
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch">
              </div>
            </li> -->
            <!-- <li class="list-group-item px-0 d-flex justify-content-between align-items-start">
              <div class="ms-2 me-auto">
              
                <h6 class="mb-0">News and updates</h6>
                <small>News about product and feature updates.</small>
              </div>
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch" checked="">
              </div>
            </li> -->
            <!-- <li class="list-group-item px-0 d-flex justify-content-between align-items-start">
              <div class="ms-2 me-auto">
                <h6 class="mb-0">User Research</h6>
                <small>Get involved in our beta testing program.</small>
              </div>
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch">
              </div> -->
            <!-- </li>
          </ul>
        </div>
      </div> -->

      
    </div>
  </div>
  </form>  
</div>

  </div>
   @endguest
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

<script>


const buttons = document.querySelectorAll('[role="tab"]');
const tabPanel = Array.from(document.querySelectorAll('[role="tabpanel"]'));

function hideTabContent(e) {
    tabPanel.forEach((panels) => {
        panels.hidden = true;
    });
    buttons.forEach((tab) => {
        tab.setAttribute("aria-selected", false);
    });
    e.currentTarget.setAttribute("aria-selected", true);

    const { id } = event.currentTarget;
    const tabPanels = tabPanel.find(
        (tabContent) => tabContent.getAttribute("aria-labelledby") === id
    );
    tabPanels.hidden = false;
}
buttons.forEach((button) => button.addEventListener("click", hideTabContent));





</script>

<script>
   $(document).ready(function() {
    $('#dng').hide();
    $("#reg_btn").prop("disabled",true); 
  });
    //$("#reg_btn").prop("disabled",true); 
    // $('#reg_btn').attr('disabled', 'disabled');
    // $('#sub').click(function() {
    //     if ($(this).is(':checked')) {
    //         $('#sub').prop('disabled', false);
    //         //$('#id_of_your_button').attr('disabled', 'disabled');
    //     } else {
    //         $('#sub').prop('disabled', true);
    //         // $('#id_of_your_button').removeAttr('disabled');
    //     }
    // });
        // $('select[name="state_id"]').change(function(){
            
        //     var state_id=$(this).val();
        //         if(state_id) {
        //             $.ajax({
        //                 url  : "{{url('getStates')}}",
        //                 type : "POST",
        //                 data : {
        //                     "_token" : "{{csrf_token()}}",

        //                     state_id : state_id,
        //                 },
        //                 cache:false,
        //                 //contentType: false,
        //                 dataType:"json",
                            
        //                 success:function(data){
        //                     //console.log(data.course);
        //                     //console.log(data.course_model);
        //                      $('select[name="city_id"]').empty();
        //                      $('select[name="city_id"]').append('<option value="">--CITIES--</option>');
        //                      $.each(data,function(key,value){
        //                         //console.log(value);
        //                        $('select[name="city_id"]').append('<option value="'+ key + '">'+ value +'</option>');
                               
        //                      });
                           
        //                 },
        //             });
        //         }
    
        // });

        
// $('#jquery-val-form').on('submit', function(e) {

// e.preventDefault(); 
// $.ajax({
//     type: "POST",
//     url: "{{url('/user-store')}}",
//     data: $(this).serialize(), "_token" : "{{csrf_token()}}",
//     // success: function(msg) {
//     // alert(msg);
//     // }

//     success:function(response){
//         //$("#msg").append(JSON.stringify(response.status));
//              // $("#msg").fadeOut(2000);
//              $('#dng').empty();
//              $('#msg').show();
//               $('#msg').append(response);
//               $("#msg").fadeOut(6000);
//             // if (response.status == "success") {
//             //  // console.log(response);
           
//             // } else {
//             //   //console.log(response);
//             // }

//         },
//         error: function (response) {
//             $('#dng').empty();
//             $('#dng').show();
//             $('#dng').append("Something Went Wrong!");
//             $("#dng").fadeOut(6000);
            
//         }

// });
// });

$("#jquery-val-form").validate({

errorClass: "error fail-alert",
validClass: "valid success-alert",
});


$.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

$('#jquery-val-form').submit(function(e) {
       if ($('#agree').is(':checked')) {
        //alert('checked');
            $('#reg_btn').prop('disabled', false);
            e.preventDefault();
            let formData = new FormData(this);
            $('#file-input-error').text('');
            $.ajax({
                type:'POST',
                url: "{{url('/user-store')}}",
                data: formData,
                contentType: false,
                processData: false,
                success: (response) => {
                    if (response) {
                        this.reset();
                      //  alert('Successfully Registered');
                          $('#dng').empty();
                            $('#dng').show();
                            $('#dng').append("Successfully Registered!");
                            $("#dng").fadeOut(13000);
                    }
                },
                error: function(response){
                      console.log(response);
                    $('#file-input-error').text(response.responseJSON.message);
                }
            });
            //$('#id_of_your_button').attr('disabled', 'disabled');
        } else {
          e.preventDefault();
          alert('Please agree privacy policy!');
            $('#reg_btn').prop('disabled', true);
            $('#reg_btn').addClass('btn_disabled');
            
            // $('#id_of_your_button').removeAttr('disabled');
        }

});

        </script>

        
      @endsection