@extends('layouts.frontendTemplate')

@section('main')

<!-- start page title section -->
<section class="wow animate__fadeIn bg-light-gray padding-35px-tb page-title-small top-space">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 col-md-6 text-md-start text-center">
                <!-- start page title -->
                <h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">ติดต่อเรา</h1>
                <!-- end page title -->
            </div>
            <div class="col-lg-4 col-md-6 breadcrumb text-small alt-font justify-content-center justify-content-md-end sm-margin-15px-top">
                <!-- breadcrumb -->
                <ul>
                    <li><a href="{{url('')}}" class="text-dark-gray">หน้าแรก</a></li>
                    <!-- <li><a href="#" class="text-dark-gray">Contact</a></li> -->
                    <li class="text-dark-gray">ติดต่อเรา</li>
                </ul>
                <!-- end breadcrumb -->
            </div>
        </div>
    </div>
</section>
<!-- end page title section -->

<!-- end help section -->
<!-- start help section -->
<section class="wow animate__fadeIn big-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8 text-center">
            <img src="{{ url('images/logo_greatercm_reg_red.png') }}" width="240" class="logo-dark d-block mx-auto margin-20px-bottom" alt="GREATER CHIANG MAI">
                <a href="mailto:admin@greaterchiangmai.com" class="btn btn-large btn-transparent-dark-gray margin-10px-top">ติดต่อเรา</a>
            </div>
        </div>
    </div>
</section>
<!-- end help section -->
<!-- start contact section -->
<section class="no-padding bg-extra-dark-gray">
    <div class="container-fluid">
        <div class="row row-cols-1 row-cols-lg-2">
            <div class="col p-0 bg-white d-flex align-items-center justify-content-center md-h-450px sm-h-350px wow animate__fadeInLeft">
                <img src="{{ url('images/logo_greatercm_reg_red.png') }}" width="320" class="mw-100" alt="GREATER CHIANG MAI">
            </div>
            <div class="col p-0 wow animate__fadeInRight">
                <div class="row row-cols-1 row-cols-sm-2 m-0">
                    <!-- start contact item -->
                    <div class="col bg-extra-dark-gray d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
                        <i class="icon-map text-deep-pink icon-medium margin-25px-bottom"></i>
                        <div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">ที่ติดต่อ</div>
                        <p class="w-80 lg-w-90 mx-auto text-medium">{{ trans('global.footer_contact_name') }}<br>
                            {{ trans('global.footer_contact_address') }}<br>
                            {{ trans('global.footer_contact_address2') }}</p>
                    </div>
                    <!-- end contact item -->
                    <!-- start contact item -->
                    <div class="col bg-black d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
                        <i class="icon-chat text-deep-pink icon-medium margin-25px-bottom"></i>
                        <div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">คุยกับเราผ่านช่องทาง</div>
                        <p class="mx-auto text-medium mb-0">Line : @thegreaterchiangmai</p>
                         <!-- <p class="mx-auto text-medium">Fax: 1-800-222-002</p> -->
                    </div>
                    <!-- end contact item -->
                    <!-- start contact item -->
                    <div class="col bg-black d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
                        <i class="icon-envelope text-deep-pink icon-medium margin-25px-bottom"></i>
                        <div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">อีเมล</div>
                        <p class="mx-auto text-medium mb-0">อีเมล: <a href="mailto:info@greaterchiangmai.com">info@greaterchiangmai.com</a></p>
                       <!-- <p class="mx-auto text-medium"><a href="mailto:hire@domain.com">hire@domain.com</a></p> -->
                    </div>
                    <!-- end contact item -->
                    <!-- start contact item -->
                    <div class="col bg-extra-dark-gray d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
                        <i class="icon-clock text-deep-pink icon-medium margin-25px-bottom"></i>
                        <div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">เวลาทำการ</div>
                        <p class="mx-auto text-medium mb-0">จันทร์ - เสาร์ 8.30 - 17.00 น.</p>
                        <p class="mx-auto text-medium">หยุดทุกวันอาทิตย์</p>
                    </div>
                    <!-- end contact item -->
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end contact section -->
<!-- start form section -->
<section class="wow animate__fadeIn" id="start-your-project">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-xl-6 col-lg-7 col-md-9 col-sm-10 margin-eight-bottom md-margin-40px-bottom sm-margin-30px-bottom text-center last-paragraph-no-margin">
                <h5 class="alt-font font-weight-700 text-extra-dark-gray text-uppercase">ติดต่อเรา</h5>
            </div>
        </div>
        <form id="project-contact-form" action="email-templates/contact-form-budget.php" method="post">
            <div class="row">
                <div class="col-12">
                    <div class="form-results d-none"></div>
                </div>
                <div class="col-12 col-md-6">
                    <input type="text" name="name" id="name" placeholder="ชื่อ *" class="big-input required">
                </div>
                <div class="col-12 col-md-6">
                    <input type="tel" name="phone" id="phone" placeholder="เบอร์โทรศัพท์"  class="big-input">
                </div>
                <div class="col-12 col-md-6">
                    <input type="email" name="email" id="email" placeholder="อีเมล *" class="big-input required">
                </div>
               <!-- <div class="col-12 col-md-6">
                    <div class="select-style big-select">
                        <select name="budget" id="budget" class="bg-transparent mb-0">
                            <option value="">Select your budget</option>
                            <option value="$500 - $1000">$500 - $1000</option>
                            <option value="$1000 - $2000">$1000 - $2000</option>
                            <option value="$2000 - $5000">$2000 - $5000</option>
                        </select>
                    </div>
                </div> -->
                <div class="col-12">
                    <textarea name="comment" id="comment" placeholder="ข้อความ" rows="6" class="big-textarea"></textarea>
                </div>
                <div class="col-12 text-center">
                    <button id="project-contact-us-button" type="submit" class="btn btn-transparent-dark-gray btn-large margin-20px-top submit">ส่งข้อความ</button>
                </div>
            </div>
        </form>
    </div>
</section>
<!-- end form section -->
<!-- <section class="wow animate__fadeIn bg-light-gray">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center social-style-4">
                <span class="text-medium font-weight-600 text-uppercase d-block alt-font text-extra-dark-gray margin-30px-bottom">On social networks</span>
                <div class="social-icon-style-4">
                    <ul class="margin-30px-top large-icon">
                        <li><a class="facebook" href="http://facebook.com" target="_blank"><i class="fab fa-facebook-f"></i><span></span></a></li>
                        <li><a class="twitter" href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i><span></span></a></li>
                        <li><a class="google" href="http://google.com" target="_blank"><i class="fab fa-google-plus-g"></i><span></span></a></li>
                        <li><a class="dribbble" href="http://dribbble.com" target="_blank"><i class="fab fa-dribbble"></i><span></span></a></li>
                        <li><a class="linkedin" href="http://linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i><span></span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section> -->

@stop

@section('js')

@endsection