@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); */
    background:#f26522;
    color:white;
    font-weight: 600;
}

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

button[aria-selected="false"]:where(:hover, :focus-visible) .icon__for--tab {
    color: #f26522;
    /* background:#f26522; */
}

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

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;
    margin-bottom:70px;
    flex-wrap: wrap;
    overflow: hidden;
    width:90%;
}

.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;
   left:50px;
    top: -20px;
    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="d-flex justify-content-between align-items-lg-center py-3 flex-column flex-lg-row">
        <h2 class="fashion_taital">Customer Registration</h2>
      
    </div> -->
    @guest
     <div class="container-fluid">
      <article class="tabs content--flow">
      <h1 class="fashion_taital" style="padding-top:20px;">Customer Registration</h1>
<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="fa fa-user"></i>
            </span>
            <span class="text__for--tab">Individual Registration</span>
            
        </button>
        <button role="tab" aria-selected="false" class="tab__button" id="2">
            <span class="icon__for--tab">
                <i class="fa fa-users"></i>
            </span>
            <span class="text__for--tab">Corporate Registration</span>
           
        </button>
       
    </nav>
</aside>
<main class="content__area">
    <div class="tab__content">
        <div role="tabpanel" aria-labelledby="1">
            <!-- <h1 class="title">Individual Registration</h1> -->
            <span class="span-tag">Individual</span>


                                  @guest
                            <div class="container-fluid" style="margin-top:-20px;margin-bottom:50px;">
                            <small class="text-danger" style="margin-left:50px;"><b>Please select 'INDIVIDUAL REGISTRATION' if you are an individual customer,</b></small>
                           <br>
                            <small class="text-danger" style="margin-left:50px;"><b>Or if you are a Business Organization Please Select 'CORPORATE REGISTRATION'</b></small>

                      <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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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 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>
                                <div class="row">
                                  <div class="col-lg-6">
                        
                                  </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="cb4" /><label for="cb4">Blogging</label>
                                          <input type="checkbox" name="hobby[]" value="Reading" id="cb5" /><label for="cb5">Reading</label>
                                          <input type="checkbox" name="hobby[]" value="Short-Term Investing" id="cb6" /><label for="cb6">Short-Term Investing</label>
                                          <input type="checkbox" name="hobby[]" value="Cooking" id="cb7" /><label for="cb7">Cooking</label>

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

                                        </div>
                                      </div>
                                    <div class="mb-3">
                                  
                                      <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 style="color:white;" class="btn btn-secondary btn-block btn-sm btn-icon-text"><i class="bi bi-save"></i> <span class="">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">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>
                          
                          

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

                        </div>
                        @endguest




            
        </div>
        <div role="tabpanel" aria-labelledby="2" hidden>
            <!-- <h1 class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1> -->
            <span class="span-tag">Corporate</span>






                        @guest
                          <div class="container-fluid" style="margin-top:-20px;margin-bottom:50px;">
                          <!-- <small class="text-danger" style="margin-left:50px;margin-top:50px;"><b>Please select 'INDIVIDUAL REGISTRATION' if you are an individual customer</b></small>
                            <br><br><br>
                            <small class="text-danger" style="margin-left:50px;"><b>Please select 'CORPORATE REGISTRATION' if you are a business organization</b></small> -->
                      <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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
                        
                        </div>
                      <!-- <form class="form-control" action="{{url('/user-registration')}}" method="post" ></form> -->
                      <form id="form-val-corporate" 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="success_cor">
                        
                                </div>
                                <div class="row">
                                  <div class="col-lg-6">
                                    <div class="mb-3">
                                      <label class="form-label">Organization 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 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>
                                <div class="row">
                                  <div class="col-lg-6">
                        
                                  </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="cor1" /><label for="cor1">Fashion</label>
                                          <input type="checkbox" name="hobby[]" value="Sports" id="cor2" /><label for="cor2">Sports</label>
                                          <input type="checkbox" name="hobby[]" value="Gadgets" id="cor3" /><label for="cor3">Gadgets</label>

                                          <input type="checkbox" name="hobby[]" value="Blogging" id="cor4" /><label for="cor4">Blogging</label>
                                          <input type="checkbox" name="hobby[]" value="Reading" id="cor5" /><label for="cor5">Reading</label>
                                          <input type="checkbox" name="hobby[]" value="Short-Term Investing" id="cor6" /><label for="cor6">Short-Term Investing</label>
                                          <input type="checkbox" name="hobby[]" value="Cooking" id="cor7" /><label for="cor7">Cooking</label>

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

                                        </div>
                                      </div>
                                  
                                    
                                    








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


                            <div class="card mb-4">
                              <div class="card-body">
                                <h3 class="h6 mb-4">Commercial 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">Trade name 
                                        <!-- <span>(required, at least 3 characters)</span> -->
                                      </label>
                                      <input name="trade_name" required  placeholder="" type="text" class="form-control">
                                    </div>
                                  </div>
                                  <div class="col-lg-6">
                                    <div class="mb-3">
                                      <label class="form-label">Registration Number <span>(required)</span></label>
                                      <input name="trade_id" required type="text" 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">Issue Date</label>
                                      <input name="trade_issue" type="date" class="form-control">
                                    </div>
                                  </div>
                                  <div class="col-lg-6">
                                    <div class="mb-3">
                                      <label class="form-label">Expiry Date</label>
                                      <input name="trade_expiry" type="date" class="form-control">
                                    </div>
                                  </div>
                                  


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

                                </div>

                                    <div class="hstack gap-3" id="submit_web">
                                      <button style="color:white;"  class="btn btn-secondary btn-block btn-sm btn-icon-text"><i class="bi bi-save"></i> <span class="">Register</span></button>
                                    </div>
                              </div>
                            </div>




                          </div>
                        










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

                            
                      
                            <div class="card mb-4">
                             
                            
                              <div class="card-body">
                              <h3 class="h6">Attachments</h3>
                              <hr>
                                <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>
                            

                             
                              <div class="card-body">
                                <h3 class="h6">Establishment CARD <span></span></h3>
                                <input name="est_doc"  class="form-control" type="file">
                                <span class="text-danger" id="file-input-error"></span>
                              </div>
                             
                             
                              <div class="card-body">
                                <h3 class="h6">Commercial Registration <span></span></h3>
                                <input name="com_doc"  class="form-control" type="file">
                                <span class="text-danger" id="file-input-error"></span>
                              </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">
       
          <!-- <h3 class="h6">Attachments Data</h3>
          <hr> -->
         
     
        <div class="card-body">   
              <h3 class="h6">QID NUMBER <span>(required)</span></h3>
              <input  name="qid_number"  class="form-control required" type="input" required>
          
              <h3 class="h6">Est ID <span>(required)</span></h3>
              <input  name="est_id"  class="form-control required" type="input" required>
           
              <h3 class="h6">Est Name <span>(required)</span></h3>
              <input  name="est_name"  class="form-control required" type="input" required>
            
              <h3 class="h6">Issue Date <span>(required)</span></h3>
              <input  name="est_issue"  class="form-control required" type="date" required>
            
              <h3 class="h6">Expiry Date <span>(required)</span></h3>
              <input  name="est_expiry"  class="form-control required" type="date" required>
            
            </div>

        
      </div>

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

                        </div>
                        @endguest





          
        </div>
      
    </div>
</main>
</article>



</div>
@endguest

























      <!-- fashion section end -->


    

   
<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();
    $('#success_cor').hide();
    
    // $("#btn_cor").prop("disabled",true); 
    $("#reg_btn").prop("disabled",true); 
  });



$("#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');
        }

});

// corporate reg starts
$("#form-val-corporate").validate({

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


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

$('#form-val-corporate').submit(function(e) {
       if ($('#corporate_agree').is(':checked')) {
        //alert('checked');
            $('#btn_cor').prop('disabled', false);
            e.preventDefault();
            let formData = new FormData(this);
            $('#file-input-error').text('');
            $.ajax({
                type:'POST',
                url: "{{url('/corporate-store')}}",
                data: formData,
                contentType: false,
                processData: false,
                success: (response) => {
                    if (response) {
                        this.reset();
                      //  alert('Successfully Registered');
                          $('#success_cor').empty();
                            $('#success_cor').show();
                            $('#success_cor').append("Successfully Registered!");
                            $("#success_cor").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!');
            $('#btn_cor').prop('disabled', true);
            $('#btn_cor').addClass('btn_disabled');
            
            // $('#id_of_your_button').removeAttr('disabled');
        }

});

        </script>

        
      @endsection