@extends('frontend.layouts.app')
@section('after-styles')
    <!-- Latest compiled and minified CSS -->
    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <link href="{{asset('asset/style.css')}}" rel="stylesheet">
@endsection
@section('content')
    <nav class="navbar navbar-default navbar-fixed-top nav-top-color" style="box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;">
        <div class="container-fluid">
            <!-- Brand/logo -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Your Brand</a>
            </div>
            <!-- Collapsible Navbar -->
            <ul class="navbar-nav">
                <a class="navbar-brand" href="#">Your Brand</a>
            </ul>
        </div>
    </nav>
    <div id="wrapper" class="">
        <!-- Sidebar -->
        <div id="sidebar-wrapper" >
            <aside id="form-container1" class="form-container" style="right: 0px; display: block;">
            <div class="row">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div><br />
                @endif
                <div class="col-md-12">
                    <form method="post"  action="{{url('store/rider')}}" id="form-kurier" enctype="multipart/form-data">
                        @csrf
                        <h3 class="ta-c">Darkhwast Mukammil karein</h3>
                        <input type="hidden" id="rider_city_id" name="city_id" value="{{old('city_id')}}">
                        <label for="form-name">Name*</label>
                        <input type="text" class="form-control form-required"  value="{{old('name')}}" id="name" name="name" placeholder="Name" required="required">
                        <br>
                        <label for="form-surname">Father Name*</label>
                        <input type="text" class="form-control form-required" id="surname" value="{{old('surname')}}" name="surname" placeholder="Surname" required="required">
                        <br>
                        <label for="form-telephone">Mobile*</label>
                        <input type="tel" class="form-control form-required" id="contact_no" value="{{old('contact_no')}}" name="contact_no" placeholder="123456789" required="required">
                        <br>
                        <label for="form-email">Eamil*</label>
                        <input type="email" class="form-control form-required" id="email" value="{{old('email')}}" name="email" placeholder="abc@gmail.com" required="required">
                        <br>
                        <div class="form-block form-element form-check-inline">
                            <label>Kia aap kay pass bike chalanay ka learning ya normal driving license hai?</label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input form-check-inline license" type="radio"  name="license" id="license" value="1" checked="">
                                <label class="form-check-label custom-control-inline" for="license">
                                    Haan
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input form-check-inline license" type="radio" name="license" id="license" value="0">
                                <label class="form-check-label custom-control-inline" for="form-vehicle_check1">
                                    Nahi
                                </label>
                            </div>
                        </div>
                        <div class="has_license">

                            <label for="form-front_licence">Front license Picture *</label>
                            <input type="file" class="form-control form-required" id="front_licence" name="front_licence"  required="required">
                            <img id="front_licence_image" width="100px" height="100px" src="#" alt="your image" />
                            <br>
                            <label for="form-back_licence">Back license Picture *</label>
                            <input type="file" class="form-control form-required" id="back_licence" name="back_licence"  required="required">
                            <img id="back_licence_image" width="100px" height="100px" src="#" alt="your image" />

                            <br>

                        </div>
                        <div class="form-block form-element form-check-inline">
                            <label>Kia aap 18 saal yah usse bade hain?</label>
                            <br>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input form-check-inline adult" type="radio"  name="adult" id="adult" value="1" checked="">
                                <label class="form-check-label custom-control-inline" for="age">
                                    Haan
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input form-check-inline adult" type="radio" {{old('adult')}} name="adult" id="adult" value="0">
                                <label class="form-check-label custom-control-inline" for="age">
                                    Nahi
                                </label>
                            </div>
                        </div>

                        <br>
                        <div class="identity_number">
                        <label for="form-email">CNIC*</label>
                        <input type="text" class="form-control form-required" id="identity_number" value="{{old('identity_number')}}" name="identity_number" placeholder="123456789" required="required">
                        </div>
                        <br>
                        <div class="checkbox-inline form-element">
                            <input type="checkbox" value="1" id="form-data_consent"  class="form-required" required="required">
                            <label class="check-label" for="defaultCheck1"><a href="#" target="_blank" rel="noopener"> Main Privacy Policy sey ittefaaq karta hoon aur Privacy Policy</a> mein bataye gaye third party channels kay zariye raabta karnay par ittefaaq karta hoon. Agay barhne sey, main iss baat pe razamand hoon kay Privacy Policy kay muttabiq, jo maine parhi aur samjhi, mere zariye farham ki gayi maaloomat ko ikhatta, istemaal aur uss ka inkeshaaf kar sakty hain.
                            </label>
                        </div>
                        <button type="submit" id="send" class="button-form">Abhi apply karein</button>
                        <div href="#menu-toggle" id="close"  data-toggle="collapse"
                             data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"
                             class="close menu-toggle switch-button ">Close</div>

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

            </aside>
{{--            <ul class="sidebar-nav">--}}
{{--                <li class="sidebar-brand"> <a href="#"> Start Bootstrap </a> </li>--}}
{{--                <li> <a href="#">Dashboard</a> </li>--}}
{{--                <li> <a href="#">Shortcuts</a> </li>--}}
{{--                <li> <a href="#">Overview</a> </li>--}}
{{--                <li> <a href="#">Events</a> </li>--}}
{{--                <li> <a href="#">About</a> </li>--}}
{{--                <li> <a href="#">Services</a> </li>--}}
{{--                <li> <a href="#">Contact</a> </li>--}}
{{--            </ul>--}}
        </div> <!-- /#sidebar-wrapper -->
        <!-- Page Content -->
        <div id="page-content-wrapper">

            <header id="header" class="header">
                <div class="header-gradient"></div>
                <div id="header-cont" class="header-cont cont">
                    <div id="header-form" class="header-form ">
                        <h1 id="header-text" class="header-text">
                            ShaapShopp  <div id="header-text-large" class="header-text header-text-large " style="white-space: nowrap; display: inline-block; font-size: 39.6964px;">Rider Baniye</div>
                        </h1>
                        <div id="header-form-title" class="header-form-title">Kis Sheher Mein Kaam Karenge</div>
                        <form id="kurier-city-vehicle">
                            <select class="form-control form-header" value="{{old('city_id')}}"id="form-city" name="city">
                                <option value="">Aap ka Sheher</option>
                                <option value="1">City 1</option>
                                <option value="2">City 2</option>
                            </select>
                            <br>
                            <div href="#menu-toggle" id="apply-now"  data-toggle="collapse"
                                 data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"
                                 class="apply menu-toggle switch-button button-pink-header greyablegreyed">Apply Karein</div>
                        </form>
                    </div>
                </div>
            </header>
            <main id="main" class="main">

                <section id="referral-bonus" class="list color-bg-primary ta-c">
                    <div id="referral-bonus-container" class="list-container">
                        <h2 class="rf-section-title"><b>Apka Faida<b></b></b></h2><b>
                            <div class=" row">
                                <div class="listflex col-sm-12 col-md-6 col-lg-6 ">
                                    <div id="referral-bonus-item-1" style="margin: 0 auto;" class="list-item c4 animation-element fade-in pop-in">
                                        <figure>
                                            <img src="https://rider.foodpanda.pk/wp-content/uploads/2020/06/RAF1.png" alt="RAF1">
                                        </figure>
                                        <h3 class="rf-title">Rs 35000</h3>
                                        <p>Full time kaam kar kay araam sey le jayen! </p>
                                    </div>

                                </div>
                                <div class="listflex col-sm-12 col-md-6 col-lg-6 ">
                                    <div id="referral-bonus-item-2" style="margin: 0 auto;" class="list-item c4 animation-element fade-in pop-in">
                                        <figure>
                                            <img src="https://rider.foodpanda.pk/wp-content/uploads/2020/06/RAF2.png" alt="RAF2">
                                        </figure>
                                        <h3 class="rf-title">Rs 1500</h3>
                                        <p>Doston ko refer kar kay izaafi paise kamayen! </p>
                                    </div>

                                </div>
                            </div>
                        </b></div><b>
                    </b>
                </section>
                <b></b>
                <section class="list">
                    <b>
                    </b><div class="list-container "><b>
                        </b><h2><b></b>Abdullah Khan</h2>
                        <div class="list-image c12">
                            <picture>
                                <img class="img-fluid" src="https://rider.foodpanda.pk/wp-content/uploads/2020/05/pk-rider-960x960.png" alt="pk-rider" >
                            </picture>
                        </div>
                    </div><b></b>
                </section>
                <b></b>

                <section class="pitch-wrapper">
                    <div  class="pitch-right pitch">
                        <div   class="cont1" style="z-index: 9999">
                            <div  class="pitch-title-right centered">
                                <header><h2><span class="title">Apnay sheher ko jaanen!</span></h2></header>
                                <p>kay sath deliveries karen aur sheher bhar mein ghoom kar paise kamayen!</p>
                            </div>
                        </div>
                        <picture class="pitch-bg img-fluid pitch-bg-right animation-element fade-in">
                            <img class="img-fluid" src="https://rider.foodpanda.pk/wp-content/uploads/2018/06/Image_2-1500x894.jpg" alt="pk-rider" width="960" height="650">
                        </picture>
                    </div>



                    <div  class="pitch-right pitch">
                        <div style="z-index: 9999" class="cont1">
                            <div  class="pitch-title-right centered">
                                <header><h2><span class="title">Tips</span></h2></header>
                                <p>Iskay ilawa customer sey tips, yeh extra earning sirf aap kay liye!</p>
                            </div>
                        </div>

                        <picture class="pitch-bg pitch-bg-right img-fluid  animation-element fade-in">
                            <img class="img-fluid" src="https://rider.foodpanda.pk/wp-content/uploads/2020/06/B-FPA_C-PK_L-XX_D-WALK_T-LOCAL_I-XX_F-SI_V5-1000x1000.jpg" alt="pk-rider" width="960" height="650">
                        </picture>
                    </div>

                    <div  class="pitch-right pitch">
                        <div style="z-index: 9999"  class="cont1">
                            <div  class="pitch-title-right centered">
                                <header><h2><span class="title">Apnay waqt ko cash karen!</span></h2></header>
                                <p>Apni marzi kay auqaat par kaam karen aur paise kamayen! Jitnay orders, uthnay ziada paise!</p>
                            </div>
                        </div>
                        <picture class="pitch-bg pitch-bg-right img-fluid animation-element fade-in">
                            <img class="img-fluid" src="https://rider.foodpanda.pk/wp-content/uploads/2020/06/B-FPA_C-PK_L-XX_D-MODO_T-LOCAL_I-XX_F-SI_V5-1000x1000.jpg" alt="pk-rider" style="height: 650px !important;" width="960" height="450">
                        </picture>
                    </div>
                </section>



                <section id="carousel" class="list">
                    <div id="carousel-container-1" class="cont cont--relative">
                        <h2> <br> <b> </b></h2>
                        <div class="listflex">
                            <div id="carousel-item-0" class="list-item c4 animation-element fade-in pop-in">
                                <figure>
                                    <img src="https://rider.foodpanda.pk/wp-content/uploads/2018/06/foodpanda_logo-1.svg" alt="icon" height="50">
                                </figure>
                                <h3>1</h3>
                                <p>Sheher select kar kay details fill karein. </p>
                            </div>
                            <div id="carousel-item-1" class="list-item c4 animation-element fade-in pop-in">
                                <figure>
                                    <img src="https://rider.foodpanda.pk/wp-content/uploads/2018/06/foodpanda_logo-1.svg" alt="icon" height="50">
                                </figure>
                                <h3>2</h3>
                                <p>Registration kay liye area select ya office visit karein.</p>
                            </div>
                            <div id="carousel-item-2" class="list-item c4 animation-element fade-in pop-in">
                                <figure>
                                    <img src="https://rider.foodpanda.pk/wp-content/uploads/2018/06/foodpanda_logo-1.svg" alt="icon" height="50">
                                </figure>
                                <h3>3</h3>
                                <p>Apna samaan collect kar kay kaam shuru karen!</p>
                            </div>
                        </div>
                    </div>
                </section>

                <section id="list-1" class="list color-bg-primary">
                    <div id="list-container-1" class="cont">
                        <h2>Mazeed<br> <b>faide</b></h2>
                        <div class="listflex">
                            <div id="list-item-1a" class="list-item c4 animation-element fade-in pop-in">
                                <figure>
                                    <img src="https://rider.foodpanda.pk/wp-content/uploads/2018/03/suitcase.svg" alt="icon 1b">
                                </figure>
                                <p>Accha Saman: Samaan, jo kaam mein asaani paida karey!</p>
                            </div>
                            <div id="list-item-1b" class="list-item c4 animation-element fade-in pop-in delay-1">
                                <figure>
                                    <img src="https://rider.foodpanda.pk/wp-content/uploads/2018/11/paid_sick_leave_dollar.svg" alt="icon 1c">
                                </figure>
                                <p>Flexibility- Apna kaam ka waqat khud muntakhib karny ki!</p>
                            </div>
                            <div id="list-item-1c" class="list-item c4 animation-element fade-in pop-in delay-2">
                                <figure>
                                    <img src="https://rider.foodpanda.pk/wp-content/uploads/2018/03/group.svg" alt="icon 1a">
                                </figure>
                                <p>Team events- yahan sab ek community hain! </p>
                            </div>
                        </div>
                    </div>
                </section>


                <section id="list-2" class="list color-bg-secondary">
                    <div id="list-container-2" class="list-container cont">
                        <h2>Kuch cheezun<br> <b>ki zarurat hogi</b></h2>
                        <div class="listflex">
                            <div id="list-item-2a" class="list-item c3">
                                <picture class="animation-element">
                                    <img src="https://rider.foodpanda.pk/wp-content/uploads/2020/05/pk-rider-960x960.png" alt="pk-rider" height="23" width="24">
                                </picture>
                                <p>An iPhone 4s (or newer) yah Android phone (4.2. or newer) version </p>
                            </div>
                            <div id="list-item-2b" class="list-item c3">
                                <picture class="animation-element">
                                    <img src="https://rider.foodpanda.pk/wp-content/uploads/2020/05/pk-rider-960x960.png" alt="pk-rider" height="23" width="24">
                                </picture>
                                <p>Motorcycle + Driving Licence</p>
                            </div>
                            <div id="list-item-2c" class="list-item c3">
                                <picture class="animation-element">
                                    <img src="https://rider.foodpanda.pk/wp-content/uploads/2020/05/pk-rider-960x960.png" alt="pk-rider" height="23" width="24">
                                </picture>
                                <p>CNIC + Jazz Cash Account</p>
                            </div>
                            <div id="list-item-2d" class="list-item c3">
                                <picture class="animation-element">
                                    <img src="https://rider.foodpanda.pk/wp-content/uploads/2020/05/pk-rider-960x960.png" alt="pk-rider" height="23" width="24">
                                </picture>
                                <p>18+ years age</p>
                            </div>
                        </div>
                    </div>
                </section>


                <section style="background: #CCCCCC" class="final">
                    <figure class="final-bg animation-element fade-in">
                    </figure>
                    <div class="animation-element slide-right">
                        <div id="cta" class="cta">
                            <h2>Shuru karein</h2>
                            <div href="#menu-toggle" data-toggle="collapse"
                                 data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"
                                 class="apply menu-toggle switch-button button-pink centered">Abhi apply karein</div>

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

            </main>
        </div> <!-- /#page-content-wrapper -->
    </div>
@endsection
@section('after-scripts')
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    @if ($errors->any())
        <script>
            $( document ).ready(function() {
                $("#wrapper").addClass("toggled");

            });
        </script>
    @endif
    <script>

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#front_licence_image').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]); // convert to base64 string
            }
        }
        function readURLBack(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#back_licence_image').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]); // convert to base64 string
            }
        }

        $("#front_licence").change(function() {
            readURL(this);
        });
        $("#back_licence").change(function() {
            readURLBack(this);
        });

        $('.license').on('click',function (){
            var license = $(this).val();
            if(license == 1){
                $('#front_licence').attr('required',true);
                $('#back_licence').attr('required',true);
                $('#send').removeAttr('disabled');
                $('.has_license').css('display','block');
            }else{
                $('#front_licence').removeAttr('required');
                $('#back_licence').removeAttr('required');
                $('.has_license').css('display','none');
                $('#send').prop('disabled', true);
            }
        });

        $('.adult').on('click',function (){
            var adult = $(this).val();
            if(adult == '1'){
                $('#identity_number').attr('required',true);
                $('.identity_number').css('display','block');
                $('#send').removeAttr('disabled');
            }else{
                $('#identity_number').removeAttr('required');
                $('.identity_number').css('display','none');
                $('#send').prop('disabled', true);
            }
        });

        $(function(){
            $(".menu-toggle").click(function(e) {
                e.preventDefault();
                var city_id = $('#form-city').val();
                if(city_id != ''){
                    $("#rider_city_id").val(city_id);
                    $("#wrapper").toggleClass("toggled");
                    $('#form-city').next('div.bg-warning').remove();
                }else{
                    $("#form-city").focus()
                    $('#form-city').next('div.bg-warning').remove();
                    $('#form-city').after('<div class="bg-warning text-dark">Name is Required</div>');
                    $('#form-city').attr('required',true);
                    $("html, body").animate({ scrollTop: 0 }, "slow");
                }

            });
        });

        $(window).on("load",function() {
            $(window).scroll(function() {
                var windowBottom = $(this).scrollTop() + $(this).innerHeight();
                $(".listflex").each(function() {
                    /* Check the location of each desired element */
                    var objectBottom = $(this).offset().top + $(this).outerHeight();

                    /* If the element is completely within bounds of the window, fade it in */
                    if (objectBottom < windowBottom) { //object comes into view (scrolling down)

                        if ($(this).css("opacity")==0) {
                            $(this).fadeTo(500,1);
                            $(this).animate({'opacity':'1'},500);
                            $(this).children().addClass('in-view');

                        }

                    } else { //object goes out of view (scrolling up)
                        if ($(this).css("opacity")==1) {
                            $(this).fadeTo(500,0);

                        }
                    }
                });
                $(".pitch-wrapper .pitch").each(function() {
                    /* Check the location of each desired element */
                    var objectBottom = $(this).offset().top + $(this).outerHeight();
                    console.log(objectBottom)
                    console.log(windowBottom)

                    /* If the element is completely within bounds of the window, fade it in */
                    if (objectBottom-250 < windowBottom) { //object comes into view (scrolling down)

                        if ($(this).css("opacity")==0) {
                            $(this).fadeTo(500,1);
                            // $(this).closest('.pitch').children('.pitch-container-right').addClass('in-view');
                            // $(this).closest('.pitch').children('.pitch-container-right').css("display", "block");
                            $(this).closest('.pitch').children('picture').addClass('in-view');
                        }
                    } else { //object goes out of view (scrolling up)
                        if ($(this).css("opacity")==1) {
                            $(this).fadeTo(500,0);
                            // $(this).closest('.pitch').children('.pitch-container-right').removeClass('in-view');
                            // $(this).closest('.pitch').children('.pitch-container-right').css("display", "none")
                            $(this).closest('.pitch').children('picture').removeClass('in-view');

                        }
                    }
                });
            }).scroll(); //invoke scroll-handler on page-load
        });



    </script>
@endsection