@extends('layouts.frontend.index')
@section('title', $label)
@section('meta_title', $label . ' - ' . Config::get('app.name'))
@section('meta_description', 'Coba AturOrder secara gratis selama 14 hari! Dapatkan akses penuh ke semua fitur dan rasakan sendiri kemudahan dalam mengelola order, stok, dan pelanggan')
@section('meta_keywords', 'Trial AturOrder, Gratis, 14 Hari, Software Order Management, Demo, Coba Gratis, Uji Coba')

@section('content')
<section class="trial">
    <div class="text-center mb-5">
        <h3>Daftar Trial</h3>
        Coba trial dengan paket yang Anda inginkan, GRATIS
    </div>

    <div class="d-flex">
        <div class="m-auto">
            <div class="card">
                <div class="card-body p-4">
                    <div class="text-center mb-4">
                        <b>Isi data diri Anda</b><br />
                        <small>Daftar sekarang juga tanpa dipungut biaya</small>
                    </div>

                    <form class="form-block" method="post" action="{{ route('trial.store') }}">
                        @csrf

                        <x-form.input-text
                            name="name"
                            label="Nama Lengkap"
                            :old="old('name', $request->n)"
                        />
                        <x-form.input-group
                            type="email"
                            name="email"
                            label="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)"
                        />
                        <x-form.select
                            name="type"
                            label="Perusahaan"
                            :option="['1' => 'Perdagangan Barang', '2' => 'Jasa']"
                            :old="old('type')"
                        />
                        <x-form.input-text
                            name="entity_name"
                            label="Nama Perusahaan"
                            :old="old('entity_name')"
                        />
                        <x-form.radio
                            name="package"
                            label="Paket"
                            :option="['1' => 'Regular', '2' => 'Premium']"
                            :old="old('package', $request->p)"
                        />
                        <x-form.input-group
                            type="password"
                            id="password"
                            name="password"
                            label="Password"
                            addon="<i class='fa-solid fa-lock'></i>"
                            autocomplete="new-password"
                            :old="old('password')"
                        />
                        <a href="javascript:void(0)" class="eye" data-target="#password" data-show="false">
                            <i class="fa-solid fa-eye"></i>
                        </a>

                        <x-form.input-group
                            type="password"
                            id="password-confirm"
                            name="password_confirm"
                            label="Konfirmasi Password"
                            addon="<i class='fa-solid fa-lock'></i>"
                            :old="old('password_confirm')"
                        />
                        <a href="javascript:void(0)" class="eye" data-target="#password-confirm" data-show="false">
                            <i class="fa-solid fa-eye"></i>
                        </a>

                        <x-form.checkbox
                            name="agreement"
                            :label="'Saya menyetujui <a href=\'' . route('page.terms-conditions', 'client') . '\'><u>Terms & Conditions</u></a> serta <a href=\'' . route('page.privacy-policy') . '\'><u>Privacy policy</u></a>'"
                            value="1"
                        />

                        <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>
    .trial {
        background: url("{{ asset('images/union.webp') }}");
        background-size: 100% 70%;
        background-repeat: no-repeat;
        color: white;
        padding-top: 120px !important;
    }
    .trial .card {
        min-width: 420px;
    }

    .eye {
        position: absolute;
        right: 44px;
        margin-top: -52px;
        color: #a6a7aa;
        z-index: 5;
    }

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

    $(".handphone-mask").inputmask({ alias: "handphone" })

    $(".eye").click(function() {
        const target = $(this).data("target")
        const show = $(target).data("show")

        if (show == "true") {
            $(target).attr("type", "password").data("show", "false")
            $(this).html("<i class='fa-solid fa-eye'></i>")
        } else {
            $(target).attr("type", "text").data("show", "true")
            $(this).html("<i class='fa-solid fa-eye-slash'></i>")
        }
    })
})
</script>
@endpush