@extends('user.app')

@php
    $company_settings = Cache::get('company.settings', \App\Models\Setting::all()->first(), now()->addMinutes(1));
@endphp
@section('content')
    <main class="main">
        <div class="page-content">

            <nav class="breadcrumb-nav mb-5">
                <div class="container">
                    <ul class="breadcrumb">
                        <li><a href="{{ route('v2.home') }}"><i class="d-icon-home"></i></a></li>
                        <li><a href="{{ route('v2.contact') }}" class="active">Hubungi Kami</a></li>
                    </ul>
                </div>
            </nav>

            <div class="container mb-6">
                <div
                    style="background-image: url({{ asset('assetsV2/images/ContactBanner.jpg') }});background-size:cover;background-repeat:no-repeat;padding: 7rem 5rem">
                    <div class="row justify-content-center text-center">
                        <h3 class="banner-title text-uppercase ls-m text-white mb-10">
                            Hubungi Kami</h3>
                        <div class="col-md-6">
                            <iframe src="{{$company_settings['company_maps_embed_link']}}"
                                style="border:0; width:100%; height:30%;" class="mb-7" allowfullscreen=""
                                loading="lazy"></iframe>
                            <table class="text-white text-left table-borderless hubungi-kami" style="font-size: 1.8rem">
                                <tr>
                                    <th>Alamat <i class="d-icon-map"></th>
                                </tr>
                                <tr>
                                    <td>{{$company_settings['company_address']}}</td>
                                </tr>
                                <tr>
                                    <th>Email <i class="fa fa-envelope"></th>
                                </tr>
                                <tr>
                                    <td>{{$company_settings['company_email']}}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <form action="#" id="contact-us" method="post" class="mx-auto">
                                <div id="success" class="d-none">
                                    <div class="d-flex justify-content-center flex-column" style="height: 500px">
                                        <h2 class="text-white">Pesan Berhasil Dikirim</h2>
                                        <a href="/" class="btn btn-secondary">Kembali Ke Beranda</a>
                                    </div>
                                </div>
                                <div class="row" id="form">
                                    <div class="col-md-12">
                                        <input type="text" class="form-control text-white w100 mb-4" name="name"
                                            id="contactus-name" placeholder="Nama" required="" style="background:transparent">
                                    </div>
                                    <div class="col-md-6">
                                        <input type="email" autocomplete="off" class="form-control text-white w100 mb-4"
                                            name="email" id="contactus-email" placeholder="Email" required="" style="background:transparent">
                                    </div>
                                    <div class="col-md-6">
                                        <input type="tel" autocomplete="off" class="form-control text-white w100 mb-4"
                                            name="phone" id="contactus-phone" placeholder="No. Handphone" required="" style="background:transparent">
                                    </div>
                                    <div>
                                        <input type="text" autocomplete="off" class="form-control text-white w100 mb-4"
                                            name="subject" id="contactus-subject" placeholder="Subjek" required="" style="background:transparent"   >
                                    </div>
                                    <div class="mb-4">
                                        <textarea class="form-control text-white w100 h100 mb4" name="description"
                                            id="contactus-description" cols="29" rows="10" style="resize: none;background:transparent"
                                            placeholder="Pesan"></textarea>
                                    </div>
                                    <button class="btn btn-primary btn-block btn-rounded" type="submit">Kirim</button>
                                    <div id="errorBox"></div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </main>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                accepts: {
                    'json': 'application/json',
                },
            });

            $('#contact-us').on('submit', sendMessage);
        })

        let sendMessage = (e) => {
            e.preventDefault();
            let errTarget = $('#contact-us #errorBox');
            errTarget.html("");
            $('#contact-us button:submit').addClass('load-more-overlay loading');
            let data = {
                'name': $('#contact-us #contactus-name').val(),
                'email': $('#contact-us #contactus-email').val(),
                'phone': $('#contact-us #contactus-phone').val(),
                'subject': $('#contact-us #contactus-subject').val(),
                'description': $('#contact-us #contactus-description').val()
            }
            $.post('/save/contactus', data)
                .done(function() {
                    $('#contact-us #form').addClass('d-none');
                    $('#contact-us #success').removeClass('d-none');
                }).fail(function(err) {
                    let res = $.parseJSON(err.responseText)
                    for (const key in res.errors) {
                        var value = res.errors[key];
                        errTarget.append(dangerAlert(value[0]))
                        console.log(value[0])
                    }
                }).always(function() {
                    $('#contact-us button:submit').removeClass('load-more-overlay loading');
                })
        }
    </script>
@endsection