@extends('account::layouts.account')

@section('title','Downgrade subscription')

@section('content')
    <x-subscription-layout>
        <x-form.ui.post action="{{ route('subscription.downgrade.submit') }}">

            <input type="hidden" name="plan_id" value="{{ $plan->id }}">
            <input type="hidden" name="price_id" value="{{ $plan->id }}">

            @slot('actions')
                @include('subscription::inc.button-back')
            @endslot

            <x-subscription-card title="Confirmation">
                <x-subscription-notify icon="png/warning.png">
                    @slot('title',"Downgrade to the {$plan->name}")
                    <br>
                    <p>Would you like to downgrade to the <b>{{$plan->name}}</b> plan for
                        <b>&euro;{{ $price->amount }}</b> per month and enjoy all the new features and benefits?</p>
                    <br>
                    <hr>
                    <small class="text-black-50"> You'll receive a credit for the unused part of your old plan, brand be
                        billed for the new plan based on the remaining time in the billing cycle.
                    </small>

                      @subscribed_canceled
                    <hr>
                    <small class="text-dark text-left"><i class="fa fa-asterisk text-danger"></i> Please be advised that your subscription is scheduled to be canceled. The
                        following action will reactivate and downgrade your subscription.</small>
                    @end_subscribed_canceled
                </x-subscription-notify>

                @slot('footer')
                    <a class="btn btn-outline-primary btn-sm " href="{{ route('subscription.index') }}">
                        <i class="fa fa-arrow-left"></i> Cancel
                    </a>

                    <button class="btn btn-primary btn-sm " data-toggle="form-submit-confirm" type="submit">
                        <i class="fa fa-arrow-right"></i> Continue
                    </button>
                @endslot

            </x-subscription-card>
        </x-form.ui.post>
    </x-subscription-layout>
@endsection