{{-- Part of tuesday_design project. --}}
@extends('front.layouts.app')

@section('style')
    <link href="{{ asset('css/contact.css') }}" rel="stylesheet" charset="utf-8"/>
    <link href="{{ asset('css/bootstrap-select.css') }}" rel="stylesheet" charset="utf-8"/>
@stop

@section('script')
    <script src="{{ asset('js/bootstrap-select.min.js') }}"></script>
    <script>
        jQuery(function ($) {
            $('select').selectpicker();

            let bootstrap_select = $('.bs-plg');

            let checkExist = setInterval(function() {
                if ($('.dropdown-toggle').length) {
                    startMoveSelect();
                    clearInterval(checkExist);
                }
            }, 100);

            function startMoveSelect() {
                bootstrap_select.each(function () {
                    let toggle = $(this).find('.dropdown-toggle');
                    let invalid_feedback = $(this).find('.invalid-feedback');

                    toggle.after(invalid_feedback);
                });
                $('form').fadeTo(300, 1);
            }
        });

        (function() {
            'use strict';
            window.addEventListener('load', function() {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                let forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                let validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();

        let subject = $('#inputSubject');
        subject.on('change', function () {
            let checked_index = $(this).find('option:checked');
            if (!checked_index.hasClass('bs-title-option')) {
                if (checked_index.val() == 1) {
                    $('.budget .dropdown-menu ul li:first-child').css('display', 'inherit');
                } else {
                    $('.budget .dropdown-menu ul li:first-child').css('display', '');
                }
            }
        })
    </script>
@stop

{{--Page Class--}}
@section('class', 'contact')

@section('main-content')
    <div class="main-content-wrapper container no-padding">
        <div class="main-content-inner">
            <div class="page-title">
                <div class="title-en">
                    contact
                </div>
                <h1 class="title-tw">
                    聯絡我們
                </h1>
                <div class="thanks-info">
                    感謝你對火曜日的支持，請填寫表單，讓我們瞭解你的需求<br class="d-none d-md-block"/>
                    我們將於三天內儘速回覆你：）
                </div>
            </div>

            <div class="content-wrapper row no-gutters">
                <form class="col-lg-6 col-md-8 m-auto needs-validation" action="" novalidate>
                    <div class="form-group d-block d-xl-flex justify-content-center is-required">
                        <label for="inputName" class="col-sm-2 col-form-label">Name</label>
                        <div class="flex-fill">
                            <input type="text" class="form-control" id="inputName" placeholder="你的名字" required>
                            <div class="invalid-feedback">
                                此為必填欄位
                            </div>
                        </div>
                    </div>
                    <div class="form-group d-block d-xl-flex justify-content-center is-required">
                        <label for="inputEmail" class="col-sm-2 col-form-label">Mail</label>
                        <div class="flex-fill">
                            <input type="email" class="form-control" id="inputEmail" placeholder="service@tuesday-design.com" required>
                            <div class="invalid-feedback">
                                此為必填欄位
                            </div>
                        </div>
                    </div>
                    <div class="form-group d-block d-xl-flex justify-content-center is-required">
                        <label for="inputSubject" class="col-sm-2 col-form-label">Subject</label>
                        <div class="bs-plg flex-fill">
                            <select id="inputSubject" class="selectpicker" title="聯繫原因" required>
                                <option value="0">我想要做一個網站</option>
                                <option value="1">我有品牌設計的需求</option>
                                <option value="2">洽談商業合作</option>
                                <option value="3">其他（於下方信件中說明）</option>
                            </select>
                            <div class="invalid-feedback">
                                此為必填欄位
                            </div>
                        </div>
                    </div>
                    <div class="form-group d-block d-xl-flex justify-content-center is-required budget">
                        <label for="inputBudget" class="col-sm-2 col-form-label">Budget</label>
                        <div class="bs-plg flex-fill">
                            <select id="inputBudget" class="selectpicker" title="預算範圍" required>
                                <option value="5000">5,000 NTD 含以下</option>
                                <option value="100000">100,000 NTD 含以下</option>
                                <option value="110000">110,000~200,000 NTD</option>
                                <option value="210000">210,000~400,000 NTD</option>
                                <option value="410000">410,000 NTD 含以上</option>
                            </select>
                            <div class="invalid-feedback">
                                此為必填欄位
                            </div>
                        </div>
                    </div>
                    <div class="form-group d-block d-xl-flex justify-content-center is-required">
                        <label for="inputHowToKnow" class="col-sm-2 col-form-label">How do you know us?</label>
                        <div class="bs-plg flex-fill">
                            <select id="inputHowToKnow" class="selectpicker" title="怎麼知道火曜日的?" required>
                                <option>網路搜尋</option>
                                <option>活動展覽</option>
                                <option>朋友推薦</option>
                                <option>其他</option>
                            </select>
                            <div class="invalid-feedback">
                                此為必填欄位
                            </div>
                        </div>
                    </div>
                    <div class="form-group d-block d-xl-flex justify-content-center">
                        <label for="inputDescription" class="col-sm-2 col-form-label">Description</label>
                        <div class="flex-fill">
                            <textarea class="form-control" id="inputDescription" rows="9" placeholder="任何說明內容"></textarea>
                        </div>
                    </div>
                    <div class="submit-wrapper">
                        <button class="btn btn-submit" type="submit" data-toggle="modal"
                                data-target="#submitForm">送出信件</button>
                        <!-- Modal -->
                        <div class="modal fade" id="submitForm" tabindex="-1" role="dialog"
                             aria-labelledby="submitFormTitle" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-body text-center">
                                        <p>
                                            感謝你的詢問<br/>
                                            我們將於三天內儘速回覆你：）
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop