@extends('layout.app')

@section('content')
    <!-- modal start -->
    {{-- <div class="modal micromodal-slide" id="home-modal" aria-hidden="true">
        <div class="modal__overlay" tabindex="-1" data-micromodal-close>
            <div class="modal__container jacket__modal" role="dialog" aria-modal="true" aria-labelledby="home-modal-title">
                <header class="modal__header">
                    <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
                </header>
                <main class="modal__content" id="home-modal-content">
                    <img src="/img/refer-n-earn.jpg" alt="">
                </main>
            </div>
        </div>
    </div> --}}

    <div class="layout-pt-lg">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div
                class="row justify-content-center"
            >
                <div class="col-xl-10">
                    <img src="/img/refer-n-earn.jpg" alt="" width="100%">
                </div>
            </div>
        </div>
    </div>

    <!-- section start -->
    <section class="layout-pt-xl layout-pb-md">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div
                data-anim="slide-up delay-3"
                class="row justify-content-center"
            >
                <div class="col-xl-10">
                    <div class="sectionHeading -sm">
                    <h2 class="sectionHeading__title">Refer Now</h2>
                    <p class="text-black leading-md mt-12">
                        Use the form below to refer and earn.
                    </p>
                    </div>
                </div>

                <div class="w-1/1"></div>

                @if (session()->has('message') || count($errors) > 0)
                    <div class="col-xl-10 mt-32">
                        <div class="contact-form -type-1">
                            @if (session()->has('message'))
                                <div class="row">
                                    <div class="col-12 ajax-form-alert js-ajax-form-alert is-active is-success">
                                        <div class="ajax-form-alert__content">
                                            Your message has been sent! We will reply you as soon as possible.
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if(count($errors) > 0)
                                <div class="row">
                                    <div class="col-12 ajax-form-alert js-ajax-form-alert is-active is-error">
                                        <div class="ajax-form-alert__content">
                                            Something went wrong. Please contact us directly at <a href='mailto:info@businessbasket.com.np'>info@businessbasket.com.np</a>.
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                <div class="col-xl-10 mt-48 sm:mt-32">
                    <div class="contact-form -type-1">
                        <form
                            class="row x-gap-40 y-gap-32"
                            method="POST"
                            action="{{ route('refer-offer.store') }}"
                            data-message-success="Your message has been sent! We will reply you as soon as possible."
                            data-message-error="Something went wrong. Please contact us directly at <a href='info@businessbasket.com.np'>info@businessbasket.com.np</a>."
                        >
                            @csrf

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Your Name
                                    <input
                                        type="text"
                                        name="name"
                                        data-required
                                        placeholder="Fill in your name"
                                        value="{{ old('name') }}"
                                    />
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Your Phone Number
                                    <input
                                        type="text"
                                        name="phone"
                                        placeholder="Fill in your phone number"
                                        value="{{ old('phone') }}"
                                    />
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Referred Person Name
                                    <input
                                        type="text"
                                        name="referral_person_name"
                                        data-required
                                        placeholder="Fill in referred person name"
                                        value="{{ old('referral_person_name') }}"
                                    />
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Referred Person Phone Number
                                    <input
                                        type="text"
                                        name="referral_person_phone"
                                        data-required
                                        placeholder="Fill in referred person phone number"
                                        value="{{ old('referral_person_phone') }}"
                                    />
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-12 ajax-form-alert js-ajax-form-alert">
                                <div class="ajax-form-alert__content"></div>
                            </div>

                            <div class="col-12">
                                <button class="button -md -black text-white">Send</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->
      
    <section class="layout-pt-xs layout-pb-lg">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div
            data-anim="slide-up delay-3"
            class="row justify-content-center"
            >
                <div class="col-xl-10">
                    <div class="sectionHeading -sm">
                    <h2 class="sectionHeading__title">Terms & Conditions</h2>

                        <div class="text-base ml-minus-4 mt-12">
                            <div class="d-flex align-items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check size-2xs str-width-lg text-accent mr-8"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <p>The referrer will receive the benefit in real-time after a successful payment is made by the referred person.</p>
                            </div>
                            <div class="d-flex align-items-center mt-4">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check size-2xs str-width-lg text-accent mr-8"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <p>To receive the benefits, the referrer must refer to a 3-months or 12-months internet package.</p>
                            </div>
                            <div class="d-flex align-items-center mt-4">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check size-2xs str-width-lg text-accent mr-8"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <p>REFER OFFER is only valid for standard packages.</p>
                            </div>
                            <div class="d-flex align-items-center mt-4">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check size-2xs str-width-lg text-accent mr-8"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <p>You can only make only one claim for a dual-band router and beacon, but they will be eligible for internet.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        // MicroModal.init();

        // setTimeout(function () {
        //     MicroModal.show('home-modal');
        // }, 4000)
    </script>
@endsection