@extends('frontend.layouts.app')
@section('content')
    @push('css')
        <style>
            .loader {
                position: absolute;
                z-index: 1;
                top: 40%;
                left: 46%;
                z-index: 9999;
                display: none;
            }

            .loader {
                background-color: #33333359;
                position: absolute;
                z-index: +100 !important;
                width: 100%;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }

            .loader img {
                width: 50px;
                top: 25%;
                transform: translateY(-50%);
                position: absolute;
                left: 48%;
            }

            .loader-hi8 {
                height: 1100px;
            }
        </style>
    @endpush

    <div class="loader loader-hi8" id="loading_div">
        <img src="{{ asset('loading.gif') }}" alt="" class="img-responsive">
    </div>

    <div class="checkout_area bg-color-white rbt-section-gap">
        <div class="container">
            <div class="row g-5 checkout-form">
                <div class="col-lg-8">
                    <div class="rbt-accordion-style rbt-accordion-01 rbt-accordion-06 accordion">
                        <div class="accordion" id="tutionaccordionExamplea1">
                            <div class="accordion-item card">
                                <h2 class="accordion-header card-header" id="accTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accCollapseTwo" aria-expanded="false" aria-controls="accCollapseTwo">
                                        Billing Details
                                    </button>
                                </h2>
                                <div id="accCollapseTwo" class="accordion-collapse collapse show form_div" aria-labelledby="accTwo" data-bs-parent="#tutionaccordionExamplea1">
                                    <div class="checkout-content-wrapper mb--20" style="border-top: 1px dashed rgba(34, 46, 72, .4);">
                                        <div id="billing-form">
                                            <form id="registerForm">
                                                @csrf
                                                <div class="row">
                                                    <div class="col-md-6 col-12 mb--10">
                                                        <label>Name <span class="text-danger">*</span></label>
                                                        <input type="text" name="name" id="name" placeholder="Enter Your Name..." />
                                                        <span id="error_name" class="text-danger lbl_msg"></span>
                                                    </div>
                                                    <div class="col-md-6 mb--10">
                                                        <label>Email Id <span class="text-danger">*</span></label>
                                                        <input type="email" name="email" id="email" placeholder="xyz@gmail.com" />
                                                        <span id="error_email" class="text-danger lbl_msg"></span>
                                                    </div>
                                                    <div class="col-md-6 col-12 mb--10">
                                                        <label>Enter Whatsapp Number <span class="text-danger">*</span></label>
                                                        <input type="number" name="phone" id="phone" placeholder="+91 |" />
                                                        <span id="error_phone" class="text-danger lbl_msg"></span>
                                                    </div>
                                                    <div class="col-md-6 col-12 mb--10">
                                                        <label>Enter State <span class="text-danger">*</span></label>
                                                        <div class="rbt-modern-select bg-transparent height-48">
                                                            <select name="state" class="w-100">
                                                                <option value="">Select State...</option>
                                                                @foreach (states() as $state)
                                                                    <option value="{{ $state }}">{{ $state }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <span id="error_state" class="text-danger lbl_msg"></span>
                                                    </div>
                                                    <div class="col-md-6 mb--10">
                                                        <label for="password">Password <span class="text-danger">*</span></label>
                                                        <div class="input-group" id="show_hide_password">
                                                            <input type="password" name="password" id="password" class="form-control" placeholder="Enter Password..." />
                                                            <div class="input-group-append">
                                                                <div class="input-group-text">
                                                                    <a href="#"><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <span id="error_password" class="text-danger lbl_msg"></span>
                                                    </div>
                                                    <div class="col-md-6 mb--10">
                                                        <label>Enter Sponser Code</label>
                                                        <input type="text" name="referral_code" id="referral_code" value="{{ $referral_code }}" placeholder="Enter Sponser Code..." onkeyup="getSponsorDetail()" />
                                                        <span id="error_referral_code" class="text-danger lbl_msg"></span>
                                                        <span id="sponsor_detail" class="text-success"></span>
                                                    </div>
                                                    <div class="col-md-12 mb--10">
                                                        <div class="check-box">
                                                            <input type="checkbox" id="accept_term_condition" name="accept_term_condition">
                                                            <label for="accept_term_condition">
                                                                By clicking Place Order, you agree to our
                                                                <a href="{{ route('term_and_condition') }}">Terms </a>,
                                                                <a href="{{ route('privacy_policy') }}">Privacy Policy </a>.
                                                            </label>
                                                            <span id="error_accept_term_condition" class="text-danger lbl_msg"></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12 mb--10 text-center">
                                                        <a class="rbt-btn btn-sm btn-gradient radius-round  btn-sm text-center" onclick="submitForm()">
                                                        Continue <i class="feather-arrow-up-right"></i></a>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item card">
                                <h2 class="accordion-header card-header" id="accOne">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accCollapseOne" aria-expanded="true" aria-controls="accCollapseOne">Payment Options</button>
                                </h2>
                                <div class="accordion-collapse collapse payment_div" aria-labelledby="accOne" data-bs-parent="#tutionaccordionExamplea1">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div  class="col-lg-4" id="amount_div">
                    @include('frontend.amount_page')
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            $(document).ready(function() {
                $("#show_hide_password a").on('click', function(event) {
                    event.preventDefault();
                    if ($('#show_hide_password input').attr("type") == "text") {
                        $('#show_hide_password input').attr('type', 'password');
                        $('#show_hide_password i').addClass("fa-eye-slash");
                        $('#show_hide_password i').removeClass("fa-eye");
                    } else if ($('#show_hide_password input').attr("type") == "password") {
                        $('#show_hide_password input').attr('type', 'text');
                        $('#show_hide_password i').removeClass("fa-eye-slash");
                        $('#show_hide_password i').addClass("fa-eye");
                    }
                });
            });
        </script>
        <script>

            function getSponsorDetail(){
                var referral_code = $('#referral_code').val();
                $.ajax({
                    type: 'POST',
                    url: "{{ route('get.sponsor.detail') }}",
                    data: {
                        _token:"{{csrf_token()}}",
                        referrer_code:referral_code
                    },
                    success: function(data) {
                        $('#error_referral_code').text('');
                        $('#sponsor_detail').text('Your Sponsor name ('+data.sponsor.name+')');
                    },
                    error: function(request, status, error) {
                        $('#sponsor_detail').text('');
                        $('#error_referral_code').text(request.responseJSON.message);
                    }
                });
            }

            function submitForm() {
                $('#loading_div').hide();
                $.ajax({
                    type: 'POST',
                    url: "{{ route('vaildate.user.registeration') }}",
                    data: $('#registerForm').serialize() + "&plan_id={{ $plan_detail->slug }}",
                    success: function(data) {
                        $('.payment_div').attr('id','accCollapseOne');
                        $('.payment_div').addClass('show');
                        $('.form_div').removeClass('show');
                        $('.form_div').removeAttr('id');
                        $('#amount_div').html(data.amount_page);
                        $('.payment_div').html(data.payment_page);
                        $('.lbl_msg').text('');
                    },
                    error: function(request, status, error) {
                        $('.lbl_msg').text('');
                        if (request.status === 422) {
                            var errors = request.responseJSON.errors;
                            $.each(errors, function(field, messages) {
                                $.each(messages, function(index, message) {
                                    $('#error_' + field).text(message);
                                });
                            });
                        } else {
                            alert('Somthing went wrong!');
                        }
                        $('#loading_div').hide();
                    }
                });
            }
        </script>
    @endpush
@endsection