@extends('layouts.frontend.index')
@section('title', $label)
@section('meta_title', $label . ' - ' . Config::get('app.name'))
@section('meta_description', 'Bergabunglah dengan program afiliasi AturOrder dan dapatkan komisi menarik untuk setiap penjualan yang Anda hasilkan. Promosikan software order management terbaik ini kepada jaringan Anda!')
@section('meta_keywords', 'Afiliasi AturOrder, Program Afiliasi, Komisi, Software Order Management, Pemasaran Online, Bisnis Online')

@section('content')
<section class="affiliate">
    <div class="text-center mb-5">
        <h3>Daftar Afiliasi</h3>
        Dapatkan komisi menarik untuk setiap penjualan yang Anda referensikan
    </div>

    <div class="d-flex">
        <div class="m-auto">
            <div class="card">
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-sm-7 info">
                            <b>Bergabunglah dengan Program Afiliasi AturOrder dan Raih Penghasilan Lebih!</b>
                            <br /><br />

                            <i class="fa-solid fa-rocket text-danger"></i> &nbsp;Selamat datang di Program Afiliasi AturOrder! Kami
                            mengundang Anda untuk menjadi bagian dari komunitas kami dan memperoleh penghasilan tambahan dengan cara
                            yang mudah dan menarik.
                            <br /><br />

                            <b>Apa itu Program Afiliasi AturOrder?</b> Program Afiliasi AturOrder adalah kesempatan bagi Anda untuk
                            memperoleh komisi dengan memperkenalkan aplikasi order management AturOrder kepada orang lain.
                            <br /><br />

                            Berikut adalah cara kerjanya:
                            <br />

                            <ol class="mt-2 mb-4" style="margin-left: -20px;">
                                <li>
                                    <b>Level 1 (15% Fee):</b><br />

                                    <ul class="mt-1" style="margin-left: -16px;">
                                        <li>
                                            Anda mendaftar sebagai affiliator langsung.
                                        </li>
                                        <li>
                                            Setiap kali Anda berhasil menjual layanan AturOrder ke calon pelanggan, Anda berhak atas
                                            komisi sebesar 15% dari total penjualan.
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <b>Level 2 (5% Fee):</b><br />

                                    <ul class="mt-1" style="margin-left: -16px;">
                                        <li>
                                            Anda dapat merekrut affiliator lain untuk bergabung dengan program ini.
                                        </li>
                                        <li>
                                            Jika affiliator di bawah Anda (level 2) berhasil menjual, Anda akan mendapatkan komisi
                                            sebesar 5% dari total penjualan mereka.
                                        </li>
                                    </ul>
                                </li>
                            </ol>

                            <b>Bagaimana Cara Kerjanya?</b>
                            <br />

                            <ol class="mt-2 mb-4" style="margin-left: -20px;">
                                <li>
                                    <b>Daftar</b>:
                                    Isi formulir pendaftaran di halaman Program Afiliasi AturOrder di bawah.
                                </li>
                                <li>
                                    <b>Dapatkan Link Unik</b>:
                                    Setelah mendaftar, Anda akan menerima tautan unik yang dapat Anda bagikan kepada calon pelanggan.
                                </li>
                                <li>
                                    <b>Promosikan AturOrder</b>:
                                    Bagikan tautan unik melalui media sosial, email, atau situs web Anda. Ajak orang lain untuk mencoba AturOrder.
                                </li>
                                <li>
                                    <b>Lihat Penghasilan Bertambah</b>:
                                    Setiap kali ada penjualan melalui tautan Anda, komisi akan otomatis tercatat di akun Anda.
                                </li>
                            </ol>

                            <b>Keuntungan Bergabung dengan Program Afiliasi</b>
                            <br />

                            <ul class="mt-2 mb-4" style="margin-left: -16px;">
                                <li>
                                    <b>Pendapatan Pasif</b>:
                                    Dapatkan komisi tanpa harus mengelola produk atau layanan.
                                </li>
                                <li>
                                    <b>Skala Bisnis</b>:
                                    Semakin banyak orang yang Anda referensikan, semakin besar potensi penghasilan Anda.
                                </li>
                                <li>
                                    <b>Dukungan Tim</b>:
                                     Tim kami siap membantu Anda dengan pertanyaan dan dukungan teknis.
                                </li>
                            </ul>

                            <b>Pajak dan Potongan</b>
                            <br />

                            <ul class="mt-2 mb-4" style="margin-left: -16px;">
                                <li>
                                    Komisi akan dikurangi PPN sebesar 11%.
                                </li>
                                <li>
                                    PPH akan bergantung pada NPWP Anda: 5% jika Anda memiliki NPWP, atau 20% jika tidak
                                </li>
                            </ul>

                            <b>Mulailah Sekarang!</b> Daftarlah hari ini di form di bawah. Jadilah bagian dari kesuksesan AturOrder dan raih
                            penghasilan tambahan dengan mudah!
                            <br /><br />

                            Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk menghubungi tim kami. Mari bersama-sama
                            memperluas jangkauan AturOrder dan meraih kesuksesan bersama! <i class="fa-solid fa-star text-warning"></i>
                        </div>
                        <div class="col-sm-5 form">
                            <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('affiliate.store') }}">
                                @csrf

                                <x-form.input-text
                                    name="name"
                                    label="Nama Lengkap"
                                    :old="old('name')"
                                />
                                <x-form.input-group
                                    type="email"
                                    name="email"
                                    label="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-section-form
                                    label="Akun Login"
                                    icon="fa-solid fa-lock"
                                    class="mb-3 mt-4"
                                />
                                <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', 'affiliate') . '\'><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>
                                <div class="mt-4 text-center">
                                    Sudah punya akun?
                                    <a href="{{ route('auth.login') }}">Login</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .affiliate {
        background: url("{{ asset('images/union.webp') }}");
        background-size: 100% 70%;
        background-repeat: no-repeat;
        color: white;
        padding-top: 120px !important;
    }
    .affiliate .card {
        min-width: 1000px;
    }
    .affiliate .card .info {
        border-right: 1px solid #eeeeee;
    }
    .affiliate .card .form {
        padding-left: 25px;
    }
    .affiliate ol li, .affiliate ul li {
        padding-bottom: 5px;
    }

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

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

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

$(document).ready(function() {
    if (error != "") {
        $(".eye").css({ "margin-top": "-72px" })
        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