@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 --}}
    <div class="item image">
        <span class="loading">Loading...</span>
        <figure>
            <div class="slide-image slide-media">
                <a href="javascript:void(0);">
                    <img data-lazy="{{url('dist/images/banner-mica-01.jpg')}}" class="image-entity d-block" alt=""> 
                </a>
            </div>
        </figure>   
    </div>
    <div class="item image">
        <span class="loading">Loading...</span>
        <figure>
            <div class="slide-image slide-media">
                <a href="javascript:void(0);">
                    <img data-lazy="{{url('dist/images/banner-mica-02.jpg')}}" class="image-entity d-block" alt=""> 
                </a>
            </div>
        </figure>   
    </div>
    <div class="item image">
        <span class="loading">Loading...</span>
        <figure>
            <div class="slide-image slide-media">
                <a href="javascript:void(0);">
                    <img data-lazy="{{url('dist/images/banner-mica-03.jpg')}}" class="image-entity d-block" alt=""> 
                </a>
            </div>
        </figure>   
    </div>
    <div class="item image">
        <span class="loading">Loading...</span>
        <figure>
            <div class="slide-image slide-media">
                <a href="javascript:void(0);">
                    <img data-lazy="{{url('dist/images/banner-mica-04.jpg')}}" class="image-entity d-block" alt=""> 
                </a>
            </div>
        </figure>   
    </div>
</section>

<section id="product" class="products">
    <div class="container">
        <div class="row">
            <div class="col-8 offset-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 text-center pt-5">
                <img src="{{url('dist/images/logo-mica.png')}}" class="img-fluid" alt="">
            </div>
            @if (isset($micas) && $micas->count()>0)
                @foreach ($micas as $key=>$mica)
                    @if ($key%2==0)
                        <hr class="w-100 my-5">            
                    @endif
                    <div class="col-6 text-center">
                        <img src="{{Helper::storageProcess("get",$mica->pathFile,$mica->thumb)}}" class="img-fluid w-50" alt="">
                        <p class="pt-3">{{Session::get('locale')=="th"?$mica->title_th:$mica->title_en}}</p>
                        <p>{{Session::get('locale')=="th"?$mica->weight_th:$mica->weight_en}} g.</p>
                    </div>
                @endforeach    
            @endif
            {{-- <hr class="w-100 my-5">
            <div class="col-6 text-center">
                <img src="{{url('dist/images/mica-10.jpg')}}" class="img-fluid w-50" alt="">
                <p class="pt-3">Sardine In Tomato Sauce</p>
                <p>140 g.</p>
            </div>
            <div class="col-6 text-center">
                <img src="{{url('dist/images/mica-08.jpg')}}" class="img-fluid w-50" alt="">
                <p class="pt-3">Mackeral In Tomato Sauce
                    
                    </p>
                <p>140 g.</p>
            </div>
            <hr class="w-100 my-5">
            <div class="col-6 text-center">
                <img src="{{url('dist/images/mica-02.jpg')}}" class="img-fluid w-50" alt="">
                <p class="pt-3">Sliced Champignon 
                    Mushrooms In Brine
                    2</p>
                <p>840 g.</p>
            </div>
            <div class="col-6 text-center">
                <img src="{{url('dist/images/mica-04.jpg')}}" class="img-fluid w-50" alt="">
                <p class="pt-3">Green Peas In Brine
                    </p>
                <p>400 g.</p>
            </div>
            <hr class="w-100 my-5">
            <div class="col-6 text-center">
                <img src="{{url('dist/images/mica-03.jpg')}}" class="img-fluid w-50" alt="">
                <p class="pt-3">Red Kidney Bean In Brine
                    </p>
                <p>400 g.</p>
            </div>
            <div class="col-6 text-center">
                <img src="{{url('dist/images/mica-05.jpg')}}" class="img-fluid w-50" alt="">
                <p class="pt-3">Whole Champignon
                    Mushrooms In Brine
                    </p>
                <p>400 g.</p>
            </div>
            <hr class="w-100 my-5">
            <div class="col-6 text-center">
                <img src="{{url('dist/images/mica-07.jpg')}}" class="img-fluid w-50" alt="">
                <p class="pt-3">Sardine In Tomato Sauce
                    
                </p>
                <p>140 g.</p>
            </div>
            <div class="col-6 text-center">
                <img src="{{url('dist/images/mica-06.jpg')}}" class="img-fluid w-50" alt="">
                <p class="pt-3">Tomato Paste
                    </p>
                <p>3.2 Kg. / 560 g. / 170 g.</p>
            </div>
            <hr class="w-100 my-5">
            <div class="col-6 text-center">
                <img src="{{url('dist/images/mica-08.jpg')}}" class="img-fluid w-50" alt="">
                <p class="pt-3">Mackeral In Tomato Sauce
                    
                    </p>
                <p>140 g.</p>
            </div> --}}
        </div>
    </div>
</section>
<section class="wheretobuy">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <p class="text-center py-4">Where to Buy</p>
                <hr class="w-100">
                <div class="buy col-12 col-lg-8 offset-lg-2 my-5">
                    <img src="{{url('dist/images/wheretobuy.jpg')}}" class="img-fluid" alt="">
                </div>
            </div>
        </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>
                    Romklao Road, Khlong Sam Prawet, <br>
                    Lat Krabang, Bangkok <br>
                    Telephone : 0-2906-8860 <br>
                    Fax : 0-2906-8898 <br>
                    Working Time : Mon - Fri 08:00-17:00
                </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