@extends('layouts.auth')

@section('styles')
    <style>
        body {
            background-color: #f2f2f2;
            color: #ff745b;
            font-size: 1.3rem;
        }

        .main_box {
            width: 1280px;
            text-align: center;
            margin: auto;
            margin-top: 20px;
        }

        .title {
            color: #ff745b;
        }

        .box {
            float: left;
            width: 50%;
            margin: 0;
            padding: 10px;
            text-align: left;
        }

        select {
            padding: 0px 15px !important;
            border: 1px solid #fff;

        }

        .btn-orange {
            background-color: #ff745b;
            border-color: #ff745b;
            color: #fff;
        }

        .btn-orange[:disabled] {
            color: #fff;
            background-color: #666;
            border-color: #666;
        }

        .my {
            color: #f2f2f2;
            background-color: #ff745b;
            border-radius: 30px;
            padding: 0px 5px 5px 5px;
            display: inline-block;
            transform: rotate(-5deg);
        }
        .wait{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            text-align: center;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            font-size: 2rem;
            display: none;
        }
        @media (max-width: 1279px) {
            body {
                font-size: 1.1rem;
            }
            .main_box {
                width: 900px;
            }

        }

        @media (max-width: 951px) {

            .main_box {
                width: 100%;
                padding: 5px;
            }

            .box {
                float: none;
                width: 100%;
            }
        }
    </style>
@endsection
@section('scripts')
    <script>
        function send_contact() {
            var data = $('#contact').serialize();
            if ($('#email').val() == '' && $('#phone').val() == '') {
                swal('錯誤', '電子郵件或聯絡電話請擇一填寫', 'error');
                return;
            }
            $('#submit').prop('disabled', true);
            $('#wait').show();
            axios({
                    method: 'post',
                    url: `api/send_contact`,
                    data: data,
                    headers: {
                        'accept': 'application/json',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    },
                    contentType: false,
                    processData: false,
                })
                .then(res => {
                    $('#wait').hide();
                    swal("訊息已送出", "我們將盡快與您聯繫，謝謝！", "success");
                    $('#contact').trigger("reset");
                })
                .catch((err) => {
                    $('#wait').hide();
                    swal('錯誤', err.response.data.msg, 'error');
                });
            $('#submit').prop('disabled', false);

        }
    </script>
@endsection

@section('content')
<div class='wait' id='wait'><br><br><br><br><br><br><br>訊息發送中 ...</div>
    <div class='main_box'>
        <h1 class='title'>聯絡<span class='my'>我</span>們</h1>
        <h5 class='title'>－ Contact Us －</h5>
        <p>
            <br>如果對於「網站操作」有相關使用問題，歡迎您利用以下表單留下訊息，我們將盡快與您聯繫，謝謝！
        </p>
        <div class='box'>
            <br>

            <img src="{{ asset('img/info/clock2.png') }}" width="50px">&ensp;服務時間
            <br>&emsp;&emsp;&emsp;周一至周五 09:00-16:30 (不含國定假日)
            <br>
            <br>
            <img src="{{ asset('img/info/phone.png') }}" width="50px">&ensp;聯絡我們
            <br>&emsp;&emsp;&emsp;02-2706-9896
            <br>
            <br>
            <img src="{{ asset('img/info/gps.png') }}" width="50px">&ensp;聯絡地址
            <br>&emsp;&emsp;&emsp;台北市大安區新生南路一段143-1號3樓
        </div>
        <div class='box'>
            <br>
            <form id='contact' method="POST" enctype="multipart/form-data" onsubmit="send_contact();return false;">
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">姓&emsp;&emsp;名</span>
                    <input type="text" name="username" class="form-control" placeholder="Name" aria-label="Username"
                        aria-describedby="basic-addon1" required>
                    <select name="sex" class="form-select" id="inputGroupSelect01">
                        <option value="先生">先生</option>
                        <option value="小姐">小姐</option>
                    </select>

                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">電子郵件</span>
                    <input type="text" name="email" id="email" class="form-control" placeholder="Eamil"
                        aria-label="email" aria-describedby="basic-addon1">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">聯絡電話</span>
                    <input type="text" name="phone" id="phone" class="form-control" placeholder="Phone"
                        aria-label="phone" aria-describedby="basic-addon1">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">主&emsp;&emsp;旨</span>
                    <input type="text" name="title" class="form-control" placeholder="Subject" aria-label="title"
                        aria-describedby="basic-addon1" required>
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">詳細內容</span>
                    <textarea class="form-control" name="content" placeholder="Content" aria-label="With textarea" required></textarea>
                </div>
                <!--
                    
                        <span class="input-group-text" id="basic-addon1">驗&ensp;證&ensp;碼</span>
                        <div class="g-recaptcha" data-sitekey="{{ Config::get('services.recaptcha_site_key') }}"
                            data-theme="light" data-size="normal" data-expired-callback="expired" data-error-callback="error">
                        </div>

                        @error('g-recaptcha-response')
        <strong class='text-danger'>{{ $message }}</strong>
    @enderror
                    -->
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">驗&ensp;證&ensp;碼</span>
                    <div class="g-recaptcha" data-sitekey="{{ Config::get('services.recaptcha_site_key') }}"
                        data-theme="light" data-size="normal" data-expired-callback="expired" data-error-callback="error">
                    </div>

                    @error('g-recaptcha-response')
                        <strong class='text-danger'>{{ $message }}</strong>
                    @enderror
                </div>
                <div class="text-center">
                    <input type='reset' class="btn btn-secondary" value="取消重填">&emsp;
                    <input type='submit' id='submit' class="btn btn-orange" value="送出表單">
                </div>
            </form>
        </div>
    </div>
@endsection