@extends('layouts.app')
@section('title')
    {{ config('app.name', 'Laravel') }} | {{ __('common.myplans') }}
@endsection
@section('heading'){{ __('common.myplans') }}@endsection
@section('heading-icon')<i class="nav-icon material-icons">home</i>@endsection
@section('content')
    <style>
        .demo{
            /*padding: 60px;*/
        }
        .pricingTable{
            font-family: 'Poppins', sans-serif;
            text-align: center;
            padding: 0 0 30px 30px;
            position: relative;
            z-index: 1;
            padding-top: 21px;
        }
        .pricingTable:after{
            content: "";
            background: #00A897;
            width: 50%;
            height: 20%;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: -1;
        }
        .pricingTable .pricing-content{
            background-color: #fff;
            padding: 15px 0 20px;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
        }
        .pricingTable .pricingTable-header{
            padding: 10px;
            margin: 0 0 5px;
        }
        .badge {
            display: inline-block;
            width: 100%;
            height: 30px;
            padding: 3px 7px;
            font-size: 20px;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            background-color: #00a695;
            border-radius: 10px;
            color: white;
        }
        .pricingTable .title{
            color: #333;
            font-size: 34px;
            font-weight: 300;
            text-transform: capitalize;
            letter-spacing: 1px;
            margin: 0;
        }
        .pricingTable .content-list{
            padding: 0;
            /*margin: 0 0 27px;*/
            list-style: none;
            display: inline-block;
        }
        .pricingTable .content-list li{
            color: #333;
            font-size: 16px;
            text-transform: capitalize;
            text-align: left;
            padding: 0 0 0 35px;
            margin: 0 0 27px;
            position: relative;
        }
        .pricingTable .content-list li:last-child{ margin-bottom: 0; }
        .pricingTable .content-list li:before{
            content: "\f00c";
            color: #338806;
            font-family: "Font Awesome 5 Free";
            font-size: 17px;
            font-weight: 900;
            position: absolute;
            top: 0;
            left: 0;
        }
        .pricingTable .content-list li.disable:before{
            content: "\f00d";
            color: #FF3631;
        }
        .pricingTable .price-value{ margin: 0 0 20px; }
        .pricingTable .price-value .amount{
            font-size: 30px;
            font-weight: 300;
            line-height: 40px;
            margin: 0 0 5px;
            display: block;
        }
        .pricingTable .price-value .duration{
            font-size: 16px;
            display: block;
        }
        .pricingTable .pricingTable-signup a{
            color: #fff;
            background-color: #00A897;
            font-size: 18px;
            font-weight: 500;
            text-transform: uppercase;
            padding: 5px 25px;
            display: inline-block;
            overflow: hidden;
            position: relative;
            z-index: 1;
            transition: all 0.3s;
        }
        .pricingTable .pricingTable-signup a:hover{ text-shadow: 0 0 8px rgba(0, 0, 0, 0.8); }
        .pricingTable .pricingTable-signup a:before,
        .pricingTable .pricingTable-signup a:after{
            content: '';
            background-color: rgba(0,0,0,0.15);
            height: 100%;
            width: 50%;
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -2;
            transition: all 0.3s ease;
        }
        .pricingTable .pricingTable-signup a:after{
            left: auto;
            right: 0;
        }
        .pricingTable .pricingTable-signup a:hover:before{
            opacity: 1;
            top: 50%;
        }
        .pricingTable .pricingTable-signup a:hover:after{
            opacity: 1;
            top: -50%;
        }
        .pricingTable.blue:after,
        .pricingTable.blue .pricingTable-signup a{
            background-color: #0089BD;
        }
        .pricingTable.magenta:after,
        .pricingTable.magenta .pricingTable-signup a{
            background-color: #C70134;
        }
        @media only screen and (max-width: 990px){
            .pricingTable{ margin-bottom: 50px; }
        }


        .close {
            float: right;
            font-size: 21px;
            font-weight: bold;
            line-height: 1;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .2;
        }

        .close:hover,.close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
            opacity: .5;
        }

        button.close {
            padding: 0;
            cursor: pointer;
            background: transparent;
            border: 0;
            -webkit-appearance: none;
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .alert h4 {
            margin-top: 0;
            color: inherit;
        }

        .alert .alert-link {
            font-weight: bold;
        }

        .alert>p,.alert>ul {
            margin-bottom: 0;
        }

        .alert>p+p {
            margin-top: 5px;
        }

        .alert-dismissable {
            padding-right: 35px;
        }

        .alert-dismissable .close {
            position: relative;
            top: -2px;
            right: -21px;
            color: inherit;
        }

        .alert-info {
            background-color: #d9edf7;
            border-color: #bce8f1;
            color: #31708f;
        }

        .alert-info hr {
            border-top-color: #a6e1ec;
        }

        .alert-info .alert-link {
            color: #245269;
        }
        .alert-white {
            background-image: linear-gradient(to bottom,#FFFFFF,#F9F9F9);
            border-top-color: #d8d8d8;
            border-bottom-color: #bdbdbd;
            border-left-color: #cacaca;
            border-right-color: #cacaca;
            color: #404040;
            padding-left: 61px;
            position: relative;
        }

        .alert-white .icon {
            text-align: center;
            width: 45px;
            height: 100%;
            position: absolute;
            top: -1px;
            left: -1px;
            border: 1px solid #bdbdbd;
        }

        .alert-white .icon:after {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            display: block;
            content: '';
            width: 10px;
            height: 10px;
            border: 1px solid #bdbdbd;
            position: absolute;
            border-left: 0;
            border-bottom: 0;
            top: 50%;
            right: -6px;
            margin-top: -5px;
            background: #fff;
        }

        .alert-white.rounded {
            border-radius: 3px;
            -webkit-border-radius: 3px;
        }

        .alert-white.rounded .icon {
            border-radius: 3px 0 0 3px;
            -webkit-border-radius: 3px 0 0 3px;
        }

        .alert-white .icon i {
            font-size: 20px;
            color: #FFF;
            left: 12px;
            margin-top: -10px;
            position: absolute;
            top: 50%;
        }

        .alert-white.alert-info .icon,.alert-white.alert-info .icon:after {
            border-color: #3a8ace;
            background: #4d90fd;
        }
    </style>
    <body>
    <div class="demo">
         @if(!$expire)
        <div class='content'>
            <div class="alert alert-info alert-white rounded" >
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <div class="icon"><i class="fa fa-info-circle"></i></div>
                <strong>Info!</strong> Your plan has been expired purchase new plan now !.
            </div>
        </div>
        @endif
        <div class="container">
            <div class="row">
                <span class="badge badge-secondary">Plans</span>
                @if(!empty($mypackage))
                <div class="col-md-4 col-sm-6">
                    <div class="pricingTable">
                        <div class="pricing-content">
                            <div class="pricingTable-header">
                                <h4 class="title">{{$mypackage->package_title}}</h4>
                            </div>
                            <ul class="content-list">
                                <li>Feature {!! $mypackage->package_feature ??''!!}</li>
                                <li>Plan Duration {{$mypackage->package_duration??''}} Days</li>
                                <li>Total Products {{$mypackage->total_products??''}}</li>
                                <li>Total Pdf {{$mypackage->total_pdf??''}}</li>
                                <li>Total Video {{$mypackage->total_video??''}}</li>

                            </ul>
                            <div class="price-value">
                                <span class="amount">
                                    <i class="fas fa-rupee-sign"></i>
                                    {{$mypackage->package_price??'Free'}}</span>
                             </div>
                            <div class="pricingTable-signup">
                                <a href="#">Currunt Plan</a>
                            </div>
                        </div>
                    </div>
                </div>
               @endif
            @foreach($plans as $plan)
                <div class="col-md-4 col-sm-6">
                    <div class="pricingTable {{$plan->color??''}}">
                        <div class="pricing-content">
                            <div class="pricingTable-header">
                                <h4 class="title">{{$plan->package_title??''}}</h4>
                            </div>
                            <ul class="content-list">
                                <li>Feature {!! $plan->package_feature ??''!!}</li>
                                <li>Plan Duration {{$plan->package_duration??''}} Days</li>
                                <li>Total Products {{$plan->total_products??''}}</li>
                                <li>Total Pdf {{$mypackage->total_pdf??''}}</li>
                                <li>Total Video {{$mypackage->total_video??''}}</li>
                            </ul>
                            <div class="price-value">
                                <span class="amount">
                                   <i class="fas fa-rupee-sign"></i>
                                    {{$plan->package_price??'Free'}}</span>
{{--                                <span class="duration">per month</span>--}}
                            </div>
                            {{-- <div class="pricingTable-signup">
                                <a  @if($plan->package_price>0)class="plan" @else id="free-plan" @endif
                                   data-amount="{{$plan->package_price??0}}"
                                   data-package_id="{{$plan->id}}
                                   ">Purchase Plan</a>
                            </div> --}}
                            <div class="pricingTable-signup">
                                <a  class="btn btn-info" href="{{ Route('vendor.payment.create',$plan->id) }}">Purchase Plan</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    </body>
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    @push('scripts')
    <script>
    $(".plan").click(function(){
        var total_amount =$(this).attr('data-amount')*100;
        var plan_id=$(this).attr('data-package_id');
        options = {
    "key": "{{env('RAZORPAY_ID')}}",
    "amount": total_amount,
    "currency": "INR",
    "name": "EasyBuy",
    "description": "Payment Done",
    "image": "{{asset('easybuy.jpg')}}",
    "handler": function (response){
    $.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });
    var data =[];
    data.push(
        {name:'payment_id', value:response.razorpay_payment_id},
        {name:'package_id', value:plan_id},
        {name:'amount', value:total_amount}
    );
    $.ajax({
    type:'POST',
    url:'subscribe',
    data: data,
    success:function(data){
        alertMessage('success', 'your plan  has been activate');
    },
    error:function(er){
    }
    });
    },
    "prefill": {
    "name": "Nily",
    "email": "nily@gmail.com",
    "contact": {{auth()->user()->phone}}
    },
    "notes": {
    "address": "Razorpay Corporate Office"
    },
    "theme": {
    "color": "#2DC7BF"
    }
    };
        var rzp1 = new Razorpay(options);
        rzp1.open();
     });

    $("#free-plan").click(function(){
        var fd = new FormData();
        fd.append( 'package_id', $(this).attr('data-package_id'));
        fd.append( 'payment_id','free');
        fd.append( 'amount', $(this).attr('data-amount'));

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type:'POST',
                    url:'subscribe',
                    data: fd,
                    processData: false,
                    contentType: false,
                    success:function(data){
                        alertMessage('success', 'your plan  has been activate');
                    },
                    error:function(er){
                    }
                });
    });
    </script>
    </script>
    @endpush
@endsection