<!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" media="screen and (min-device-width: 320px) and (max-device-width: 860px)" href="{{ asset_url("theme::css/hamburgers.css") }}">
</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 first-section-fixer full columns">
    <section class="grid-x">
        <section class="cell studio-event fujiInspiring no-padding columns">
            {#<section class="grid-x">
                <div class="specialBanner nopaci heightMid columns small-12 cell">
                    <img src="{{ image(event.banner_image.cropped()).resize(1366,352).url() }}"
                         alt="{{ event.banner_title }}"/>

                    <div class="caption">
                        <div class="sizeCenterElm">
                            <div class="boxSize">
                                <span class="titlefeature">{{ event.banner_featured_title }}</span>
                                <h1 class="titleCaption">
                                    {{ event.banner_title }}
                                </h1>
                            </div>
                        </div>
                    </div>
                </div><!-- END specialBanner // satu Banner Besar -->
            </section>
            <section class="grid-x">
                <div class="box-headline columns small-12 cell">
                    <div class="sizeCenterElm">
                        <h2 class="headline">{{ event.headline_title }}</h2>
                        <p>{{ event.headline_description }}</p>
                    </div>
                </div>
            </section>#}
            <section class="grid-x">
                <div class="specialBanner box-description nopaci heightMid columns small-12 cell">
                    <img src="{{ image(detailEvent.event_image.cropped()).resize(1920,495).quality(100).url() }}"
                         alt="{{ detailEvent.name }}"/><!-- 683 x 798 -->

                    {% if detailEvent.is_exclusive.true %}
                        {{ img('theme::img/remove/ExclusiveNew.jpg')
                        .fit(93,58)
                        .quality(100)
                        .attr('title', 'Fuji Exclusive')
                        .attr('class', 'fujiExclusive')
                        |raw }}
                    {% endif %}

                    <div class="caption">
                        <div class="sizeCenterElm">
                            <div class="grid-x">
                                <div class="small-8">
                                    {% if detailEvent.ending_date.format('Y-m-d') <= carbon().today().format('Y-m-d') %}
                                        <p><strong>{{ trans('theme::event.closed') }}</strong></p>
                                    {% else %}
                                        {% if detailEvent.starting_date.format('Y-m-d') <= carbon().today().format('Y-m-d') %}
                                            <p><strong>{{ trans('theme::event.ongoing') }}</strong></p>
                                        {% else %}
                                            <p><strong>{{ trans('theme::event.upcoming') }}</strong></p>
                                        {% endif %}
                                    {% endif %}
                                    <span class="date">{{ detailEvent.starting_date.format('d F Y') }}</span>
                                    <h2 class="eventTitle">{{ detailEvent.name }}</h2>
                                    {% if detailEvent.ending_date.format('Y-m-d') <= carbon().today().format('Y-m-d') %}

                                    {% else %}
                                        {#<span class="textTitle">Ticket Available</span>#}
                                        {#<span class="date">{{ participants }}/{{ detailEvent.available_ticket }}</span>#}
                                        {#<a href="{{ url_current() }}/form" class="link">Book Ticket</a>#}
                                    {% endif %}
                                    {#<span class="textTitle">Ticket Available</span>#}
                                    {#<span class="date">{{ participants }}/{{ detailEvent.available_ticket }}</span>#}
                                    {#<!-- <a href="#" class="link">Book Ticket</a> -->#}
                                </div>
                                <div class="small-4">
                                    <span class="textTitle">{{ trans('theme::event.location') }}</span>
                                    <span class="contentOswald">{{ detailEvent.location }}</span>
                                    <span class="spacer"></span>
                                    <span class="textTitle">{{ trans('theme::event.time') }}</span>
                                    <span class="contentOswald">{{ detailEvent.event_time }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- END specialBanner // satu Banner Besar -->
            </section>
            {% if detailEvent.ending_date.format('Y-m-d') >= carbon().today().format('Y-m-d') %}
                <section class="grid-x">
                    <div class="sizeCenterElm">
                        <div class="medium-12 mainContent cell contentProd eventForm">
                            <h1 class="titleCategory">{{ trans('theme::event.form-title') }}</h1>
                            {#<p>Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc.
                                Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl
                                quis neque. Suspendisse in orci enim.</p>#}
                            <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 %}
                            {% if session_has('errorBooking') %}
                                <ul class="sessionForm errorForm">
                                    <li>{{ session_get('errorBooking') }}</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() }}
                                <div class="block-input">
                                    <label for="full_name">{{ trans('theme::form.fullname') }}</label>
                                    <input type="text" name="full_name" value="{{ request_old('full_name') }}"
                                           placeholder="Type your name" required="">
                                </div>
                                <div class="block-input">
                                    <label for="email">{{ trans('theme::form.email') }}</label>
                                    <input type="email" name="email" value="{{ request_old('email') }}" placeholder="Email"
                                           required="">
                                </div>
                                <div class="block-input">
                                    <label for="phone">{{ trans('theme::form.phone') }}</label>
                                    <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="No. Handphone*" 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">
                                    <label for="address">{{ trans('theme::form.address') }}</label>
                                    <textarea name="address" id="" cols="10" rows="5" required="">{{ request_old('address') }}</textarea>
                                </div>
                                <div class="block-input">
                                    <div class="block-input-2" style="padding-right:1em;">
                                        <label for="gender">{{ trans('theme::form.gender') }}</label>
                                        <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-2" style="padding-left:1em;">
                                        <label for="age">{{ trans('theme::form.age') }}</label>
                                        <input type="text" name="age" required="" value="{{ request_old('age') }}">
                                    </div>
                                </div>
                                {% if detailEvent.is_exclusive.isTrue %}
                                    <div class="block-input">
                                        <label for="camera_type_id">{{ trans('theme::form.camera_type') }}</label>
                                        <select name="camera_type_id" id="camera_type_id" required="">
                                            <option value="" disabled="" selected="">- {{ trans('theme::form.camera_type') }} -</option>
                                            {% for cameraType in entries('products', 'categories').get() %}
                                                <option value="{{ cameraType.id }}"
                                                        {% if request_old('camera_type_id') == cameraType.id %}
                                                            selected="selected"
                                                        {% endif %}
                                                >{{ cameraType.title }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="block-input">
                                        <label for="camera_name_id">{{ trans('theme::form.camera') }}</label>
                                        <select name="camera_name_id" id="camera_name_id" required="">
                                            <option value="">- {{ trans('theme::form.camera') }} -</option>
                                        </select>
                                    </div>
                                {% else %}
                                    <div class="block-input">
                                        <label for="camera_type_id">{{ trans('theme::form.camera_type') }}</label>
                                        <select name="camera_type_id" id="camera_type_id">
                                            <option value="" disabled="" selected="">- {{ trans('theme::form.camera_type') }} -</option>
                                            {% for cameraType in entries('products', 'categories').get() %}
                                                <option value="{{ cameraType.id }}"
                                                        {% if request_old('camera_type_id') == cameraType.id %}
                                                            selected="selected"
                                                        {% endif %}
                                                >{{ cameraType.title }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="block-input">
                                        <label for="camera_name_id">{{ trans('theme::form.camera') }}</label>
                                        <select name="camera_name_id" id="camera_name_id">
                                            <option value="">- {{ trans('theme::form.camera') }} -</option>
                                        </select>
                                    </div>
                                {% endif %}

                                {% if detailEvent.is_exclusive.isFalse %}
                                    <div class="block-input">
                                        <label for="other_brand">{{ trans('theme::form.other_brand') }}</label>
                                        <input type="text" name="other_brand" value="{{ request_old('other_brand') }}"
                                               placeholder="Camera Brand">
                                    </div>
                                {% endif %}

                                {# if detailEvent.is_exclusive.isTrue #}
                                    <!-- <div class="block-input">
                                        <label for="serial_number">{# trans('theme::form.serial_no') #}</label>
                                        <input type="text" name="serial_number" placeholder="Put your serial number" required="" value="{# request_old('serial_number') #}">
                                    </div> -->
                                {# else #}
                                    <!-- <div class="block-input">
                                        <label for="serial_number">{# trans('theme::form.serial_no') #}</label>
                                        <input type="text" name="serial_number" placeholder="Put your serial number" value="{# request_old('serial_number') #}">
                                    </div> -->
                                {# endif #}

                                <button type="submit">{{ trans('theme::form.submit') }}</button>
                            </form>
                        </div>
                    </div>
                </section>
            {% endif %}

            {% 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/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();
    $('#camera_type_id').change(function() {
        var propnya = $(this).val();
         $.ajax({
            url: 'https://fujifilm-x.id/camera/category/' + propnya ,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
               var cities = data;
               $('#camera_name_id').html('');
               $('#camera_name_id').append($('<option>', {
                  value: '',
                  text: '- {{ trans('theme::form.camera') }} -'
               }));
               for (var i = 0; i < cities.length; i++) {
                  $("<option />")
                     .text(cities[i]['title'])
                     .attr('value', cities[i]['id'])
                     .appendTo($('#camera_name_id'));
               }


            },
            error: function(xhr, options, error) {
                var data = jQuery.parseJSON(xhr.responseText);
                alert(data.error.message);
             }
         });
      });

    $(document).ready(function () {
        studioEvents();
        $('body').click(function(){
            $('.sessionForm').fadeOut();
            $('.bg-session').fadeOut();
        });
    });
    hecent();
</script>
</body>
</html>
