@extends('owner.layouts.main')
@section('content')

                <main class="main">

                    <div class="bs-toast d-none" id="successMessage">
    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div id="" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header justify-content-end border-0 d-none">
                <!-- <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> -->
            </div>
            <div class="toast-body">
                <div class="box-wrapper">
                    <div class="img-box">
                        <img src="assets/images/green-tick.svg" draggable="false" class="img-fluid" alt="">
                    </div>
                    <div class="content-box">
                        <div class="max-235">
                            <h2 class="bs-heading typ-18 typ-500 typ-white">Successful</h2>
                            <p class="bs-para typ-12 typ-white">Subscription request sent successfully</p>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close">
                        <span class="icon icon-close"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
                    <section class="section lyt-section overflow-auto">
                        <div class="mt-18 mb-24">
                            <h2 class="bs-heading typ-27 typ-800">
                                <!-- <span class="icon icon-left-icon"></span> -->
                                Subscription Plans</h2>
                        </div>
                        <div class="">
                            <div class="bs-card typ-subscription-new">
                                <div class="card typ-subscription-new">
                                    <div class="inner-card">
                                        <div class="button-box">
                                            <h3 class="bs-heading typ-24 typ-700 text-center mb-30">Freedom</h3>
                                            <button onclick="handleSubmit('Freedom')"
                                                class="bs-button typ-border-blue typ-700 text-center d-block w-100">
                                                Submit to Homevana
                                            </button>
                                        </div>
                                        <div class="subscription-list-wrapper">
                                            <ul class="subscription-list">
                                                <li class="subscription-item tick mb-10">
                                                    Listing on Homevana website and
                                                    social media for rent
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Listing on partnered websites for rent
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                In-person tenant visit
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Virtual tenant visit
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Rental pricing guide
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                Tenant background check add
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                On-demand maintenance requests
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                List for sale on homevana website and 
                                                social media for sale
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                Professional photoshoot for rent and sale
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                Quarterly video reports of property after property visits
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Rent payment portal for tenant
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Video reports on tenant move-in and move-out
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                Manage visits when property is listed for sale
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="subscription-list-wrapper typ-white">
                                            <h3 class="bs-heading typ-14 typ-500 typ-complete mb-10">
                                                FEATURED ADD-ONS
                                            </h3>
                                            <ul class="subscription-list">
                                                <li class="subscription-item tick mb-10">
                                                Professional photoshoot
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Tenant background check
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="card typ-subscription-new active">
                                    <div class="inner-card">
                                        <div class="button-box">
                                            <h3 class="bs-heading typ-24 typ-700 text-center mb-30">Luxury</h3>
                                            <button onclick="handleSubmit('Luxury')"
                                                class="bs-button typ-border-blue typ-700 text-center d-block w-100">
                                                Submit to Homevana
                                            </button>
                                        </div>
                                        <div class="subscription-list-wrapper">
                                            <ul class="subscription-list">
                                                <li class="subscription-item tick mb-10">
                                                    Listing on Homevana website and
                                                    social media for rent
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Listing on partnered websites for rent
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                In-person tenant visit
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Virtual tenant visit
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Rental pricing guide
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                Tenant background check add
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                On-demand maintenance requests
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                List for sale on homevana website and 
                                                social media for sale
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                Professional photoshoot for rent and sale
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                Quarterly video reports of property after property visits
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Rent payment portal for tenant
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Video reports on tenant move-in and move-out
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                Manage visits when property is listed for sale
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="subscription-list-wrapper typ-white">
                                            <h3 class="bs-heading typ-14 typ-500 typ-complete mb-10">
                                                FEATURED ADD-ONS
                                            </h3>
                                            <ul class="subscription-list">
                                                <li class="subscription-item tick mb-10">
                                                    Listing on Homevana website and
                                                    social media for rent
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                    Listing on Homevana website and
                                                    social media for rent
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="card typ-subscription-new">
                                    <div class="inner-card">
                                        <div class="button-box">
                                            <h3 class="bs-heading typ-24 typ-700 text-center mb-30">Premium luxury</h3>
                                            <button onclick="handleSubmit('Premium luxury')"
                                                class="bs-button typ-border-blue typ-700 text-center d-block w-100">
                                                Submit to Homevana
                                            </button>
                                        </div>
                                        <div class="subscription-list-wrapper">
                                            <ul class="subscription-list">
                                                <li class="subscription-item tick mb-10">
                                                    Listing on Homevana website and
                                                    social media for rent
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Listing on partnered websites for rent
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                In-person tenant visit
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Virtual tenant visit
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Rental pricing guide
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                Tenant background check add
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                On-demand maintenance requests
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                List for sale on homevana website and 
                                                social media for sale
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                Professional photoshoot for rent and sale
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                Quarterly video reports of property after property visits
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Rent payment portal for tenant
                                                </li>
                                                <li class="subscription-item tick mb-10">
                                                Video reports on tenant move-in and move-out
                                                </li>
                                                <li class="subscription-item cross mb-10">
                                                Manage visits when property is listed for sale
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </main>

                
<script>
    const token='{{csrf_token()}}';
    function handleSubmit(plan){

        fetch("{{route('owner.requesEndToEndSubscription')}}",{
              method:"POST",
              headers:{
                'Content-Type':'application/json',
                'X-CSRF-Token':token
              },
              body:JSON.stringify({
                'plan':plan
              })  
        }).then(response=>response.json())
        .then(data=>{
            console.log('respo',data);
            if(data.status==200){
                var popup=document.getElementById('successMessage');
                popup.className='bs-toast';

                setTimeout(function() {
                   popup.className = 'bs-toast d-none'; // Replace 'newClassName' with the class you want to apply after 3 seconds
               }, 2000);
            }
        })
        .catch((error)=>{
            console.log("error",error);
        })

    }


</script>
     @endsection