@extends('layouts.front.main')

@section('page_title','Home')
@section('active_menu_home','active')

@section('page_style')
@stop

@section('content')
<!-- CONTENT -->
<section id="main-slider" class="main-slider">
    @if (isset($banners) && $banners->count()>0)
    @foreach ($banners as $banner)
    <div class="item image">
        <span class="loading">Loading...</span>
        <figure>
            <div class="slide-image slide-media">
                <a href="{{$banner->url ?? '#'}}"><img data-lazy="{{Helper::storageProcess("get",$banner->pathFile,$banner->thumb)}}"
                    class="image-entity d-none d-lg-block" />
                    <img data-lazy="{{Helper::storageProcess("get",$banner->pathFile,$banner->thumb_mobile)}}"
                    class="image-entity d-block d-lg-none" />
                </a>
            </div>
        </figure>
    </div>
    @endforeach
    @endif
</section>
<section id="client" class="bg-gray py-2 py-lg-5">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h3 class="text__gray text-center">{{trans('contents.our-brands')}}</h3>
                <hr class="pt-4">
                <div class="brands-page-image">
                    @if (isset($ourBrands) && $ourBrands->count()>0)
                    @foreach ($ourBrands as $ourBrand)
                    <div class="col-lg-3 col-6 views-row">
                        <a class="brand" target="_blank" href="{{$ourBrand->type=="url"?$ourBrand->url:Route('ourBrands',['brand'=>$ourBrand->id])}}">
                            <img src="{{Helper::storageProcess("get",$ourBrand->pathFile,$ourBrand->thumb)}}"
                            class="w-100 img-fluid"
                            alt="{{Session::get('locale')=="th"?$ourBrand->title_th:$ourBrand->title_en}}"
                            title="{{Session::get('locale')=="th"?$ourBrand->title_th:$ourBrand->title_en}}"
                            typeof="foaf:Image">
                            <div class="brand__overlay"></div>
                            <p class="brand__title">
                                <span>
                                    <span>{{Session::get('locale')=="th"?$ourBrand->title_th:$ourBrand->title_en}}</span>
                                    <span
                                        class="brand__cta">{{Session::get('locale')=="th"?$ourBrand->detail_th:$ourBrand->detail_en}}</span>
                                </span>
                            </p>
                        </a>
                    </div>
                    @endforeach
                    @endif


                </div>
            </div>
        </div>
    </div>
</section>
<!-- about -->
<section id="brandname" class="brandname py-2 py-lg-5">
    <div class="container">
        <div class="row">
            <ul class="col-12 col-lg-8 offset-lg-3">
                @if (isset($brands) && $brands->count()>0)
                @foreach ($brands as $brand)
                <li><a href="{{$brand->type==" url"?$brand->url:Route('brands',['brand'=>$brand->id])}}"
                        target="_blank">{{Session::get('locale')=="th"?$brand->title_th:$brand->title_en}}</a>
                </li>
                @endforeach
                @endif
            </ul>
        </div>
    </div>
</section>
<section id="contact" class="bg-green py-2 py-lg-5">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-8 offset-lg-2">
                <h1 class="text-center">Contact Us</h1>
                <hr>
                <form id="frmContact" class="py-3" name="frmContact" method="POST"
                    action="{{Route('front.sendContact')}}">
                    @csrf
                    <div class="form-row">
                        <div class="form-group col-md-6 classFirstname">
                            <label for="inputFirstname">FIRST NAME *</label>
                            <input type="text" class="form-control" name="firstname" id="inputFirstname"
                                placeholder="FIRST NAME" value="{{ old('firstname','')}}">
                            <small class="text-danger" style="display:none">
                                * กรุณาใส่ชื่อ
                            </small>
                        </div>
                        <div class="form-group col-md-6 classLastname">
                            <label for="inputLastname">LAST NAME *</label>
                            <input type="text" class="form-control" name="lastname" id="inputLastname"
                                placeholder="LAST NAME" value="{{ old('lastname','')}}">
                            <small class="text-danger" style="display:none">
                                * กรุณาใส่นามสกุล
                            </small>
                        </div>
                        <div class="form-group col-md-6 classEmail">
                            <label for="inputEmail">E-MAIL ADDRESS *</label>
                            <input type="text" class="form-control" id="inputEmail" name="email" placeholder="E-MAIL"
                                value="{{ old('email','')}}">
                            <small class="text-danger" style="display:none">
                                * กรุณาใส่อีเมล์
                            </small>
                        </div>
                        <div class="form-group col-md-6 classPhone">
                            <label for="inputPhone">TELEPHONE *</label>
                            <input type="text" class="form-control class_inputPhone" id="inputPhone" name="inputPhone"
                                placeholder="TELEPHONE" value="{{ old('inputPhone','')}}">
                            <small class="text-danger" style="display:none">
                                * กรุณาใส่เบอร์โทร
                            </small>
                        </div>
                        <div class="form-group col-md-12 classMessage">
                            <label for="inputMessage">MESSAGE *</label>
                            <textarea class="form-control" id="inputMessage" name="message" rows="5"
                                placeholder="MESSAGE">{{ old('message','')}}</textarea>
                            <small class="text-danger" style="display:none">
                                * กรุณาใส่ข้อความ
                            </small>
                        </div>
                        {{-- @if (isset($captcha))
                        <div class="form-group col-md-3 classCaptcha">
                            <label for="inputCaptcha"><img id="imgCaptcha" src="{{$captcha}}" /></label>
                            <input type="text" class="form-control" id="inputCaptcha" name="inputCaptcha"
                                placeholder="Captcha">
                            <small class="text-danger" style="{{$errors->has('inputCaptcha')?'':'display:none'}}">
                                * กรุณาใส่ Captcha
                            </small>
                        </div>
                        @endif --}}
                    </div>
                    {{-- <input type="hidden" name="captcha_key" id="captcha_key" value="{{$captcha['key'] ?? ''}}" />
                    --}}
                    <button type="submit" id="btnContact" name="btnContact" class="btn btn-primary">SENT</button>
                </form>
            </div>
        </div>
        <div class="row pt-5">
            <div class="col-12 col-lg-4 offset-lg-2">
                <p class="address">
                    Address : <br>
                    50 Romklao Road, Khlong Sam, <br>
                    Prawet, Lat Krabang, Bangkok <br>
                    Telephone : <br> 02-906-8865-68 <br> 02-906-8899 <br> 02-9151379-89 <br>
                    Fax : 02-906-8897 <br>
                    Working Time : Mon-Fri 08:00-17:00
                </p>
                <p><img src="{{url('dist/images/qrcode.jpg')}}" class="w-25 img-fluid" alt=""></p>
            </div>
            <div class="col-12 col-lg-4">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item"
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31005.677637908546!2d100.74666607092377!3d13.736017186634081!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x311d66f2b8e0da4d%3A0x792a6204c8cbfd89!2z4LiW4LiZ4LiZIOC4o-C5iOC4oeC5gOC4geC4peC5ieC4siBLaHdhZW5nIEtobG9uZyBTYW0gUHJhd2V0LCBLaGV0IExhdCBLcmFiYW5nLCBLcnVuZyBUaGVwIE1haGEgTmFraG9uIDEwNTIw!5e0!3m2!1sen!2sth!4v1579066698786!5m2!1sen!2sth"
                        allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</section>
@stop

@section('page_script')
{!! Html::script('js/functionjs.js') !!}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<script>
    var submitted = false;
    $(document).ready(function(){

        @if (isset($_GET["rs"]) && $_GET["rs"]=="success")
            Swal.fire({
                type: 'success',
                title: '<strong>THANK YOU</strong>',
                html: '<span style="color:#FF0000">send Mail success</span>',
            });
        @endif

        $("#frmContact").on("submit",function()
        {
            var bool = true;
            var html = "";
            $("#frmContact input","#frmContact textarera").removeClass("is-invalid");
            $(".form-group small").hide();

            if ($("#inputFirstname").val() == "") {
                $("#inputFirstname").addClass("is-invalid");
                $(".classFirstname small").show();
                bool = false;
            }
            if ($("#inputLastname").val() == "") {
                $("#inputLastname").addClass("is-invalid");
                $(".classLastname small").show();
                bool = false;
            }

            if ($("#inputEmail").val() == "") {
                $("#inputEmail").addClass("is-invalid");
                $(".classEmail small").html("* กรุณาใส่อีเมล์");
                $(".classEmail small").show();
                bool = false;
            }
            else if  (!js_checkemail($("#inputEmail").val()))
            {
                $("#inputEmail").addClass("is-invalid");
                $(".classEmail small").html("* รูปแบบอีเมล์ไม่ถูกต้อง! กรูณาใส่อีเมล์ใหม่");
                $(".classEmail small").show();
                bool = false;
            }

            if ($("#inputPhone").val() == "") {
                $("#inputPhone").addClass("is-invalid");
                $(".classPhone small").html("* กรุณาใส่เบอร์โทร");
                $(".classPhone small").show();
                bool = false;
            }

            if ($("#inputMessage").val() == "") {
                $("#inputMessage").addClass("is-invalid");
                $(".classMessage small").show();
                bool = false;
            }

            // if ($("#inputCaptcha").val() == "") {
            //     $("#inputCaptcha").addClass("is-invalid");
            //     $(".classCaptcha small").show();
            //     bool = false;
            // }

            if (bool)
            {
                if (!submitted)
                {
                    //$("#frmContact").submit();
                    var frmContact = $("#frmContact").serialize();
                    $.ajax({
                        url: "{{ url('api/system/sendContact') }}",
                        type: 'post',
                        data: frmContact,
                        beforeSend: function() {
                                // setting a timeout
                            submitted=true;
                        },
                        success: function (data) {
                            Swal.fire({
                                type: 'success',
                                title: '<strong>Contact us</strong>',
                                html: '<span style="color:#FF0000">send mail success</span>',
                            }).then((result) => {
                                if (result.value) {
                                    location = "{{ Route('home') }}";
                                }
                            });
                            
                            submitted=false;
                        },
                        statusCode: {
                            404: function () {
                                //alert( "page not found" );
                            },
                            502: function () {
                                //alert( "page not found 2222" );
                                swal({
                                    title: 'Contact',
                                    text: "Contact error",
                                    type: 'error',
                                });
                            }
                        }
                    });
                }
            }
            else
            {
                Swal.fire({
                    type: 'error',
                    title: '<strong>Register</strong>',
                    html: '<span style="color:#FF0000">กรุณากรอกข้อมูลให้ครบถ้วน</span>',
                })
            }
            return false;
        })
    })
</script>
@stop