@extends('layouts.frontend.index')
@section('title', $label)
@section('meta_title', $label . ' - ' . Config::get('app.name'))
@section('meta_description', 'Hubungi tim AturOrder untuk mendapatkan bantuan, pertanyaan, atau saran. Kami siap membantu Anda dalam mengoptimalkan pengelolaan pesanan, stok, dan pelanggan Anda dengan software order management terbaik di Indonesia')
@section('meta_keywords', 'Hubungi Kami AturOrder, Bantuan AturOrder, Pertanyaan AturOrder, Saran AturOrder, Order Management SaaS, Software Order Management, Dukungan Pelanggan, Konsultasi, Demo, Informasi')

@section('content')
<section class="contact">
    <div class="text-center mb-5">
        <h3>Hubungi Kami</h3>
        Tim Support Kami Siap Membantu Anda
    </div>

    <div class="d-flex">
        <div class="m-auto">
            <div class="card">
                <div class="card-body p-4">
                    <form class="form-block" method="post" action="{{ route('contact.store') }}">
                        @csrf

                        <x-form.input-text
                            name="name"
                            label="Nama Lengkap"
                            :old="old('name')"
                        />
                        <x-form.input-group-mask
                            type="email"
                            name="email"
                            label="Email"
                            mask="email"
                            addon="<i class='fa-solid fa-envelope'></i>"
                            :old="old('email')"
                        />
                        <x-form.input-group-mask
                            name="phone"
                            label="No. Handphone"
                            mask="handphone"
                            addon="<i class='fa-solid fa-mobile-screen'></i>"
                            :old="old('phone')"
                        />
                        <x-form.text-area
                            name="message"
                            label="Pesan"
                            rows="5"
                            :old="old('message')"
                        />

                        <div class="d-grid mt-4">
                            <button type="button" class="btn btn-success btn-submit">SUBMIT</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .contact {
        background: url("{{ asset('images/union.webp') }}");
        background-size: 100% 80%;
        background-repeat: no-repeat;
        color: white;
        padding-top: 120px !important;
    }
    .contact .card {
        min-width: 420px;
    }

    @media (max-width: 768px) {
        .contact {
            background-size: 100% 40%;
            padding-top: 130px !important;
        }
        .contact .card {
            min-width: 100%;
        }
    }
</style>
@endpush

@push('scripts')
<script>
const error = "@isset($errors->all()[0]) {{ $errors->all()[0] }} @endisset"

$(document).ready(function() {
    if (error != "")
        setNotifInfo(error)

    $(".email-mask").inputmask({ alias: "email" })
    $(".handphone-mask").inputmask({ alias: "handphone" })
})
</script>
@endpush