@extends('front.layout')
@section('custom-style')
<style>
    .login-registration-submit-button
    {
        background: #fff!important;
        width:100%;
        color:#000;
    }

    .get-subscription-btn
    {

    }
    .login-registration-submit-button:hover, .get-subscription-btn:hover
    {
        background: #FD1600!important;
    }

    .movies-collection-image
    {
        width:100%;
        height:300px;
    }
     .active{
            color:#292826!important;
        }
        .pages-content
        {
            color:#292826!important;
            margin:0px 50px;
        }

        .breadcrump-section
        {
            padding-top:70px;
            background: #000f1e!important;
        }

        .subscription-column
        {
            background:#f4f4f4;
            padding:10px;
            border-radius: 10px;
            color:#000;
            height:300px;
        }

        #payment-btn-area
        {
            display: none;
            background: #8446E4;
        }
        /* .colour-eac035
        {
            color:#fff;
        } */

        .payment-button-image
        {
            height:70px;
            width:auto;
            border-radius: 5px;
        }
        .btn-payment
        {
            background: #000;
            border:0;
            padding:0;
            padding-right: 10px;
        }
</style>
@endsection
@section('content')
    <main id="content">



        <section class="breadcrump-section">
            <div class="bg-gray-1000 py-6 pt-lg-9 pb-lg-11 mb-lg-10" style="margin-bottom: 0px!important;padding:20px 0px!important; background: #DFA326 !important;">
                <div class="container px-md-5 mb-lg-2">
                    <h6 class="font-size-30 font-weight-semi-bold text-center mb-1">Get Subscription</h6>
                    <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-center p-0">

                    <li class="breadcrumb-item active" aria-current="page">To watch all content without restrictions</li>

                    </ol>
                    </nav>
                 </div>

            </div>
        </section>



    <!--overlay-->

    <div class="bg-gray-1100 space-1">
        <div class="container px-md-6 px-xl-7 px-wd-6 pb-3 pt-1">
            <div class="pb-4">
                <div class="border-g-1200-op mb-1 pb-3">
                    <div class="dark">
                         <div class="row">
                            @if(isset($subscriptions))
                                @php
                                $gridColor = ['','2195ed', 'eac035', 'e40914', 'green'];
                                @endphp
                                @foreach($subscriptions as $subscription)
                                <div class="col-sm-4 mt-1 text-center">
                                    <div class="subscription-column colour-{{ $gridColor[$loop->iteration] }}" style="background: #{{ $gridColor[$loop->iteration] }}">
                                        <h3 class="colour-{{ $gridColor[$loop->iteration] }}">
                                            {{$subscription->title}}
                                        </h3>
                                        <hr>
                                        <p>
                                            Number of days: <b>{{$subscription->days}}</b> days
                                        </p>
                                        <p>
                                            Price: <b>Ksh.{{ number_format($subscription->price*100, 2) }} (${{number_format($subscription->price, 2)}})</b>
                                        </p>
                                        <p>
                                           {{$subscription->description}}
                                        </p>
                                        <a class="btn btn-primary get-subscription-btn" onclick="initiatePayment({{$subscription->id}}, '{{$subscription->title}}');">
                                            Purchase Subscription
                                        </a>
                                    </div>
                                </div>
                                @endforeach
                            @endif

                            </div>

                        </div>

                        <div id="payment-btn-area" class="col-xs-12 alert-warning mt-4 p-3 text-center" style="border-radius: 10px;">
                            <a id="m-pesa-pay-button" class="btn btn-sm btn-payment">Pay by M-Pesa</a>
                            <a id="paypal-pay-button" style="margin-left:200px;" class="btn btn-sm btn-payment">Pay by PayPal</a>
                        </div>

                        @if(\Session::has('error'))
                            <div class="col-xs-12 mt-4">
                                <p class="alert alert-danger">{!! \Session::get('error') !!}</p>
                            </div>
                        @endif
                        @if(\Session::has('success-payment'))
                            <div class="col-xs-12 mt-4">

                                <p class="alert alert-success text-center">
                                    {!! \Session::get('success-payment') !!}
                                    <a href="{{ url('/') }}" class="btn btn-sm btn-primary">Back to Home</a>
                                </p>
                            </div>
                        @endif
                        @if(\Session::has('mpesa-success'))
                            <div class="col-xs-12 mt-4">
                                <p class="alert alert-success">
                                    {!! \Session::get('mpesa-success') !!}
                                    If you have accepeted the payment then click on
                                    <a href="{{ route('front.mPesaPaymentStatus', \Session::get('checkoutRequestID')) }}" class="btn btn-sm btn-primary">I Agreed</a>
                                </p>
                            </div>
                        @endif


                    </div>
                </div>
            </div>
            <!--Dakar Section End-->




        </div>
    </div>


    </main>
@endsection

@section('custom-script')
<script>
    function initiatePayment(id, title)
    {
        var url = '{{ route('front.initiateSubscription', [':subscription-id', 'M-Pesa']) }}';
        var urlPayPal = '{{ route('front.initiateSubscription', [':subscription-id', 'PayPal']) }}';
        url = url.replace(':subscription-id', id);
        urlPayPal = urlPayPal.replace(':subscription-id', id);
        // alert(url);
        $('#payment-btn-area').css('display', 'block');
        $('#m-pesa-pay-button').attr('href', url);
        $('#m-pesa-pay-button').html('<img class="payment-button-image" src="{{ url('front/assets/img/mpesa.png') }}"/> ('+title+')');

        $('#paypal-pay-button').attr('href', urlPayPal);
        $('#paypal-pay-button').html('<img class="payment-button-image" src="{{ url('front/assets/img/Paypal-New.png') }}"/> ('+title+')');
    }
</script>

@endsection