@extends('layouts.frontlayout')
@section('content')

<section class="submit_listing_section top-space">
    <div class="container">
        <div class="row">
            <div class="col-xxl-10 col-xl-10 col-lg-10 col-md-10 col-sm-12 col-12 mx-auto">
                <div class="submit_listing_area">
                    <form action="{{ route('user.subscriptionPlan') }}" method="post" class="plan_details">
                        {{ csrf_field() }}
                        <div class="form_step5">
                            <div class="box_area">
                                <div class="row">
                                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 planSection">
                                        @if($memberships && $memberships->toArray())
                                        <div class="subscribe_plan membership_plans">
                                            <div class="head_plan">
                                                <h1>Subscription Plan</h1>
                                            </div>
                                            <div class="inner_detail">
                                                 @if(!$user->membership_id || strtotime($user->membership_expire) < strtotime(date('Y-m-d')) )
                                                <div class="plan_detail">
                                                    @foreach($memberships as $key => $m)
                                                    <div class="subs_type">
                                                        <div class="left_area">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="radio" class="custom-control-input membership-{{$m->id}}" id="{{ $m->slug }}" name="membership" value="{{ $m->slug }}" {{ $key == 0 ? 'checked' : "" }}  >
                                                                <label class="custom-control-label" for="{{ $m->slug }}">{{ $m->title }}</label>
                                                            </div>
                                                        </div>
                                                        <div class="right_area">
                                                            <p>
                                                                {{ $m->currency.' '.$m->price }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                </div>
                                                @endif
                                                <div class="subscription_benefits">
                                                        <h5>
                                                            Subscription Benefits
                                                        </h5>
                                                        <div class="benfits_list">
                                                            <ul>
                                                                <li>
                                                                    <div class="left">
                                                                        <i class="fas fa-check-circle"></i>
                                                                    </div>
                                                                    <div class="right">
                                                                        <p>
                                                                            Pedigree & health test info stored
                                                                        </p>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="left">
                                                                        <i class="fas fa-check-circle"></i>
                                                                    </div>
                                                                    <div class="right">
                                                                        <p>
                                                                        Pre advertise upcoming litters
                                                                        </p>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="left">
                                                                        <i class="fas fa-check-circle"></i>
                                                                    </div>
                                                                    <div class="right">
                                                                        <p>
                                                                        Access to extended breeder details
                                                                        </p>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                        <div class="button_area plans">
                                            <div class="left">
                                                <a href="{{ route('user.profile') }}" class="btn btn-primary back back_steps_4"><i class="fal fa-long-arrow-left pe-2"></i> Cancel</a>
                                            </div>
                                            <div class="right">
                                                <button type="submit" class="btn btn-primary next_steps_5">Proceed</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="image_2 d-lg-block d-none">
        <img src="{{ url('frontend/images/vector2.png') }}" alt="..." />
    </div>
    <div class="image_3 d-lg-block d-none">
        <img src="{{ url('frontend/images/vector3.png') }}" alt="..." />
    </div>
</section>

@endsection