@php use \Illuminate\Support\Str; @endphp
@extends('reseller.layouts.master')
@section('page_title') USSD Pricing @endsection @push('styles')
    <link rel="stylesheet" href="{{ elixir('css/datatables.css') }}">
    <style>
        .panel {
            text-align: center;
        }
        .sub-selected
        {
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.9), 0 1px 5px rgba(130, 130, 130, 0.35);
        }

        .panel:hover {
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35);
        }

        .panel-body {
            padding: 0px;
            text-align: center;
        }

        .the-price {
            background-color: rgba(220, 220, 220, .17);
            box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff;
            padding: 20px;
            margin: 0;
        }

        .the-price h1 {
            line-height: 1em;
            padding: 0;
            margin: 0;
        }

        .subscript {
            font-size: 25px;
        }
        /* CSS-only ribbon styles    */

        .cnrflash {
            /*Position correctly within container*/
            position: absolute;
            top: -9px;
            right: 4px;
            z-index: 1;
            /*Set overflow to hidden, to mask inner square*/
            overflow: hidden;
            /*Set size and add subtle rounding  		to soften edges*/
            width: 100px;
            height: 100px;
            border-radius: 3px 5px 3px 0;
        }

        .cnrflash-inner {
            /*Set position, make larger then 			container and rotate 45 degrees*/
            position: absolute;
            bottom: 0;
            right: 0;
            width: 145px;
            height: 145px;
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -o-transform: rotate(45deg);
            /* Opera */
            -moz-transform: rotate(45deg);
            /* Firefox */
            -webkit-transform: rotate(45deg);
            /* Safari and Chrome */
            -webkit-transform-origin: 100% 100%;
            /*Purely decorative effects to add texture and stuff*/
            /* Safari and Chrome */
            -ms-transform-origin: 100% 100%;
            /* IE 9 */
            -o-transform-origin: 100% 100%;
            /* Opera */
            -moz-transform-origin: 100% 100%;
            /* Firefox */
            background-image: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, .1) 50%), linear-gradient(0deg, transparent 0%, rgba(1, 1, 1, .2) 50%);
            background-size: 4px, auto, auto, auto;
            background-color: #aa0101;
            box-shadow: 0 3px 3px 0 rgba(1, 1, 1, .5), 0 1px 0 0 rgba(1, 1, 1, .5), inset 0 -1px 8px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 0 rgba(255, 255, 255, .2);
        }

        .cnrflash-inner:before,
        .cnrflash-inner:after {
            /*Use the border triangle trick to make  				it look like the ribbon wraps round it's 				container*/
            content: " ";
            display: block;
            position: absolute;
            bottom: -16px;
            width: 0;
            height: 0;
            border: 8px solid #800000;
        }

        .cnrflash-inner:before {
            left: 1px;
            border-bottom-color: transparent;
            border-right-color: transparent;
        }

        .cnrflash-inner:after {
            right: 0;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }

        .cnrflash-label {
            /*Make the label look nice*/
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            padding-bottom: 5px;
            color: #fff;
            text-shadow: 0 1px 1px rgba(1, 1, 1, .8);
            font-size: 0.95em;
            font-weight: bold;
            text-align: center;
        }
    </style>
@endpush

@section('page_content')
    <div class="page-content container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="panel" id="exampleWizardForm">
                    <div class="panel-heading">
                        <h3 class="panel-title text-uppercase"> <em>Choose your monthly package</em></h3>

                        @if(session('success'))
                            <div class="alert alert-success">
                                <ul>
                                    <li><b>{{ session('success') }}</b></li>
                                </ul>
                            </div>
                        @endif

                        @if(count($errors)>0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach($errors->all() as $error)
                                        <li>
                                            {{$error}}
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                    <div class="panel-body">
                        <div class="container">
                            <div class="row">
                                @foreach($packages as $package)
                                    <div class="col-xs-12 col-md-3">
                                        <div class="panel {{ (isset($subscription)  && $subscription->media_price_id == $package->id && $subscriptionIsValid) ? 'sub-selected' : null}}
                                        {{Str::contains($package->name,'Premi') ?
                                        'panel-warning' : (Str::contains($package->name,'Stand' ) ? 'panel-success' : 'panel-info')}}">
                                            <div class="panel-heading">
                                                <h3 class="panel-title">{{$package->name}}</h3>
                                            </div>
                                            <div class="panel-body">
                                                <div class="the-price">
                                                    <h2>₵{{number_format($package->cost,2)}}<span class="subscript">/mo</span></h2>
                                                    <small></small>
                                                </div>
                                                <table class="table">
                                                    <tr class="active">
                                                    </tr>
                                                    <tr >
                                                        <td>
                                                            {{number_format($package->sessions)}}  Posts available
                                                        </td>
                                                    </tr>
                                                    <tr class="active">
                                                        <td>
                                                            Basic Reports
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="panel-footer">
                                                <br>
                                                @php  $status = (isset($subscription)  && $subscription->media_price_id == $package->id && $subscriptionIsValid) @endphp
                                                <a href="{{route('reseller.ussd.subscription.request.post',['service'=>request()->route('user'),'package'=>$package->id])}}" class="btn btn-success {{$status ? 'disabled' : ''}}" role="button">
                                                    {!!   $status ? '<i class="fa fa-check"></i> Selected' : 'Select' !!}</a>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        </div>
        @endsection
        @push('scripts')
            <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    @endpush