@extends('front.layout-ref')

@section('content')
<style>
    .btn-dark{
        background-color:black !important;
    }

    p{
        font-size:14px !important;
    }

    
    .login-registration-submit-button {
        background: #fff !important;
        width: 100%;
        color: #000;
    }

    .login-registration-submit-button:hover,
    .get-subscription-btn py-2: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 {
        background: #000f1e !important;
    }

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

    #payment-btn-area {
        display: none;
        background: #8446E4;
        /*position:fixed;*/
        /*top:0;*/
        /*left:0;*/
        /*animation:slide-down 0.3s ease;*/
    }

    @keyframes slide-down {
        from {
            transform: translateY(-32px)
        }

        tp {
            transform: translateY(0)
        }
    }

    /* .colour-eac035
        {
            color:#fff;
        } */

    .payment-button-image {
        height: 70px;
        width: auto;
        border-radius: 5px;
    }

    .btn-payment {
        background: #000;
        border: 0;
        padding: 0 10px;
        margin: 20px 0 !important;
        width:100%;
        display:block !important;
    }

    .payment_prompt_custom {
        display: none;
        justify-content: center;
    }

    .pay_helper_text {
        font-size: 1em;
        display: none;
        color: black !important;
    }

    @media(max-width: 575px) {
        .custom-mb-top-div {
            margin-top: 2vh !important;
        }
    }

    @media(min-width:1200px){
            body{
                padding-top:70px !important;
            }
        }

        .btn-black:hover{
            background-color:red !important;
            transition: 0.3s ease;
        } 
</style>
<main id="content">

    <section class="breadcrump-section">
        <div class="bg-gray-1000 py-6 pt-lg-9 pb-lg-11 mb-lg-10 custom-mb-top-div"
            style="margin-bottom: 0px!important;padding:20px 0px!important; background: #DFA326 !important;">
            <div class="container px-md-5 mb-lg-2 p-1">
                <h1 class="h1 fw-bold text-center mb-1">Buy a Subscription</h1>
            </div>

        </div>
    </section>



    <!--overlay-->

    <div class="bg-gray-1100 space-1 px-2">
        @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') !!}
                    <br />
                    <a href="{{ url('/') }}" class="btn btn-sm btn-dark">Back to Home</a>
                </p>
            </div>
        @endif
        @if(\Session::has('mpesa-success'))
            <div class="col-xs-12 mt-4">
                <p class="alert alert-success text-center">
                    {!! \Session::get('mpesa-success') !!}
                    . Kindly enter your mPesa pin to accept payment and click to
                    <br />
                    <a href="{{ route('front.mPesaPaymentStatus', ['token' => \Session::get('access_token'), 'checkoutRequestID' => \Session::get('checkoutRequestID')]) }}"
                        class="btn btn-sm btn-dark">Complete Transaction</a>
                </p>
            </div>
        @endif

        <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 p-2">
                            @if(isset($subscriptions))
                                                        @php
                                                            $gridColor = ['FFA500', '228B22', 'A020F0', 'FF0000', '0000FF', 'FFD700', '808080'];
                                                            $colorCount = count($gridColor);
                                                        @endphp


                                                        @foreach($subscriptions as $index => $subscription)
                                                                            @if(isset($subscription->expiry_date_time))
                                                                                            @if($subscription->expiry_date_time > \Carbon\Carbon::now())
                                                                                                            <div class="col-sm-4 mt-1 mb-2 text-center" style="padding:10px !important;">
                                                                                                                @php
                                                                                                                    // If index is less than the count of colors, use the color from the array, else use gray
                                                                                                                    $colorIndex = $index < $colorCount ? $index : $colorCount - 1;
                                                                                                                @endphp
                                                                                                                <div class="subscription-column colour-{{ $gridColor[$colorIndex] }}"
                                                                                                                    style="background: #{{ $gridColor[$colorIndex] }}"
                                                                                                                    style="padding-bottom:5px !important;">
                                                                                                                    <h3 class="colour-{{ $gridColor[$colorIndex] }}" style="color:#ffffff !important;">
                                                                                                                        {{$subscription->title}}
                                                                                                                    </h3>
                                                                                                                    <p>
                                                                                                                        Number of days: <b>{{$subscription->days}}</b> days
                                                                                                                    </p>
                                                                                                                    <p>
                                                                                                                        Price: <b>Ksh.{{ number_format($subscription->price * (get_setting('Currency_exchange_rate')->value ?? 0), 2) }}
                                                                                                                            (${{number_format($subscription->price, 2)}})</b>
                                                                                                                    </p>
                                                                                                                    <p>
                                                                                                                        {{$subscription->description}}
                                                                                                                    </p>
                                                                                                                    <p>
                                                                                                                        @if(isset($subscription->expiry_date_time))
                                                                                                                            Event Date:
                                                                                                                            {{ \Carbon\Carbon::parse($subscription->expiry_date_time)->format('d M, Y') }}
                                                                                                                        @endif
                                                                                                                    </p>
                                                                                                                    <p class="d-flex justify-content-center">
                                                                                                                        @if(isset($subscription->start_time))
                                                                                                                            Event Starts:
                                                                                                                            {{ \Carbon\Carbon::parse($subscription->start_time)->format('H:i a') }}
                                                                                                                        @endif

                                                                                                                        @if(isset($subscription->end_time))
                                                                                                                            Event Ends:
                                                                                                                            {{ \Carbon\Carbon::parse($subscription->end_time)->format('H:i a') }}
                                                                                                                        @endif

                                                                                                                    </p>

                                                                                                                    @if(in_array($subscription->id, $purchased_custom_user_subscriptions))
                                                                                                                        <a class="btn btn-black bg-black text-white border-0 outline-0 py-2 mb-1 get-subscription-btn">
                                                                                                                            Already Purchased
                                                                                                                        </a>
                                                                                                                    @else
                                                                                                                        <a class="btn btn-black bg-black text-white border-0 outline-0 py-2 mb-1 get-subscription-btn"
                                                                                                                            onclick="initiatePayment({{$index}});">
                                                                                                                            Purchase Subscription
                                                                                                                        </a>
                                                                                                                    @endif

                                                                                                                    <br />
                                                                                                                    <small id="pay_helper_text_{{$index}}" class="pay_helper_text my-1"> Click to Pay
                                                                                                                    </small>

                                                                                                                    <div id="payment_prompt_{{$index}}" class="payment_prompt payment_prompt_custom p-0"
                                                                                                                        style="overflow:hidden;">
                                                                                                                        <div class="my-2 p-0"
                                                                                                                            style="padding:0 !Important;width:33%;text-align:left !important;">
                                                                                                                            <a id="m-pesa-pay-button" class="btn btn-sm btn-payment m-0"
                                                                                                                                style="background: none;margin-top:0 !important;margin-bottom:0 !important;"
                                                                                                                                href="{{ route('front.initiateSubscription', [$subscription->id, 'M-Pesa']) }}">
                                                                                                                                <img class="payment-button-image"
                                                                                                                                    src="{{url('setting-images')}}/{{get_live_stream_setting('M-PESA_payment_icon')->value}}"
                                                                                                                                    style="width:100%;height:50px;margin-left:0 !important;margin-right:0 !important;" />
                                                                                                                            </a>
                                                                                                                        </div>
                                                                                                                        <div class="my-2 p-0" style="width:33%;">
                                                                                                                            <a id="paypal-pay-button" class="btn btn-sm btn-payment m-0"
                                                                                                                                style="background:none;margin-top:0 !important;margin-bottom:0 !important;"
                                                                                                                                href="{{ route('front.initiateSubscription', [$subscription->id, 'PayPal']) }}">
                                                                                                                                <img class="payment-button-image"
                                                                                                                                    src="{{url('setting-images')}}/{{get_live_stream_setting('PAYPAL_payment_icon')->value}}"
                                                                                                                                    style="width:100%;height:50px;" />
                                                                                                                            </a>
                                                                                                                        </div>
                                                                                                                        <div class="my-2 p-0" style="width:33%;">
                                                                                                                            <a id="visa-pay-button" class="btn btn-sm btn-payment m-0"
                                                                                                                                style="background:none;margin-top:0 !important;margin-bottom:0 !important;"
                                                                                                                                href="{{ route('front.initiateSubscription', [$subscription->id, 'PayPal']) }}">
                                                                                                                                <img class="payment-button-image"
                                                                                                                                    src="{{url('setting-images')}}/{{get_live_stream_setting('VISA_payment_icon')->value}}"
                                                                                                                                    style="width:100%;height:50px;" />
                                                                                                                            </a>
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                            </div>
                                                                                            @endif
                                                                            @elseif(isset($subscription['price_ranges']))
                                                                                                <div class="col-sm-4 mt-1 mb-2 text-center" style="padding:10px !important;">
                                                                                                    @php
                                                                                                        // If index is less than the count of colors, use the color from the array, else use gray
                                                                                                        $colorIndex = $index < $colorCount ? $index : $colorCount - 1;
                                                                                                    @endphp
                                                                                                    <div class="subscription-column colour-{{ $gridColor[$colorIndex] }}"
                                                                                                        style="background: #{{ $gridColor[$colorIndex] }}"
                                                                                                        style="padding-bottom:5px !important;">
                                                                                                        <h3 class="colour-{{ $gridColor[$colorIndex] }}" style="color:#ffffff !important;">
                                                                                                            {{$subscription->title}}
                                                                                                        </h3>
                                                                                                        <p>
                                                                                                            {{$subscription->description}}
                                                                                                        </p>
                                                                                                        @php
                                                                                                            $intersected_ids = array_intersect(array_column($subscription['price_ranges'], 'id'), $purchased_general_user_subscriptions);
                                                                                                        @endphp

                                                                                                        @if(empty($intersected_ids))
                                                                                                            <select id="subscriptionPlanSelectBox"
                                                                                                                class="form-select form-select-lg mb-3 btn btn-black bg-black text-white border-0 outline-0 py-2 mb-1 get-subscription-btn-sec" style="max-width:98%;">
                                                                                                                <option selected>Select your subscription plan</option>
                                                                                                                @foreach($subscription['price_ranges'] as $price_range)
                                                                                                                    <option style="max-width:68%;" value="{{$price_range['id']}},{{$index}}">{{ $price_range['days'] }}
                                                                                                                        days for <b>Ksh.{{ number_format($price_range['price'] * (get_setting('Currency_exchange_rate')->value ?? 0), 2) }}
                                                                                                                            (${{number_format($price_range['price'], 2)}})</b></option>
                                                                                                                @endforeach
                                                                                                            </select>

                                                                                                        @else
                                                                                                            <a class="btn btn-black bg-black text-white border-0 outline-0 py-2 mb-1 get-subscription-btn">
                                                                                                                Already Purchased
                                                                                                            </a>
                                                                                                        @endif
                                                                                                        <br />
                                                                                                        <small id="pay_helper_text_{{$index}}" class="pay_helper_text my-1"> Click to Pay
                                                                                                        </small>

                                                                                                        <div id="payment_prompt_{{$index}}" class="payment_prompt payment_prompt_custom p-0"
                                                                                                            style="overflow:hidden;">
                                                                                                            <div class="my-2 p-0"
                                                                                                                style="padding:0 !Important;width:33%;text-align:left !important;">
                                                                                                                <a id="m-pesa-pay-button-{{$index}}" class="btn btn-sm btn-payment m-0"
                                                                                                                    style="background: none;margin-top:0 !important;margin-bottom:0 !important;"
                                                                                                                    href="{{ route('front.initiateSubscription', [$subscription->id, 'M-Pesa']) }}">
                                                                                                                    <img class="payment-button-image"
                                                                                                                        src="{{url('setting-images')}}/{{get_live_stream_setting('M-PESA_payment_icon')->value}}"
                                                                                                                        style="width:100%;height:50px;margin-left:0 !important;margin-right:0 !important;" />
                                                                                                                </a>
                                                                                                            </div>
                                                                                                            <div class="my-2 p-0" style="width:33%;">
                                                                                                                <a id="paypal-pay-button-{{$index}}" class="btn btn-sm btn-payment m-0"
                                                                                                                    style="background:none;margin-top:0 !important;margin-bottom:0 !important;"
                                                                                                                    href="{{ route('front.initiateSubscription', [$subscription->id, 'PayPal']) }}">
                                                                                                                    <img class="payment-button-image"
                                                                                                                        src="{{url('setting-images')}}/{{get_live_stream_setting('PAYPAL_payment_icon')->value}}"
                                                                                                                        style="width:100%;height:50px;" />
                                                                                                                </a>
                                                                                                            </div>
                                                                                                            <div class="my-2 p-0" style="width:33%;">
                                                                                                                <a id="visa-pay-button-{{$index}}" class="btn btn-sm btn-payment m-0"
                                                                                                                    style="background:none;margin-top:0 !important;margin-bottom:0 !important;"
                                                                                                                    href="">
                                                                                                                    <img class="payment-button-image"
                                                                                                                        src="{{url('setting-images')}}/{{get_live_stream_setting('VISA_payment_icon')->value}}"
                                                                                                                        style="width:100%;height:50px;" />
                                                                                                                </a>
                                                                                                            </div>

                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                            @else
                                                                                                <div class="col-sm-4 mt-1 mb-2 text-center" style="padding:10px !important;">
                                                                                                    @php
                                                                                                        // If index is less than the count of colors, use the color from the array, else use gray
                                                                                                        $colorIndex = $index < $colorCount ? $index : $colorCount - 1;
                                                                                                    @endphp
                                                                                                    <div class="subscription-column colour-{{ $gridColor[$colorIndex] }}"
                                                                                                        style="background: #{{ $gridColor[$colorIndex] }}"
                                                                                                        style="padding-bottom:5px !important;">
                                                                                                        <h3 class="colour-{{ $gridColor[$colorIndex] }}" style="color:#ffffff !important;">
                                                                                                            {{$subscription->title}}
                                                                                                        </h3>
                                                                                                        <p>
                                                                                                            Number of days: <b>{{$subscription->days}}</b> days
                                                                                                        </p>
                                                                                                        <p>
                                                                                                            Price: <b>Ksh.{{ number_format($subscription->price * (get_setting('Currency_exchange_rate')->value ?? 0), 2) }}
                                                                                                                (${{number_format($subscription->price, 2)}})</b>
                                                                                                        </p>
                                                                                                        <p>
                                                                                                            {{$subscription->description}}
                                                                                                        </p>
                                                                                                        <p>
                                                                                                            @if(isset($subscription->expiry_date_time))
                                                                                                                Event Date:
                                                                                                                {{ \Carbon\Carbon::parse($subscription->expiry_date_time)->format('d M, Y') }}
                                                                                                            @endif
                                                                                                        </p>
                                                                                                        <p class="d-flex justify-content-center">
                                                                                                            @if(isset($subscription->start_time))
                                                                                                                Event Starts:
                                                                                                                {{ \Carbon\Carbon::parse($subscription->start_time)->format('H:i a') }}
                                                                                                            @endif

                                                                                                            @if(isset($subscription->end_time))
                                                                                                                Event Ends:
                                                                                                                {{ \Carbon\Carbon::parse($subscription->end_time)->format('H:i a') }}
                                                                                                            @endif

                                                                                                        </p>
                                                                                                        @php            $general_subscriptions_found = 0; @endphp

                                                                                                        @foreach($general_subscriptions as $subscription_number => $general_subscription)
                                                                                                            @if(in_array($general_subscription, $purchased_general_user_subscriptions))
                                                                                                                @php                    $general_subscriptions_found++; @endphp
                                                                                                            @endif
                                                                                                        @endforeach

                                                                                                        @if($general_subscriptions_found > 0)
                                                                                                            <a class="btn btn-black bg-black text-white border-0 outline-0 py-2 mb-1 get-subscription-btn">
                                                                                                                Active subscription
                                                                                                            </a>
                                                                                                        @else
                                                                                                            <a class="btn btn-black bg-black text-white border-0 outline-0 py-2 mb-1 get-subscription-btn"
                                                                                                                onclick="initiatePayment({{$index}});">
                                                                                                                Purchase subscription
                                                                                                            </a>
                                                                                                        @endif

                                                                                                        <br />
                                                                                                        <small id="pay_helper_text_{{$index}}" class="pay_helper_text my-1"> Click to Pay
                                                                                                        </small>

                                                                                                        <div id="payment_prompt_{{$index}}" class="payment_prompt payment_prompt_custom p-0"
                                                                                                            style="overflow:hidden;">
                                                                                                            <div class="my-2 p-0"
                                                                                                                style="padding:0 !Important;width:33%;text-align:left !important;">
                                                                                                                <a id="m-pesa-pay-button" class="btn btn-sm btn-payment m-0"
                                                                                                                    style="background: none;margin-top:0 !important;margin-bottom:0 !important;"
                                                                                                                    href="{{ route('front.initiateSubscription', [$subscription->id, 'M-Pesa']) }}">
                                                                                                                    <img class="payment-button-image"
                                                                                                                        src="{{url('setting-images')}}/{{get_live_stream_setting('M-PESA_payment_icon')->value}}"
                                                                                                                        style="width:100%;height:50px;margin-left:0 !important;margin-right:0 !important;" />
                                                                                                                </a>
                                                                                                            </div>
                                                                                                            <div class="my-2 p-0" style="width:33%;">
                                                                                                                <a id="paypal-pay-button" class="btn btn-sm btn-payment m-0"
                                                                                                                    style="background:none;margin-top:0 !important;margin-bottom:0 !important;"
                                                                                                                    href="{{ route('front.initiateSubscription', [$subscription->id, 'PayPal']) }}">
                                                                                                                    <img class="payment-button-image"
                                                                                                                        src="{{url('setting-images')}}/{{get_live_stream_setting('PAYPAL_payment_icon')->value}}"
                                                                                                                        style="width:100%;height:50px;" />
                                                                                                                </a>
                                                                                                            </div>
                                                                                                            <div class="my-2 p-0" style="width:33%;">
                                                                                                                <a id="paypal-pay-button-{{$index}}" class="btn btn-sm btn-payment m-0"
                                                                                                                    style="background:none;margin-top:0 !important;margin-bottom:0 !important;"
                                                                                                                    href="">
                                                                                                                    <img class="payment-button-image"
                                                                                                                        src="{{url('setting-images')}}/{{get_live_stream_setting('VISA_payment_icon')->value}}"
                                                                                                                        style="width:100%;height:50px;" />
                                                                                                                </a>
                                                                                                            </div>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                            @endif
                                                        @endforeach
                            @endif
                        </div>
                    </div>

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

@section('custom_js_script')
    <script src="{{url('front/assets/js/get-subscription-ref.js')}}"></script>    
@endsection

@endsection