<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {% include "theme::partials/metadata" %}
    {{ asset_add("eventForm.css", "theme::css/scroll.css") }}
    {{ asset_add("eventForm.css", "theme::css/owlc.css") }}
    {{ asset_style("eventForm.css", ["min"]) }}

    <link rel="stylesheet" href="{{ asset_url("theme::css/scroll.css") }}">
    <link rel="stylesheet" href="{{ asset_url("theme::css/owlc.css") }}">
    <link rel="stylesheet" href="{{ asset_url("theme::css/jquery-ui.css") }}">

    <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 860px)" href="{{ asset_url("theme::css/hamburgers.css") }}">
    <style type="text/css">
        form input[type=text],form input[type="date"],form input[type="email"],
        form input[type="tel"] {
            background: transparent !important;
            border: none !important;
            border-bottom: 1px solid #000000 !important;
            outline:none;
            box-shadow: none;
        }
        .banner-section-fixer {
            margin-top:100px !important;
        }
        @media only screen and (max-width: 1024px) {
         .banner-section-fixer {
          margin-top:0 !important
         }
        }
        @media only screen and (max-width: 860px) {
         .banner-section-fixer {
          margin-top:100px !important
         }
        }
        @media only screen and (max-width: 640px) {
         .banner-section-fixer {
          margin-top:0 !important
         }
        }
        .titleCategory {
         font-size:2.2em;
        }

        .locationStore {
         display:block;
         border:solid 1px #c2c2c2;
         border-radius:10px;
         padding:8px 15px;
         position:relative;
         font-size:0.875em;
         color:#494949;
         background-color:transparent;
         box-shadow:none;
         font-family:'Nunito Sans', sans-serif;
         font-weight:400
        }
        .inputLocation .locationStore {
         width:100%;

        }
        .inputLocation .locationStore:after {
         position:absolute;
         content:"\f041";
         font-family:FontAwesome;
         right:15px;
         top:2px;
         font-size:22px;
         color:#c2c2c2
        }
        .locationLeft {
            margin-right: 0;
        }
        .locationRight {
            margin-left: 0;
        }
        .inputLocation .visible {
         visibility:hidden
        }
        .boxPop {
         background-color:#fff;
         margin:auto;
         position:relative;
         z-index:3
        }
    </style>
</head>
<body>

{% include "theme::partials/navigation" %}

{#{% set event = entries('studio_event', 'event_page').first() %}#}

{#{% set detailEvent = entries('studio_event', 'events').where('is_enabled', true).where('id', 1).first() %}#}

<section class="grid-container banner-section-fixer full columns">
    <section class="grid-x">
        <section class="cell studio-event fujiInspiring no-padding columns">
            <section class="grid-x">
                <div class="specialBanner box-description nopaci heightMid columns small-12 cell">
                    <img src="{{ image('theme::img/remove/xt4_pre-order_2.jpg').url() }}"
                         alt="X-T4 Coming Soon"/><!-- 683 x 798 -->
                </div><!-- END specialBanner // satu Banner Besar -->
            </section>
                <section class="grid-x">
                    <div class="sizeCenterElm">
                        <div class="medium-12 mainContent cell contentProd eventForm" style="margin: 0 auto;">
                            <h1 class="titleCategory">{{ trans('theme::special-offer.form-title') }}</h1>
                            <br>

                            {% if errors.any() %}
                                <ul class="sessionForm errorForm">
                                    {% for error in errors.all() %}
                                        <li>{{ error }}</li>
                                    {% endfor %}
                                    <span class="close">{{ trans('theme::page.close') }} X</span>
                                </ul>
                                <div class="bg-session"></div>
                            {% endif %}

                            {% if session_has('success') %}
                                <ul class="sessionForm successForm">
                                    <li>{{ session_get('success') }}</li>
                                    <span class="close">{{ trans('theme::page.close') }} X</span>
                                </ul>
                                <div class="bg-session"></div>
                            {% endif %}

                            <form action="{{ url_current() }}/send" method="post" data-parsley-validate>
                                {{ csrf_field() }}
                                <input type="hidden" name="product_type" value="{{product}}">
                                <div class="block-input">
                                    <input type="text" name="first_name" value="{{ request_old('first_name') }}"
                                           placeholder="{{ trans('theme::form.firstname') }}" required="">
                                </div>
                                <div class="block-input">
                                    <input type="text" name="last_name" value="{{ request_old('last_name') }}"
                                           placeholder="{{ trans('theme::form.lastname') }}" required="">
                                </div>
                                <div class="block-input">
                                    <input type="email" name="email" value="{{ request_old('email') }}" placeholder="{{ trans('theme::form.email') }}"
                                           required="">
                                </div>
                                <div class="block-input">
                                    <input type="tel" id="handphone" name="phone" value="{{ request_old('phone') }}"
                                           data-parsley-pattern="/[0]/g"
                                           data-parsley-pattern-message="Phone Number not Valid"
                                           placeholder="Mobile Phone Number" data-parsley-whitespace="trim"
                                           data-parsley-minlength-message="Phone Number not Valid"
                                           data-parsley-type="digits" data-parsley-type-message="only numbers"
                                           data-parsley-minlength="10" required=""/>
                                </div>
                                <div class="block-input">
                                    <div class="block-input">
                                        <input type="radio" name="gender" value="male" required=""
                                                {% if request_old('gender') == 'male' %}
                                                    checked="checked"
                                                {% endif %}
                                        ><span>{{ trans('theme::form.male') }}</span>

                                        <input type="radio" name="gender" value="female" required=""
                                                {% if request_old('gender') == 'female' %}
                                                    checked="checked"
                                                {% endif %}
                                        ><span>{{ trans('theme::form.female') }}</span>
                                    </div>
                                </div>
                                <div class="block-input">
                                    <select name="product_color" id="product_color" required="">
                                        <option value="" disabled="" selected="">- {{ trans('theme::form.camera_color') }} -</option>
                                        <option value="Black Noir"
                                                {% if request_old('product_color') == 'Black Noir' %}
                                                    selected="selected"
                                                {% endif %}
                                        >{{ trans('theme::color.black_noir') }}</option>
                                        <option value="Silver Argent"
                                                {% if request_old('product_color') == 'Silver Argent' %}
                                                    selected="selected"
                                                {% endif %}
                                        >{{ trans('theme::color.silver_argent') }}</option>
                                    </select>
                                </div>
                                <div class="inputLocation inputCity" style="display: flex !important;">
                                    <div style="width: 100%; margin-right: 10px;">
                                        <span class="titleSec">{{ trans('theme::form.choose_city') }}</span>
                                        <a class="locationStore locationLeft">{{ trans('theme::form.choose_city') }} </a>
                                    </div>
                                    <div style="width: 100%; margin-left: 10px;">
                                        <span class="titleSec">{{ trans('theme::form.favorite_store') }}</span>
                                        <a class="locationStore locationRight">{{ trans('theme::form.choose_store') }} </a>
                                    </div>
                                </div><!-- END inputLocation -->
                                
                                <!-- <div class="mainwyswyg"> -->
                                <div class="term-box">
                                    <label for="terms"><input type="checkbox" id="terms" required="" checked=""/>{{ trans('theme::special-offer.email_agree') }}</label>
                                </div>
                            <!-- </div> -->
                                <div style="text-align: center;">
                                    <button type="submit">{{ trans('theme::form.submit') }}</button>
                                </div>

                                <div class="inputLocation inputCity">
                                    <input class="visible" type="text" name="city" id="city"
                                           value=""/>
                                    <div class="boxLocation containerPopup">
                                        <div class="bgpopup"></div>
                                        <div class="sizeBox bxShadow boxPop">
                                            <h3 class="titlePop">
                                                {{ trans('theme::form.select_city') }}
                                            </h3>
                                            <ul>
                                                {% for city in cities %}
                                                    <li><a data-city="{{ city.id }}">{{ city.name }}</a></li>
                                                {% endfor %}

                                            </ul>
                                            <a class="close">{{ trans('theme::page.close') }} X</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="inputLocation inputStore">
                                    
                                    <input class="visible" type="text" name="dealer" id="store"
                                           value=""/>
                                    <div class="boxLocation singleList containerPopup">
                                        <div class="bgpopup"></div>
                                        <div class="sizeBox bxShadow boxPop">
                                            <h3 class="titlePop">
                                                {{ trans('theme::form.choose_store') }}
                                            </h3>
                                            <ul id="dealerPlace">
                                                <li><a data-store="">{{ trans('theme::form.please_wait') }}</a></li>
                                            </ul>
                                            <a class="close">{{ trans('theme::page.close') }} X</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </section>

            {# include "templates::related/top-pick-products" #}

        </section><!-- END studio-event -->
    </section>
</section>

{% include "theme::partials/footer" %}
{% include "theme::partials/scripts" %}

<script src="{{ asset_url("theme::js/jquery-ui.js") }}"></script>
<script src="{{ asset_url("theme::js/slider.js") }}"></script>
<script src="{{ asset_url("theme::js/owlc.js") }}"></script>
<script src="{{ asset_url("theme::js/parsley.min.js") }}"></script>

<script type="text/javascript">
    global();

    $(document).ready(function () {
        $('.locationLeft').click(function (e) {
            e.preventDefault();
            $('.inputCity .boxLocation').fadeIn();
        });
        $('.locationRight').click(function (e) {
            e.preventDefault();
            $('.inputStore .boxLocation').fadeIn();
        });
        $('.link').click(function (e) {
            e.preventDefault();
            $('.boxConfirm').fadeIn();
        });
        $('.close').click(function (e) {
            e.preventDefault();
            $('.containerPopup').fadeOut();
        });
        $('.inputCity .boxLocation ul li a').click(function (e) {
            e.preventDefault();
            var so = '{{ specialOffer.slug }}';
            var valueCity = $(this).attr('data-city');
            // var url = '{{ url('list/dealer/city') }}' + '/' + valueCity + '/' + so;
            var url = '{{url('city')}}' + '/' + valueCity + '/all-dealer';

            $.ajax({
                url: url,
                type: 'get',
                success: function (data) {
                    $('#dealerPlace').html(data);
                    $('.locationRight').text('Choose');
                    // $('.inputStore input.visible').attr('value', '');
                },
                error: function () {
                    alert("Please try again");
                }
            });

            $('.locationLeft').text($(this).text());
            // $('.inputCity input.visible').val(value);
            // $('.inputCity input.visible').attr('value', valueCity);
            $('.inputCity .boxLocation').fadeOut();
            // $('.inputStore .boxLocation').fadeIn();
        });

        $('#dealerPlace').on('click', '.dealerStore', function (e){
            e.preventDefault();
            var valueDealer = $(this).attr('data-store');
            $('.locationRight').text($(this).find('span').text());
            // $('.inputStore input.visible').attr('value', valueDealer);
            $('.inputStore .boxLocation').fadeOut();

        });
        $('.date').datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '-50:+0',
           dateFormat: 'dd/mm/yy'
         });
        $('body').click(function(){
            $('.sessionForm').fadeOut();
            $('.bg-session').fadeOut();
        });
    });
    hecent();
</script>
</body>
</html>
