{{-- 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>

    @if (session()->has('success') || session()->has('error'))
        <script>
            var send_model = $('#success_model');

            send_model.modal('show');
            $('.loading-wrapper').hide();

            setTimeout(function () {
                send_model.modal('hide');
            }, 3000);
        </script>
    @endif
@stop

@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">
                    感謝你對火曜日的支持，請填寫表單或來信至 service@tuesday-design.com，讓我們瞭解你的需求<br class="d-none d-md-block"/>
                    我們將於三天內儘速回覆你：）
                </div-->--}}
                <div class="thanks-info" style="line-height: 1.75;">
                    感謝你對火曜日的支持：）<br/>
                    目前 2023 年的檔期已滿<br/>
                    如有其他事宜，歡迎來信至 service@tuesday-design.com
                    {{--<!-- 讓我們瞭解你的需求<br/> -->--}}
                    {{--<!-- 我們將於三天內儘速回覆你：） -->--}}
                </div>
            </div>

            {{--<!-- 隱藏一直壞掉的表單 -->
            <!--div class="content-wrapper row no-gutters">
                <form class="col-lg-6 col-md-8 m-auto needs-validation" action="{{ route('front.contact.store') }}" method="post" novalidate autocomplete="off">
                    @csrf
                    <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="input-field">
                            <input type="text" class="form-control" id="inputName" name="name" 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">Email</label>
                        <div class="input-field">
                            <input type="email" class="form-control" id="inputEmail" name="email" 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="inputSubject" class="col-sm-2 col-form-label">Subject</label>
                        <div class="bs-plg input-field">
                            <select id="inputSubject" class="selectpicker" name="subject" title="聯繫原因" required>

                                @foreach ($subjects as $subject)
                                    <option value="{{ $subject }}">{{ trans('contact.subject.' . $subject) }}</option>
                                @endforeach

                            </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 input-field">
                            <select id="inputBudget" class="selectpicker" name="budget" title="預算範圍" required>

                                @foreach ($budgets as $budget)
                                    <option value="{{ trans('contact.budget.' . $budget) }}">{{ trans('contact.budget.' . $budget) }}</option>
                                @endforeach

                            </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 input-field">
                            <select id="inputHowToKnow" class="selectpicker" name="how_to_know" title="怎麼知道火曜日的?" required>

                                @foreach ($how_to_knows as $how_to_know)
                                    <option value="{{ $how_to_know }}">{{ trans('contact.how_to_know.' . $how_to_know) }}</option>
                                @endforeach

                            </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="input-field">
                            <textarea class="form-control" id="inputDescription" name="description" rows="9" placeholder="任何說明內容"></textarea>
                        </div>
                    </div>
                    <div class="form-group d-block d-xl-flex justify-content-center">
                        <label for="recaptcha" class="d-none d-md-block col-sm-2 col-form-label invisible">recaptcha</label>
                        {!! ReCaptcha::htmlFormSnippet() !!}
                    </div>
                    <div class="submit-wrapper">
                        <button class="btn btn-submit" type="submit">送出信件</button>
                    </div>
                </form>
            </div-->--}}
        </div>
    </div>

    @if (session()->has('success'))
        <!-- Modal -->
        <div class="modal fade" id="success_model" 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>
    @endif

    @if (session()->has('error'))
        <!-- Modal -->
        <div class="modal fade" id="success_model" 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>
                            Oops！<br/>
                            欄位輸入的值有誤或遺漏<br/>
                            請重新檢查
                        </p>
                    </div>
                </div>
            </div>
        </div>
    @endif

@stop