@extends('layouts.master')

@section('title')
Upgrade Plan
@endsection

@section('content')

<script src="https://sandbox.web.squarecdn.com/v1/square.js"></script>

<div class="row mt-5">
    <div class="col-lg-3"></div>
    <div class="col-lg-6">
        <div class="panel price panel-color border border-primary ">
            <div class="pricing-divider text-center">
                <h2 class="text-primary fw-bold">{{$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> Vehicles</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> Number of parcels</li>
            </ul>

            <div class="px-5">