@extends('master.front')

@section('meta')
    <meta name="keywords" content="{{ $setting->meta_keywords }}">

    <meta name="description" content="{{ $setting->meta_description }}">
@endsection

@section('title')
    {{ __('Contact') }}
@endsection

@section('content')
    <!--  New Contacttt    -->
    <div class="container-fluid container60">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb py-3">
                <li class="breadcrumb-item"><a href="{{ url('/') }}">
                        {{ __('หน้าหลัก') }}
                    </a></li>

                <li class="breadcrumb-item active" aria-current="page">
                    {{ __('ติดต่อเรา') }}
                </li>
            </ol>

        </nav>

        <div class="ratio ratio-21x9">

            <iframe src="https://map.google.com/maps?q={{ @$setting->googlemap }}&output=embed">
            </iframe>
        </div>
        <div class="row py-5">
            <div class="col-md-8">
                <h4 class="fw-semibold text-center">
                    {{ __('แบบฟอร์มติดต่อ') }}*
                </h4>
                <p class="text-center text-gray1">
                    {{ __('หากมีข้อสงสัย กรุณาเลือกหัวข้อคําถามและกรอกข้อมูลของคุณ จากนั้นเจ้าหน้าที่จะติดต่อกลับ ภายในวันและเวลาทําการ') }}
                    <br>
                    {{ __('กรุณาเลือกหัวข้อคําถามและกรอกข้อมูลของคุณ') }}
                </p>
                <br>

                @if (Session::has('success'))
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <b>{{ Session::get('success') }}</b>

                    </div>
                @endif

                @if (Session::has('error'))
                    <div class="alert alert-danger alert-dismissible">

                        <button type="button" class="close" data-dismiss="alert">&times;</button>

                        <b>{{ Session::get('error') }}</b>

                    </div>
                @endif

                @if (count($errors) > 0)
                    <div class="alert alert-danger validation">
                        <ul class="text-left {{ count($errors) == 1 ? 'list-unstyled' : '' }}">
                            @foreach ($errors->all() as $error)
                                <li>
                                    <b>{{ $error }}</b>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <br>
                <form class="row mt-2" method="Post" action="{{ route('front.contact.submit') }}" id="demo-form">
                    @csrf
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="first-name">{{ __('First Name') }}</label>
                            <input class="form-control form-gray form-control-rounded" name="first_name" type="text"
                                id="first-name" placeholder="{{ __('First Name') }}">
                            @error('first_name')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="last-name">{{ __('Last Name') }}</label>
                            <input class="form-control form-gray form-control-rounded" name="last_name" type="text"
                                id="last-name" placeholder="{{ __('Last Name') }}">
                            @error('last_name')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="contact-email">{{ __('E-mail') }}</label>
                            <input class="form-control form-gray form-control-rounded" type="email" name="email"
                                id="contact-email" placeholder="{{ __('E-mail') }}">
                            @error('email')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="contact-tel">{{ __('Phone') }}</label>
                            <input class="form-control form-gray form-control-rounded" type="text" name="phone"
                                id="contact-tel" placeholder="{{ __('Phone') }}">
                            @error('phone')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="contact-tel">{{ __('เรื่องที่ติดต่อ') }}*</label>
                            <select class="form-select form-gray rounded-6" name="matter">

                                <option value="1">



                                    {{ __('สอบถามข้อมูลสินค้าและบริการ') }}



                                </option>

                                <option value="สั่งซื้อสินค้า">



                                    {{ __('สั่งซื้อสินค้า') }}



                                </option>

                                <option value="บริการหลังการขาย">



                                    {{ __('บริการหลังการขาย') }}



                                </option>

                                <option value="ติชมแและแนะนำการบริการ">



                                    {{ __('ติชมแและแนะนำการบริการ') }}



                                </option>

                            </select>

                        </div>

                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="contact-tel">{{ __('Branch') }}</label>
                            <select class="form-select form-gray rounded-6" name="branch">
                                @foreach ($setting_email as $se)
                                    <option value="{{ $se->name }}"> {{ $se->name }} </option>
                                @endforeach

                            </select>

                        </div>
                    </div>

                    <div class="col-12  ">
                        <div class="form-group">
                            <label for="message-text">{{ __('Message') }}</label>
                            <textarea class="form-control form-gray form-control-rounded" rows="9" name="message" id="message-text"
                                placeholder="{{ __('Write your message here...') }}"></textarea>
                            @error('message')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    @if ($setting->recaptcha == 1)
                        <div class="col-lg-12 mb-4">
                            {!! NoCaptcha::renderJs() !!}
                            {!! NoCaptcha::display() !!}

                            @if ($errors->has('g-recaptcha-response'))
                                @php
                                    $errmsg = $errors->first('g-recaptcha-response');
                                @endphp
                                <p class="text-danger mb-0">{{ __("$errmsg") }}</p>
                            @endif
                        </div>
                    @endif


                    <div class="col-12 text-center">
                        <!-- Show toastr after succesfull submit -->
                        <button class="btn btn-blue rounded-0 w-200 btn-submit g-recaptcha"
                            data-sitekey="{{ env('GOOGLE_RECAPTCHA_KEY') }}" data-callback='onSubmit' data-action='submit'>


                            {{ __('ส่งข้อความ') }}



                        </button>
                    </div>
                </form>

            </div>

            <div class="col-md-4">

                <h4 class="fw-semibold mb-3">
                    {{ __('ข้อมูลที่ติดต่อเรา') }}
                </h4>

                <p>บริษัท ฮาร์ดแวร์เฮาส์ คอร์ปอเรชั่น จำกัด (สำนักงานใหญ่)<br>
                    89/9 หมู่ 7 ถนนเทพรัตน กม.25 ต.บางเสาธง อ.บางเสาธง <br>จ.สมุทรปราการ 10570<br>
                    เลขประจำตัวผู้เสียภาษี : 0115565022583</p>

                <h5 class="fw-semibold">
                    {{ __('สถานที่ตั้ง') }}</h5>
                <p class="text-gray1">
                    {!! @$setting->address !!}
                </p>



                <h5 class="fw-semibold">
                    {{ __('เวลาทำการ') }}
                </h5>

                <p class="text-gray1">
                    {{ __('จันทร์ - เสาร์') }}
                    {{ $setting->workingday_start }} - {{ $setting->workingday_end }}
                </p>

                <h5 class="fw-semibold">



                    {{ __('เบอร์โทรติดต่อ') }}



                </h5>

                <p class="text-gray1">

                    @foreach (@$tels as $tel)
                        @if ($tel != '' || $tel != null)
                            <a href="tel:{{ $tel }}" class="link-gray1">{{ $tel }}</a><br>
                        @endif
                    @endforeach

                </p>

                <h5 class="fw-semibold">



                    {{ __('อีเมล์ติดต่อร้านค้าออนไลน์') }}



                </h5>

                <p class="text-gray1"><a href="mailto:{{ @$setting->footer_email }}"
                        class="link-gray1">{{ @$setting->footer_email }}</a></p>

                <h5 class="fw-semibold">{{ __('บัญชีโซเชี่ยล') }}</h5>

                <ul class="nav nav-foot footer-social-links">



                    @php
                        $links = json_decode($setting->social_link, true)['links'];
                        $icons = json_decode($setting->social_link, true)['icons'];

                    @endphp

                    @foreach ($links as $link_key => $link)
                        <li class="nav-item">
                            <a href="{{ $link }}"><span><i class="{{ $icons[$link_key] }}"></i></span></a>
                        </li>
                    @endforeach




                </ul>

            </div>

        </div>

        <div class="row g-4 py-5">

            <div class="col-sm-4">

                <div class="card card-body rounded-10 cardContact mt-4" style="border: 1px solid rgba(0, 0, 0, .125);">

                    <div class="d-flex align-items-end boxHead mb-3">

                        <div class="flex-shrink-0">

                            <div class="box-iconB">

                                <i class="material-symbols-outlined text-blue1">call</i>

                            </div>

                        </div>

                        <div class="flex-grow-1 ms-3">

                            <h5 class="mb-0 fw-semibold">



                                {{ __('ติดต่อทางโทรศัพท์') }}



                            </h5>

                        </div>

                    </div>

                    <ul class="list-group list-group-flush border-top-0">

                        @foreach ($setting_phone as $sp)
                            <li class="list-group-item text-gray1"><b>



                                    {{ __($sp->name) }}



                                    : </b><a href="tel:{{ @$sp->contact_ }}" class="link-gray1">{{ @$sp->contact_ }}</a>
                            </li>
                        @endforeach

                    </ul>



                </div>

            </div>

            <div class="col-sm-4">

                <div class="card card-body rounded-10 cardContact mt-4" style="border: 1px solid rgba(0, 0, 0, .125);">

                    <div class="d-flex align-items-end boxHead mb-3">

                        <div class="flex-shrink-0">

                            <div class="box-iconB">

                                <i class="material-symbols-outlined text-blue1">fax</i>

                            </div>

                        </div>

                        <div class="flex-grow-1 ms-3">

                            <h5 class="mb-0 fw-semibold">



                                {{ __('ติดต่อทางโทรสาร') }}



                            </h5>

                        </div>

                    </div>

                    <ul class="list-group list-group-flush border-top-0">



                        @foreach ($setting_fax as $sf)
                            <li class="list-group-item text-gray1"><b>



                                    {{ __($sf->name) }}



                                    : </b><a href="tel:{{ @$sf->contact_ }}" class="link-gray1">{{ @$sf->contact_ }}</a>
                            </li>
                        @endforeach





                    </ul>



                </div>

            </div>

            <div class="col-sm-4">

                <div class="card card-body rounded-10 cardContact mt-4" style="border: 1px solid rgba(0, 0, 0, .125);">

                    <div class="d-flex align-items-end boxHead mb-3">

                        <div class="flex-shrink-0">

                            <div class="box-iconB">

                                <i class="material-symbols-outlined text-blue1">mail</i>

                            </div>

                        </div>

                        <div class="flex-grow-1 ms-3">

                            <h5 class="mb-0 fw-semibold">



                                {{ __('ติดต่อทางอีเมลล์ (ฝ่ายขาย)') }}





                            </h5>

                        </div>

                    </div>

                    <ul class="list-group list-group-flush border-top-0">



                        @foreach ($setting_email as $se)
                            <li class="list-group-item text-gray1"><b>


                                    {{ __($se->name) }}

                                    : </b><a href="mailto:{{ @$se->contact_ }}"
                                    class="link-gray1">{{ @$se->contact_ }}</a></li>
                        @endforeach




                    </ul>



                </div>

            </div>

        </div>

    </div>



@endsection