@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" >
    <style>
        .nav-top-color {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            z-index: 150;
            background-color: rgba(255,255,255,.8);
            box-shadow: 2px 2px 5px rgba(0,0,0,.2);
        }
        .header {
            background-image: url(https://rider.foodpanda.pk/wp-content/uploads/2020/06/B-FPA_C-PK_L-XX_D-WALK_T-LOCAL_I-XX_F-LSI_V22.jpg);
            background-position: center center;
        }
        .pitch-right .pitch-left{
            height: 750px;
        }

        #wrapper {
            padding-left: 0;
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        #wrapper.toggled {
            padding-right: 250px;
        }

        #sidebar-wrapper {
            z-index: 1000;
            position: fixed;
            right: 250px;
            width: 0;
            height: 100%;
            margin-right: -250px;
            overflow-y: auto;
            background: #000;
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        #wrapper.toggled #sidebar-wrapper {
            width: 250px;
        }

        #page-content-wrapper {
            width: 100%;
            position: absolute;
            /*padding: 15px;*/
        }

        #wrapper.toggled #page-content-wrapper {
            position: absolute;
            margin-right: 0px;
        }


        /* Sidebar Styles */

        .sidebar-nav {
            position: absolute;
            top: 0;
            width: 250px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .sidebar-nav li {
            text-indent: 20px;
            line-height: 40px;
        }

        .sidebar-nav li a {
            display: block;
            text-decoration: none;
            color: #999999;
        }

        .sidebar-nav li a:hover {
            text-decoration: none;
            color: #fff;
            background: rgba(255, 255, 255, 0.2);
        }

        .sidebar-nav li a:active, .sidebar-nav li a:focus {
            text-decoration: none;
        }

        .sidebar-nav>.sidebar-brand {
            height: 65px;
            font-size: 18px;
            line-height: 60px;
        }

        .sidebar-nav>.sidebar-brand a {
            color: #999999;
        }

        .sidebar-nav>.sidebar-brand a:hover {
            color: #fff;
            background: none;
        }


    </style>
    <link href="{{asset('css/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">
            <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 id="header-gradient" 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" id="form-city" name="city">
                                <option value="0">Aap ka Sheher</option>
                                <option value="1">City 1</option>
                                <option value="2">City 2</option>
                            </select>
                            <br>
                            <div id="apply-now" class="apply switch-button button-pink-header greyablegreyed">Apply Karein</div>
                            <a href="#menu-toggle" id="menu-toggle" class="navbar-brand"><span class="navbar-toggler-icon"></span></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

                        </form>
                    </div>
                    <div class="learn-more">
                    </div>
                    <a href="#main" class="learn-more learn-more--link">
                        <div>Learn More</div>
                        <div class="learn-more__arrow"></div>
                    </a>
                </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 cont">
                        <h2 class="rf-section-title"><b>Apka Faida<b></b></b></h2><b>
                            <div class="listflex">
                                <div id="referral-bonus-item-1" 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 id="referral-bonus-item-2" 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>
                        </b></div><b>
                    </b>
                </section><b>


                </b>
                <section id="list-abdullah-khan" class="list"><b>
                    </b><div id="list-container-abdullah-khan" class="list-container cont"><b>
                        </b><h2><b></b>Abdullah Khan</h2>
                        <div id="list-item-abdullah-khan-b" class="list-text c12">
                        </div>
                        <div id="list-item-abdullah-khan-a" 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" height="960" width="960">
                            </picture>
                        </div>
                    </div>
                </section>


                <section class="pitch-wrapper">
                    <div id="pitch-0" class="pitch-right pitch">
                        <div id="pitch-container-0" class="pitch-container-right cont animation-element slide-left">
                            <div id="pitch-title-0" 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="" src="https://rider.foodpanda.pk/wp-content/uploads/2018/06/Image_2-1500x894.jpg" alt="pk-rider" width="960" height="650">
                        </picture>
                    </div>
                    <div id="pitch-1" class="pitch-left pitch">
                        <div id="pitch-container-1" class="pitch-container-left cont animation-element slide-right">
                            <div id="pitch-title-1" class="pitch-title-left 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-left img-fluid animation-element fade-in">
                            <img class="" 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 id="pitch-2" class="pitch-right pitch">
                        <div id="pitch-container-2" class="pitch-container-right cont animation-element slide-left">
                            <div id="pitch-title-2" 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="" 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" width="960" height="650">
                        </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 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 class="apply 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>

    <script>
        $(function(){
            $("#menu-toggle").click(function(e) {
                e.preventDefault();
                $("#wrapper").toggleClass("toggled");
            });
        });

        $(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('picture').addClass('in-view');
                            $("#pitch-container-1").animate({left: '250px'});
                        }
                    } 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('picture').removeClass('in-view');
                            $("#pitch-container-1").animate({left: '250px'});

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


    </script>
@endsection