@extends('front.layout.app')
@section('content')



<style>
.boxi .fisrt h3{

font-size: 46px;

font-weight: 600;

color: #fff;

line-height: 1;

font-family: 'Poppins', sans-serif;
}

.boxi .fisrt p{font-size: 19px;font-weight: 400;color: #fff;line-height: 34px;font-family: 'Poppins', sans-serif;}
ul.fisrt {
  background: #3badb8;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 35px 40px 27px;
}
.include ul li {
  display: flex;
  align-items: center;
  color: #fff;
  border-bottom: 1px solid #ffffff5c;
  margin: 12px 0;
  padding-bottom: 10px;
}
.include {
  background: #37474F;
  padding: 40px 40px 30px 40px;
  color: #fff;
}
.include li h5{
  font-size: 16px;
  font-weight: 400;
  margin: 11px 22px;
  font-family: 'Poppins', sans-serif;
}
.hoz {
  margin-top: 34px;
}
.hoz p {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  line-height: 29px;
  font-family: 'Poppins', sans-serif;
}
.hoz h2 {
  font-size: 65px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  font-family: 'Poppins', sans-serif;
}
.include .btn-div {
  margin-top: 50px;
}
section.member {
  padding: 100px 0;
}

.bckclr {
    background-color: #3BADB8;
}
.banner_btn {
    font-size: 20px;
    font-weight: 400;
    color: #fff !important;
    border: 3px solid #3badb8;
    padding: 10px 52px;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
}
.bckclr:hover {
    background-color: #000;
    color: #fff;
}
.include {
    background: #37474F;
    padding: 40px 40px 30px 40px;
    color: #fff;
    height: 656px;
}
.yesok {
    background: #30b915;
}

</style>

<main>
    <section class="indi-banner">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="indi-ban-head">Our Subscriptions</h1>
                </div>
                <div class="col-12">
                    <p class="indi-ban-para">Overall measure of economic performance.</p>
                </div>
            </div>
        </div>
    </section>

 
 <section class="member services2">
        <div class="container">
            <div class="row gy-4 justify-content-center">
                
                <div class="col-12 col-lg-4 panel">
                    <div class="boxi aos-init aos-animate h-100" data-aos="fade-right" data-aos-duration="1500">
                        <ul class="fisrt">
                            <li>
                                <h3>Standard</h3>
                                <p>Classic Plan</p>
                            </li>
                            <li>
                                <h3>1</h3>
                            </li>
                        </ul>
                        <div class="include">
                            <ul>
                                <li><i class="fa-solid fa-check"></i>
                                    <h5>All Major Indicators and More Available Upon Request!
</h5>
                                </li>
                                <li><i class="fa-solid fa-check"></i>
                                    <h5>Sector & Sub-Indicator Data</h5>
                                </li>
                                <li><i class="fa-solid fa-check"></i>
                                    <h5>Data Analysis Tools</h5>
                                </li>
                                <li><i class="fa-solid fa-check"></i>
                                    <h5>Unlimited composite charts and other chart</h5>
                                </li>
                                <li><i class="fa-solid fa-check"></i>
                                    <h5>Automated Data Updates</h5>
                                </li>
                            </ul>
                            <div class="text-center hoz">
                                <h2>$2.99</h2>
                                <p>Per Month</p>
                            </div>
                            <div class="btn-div text-center">
                                @if(Auth::check())
                                    @if (Auth::user()->membership_id == "1")
                                    <form action="javascript:;" method="post">
                                        @csrf
                                        <input type="hidden" name="plan" value="0">
                                        <input type="hidden" name="plan_price" value="2.99">
                                        <button type="submit" class="btn banner_btn bckclr yesok">Subscribed</button>
                                    </form>
                                    @else
                                    <form action="{{ route('subscribe') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="plan" value="0">
                                        <input type="hidden" name="plan_price" value="2.99">
                                        <button type="submit" class="btn banner_btn bckclr">Subscribe now</button>
                                    </form>
                                    @endif
                                @else
                                    <form action="{{ route('subscribe') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="plan" value="0">
                                        <input type="hidden" name="plan_price" value="2.99">
                                        <button type="submit" class="btn banner_btn bckclr">Subscribe now</button>
                                    </form>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
              
                <div class="col-12 col-lg-4 panel">
                    <div class="boxi aos-init aos-animate h-100" data-aos="fade-left" data-aos-duration="1500">
                        <ul class="fisrt">
                            <li>
                                <h3>Premium</h3>
                                <p>Premium Plan</p>
                            </li>
                            <li>
                                <h3>2</h3>
                            </li>
                        </ul>
                        <div class="include">
                            <ul>
                               <li><i class="fa-solid fa-check"></i>
                                    <h5>All Major Indicators and More Available Upon Request!
</h5>
                                </li>
                                <li><i class="fa-solid fa-check"></i>
                                    <h5>Sector & Sub-Indicator Data</h5>
                                </li>
                                <li><i class="fa-solid fa-check"></i>
                                    <h5>Data Analysis Tools</h5>
                                </li>
                                <li><i class="fa-solid fa-check"></i>
                                    <h5>Unlimited composite charts and other chart + CSV Downloads</h5>
                                </li>
                                <li><i class="fa-solid fa-check"></i>
                                    <h5>Automated Data Updates</h5>
                                </li>
                            </ul>
                            <div class="text-center hoz">
                                <h2>$7.99 </h2>
                                <p>Per Month.</p>
                            </div>
                            <div class="btn-div text-center">
                                @if(Auth::check())
                                    @if (Auth::user()->membership_id == "2")
                                    <form action="javascript:;" method="post">
                                        @csrf
                                        <input type="hidden" name="plan" value="1">
                                        <input type="hidden" name="plan_price" value="7.99">
                                        <button type="submit" class="btn banner_btn bckclr yesok">Subscribed</button>
                                    </form>
                                    @else
                                    <form action="{{ route('subscribe') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="plan" value="1">
                                        <input type="hidden" name="plan_price" value="7.99">
                                        <button type="submit" class="btn banner_btn bckclr">Subscribe now</button>
                                    </form>
                                    @endif
                                @else
                                    <form action="{{ route('subscribe') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="plan" value="1">
                                        <input type="hidden" name="plan_price" value="7.99">
                                        <button type="submit" class="btn banner_btn bckclr">Subscribe now</button>
                                    </form>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
 
 
</main>


@section('script')



<script type="text/javascript">
    // Assuming you use Auth to check user status and a User model that includes a membership_id attribute
    window.AuthUser = @json(Auth::check());
    window.UserMembershipId = @json(Auth::check() ? Auth::user()->membership_id : null);
    
</script>

@endsection
@endsection