@extends('advertiser.layout.app')

@section('advertiser_title', trans('landing.titles.value_proposition'))

@section('advertiser_content')
@section('back_button')
<div class="right_wrapper">
    <div class="right_bar">
        <div class="right_back">
            <a href="{{ route('home', app()->getLocale()) }}" class="backBtn">{{ trans('landing.commen.backbtn') }}</a>
        </div>
    </div>
</div>
@stop

<!-- //CONTAINER START// -->
<!-- //CONTENT START// -->
<div class="content-wrap proposition_box">
    <!-- //CLOUD START// -->
    <div class="cloud_content">
        <!-- //PROPOSITION START// -->
        <div class="propos_out_wrap">
            <div class="proposition_wrap">
                <div id="prp_header_wrap">
                    <section id="prp_banner_wrap">
                        <div class="prp_banner_img">
                            <img src="{{ asset('advertiser_user/images/proposition_bg.jpg') }}" alt="proposition-banner" />
                        </div>
                        <div class="prp_banner_cont_box">
                            <div class="prp_banner_cont_wrap">
                                <h1 class="prp_banner_h1">Get an<br />instant<br />footprint!</h1>
                                <p class="prp_banner_p">We provide indoor and outdoor advertisement solutions </p>
                            </div>
                        </div>
                    </section>
                    <section id="prp_slide_wrap">
                        <div class="container">
                            {{--<div class="prp_sliderBox prp_slide_mob">
                                <div class="prp_slide_inner owl-carousel">
                                     <div class="prp_slide_show item">
                                        <div class="prp_slide_showMob">
                                            <ul class="prp_slide01">
                                                <li>
                                                    <img src="{{ asset('advertiser_user/images/proposition/01.png') }}" alt="banner 01" />
                                                    <p>Upload content yourself</p>
                                                </li>
                                                <li>
                                                    <img src="{{ asset('advertiser_user/images/proposition/01.png') }}" alt="banner 01" />
                                                    <p>Make money</p>
                                                </li>
                                                <li>
                                                    <img src="{{ asset('advertiser_user/images/proposition/01.png') }}" alt="banner 01" />
                                                    <p>Cut costs</p>
                                                </li>
                                            </ul>
                                            <div class="prp_slide_contRight">
                                                <img src="{{ asset('advertiser_user/images/proposition/slider_text.svg') }}" alt="banner 01" />
                                                {{-- <p class="slid_contRight_txt">You<br /> don’t<br /> have <br />to pick<br /> just </p>
                                                <h4 class="slid_contRight_h4">1</h4> --}}
                                            {{-- </div>
                                        </div>
                                    </div> --}}
                                    {{-- <div class="prp_slide_show item">
                                        <div class="prp_slide_showMob">
                                            <ul class="prp_slide01">
                                                <li>
                                                    <img src="{{ asset('advertiser_user/images/proposition/01.png') }}" alt="banner 01" />
                                                    <p>Upload content yourself</p>
                                                </li>
                                                <li>
                                                    <img src="{{ asset('advertiser_user/images/proposition/01.png') }}" alt="banner 01" />
                                                    <p>Make money</p>
                                                </li>
                                                <li>
                                                    <img src="{{ asset('advertiser_user/images/proposition/01.png') }}" alt="banner 01" />
                                                    <p>Cut costs</p>
                                                </li>
                                            </ul>
                                            <div class="prp_slide_contRight">
                                                <img src="{{ asset('advertiser_user/images/proposition/slider_text.svg') }}" alt="banner 01" />
                                                {{-- <p class="slid_contRight_txt">You<br /> don’t<br /> have <br />to pick<br /> just </p>
                                                <h4 class="slid_contRight_h4">1</h4> --}}
                                            {{--</div>
                                        </div>
                                    </div> 
                                </div>
                            </div>--}}
                            {{-- <div class="prp_sliderBox prp_slide_desk">
                                <div class="prp_slide_show">
                                    <ul class="prp_slide01">
                                        <li>
                                            <img src="{{ asset('advertiser_user/images/proposition/01.png') }}" alt="banner 01" />
                                            <p>Upload content yourself</p>
                                        </li>
                                        <li>
                                            <img src="{{ asset('advertiser_user/images/proposition/02.png') }}" alt="banner 01" />
                                            <p>Make money</p>
                                        </li>
                                        <li>
                                            <img src="{{ asset('advertiser_user/images/proposition/03.png') }}" alt="banner 01" />
                                            <p>Cut costs</p>
                                        </li>
                                    </ul>
                                    <ul class="prp_slide02">
                                        <li>
                                            <img src="{{ asset('advertiser_user/images/proposition/04.png') }}" alt="banner 01" />
                                            <p>Enjoy secured connectivity</p>
                                        </li>
                                        <li>
                                            <img src="{{ asset('advertiser_user/images/proposition/05.png') }}" alt="banner 01" />
                                            <p>Track your campaigns</p>
                                        </li>
                                        <li>
                                            <img src="{{ asset('advertiser_user/images/proposition/06.png') }}" alt="banner 01" />
                                            <p>Get latest display technologies</p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="prp_slide_contRight">
                                    <p class="slid_contRight_txt">You<br /> don’t<br /> have <br />to pick<br /> just </p>
                                    <h4 class="slid_contRight_h4">1</h4>
                                </div>
                            </div> --}}

                            <div class="prp_sliderBox prp_slide_imgDesk">
                                <div class="prp_slidImg">
                                    <div class="prp_slide_left">
                                        <img src="{{ asset('advertiser_user/images/proposition/slider_left_bg.svg') }}" alt="proposition-banner" />
                                    </div>
                                    <div class="prp_slide_right">
                                        <img src="{{ asset('advertiser_user/images/proposition/slider_right_bg.svg') }}" alt="proposition-banner" />
                                    </div>
                                </div>
                            </div>

                            <div class="prp_sliderBox prp_slide_imgMob">
                                <div class="prp_slidImg owl-carousel">
                                    <div class="prp_slide_show item">
                                        <div class="prp_slide_left">
                                            <img src="{{ asset('advertiser_user/images/proposition/rwd_slider01.svg') }}" alt="proposition-banner" />
                                        </div>
                                    </div>
                                    <div class="prp_slide_show item">
                                        <div class="prp_slide_left">
                                            <img src="{{ asset('advertiser_user/images/proposition/rwd_slider02.svg') }}" alt="proposition-banner" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div id="prp_content_wrap">
                    <section id="prp_about_wrap">
                        <div class="container">
                            <div class="prp_abt_widget">
                                <ul>
                                    <li class="prp_widgetList">
                                        <div class="prp_widgetBox">
                                            <h3>Upload content yourself</h3>
                                            <p>Advertisers can select the locations that best fit their targeted audience and upload content on the screens directly without a middleman or a broker. </p>
                                        </div>
                                    </li>
                                    <li class="prp_widgetList">
                                        <div class="prp_widgetBox">
                                            <h3>Make money</h3>
                                            <p>Venue owners that host our screens will make money from each ad played on the screens. In addition, they will be given free time slots to promote their own products and services inside and outside their premises.</p>
                                        </div>
                                    </li>
                                    <li class="prp_widgetList">
                                        <div class="prp_widgetBox">
                                            <h3>Cut costs</h3>
                                            <p>Our pricing structure is built to suite everyone's budget. Advertisers can now promote their products and services in key locations in cost effective manners.</p>
                                        </div>
                                    </li>
                                    <li class="prp_widgetList">
                                        <div class="prp_widgetBox">
                                            <h3>Enjoy secured connectivity</h3>
                                            <p>We ensure the quality and integrity of all materials pushed to our screens.</p>
                                        </div>
                                    </li>
                                    <li class="prp_widgetList">
                                        <div class="prp_widgetBox">
                                            <h3>Track your campaigns</h3>
                                            <p>Venue owners and advertisers will have access to a dashboard to self track their ad campaigns and transactions.</p>
                                        </div>
                                    </li>
                                    <li class="prp_widgetList">
                                        <div class="prp_widgetBox">
                                            <h3>Get latest display technologies</h3>
                                            <p>We provide a wide variety of digital screens including LEDs, LCD video walls, kiosks, and digital signage units.</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </section>
                    <section id="prp_value_wrap">
                        <div class="container">
                            <div class="prp_value_widget">
                                <h2 class="prp_subHead_h2">Value added services</h2>
                                <ul>
                                    <li class="prp_widgetList">
                                        <div class="prp_widgetBox">
                                            <h3>End-to-end  solution</h3>
                                            <p>Our engagement is not limited to software and hardware, but will reach out to advertisement agencies, enterprises and product distributors to make sure the screens are effectively and constantly utilized. </p>
                                        </div>
                                    </li>
                                    <li class="prp_widgetList">
                                        <div class="prp_widgetBox">
                                            <h3>Reserved timeslots</h3>
                                            <p>Venue owners that host our screens will have two free of charge (15 second) time slots reserved every day for their promotional materials. </p>
                                        </div>
                                    </li>
                                    <li class="prp_widgetList">
                                        <div class="prp_widgetBox">
                                            <h3>Cross branding</h3>
                                            <p>Venue owners that host our screens will have two free of charge (15 second) time slots reserved every month for their promotional materials to be played elsewhere, given that the hosting venue owner has no objection.</p>
                                        </div>
                                    </li>
                                    <li class="prp_widgetList">
                                        <div class="prp_widgetBox">
                                            <h3>Design</h3>
                                            <p>We have a team of talented designers specialized in designing and developing promotional material. </p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </section>
                    <section id="prp_campaign_wrap">
                        <div class="container">
                            <div class="prp_campaign_widget">
                                <h2 class="prp_subHead_h2">How campaigns are created</h2>
                                <h4 class="prp_subHead_h4">4 Simple steps to go live</h4>
                                <ul class="prp_campaign_widget01">
                                    <li class="prp_widgetList prp_loca_list">
                                        <div class="prp_widgetBox">
                                            <h3>Select locations</h3>
                                            <p>Search and filter through our inventory to find your ideal target audience </p>
                                        </div>
                                    </li>
                                    <li class="prp_widgetList prp_date_list">
                                        <div class="prp_widgetBox">
                                            <h3>Set your date</h3>
                                            <p>Set the time duration you want your ad campaign to run</p>
                                        </div>
                                    </li>
                                </ul>
                                <ul class="prp_campaign_widget02">
                                    <li class="prp_widgetList prp_upload_list">
                                        <div class="prp_widgetBox">
                                            <h3>Upload content</h3>
                                            <p>We support the most popular formats of images and videos up to 4k resolution </p>
                                        </div>
                                    </li>
                                    <li class="prp_widgetList prp_checkout_list">
                                        <div class="prp_widgetBox">
                                            <h3>Instant checkout</h3>
                                            <p>Checkout with your preferred payment method </p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </section>
                    <section id="prp_cont_wrap">
                        <div class="container">
                            <div class="prp_cont_widget">
                                <ul>
                                    @php($user = Auth::guard('web')->user())
                                    <li class="prp_contList">
                                        <span class="prp_camp_text">Start ad campaigns that suit your marketing objectives</span>
                                        @if(empty($user))
                                        <a class="register-link popup-link" data-toggle="modal" data-target="#register" data-href="{{ route('register.popup', app()->getLocale()) }}"><button class="prp_campBtn">SIGN UP</button></a>
                                        @else
                                        <a href="javascript:void(0)" class="disabled" disabled="disabled"><button class="prp_campBtn">SIGN UP</button></a>
                                        @endif
                                    </li>
                                    <li class="prp_contList">
                                        <span class="prp_camp_text">Become a venue owner and start making money</span>
                                        <a class="contact-link popup-link" data-toggle="modal" data-target="#contact_us" data-href="{{ route('services.contactus.popup', app()->getLocale()) }}"><button class="prp_campBtn disabled">CONTACT US</button></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </section>
                </div>
                <div id="prp_footer_wrap">
                    <div class="prp_footer_top">
                        <div class="container">
                            <div class="prp_footerDts">
                                <a href="#"><img src="{{ asset('advertiser_user/images/footer_logo.svg') }}" alt="footer-logo" /></a>
                                <ul class="ft_social_wrap">
                                    <li class="ft_sociList ft_soci_fb">
                                        <a href="#">
                                            <i class="soc_icon">&nbsp;</i>
                                            {{-- <img src="{{ asset('advertiser_user/images/proposition/fb.png') }}" alt="footer-fb" /> --}}
                                        </a>
                                    </li>
                                    <li class="ft_sociList ft_soci_inst">
                                        <a href="#">
                                            <i class="soc_icon">&nbsp;</i>
                                            {{-- <img src="{{ asset('advertiser_user/images/proposition/insta.png') }}" alt="footer-inst" /> --}}
                                        </a>
                                    </li>
                                    <li class="ft_sociList ft_soci_twt">
                                        <a href="#">
                                            <i class="soc_icon">&nbsp;</i>
                                            {{-- <img src="{{ asset('advertiser_user/images/proposition/twitter.png') }}" alt="footer-twt" /> --}}
                                        </a>
                                    </li>
                                    <li class="ft_sociList ft_soci_ytb">
                                        <a href="#">
                                            <i class="soc_icon">&nbsp;</i>
                                            {{-- <img src="{{ asset('advertiser_user/images/proposition/youtube.png') }}" alt="footer-ytb" /> --}}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="prp_footer_btm">
                        
                        <p><a class="terms-link popup-link" data-toggle="modal" data-target="#terms_condition" data-href="{{ route('terms.condition', app()->getLocale()) }}">Terms and Conditions</a><span>.</span> <a class="privacy-link popup-link" data-toggle="modal" data-target="#privacy_condition" data-href="{{ route('privacy.policy', app()->getLocale()) }}">Privacy policy  </a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>   
    <!-- //CLOUD END// -->
</div>
<!-- //CONTENT END// -->

<div class="modal fade" id="terms_condition" tabindex="-1" role="dialog" aria-labelledby="terms_condition">
    <div class="modal-dialog" role="document">
        <div class="modal-header border-0">
            <h4 class="modal-title" id="terms_condition"></h4>
        </div>
        <div class="modal-content">
        </div>
    </div>
</div>


<div class="modal fade" id="contact_us" tabindex="-1" role="dialog" aria-labelledby="contact_us">
    <div class="modal-dialog" role="document">
        <div class="modal-header border-0">
            <h4 class="modal-title" id="contact_us"></h4>
        </div>
        <div class="modal-content">
        </div>
    </div>
</div>

<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="register">
    <div class="modal-dialog" role="document">
        <div class="modal-header border-0">
            <h4 class="modal-title" id="register"></h4>
        </div>
        <div class="modal-content">
        </div>
    </div>
</div>

<div class="modal fade" id="privacy_condition" tabindex="-1" role="dialog" aria-labelledby="privacy_condition">
    <div class="modal-dialog" role="document">
        <div class="modal-header border-0">
            <h4 class="modal-title" id="privacy_condition"></h4>
        </div>
        <div class="modal-content">
        </div>
    </div>
</div>

@stop
@section('advertiser_styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('advertiser_user/css/owl.carousel.css') }}?ver={{ time() }}"/>
    <style>
        .popup-link {
            cursor: pointer;
        }
        .errorDiv {
            color: red;
            font-weight: bold;
            text-align: left;
        }
    </style>
@stop

@section('advertiser_js')
<script type="text/javascript" src="{{ asset('advertiser_user/js/owl.carousel.js') }}"></script>
<script>
    $(document).ready(function() {
        var owl = $('.prp_slide_imgMob .prp_slidImg');
        owl.owlCarousel({
            items:1,
            loop:false,
            dots:false,
            nav:true,
            margin:10,
            autoplay:false,
            lazyLoad: true,
            autoplayTimeout:3000,
            smartSpeed: 1000,
            autoplayHoverPause:true,
            responsive:{
			1025:{
				items:2,
				nav:true
			}
		}
        });
    });

    // Terms and condition popup
    $('#terms_condition').on('show.bs.modal', function (e) {
        $('#busyloading').show();
        var url = $(e.relatedTarget).attr('data-href');
        $(this).find('.modal-content').html('');
        $.ajax({
            url: url,
            context: this,
            method: "GET",
            beforeSend: function () {
                $('#busyloading').show();
            },
            success: function (response) {
                if (response.status) {
                    $(this).find('.modal-content').html(response.data);
                    $('#busyloading').hide();
                }

            },
            complete: function () {
                $('#busyloading').hide();
            }
        });
        $('#busyloading').hide();
    });


    $('#privacy_condition').on('show.bs.modal', function (e) {
        $('#busyloading').show();
        var url = $(e.relatedTarget).attr('data-href');
        $(this).find('.modal-content').html('');
        $.ajax({
            url: url,
            context: this,
            method: "GET",
            beforeSend: function () {
                $('#busyloading').show();
            },
            success: function (response) {
                if (response.status) {
                    $(this).find('.modal-content').html(response.data);
                    $('#busyloading').hide();
                }

            },
            complete: function () {
                $('#busyloading').hide();
            }
        });
        $('#busyloading').hide();
    });

    // Contact Us
    $('#contact_us').on('show.bs.modal', function (e) {
        $('#busyloading').show();
        var url = $(e.relatedTarget).attr('data-href');
        $(this).find('.modal-content').html('');
        $.ajax({
            url: url,
            context: this,
            method: "GET",
            beforeSend: function () {
                $('#busyloading').show();
            },
            success: function (response) {
                if (response.status) {
                    $(this).find('.modal-content').html(response.data);
                    $('#busyloading').hide();
                }

            },
            complete: function () {
                $('#busyloading').hide();
            }
        });
        $('#busyloading').hide();
    });

    $('body').on('submit', '#contact_form ', function (e) {
        e.preventDefault();

        $('#busyloading').show();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            }
        });
        var url = $('#contact_form').attr('action');
        var formData = new FormData(document.getElementById("contact_form"));
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {

                if (response.status == 1000) {
                    $('#busyloading').hide();
                    $('#contact_us').modal('hide');
                    growl("{{ trans('messages.success_title') }}", response.message, 'success')
                }
            },
        });
    });

    // Register Section
    $('#register').on('show.bs.modal', function (e) {
        $('#busyloading').show();
        var url = $(e.relatedTarget).attr('data-href');
        $(this).find('.modal-content').html('');
        $.ajax({
            url: url,
            context: this,
            method: "GET",
            beforeSend: function () {
                $('#busyloading').show();
            },
            success: function (response) {
                if (response.status) {
                    $(this).find('.modal-content').html(response.data);
                    $('#busyloading').hide();
                }

            },
            complete: function () {
                $('#busyloading').hide();
            }
        });
        $('#busyloading').hide();
    });

    $('body').on('submit', '#register_form ', function (e) {
        e.preventDefault();

        $('#busyloading').show();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            }
        });
        var url = $('#register_form').attr('action');
        var formData = new FormData(document.getElementById("register_form"));
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {

                if (response.status == 1000) {
                    $('#busyloading').hide();
                    $('#register').modal('hide');
                    growl("{{ trans('messages.success_title') }}", response.message, 'success')
                    window.location = response.redirect
                } else {
                    growl("{{ trans('messages.error_title') }}", response.message, 'danger')
                    $('#busyloading').hide();
                }
            },
            error: function (response) {
                var errors = jQuery.parseJSON(response.responseText);
                console.log(errors)
                $.each(errors, function (key, val) {
                    console.log("#" + key + '_error')
                    $("#" + key + '_error').html(val).show();
                });
                $('#busyloading').hide();
            }

        });
    });
    

</script>
@stop