@extends('auth.layout')
@section('title')
Register
@endsection


@section('login_content')
    <div class="form-wrap form-wrap-reg">
        <div class="row justify-content-between">
            <div class="col-xxl-4 col-xl-4 col-lg-4 order-2-mob">
                <img src="{{ asset('assets/new-figma-data/images/login.png') }}" alt="login">
            </div>
            <div class="col-xxl-6 col-xl-7 col-lg-7 my-auto">
                {{-- @if(in_array($packagename, $array)) --}}
                    <form id="register_form">
                        <h2>Register Your Account</h2>
                        <input type="hidden" name="role" value="client">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label for="firstName" class="form-label">FIRST NAME</label>
                                    <input type="text" class="form-control" name="first_name" id="first_name" required  style="text-transform:none;">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <label for="lastName" class="form-label">LAST NAME</label>
                                <input type="text" class="form-control" name="last_name" id="last_name" required style="text-transform:none;">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label for="email" class="form-label">EMAIL</label>
                                    <input type="email" class="form-control" name="email" id="email" required style="text-transform:none;">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <label for="phone" class="form-label">PHONE</label>
                                <input type="text" class="form-control" name="phone" id="phone" required>
                            </div>
                        </div>
                        <div class="row last-form-row">
                            <div class="col-xxl-6 col-xl-7 col-lg-7 col-7 my-auto">
                                <div class="mb-3 already-acc">
                                    <p class="mb-0">Already have an account?
                                        <a href="{{ route('login')}}" style="text-decoration:none;"><b>LOGIN</b></a>
                                    </p>
                                </div>
                            </div>
                            <div class="col-xxl-6 col-xl-5 col-lg-5 col-5 text-end">
                                <button type="submit" id="register_button" class="btn btn-prim"><i class="fa fa-spinner fa-spin fa-pulse"
                                    style="display:none;"></i> Register</button>
                            </div>
                        </div>
                    </form>
                {{-- @else
                    <h2>Select Package</h2>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="mb-3 already-acc">
                                <p>you have not selected any package. Please select a package to continue</p>
                            </div>
                        </div>
                    </div>
                    <div class="row last-form-row">
                        <div class="col-xxl-6 col-xl-7 col-lg-7 col-7 my-auto">
                            <div class="mb-3 already-acc">
                                <p class="mb-0">Already have an account?
                                    <a href="{{ route('login')}}" style="text-decoration:none;"><b>LOGIN</b></a>
                                </p>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xl-5 col-lg-5 col-5 text-end">
                            <a href="https://campaignrun.com/pricing" type="submit" id="select_package_button" class="btn btn-prim"><i class="fa fa-spinner fa-spin fa-pulse"
                                style="display:none;"></i> Select Package</a>
                        </div>
                    </div>
                @endif --}}
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content" style="border-radius:10px;">

                <div class="modal-body">

                    {{-- <a href="{{ route('login')}}" class="close pos-absolute t-15 r-20 tx-26" d>

                        <span aria-hidden="true">&times;</span>

                    </a> --}}

                    <h4 class="text-center" style="font-weight: 600;margin-top: 30px;margin-bottom: 30px;">All Set!</h4>

                    <div class="container" style="width: 90%">

                        <div class="row" style="border-radius: 10px !important;background-color:#F1F8F1;">
                            <div class="col-12" style="padding: 15px 50px;">
                                <span style="color:#3B983D;font-size:14px">Your activation link has been sent to the provided email. Go to your inbox (also check spam folder) and activate your campaign</span>
                            </div>
                        </div>

                    </div>

                    <div class="container" style="width: 93%">
                        <div class="row last-form-row" style="margin-top:35px;margin-bottom:10px;">
                            <div class="col-xxl-12 col-xl-12 col-lg-12 col-6 my-auto text-center">
                                <div class="mb-3 already-acc">
                                    <p class="mb-0">Don't receive a mail?
                                        <a href="{{ route('register')}}" style="text-decoration:none;" id="resend_link"><i class="fa fa-spinner fa-pulse fa-spin fa-spins"
                                            style="display:none;"></i><b> Resend Link</b></a>
                                    </p>
                                </div>
                            </div>
                            {{-- <div class="col-xxl-6 col-xl-5 col-lg-5 col-5 text-end">
                                <a href="{{ route('login')}}" class="btn btn-prim">Continue</a>
                            </div> --}}
                        </div>
                    </div>

                    {{-- <p>
                        Didn’t receive an email? No worries.
                        <br>
                        <a href="javascript:;" id="resend_link">
                            <i class="fa fa-spinner fa-pulse fa-spin fa-spins"
                                style="display:none;"></i> Resend link
                        </a>
                        <br>
                        Still nothing? Check your email spam folder

                    </p> --}}

                </div>

            </div>
        </div>
    </div>
@endsection


@section('login_script')
    <script>
        $(document).ready(function(){
            $('#exampleModal').modal({
                backdrop: 'static',
                keyboard: false
            }); 

            $('#phone').mask('(+1) 999-999-9999');

            //Register new user
            $("#register_form").on('submit', (function(e) {
                e.preventDefault();
                $.ajax({
                    url: "/api/register/client",
                    type: "post",
                    data: new FormData(this),
                    dataType: "JSON",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $("#register_button").attr('disabled', true);
                        $(".fa-spin").css('display', 'inline-block');
                    },
                    complete: function() {
                        $("#register_button").attr('disabled', false);
                        $(".fa-spin").css('display', 'none');
                    },
                    success: function(response) {
                        console.log(response)
                        if (response.status == "fail")
                        {
                            toastr.error('Failed', response.msg)
                        }
                        else if (response.status == "success")
                        {
                            toastr.success('Success', response.msg)
                            $("#register_form")[0].reset();
                            $("#exampleModal").modal('toggle');
                        }

                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }));

            //reset link
            $("#resend_link").on('click', (function(e) {

                e.preventDefault();
                $.ajax({
                    url: "/api/password/resend",
                    type: "post",
                    dataType: "JSON",
                    beforeSend: function() {
                        $("#resend_link").css('pointer-events', 'none');
                        $(".fa-spins").css('display', 'inline-block');
                    },
                    complete: function() {
                        $("#resend_link").css('pointer-events', 'auto');
                        $(".fa-spins").css('display', 'none');
                    },
                    success: function(response) {
                        console.log(response)
                        if (response["status"] == "fail") {
                            toastr.error('Failed', response["msg"])
                        } else if (response["status"] == "success") {
                            toastr.success('Success', response["msg"])

                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });

            }));
        });
    </script>
@endsection