@extends('layouts.master')

@section('title')
Subscription plan
@endsection

@section('content')



<div class="main-container container-fluid">

    <!-- PAGE-HEADER Breadcrumbs-->
    <div class="page-header"> 
        <div>
             <h1 class="page-title">Subscription plan</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{url('/dashboard')}}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Plan list</li>
            </ol>
        </div>
        @can('user_subscription_add')
            <a role="button" class="btn btn-buzono" href="{{url('/plan/add')}}"> <span
                    class="fe fe-plus fs-14"></span> Add plan</a>
        @endcan
    </div>
    <!-- PAGE-HEADER END -->
    
    <!-- ROW-1 OPEN -->


    <!-- ROW-2 OPEN -->
    <div class="row">
        @foreach($plans as $plan)
        @if($plan->status == 1)
        <div class="col-lg-3">
            <div class="panel price panel-color border border-primary ">
                @can('admin_section') 
                <div class="btn-group hidden-phone" style="float:right !important;">
                    <a data-bs-toggle="dropdown" href="javascript:void(0)" class="text-primary" aria-expanded="false">
                        <i class="zmdi zmdi-more"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="/plan/edit/{{$plan->id}}" class="btnEdit"><i class="fa fa-pencil me-2"></i> Edit</a></li>
                        <!-- <li><a href="javascript:void(0)"><i class="fa fa-ban me-2"></i> Spam</a></li> -->
                        <li class="divider"></li>
                        <li><a href="javascript:;" id="{{$plan->id}}" class="btnDelete"><i class="fa fa-trash-o me-2"></i> Delete</a></li>
                    </ul>
                </div>
                @endcan
                <div class="pricing-divider text-center">
                    <h2 class="text-primary fw-bold text-truncate">{{$plan->name}}</h2>

                    <span><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"
                            enable-background="new 0 0 24 24" viewBox="0 0 24 24">
                            <path fill="#6C5FFC"
                                d="M7.0009766,13c-0.8284302,0-1.5,0.6715698-1.5,1.5s0.6715698,1.5,1.5,1.5c0.828064-0.0009155,1.4991455-0.671936,1.5-1.5C8.5009766,13.6715698,7.8294067,13,7.0009766,13z M7.0009766,15c-0.276123,0-0.5-0.223877-0.5-0.5s0.223877-0.5,0.5-0.5c0.2759399,0.0005493,0.4994507,0.2240601,0.5,0.5C7.5009766,14.776123,7.2771606,15,7.0009766,15z M13.5,14h-3c-0.276123,0-0.5,0.223877-0.5,0.5s0.223877,0.5,0.5,0.5h3c0.276123,0,0.5-0.223877,0.5-0.5S13.776123,14,13.5,14z M20.1950684,10.25177l-1.5505371-4.8230591C18.1824341,3.9794922,16.8345947,2.9967651,15.3135376,3H8.6865234C7.1654053,2.9967041,5.8175659,3.9794312,5.3554688,5.4286499L3.8049316,10.25177C2.7443848,10.7144775,2.0013428,11.7692261,2,13v3c0.0016479,1.4848633,1.083252,2.7087402,2.5,2.9490967V20.5c0,0.0001831,0,0.0003662,0,0.0005493C4.5001831,20.7765503,4.723999,21.0001831,5,21c0.0001831,0,0.0003662,0,0.0006104,0C5.2765503,20.9998169,5.5001831,20.776001,5.5,20.5V19h13v1.5c0,0.0001831,0,0.0003662,0,0.0005493C18.5001831,20.7765503,18.723999,21.0001831,19,21c0.0001831,0,0.0003662,0,0.0006104,0c0.2759399-0.0001831,0.4995728-0.223999,0.4993896-0.5v-1.5509033C20.916748,18.7087402,21.9983521,17.4848633,22,16v-3C21.9986572,11.7692261,21.2556152,10.7144775,20.1950684,10.25177z M6.3066406,5.7353516C6.6368408,4.6999512,7.5997314,3.9978638,8.6864624,4h6.6270142c1.086792-0.0021973,2.0496826,0.6999512,2.3798828,1.7353516L19.0644531,10H19H5H4.9355469L6.3066406,5.7353516z M21,16c-0.0014038,1.1040039-0.8959961,1.9985962-2,2H5c-1.1040039-0.0014038-1.9985962-0.8959961-2-2v-3c0.0014038-1.1040039,0.8959961-1.9985962,2-2h14c1.1040039,0.0014038,1.9985962,0.8959961,2,2V16z M17.0009766,13c-0.8284302,0-1.5,0.6715698-1.5,1.5s0.6715698,1.5,1.5,1.5c0.828064-0.0009155,1.4991455-0.671936,1.5-1.5C18.5009766,13.6715698,17.8294067,13,17.0009766,13z M17.0009766,15c-0.276123,0-0.5-0.223877-0.5-0.5s0.223877-0.5,0.5-0.5c0.2759399,0.0005493,0.4994507,0.2240601,0.5,0.5C17.5009766,14.776123,17.2771606,15,17.0009766,15z" />
                        </svg></span>
                    <h4 class="display-5 text-primary fw-bold my-3"><span class="h3">$</span> {{$plan->price}} <span
                            class="h5">/mo</span></h4>
                </div>
                <ul class="list-group list-group-flush pb-5">
                    <li class="list-group-item border-0"><i
                            class="mdi mdi-checkbox-marked-circle-outline text-primary p-2 fs-16"></i><strong> {{$plan->total_vehicles}}
                            </strong> vehicle</li>
                    <li class="list-group-item border-0"><i
                            class="mdi mdi-checkbox-marked-circle-outline text-primary p-2 fs-16"></i><strong>{{$plan->count}}
                        </strong> free violations</li>
                    <li class="list-group-item border-0"><i
                            class="mdi mdi-checkbox-marked-circle-outline text-primary p-2 fs-16"></i><strong><small>$</small> {{$plan->ex_charges}}
                        </strong> addtional violation fee</li>
                    <li class="list-group-item border-0"><i
                            class="mdi mdi-checkbox-marked-circle-outline text-primary p-2 fs-16"></i><strong><small>$</small>{{$plan->es_charges}} 
                        </strong> violation payment fee</li>
                </ul>
                <div class="panel-footer text-center px-5 border-0 pb-5 br-7">
                    @if(Auth::check())