@extends('seller.layout.master')
@section('title')
@section('content')
<style>
    li p {
        margin-top: -5%;
        color: black;
        font-weight: 500;
        }
     .li_style{
        text-align: left;
        margin: 14px;
        list-style: none;
     }
     .position-center-center {
     left: 50%;
    }
</style>
    <div class="box-shadow-for-ui">
        <div class="uou-block-2b">
            <div class="container"> <a href="{{ url('/') }}" class="logo">
                    <img src="{{ secure_asset('assets/web/img/logo.png') }}" alt=""></a>
                <a href="#" class="mobile-sidebar-button mobile-sidebar-toggle"><span></span></a>
                {{-- <nav class="nav">
                    <ul class="sf-menu">
                        <li class="navLinkA active"> <a href="{{ url('index') }}"><img
                                    src="{{ asset('assets/web/images/home.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Home</a> </li>
                        <li class="navLinkA"> <a href="{{ url('about') }}"><img
                                    src="{{ asset('assets/web/images/2.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />About</a></li>
                        <li class="navLinkA"> <a href="{{ url('faqs') }}"><img
                                    src="{{ asset('assets/web/images/3.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />FAQ</a></li>
                        <li class="navLinkA"> <a href="{{ url('faqs') }}"><img
                                    src="{{ asset('assets/web/images/4.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Members</a></li>
                        <li class="navLinkA"> <a href="{{ url('term') }}"><img
                                    src="{{ asset('assets/web/images/5.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Terms</a></li>
                        <li class="navLinkA"> <a href="{{ url('privacy') }}"><img
                                    src="{{ asset('assets/web/images/6.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Privacy</a></li>
                        <li class="navLinkA"> <a href="{{ url('pricing') }}"><img
                                    src="{{ asset('assets/web/images/7.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Pricing</a></li>
                        <li class="navLinkA"> <a href="{{ url('comingsoon') }}"><img
                                    src="{{ asset('assets/web/images/8.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Coming Soon</a></li>
                        <li class="navLinkA"> <a href="{{ url('contact') }}"><img
                                    src="{{ asset('assets/web/images/9.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Contact</a></li>
                    </ul>
                </nav> --}}
                <a href="{{ url('/') }}"> <h4>Tayseer</h4> </a>
            </div>
        </div>
        <!-- end .uou-block-2b -->
    </div>
    <!-- HOME PRO-->
<div class="home-pro">
	
  <div class="vc_row wpb_row vc_row-fluid">  <div class="banr-head" style="background: url('../assets/img/men.jpg')center center no-repeat;background-size: cover; ">
 <div class="container">
   <div class="row">

     <!-- CONTENT -->
     <div class="col-sm-7">
       <div class="text-area">
         <div class="position-center-center col-md-10">
           <ul>
                <li class="li_style">
                    <h2>Tayseer</h2>
                    <h6>The new home for freelancers in the UAE</h6>
                </li>
               <li class="li_style">
                    {{-- <button type="submit" class="btn btn-primary">Become a Freelancer <i class="fa fa-chevron-right"></i> </button> --}}
               </li>
           </ul>
         </div>
       </div>
     </div>
           <!-- FORM SECTION -->
     <div class="col-sm-5">
       <div class="login-sec">

         <!-- TABS -->
         <div class="uou-tabs accordion-xs">
           <ul class="tabs">
             <li><a href="#register">Register Now</a></li>
             <li class="active"><a href="#log-in">Member Login</a></li>
           </ul>
            
           <!-- REGISTER -->
            {{-- @if(Session::has('register'))
             {{dd(Session::get('register'))}}
            @endif --}}
           <div class="content">
             <a href="#register" class="accordion-link first">Register Now</a><a href="#register" class="accordion-link first">Register Now</a><div id="register">
                <form id="iv_home_registration" name="iv_home_registration"  action="{{route('seller-registration-process')}}" method="post" class="has-validation-callback">
                    
                   @csrf
                    <label><input type="radio" name="role_id" id="iv_member_type" value="3" checked="" data-validation-error-msg=" Select user Type" class="form-control ctrl-textbox" data-validation="required"> <span>Buyer </span> </label>
                    <label><input type="radio" name="role_id" id="iv_member_type" value="2" data-validation-error-msg=" Select user Type" class="form-control ctrl-textbox" data-validation="required"> <span>Seller</span>  </label>
                    {{-- <div>
                      <input type="text" id="first_name" name="first_name" data-validation="required" placeholder="Display Name" data-validation-error-msg="Please enter Name" style="color:white">
                    </div> --}}
                    <div>
                      <input type="email" name="email" data-validation="email" placeholder="Enter email address" data-validation-error-msg="Please enter a valid email address" style="color:white">
                    </div>
                    <div>
                      <input type="text" name="username" data-validation="required" data-validation-length="4-50" data-validation-error-msg=" The user name has to be an alphanumeric value between 4-50 characters" class="form-control ctrl-textbox" placeholder="Enter User Name" style="color:white">
                    </div>
                    <div>
                      <input type="password" name="password" data-validation="required" class="form-control ctrl-textbox" placeholder="Enter Password" data-validation-strength="2" style="color:white">
                    </div>
                   <button type="submit" id="submit_uou_tigerp_payment" >Register </button>
              </form>
             </div>

             <!-- LOGIN -->
             <a href="#log-in" class="accordion-link active last ">Member Login</a><a href="#log-in" class="accordion-link active last">Member Login</a><div id="log-in" class="active">
               <form id="login_form" action="{{route('login-process')}}" method="post">
                 @csrf
                  @if (Session::has('message'))
                        <div class="alert alert-{{Session::get('messageType')}} alert-block">
                          {{-- <button type="button" class="close" data-dismiss="alert">×</button>	 --}}
                            <strong>{{Session::get('message')}} </strong>
                        </div>
                  @endif
                  @if(Session::get('errors'))
                                    {{-- {{dd(Session::get('errors')->first())}} --}}
                      <div class="alert alert-danger">
                          {{Session::get('errors')->first()}}
                      </div>
                 @endif
                 <div class="display-hide" id="error_message">  </div>
                 <input type="email" name="email" id="email" required placeholder="User Email" style="color:white">
                 <input type="password" placeholder="Password" required name="password" id="password" style="color:white">
                 {{-- <button type="button" onclick="return chack_login();">Login </button> --}}
                 <button type="submit" id="submit_uou_tigerp_payment" >Login </button>
                                        {{-- <div class="forget">Forgot your password?  <a href="http://tiger.eplug-ins.com/login/"> Click Here</a></div> --}}
               </form>
             </div>
           </div>
         </div>
       </div>
     </div>

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


<!--<div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner "><div class="wpb_wrapper"></div></div></div></div><div class="vc_row wpb_row vc_row-fluid">     -->
<!--<section class="services">-->

 <!-- SERVICES ROW -->
<!-- <ul class="row">-->

   <!-- SECTION -->
<!--   <li class="col-md-4 matchHeight" style="background: rgb(67, 185, 246); height: 386px;">-->
<!--     <div class="ser-inn"> -->
<!--       <h4>Stay in touch with your colleagues</h4>-->
<!--       <i class=" fa fa-globe"></i>-->
<!--       <p>-->
<!--   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue conseqaut nibbhi ellit ipsum consectetur.				</p>-->
<!--     </div>-->
<!--   </li>-->

   <!-- SECTION -->
<!--   <li class="col-md-4 matchHeight" style="background: rgb(102, 134, 255); height: 386px;">-->
<!--     <div class="ser-inn">-->
<!--       <h4>-->
<!--         Get the latest news in your industry              </h4>-->
<!--       <i class="fa fa-book"></i>-->
<!--       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue conseqaut nibbhi ellit ipsum consectetur.-->
<!--       </p>-->
<!--     </div>-->
<!--   </li>-->

   <!-- SECTION  -->
<!--   <li class="col-md-4 matchHeight" style="background: rgb(135, 211, 124); height: 386px;">-->
<!--     <div class="ser-inn">-->
<!--       <h4>-->
<!--        Share what’s up with you            </h4>-->
<!--       <i class="fa fa-picture-o"></i>-->
<!--       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue conseqaut nibbhi ellit ipsum consectetur.</p>-->
<!--     </div>-->
<!--   </li>-->
<!-- </ul>-->
<!--</section>-->
<!--<div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner "><div class="wpb_wrapper"></div></div></div></div>-->
<div class="vc_row wpb_row vc_row-fluid">  
<section class="pro-content">
 <div class="container-fluid">
   <div class="row">

     <!-- PRO IMAGE -->
 <!--    <div class="col-md-6 pro-inside" style="background:url(http://tiger.eplug-ins.com/wp-content/themes/tiger/assets/img/pro-img-1.jpg) center center no-repeat;"></div>-->

     <!-- PRO CONTENT -->
 <!--    <div class="col-md-6 pro-inside">-->
 <!--      <div class="position-center-center col-md-9">-->
 <!--        <h1>-->
 <!--  Interact with other professionals 				 </h1>-->
 <!--        <p>-->
 <!--  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 				   </p>-->
 <!--      </div>-->
 <!--    </div>-->
 <!--  </div>-->
 <!--</div>-->
 <!-- PRO SECTION -->
 <div class="container-fluid">
   <div class="row">

     <div class="col-md-6 pro-inside">
       <div class="position-center-center col-md-9">
            <ul>
                <li class="li_style">
                    <h2>Features:</h2>
                </li>
               <li class="li_style">
                   <h5><i class="fa fa-check-circle"></i> Freelancing</h5>
                    <p>Find a freelancer to complete a task on behalf of you!</p>                   
               </li>
               <li class="li_style">
                   <h5><i class="fa fa-check-circle"></i> Delivery</h5>
                   <p>want something picked up or dropped off? Find the right person to deliver it for you!</p>
               </li>
               <li class="li_style">
                    {{-- <button type="submit" class="btn btn-primary">Browse Freelancer <i class="fa fa-chevron-right"></i> </button> --}}
                    <a href="{{route('get-freelancer')}}" class="btn btn-primary">Browse Freelancer <i class="fa fa-chevron-right"></i> </a>
               </li>
           </ul>
       
       </div>
     </div>	

     <div class="col-md-6 pro-inside" style="background:url(../assets/img/women.jpg) center center no-repeat;"></div>
   </div>
 </div>
</section>

<!--<div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner "><div class="wpb_wrapper"></div></div></div></div><div class="vc_row wpb_row vc_row-fluid">	    <section class="app-images" style="background:url(http://tiger.eplug-ins.com/wp-content/themes/tiger/assets/img/app-bg.jpg) center center no-repeat; background-size: cover;">-->
<!-- <div class="container">-->
<!--   <div class="row">-->

     <!-- TEXT -->
<!--     <div class="col-md-6 text-center text-area">-->
<!--       <h1>SocialMe for your Smartphone 				</h1>-->
<!--       <p>-->

<!--   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 				 </p>-->
<!--       <a href="#"><i class="fa fa-apple"></i> App Store</a> </div>-->

     <!-- APP IMAGE -->
<!--     <div class="col-md-6 text-right"><img src="http://tiger.eplug-ins.com/wp-content/themes/tiger/assets/img/app-img.png" alt="Image."> </div>-->
<!--   </div>-->
<!-- </div>-->
<!--</section>-->
<!--<div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner "><div class="wpb_wrapper"></div></div></div></div><div class="vc_row wpb_row vc_row-fluid">-->

<!--<div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner "><div class="wpb_wrapper"></div></div></div></div>-->

<!--</div>-->
</div>
<!-- end .uou-block-2b -->
</div>
@endsection
@section('scripts')
    <!-- Scripts -->
    <!-- <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/plugins/superfish.min.js"></script>
    <script src="js/jquery.ui.min.js"></script>
    <script src="js/plugins/rangeslider.min.js"></script>
    <script src="js/plugins/jquery.flexslider-min.js"></script>
    <script src="js/uou-accordions.js"></script>
    <script src="js/uou-tabs.js"></script>
    <script src="js/plugins/select2.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/gmap3.min.js"></script>
    <script src="js/scripts.js"></script> -->
    <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> -->
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>-->
    <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {
                slideIndex = 1
            }
            if (n < 1) {
                slideIndex = slides.length
            }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active_slide", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active_slide";
        }

    </script>

    <script type="text/javascript">
        let slider_i = 0;
        $(document).ready(function() {
            $("div.circleDivide").click(function() {
                let classname = $(this).data("class");
                let eq = $(this).data("eq");
                slider_i = eq;
                for (let i = eq; i <= 3; i++) {
                    $("#slide-baner").removeClass(classname + i);
                }
                $("div.circleDivide").removeClass("circleDivideFocus")
                for (let i = 0; i <= eq; i++) {
                    $("div.circleDivide").eq(i).addClass("circleDivideFocus");
                }
                $("#slide-baner").addClass(classname + eq);
            })
            $("#a-image").hide();
            $("#ua-image").hide();
            $("#ld-image").hide()
            $("#ac").on("click", function() {
                if ($(this).parent().hasClass("active")) {
                    $("#c-image").hide();
                    $("#a-image").show();
                    $("#ud-image").show();
                    $("#ua-image").hide();
                    $("#ld-image").show();
                    $("#la-image").hide();
                }
            });
            $("#uc").on("click", function() {
                if ($(this).parent().hasClass("active")) {
                    // alert("yes");
                    $("#ud-image").hide();
                    $("#ua-image").show();
                    $("#c-image").show();
                    $("#a-image").hide();
                    $("#ld-image").show();
                    $("#la-image").hide();
                }
            });
            $("#lc").on("click", function() {
                if ($(this).parent().hasClass("active")) {
                    // alert("yes");
                    $("#ud-image").show();
                    $("#ua-image").hide();
                    $("#c-image").show();
                    $("#a-image").hide();
                    $("#la-image").show();
                    $("#ld-image").hide();

                }
            });

            // alert();

        });
        $(document).ready(function() {
            $('.owl-carousel').owlCarousel({
                autoWidth: true
            })
        });

    </script>
    {{-- <script>
  $(document).ready(function() {
    $('.owl-carousel').owlCarousel({
      loop: true,
      margin: 10,
      nav: true,
      autoPlay: 1000,
      items: 10,
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 3
        },
        1000: {
          items: 10
        }
      }
    });
  });

  var toSmall = document.getElementById("toSmall")
  toSmall.capitalize()
</script> --}}
    <script>
        function toggleSubmit() {
            var toggle = document.getElementById("toggleOn1")
            var toggleBtn = document.getElementById("submitBtn1")
            if (toggle.checked) {
                toggleBtn.removeAttribute("disabled")
                toggleBtn.classList.remove("opaclight")
            } else {
                toggleBtn.setAttribute("disabled", "true");
                toggleBtn.classList.add("opaclight")
            }
        }

        function toggleSubmit2() {
            var toggle = document.getElementById("toggleOn2")
            var toggleBtn = document.getElementById("submitBtn2")
            if (toggle.checked) {
                toggleBtn.removeAttribute("disabled")
                toggleBtn.classList.remove("opaclight")
            } else {
                toggleBtn.setAttribute("disabled", "true");
                toggleBtn.classList.add("opaclight")
            }
        }

    </script>
    <script>
        var slideBaner = document.querySelector("#slide-baner");
        var indicateVar = document.querySelectorAll("#indicate");
        setInterval(function runSlide() {
            indicateVar[slider_i].classList.add('circleDivideFocus')
            if (slider_i == 0) {
                slider_i++;
                slideBaner.classList.add('bnr-head-img-' + slider_i)
                slider_i--;
            } else {
                slideBaner.classList.add('bnr-head-img-' + slider_i)
            }
            if (slider_i == 3) {
                slider_i = 0;
                for (let d = 0; d < indicateVar.length; d++) {
                    slideBaner.classList.remove('bnr-head-img-' + d)
                    indicateVar[d].classList.remove('circleDivideFocus')
                }
            } else {
                slider_i++;
                console.log("i value : " + slider_i)
            }
        }, 2000)

       /* $(document).ready(function(){
           $('#iv_home_registration').validate({
                rules:{
                   	first_name: {
                      required: true,
                      maxlength: 100
                    },
                    email: {
                      required: true,
                      email: true,
					          	maxlength: 40
                    },
                    username: {
                       required: true,
                       maxlength: 150
                    },
                     password: {
                      required: true,
                    },
               },   
                submitHandler: function(form) {
                    return true;
                }
            });
        })*/

    </script>
@endsection