@extends('layouts.frontend.index')
@section('title', $label)
@section('meta_title', $label . ' - ' . Config::get('app.name'))
@section('meta_description', 'Lihat demo AturOrder dan saksikan bagaimana software ini dapat membantu Anda meningkatkan efisiensi dan produktivitas bisnis Anda.')
@section('meta_keywords', 'Demo AturOrder, Software Order Management, Presentasi, Fitur, Manfaat, Bisnis, Produktivitas')

@section('content')
<section class="demo">
    <div class="text-center mb-5">
        <h3>Daftar Demo</h3>
        Daftar sekarang juga tanpa dipungut biaya dan dapatkan akses untuk demo aplikasi
    </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('demo.store') }}">
                        @csrf

                        <x-form.input-text
                            name="name"
                            label="Nama Lengkap"
                            :old="old('name', $request->n)"
                        />
                        <x-form.input-group-mask
                            type="email"
                            name="email"
                            label="Email"
                            mask="email"
                            addon="<i class='fa-solid fa-envelope'></i>"
                            :old="old('email', $request->e)"
                        />
                        <x-form.input-group-mask
                            name="phone"
                            label="No. Handphone"
                            mask="handphone"
                            addon="<i class='fa-solid fa-mobile-screen'></i>"
                            :old="old('phone', $request->h)"
                        />

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

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

    @media (max-width: 768px) {
        .demo {
            background-size: 100% 40%;
            padding-top: 130px !important;
        }
        .demo .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("{{ __('validation.not_valid') }}")

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