@extends('layouts.home')
@section('styles')
    <style>
        .price-wrapper>:nth-last-child(1) {
            border-style: none !important;
        }
    </style>
@endsection
@section('body')
    <section id="about plan-page">

        <div class="container">
            @if ($plans[0]->billing_cycle == 'recurring')
                <h1 class="section-header">Choose Your Plan</h1>
                <div class="price_wrapper_container">
                    <div class="coupon_container">
                      <p id="input_trigger">Do you have a Coupon?</p>
                      <div class="coupon_input" id="coupon_input">
                        <input type="text" />
                      <button>Use Coupon</button>
                      </div>
                    </div>
                <div class="price-wrapper">
                    @for ($i = 0; $i < count($plans); $i++)
                        <x-recurring-plan :plan="$plans[$i]" :currency="$cr" :user="$r" :address="$ad" :addons="$selected_features"
                            :plans="$plans" />
                    @endfor
                    @csrf
                </div>

                <script src={{ mix('js/recurring.js') }}></script>
            @endif
            @if ($plans[0]->billing_cycle == 'one-time')
                @for ($i = 0; $i < count($plans); $i++)
                    <x-onetime-plan :plan="$plans[$i]" :currency="$cr" :user="$r" :address="$ad"
                        :plans="$plans" />
                @endfor
            @endif
        </div>
    </section>

@endsection