@extends('template.master')
@section('title', 'Subscription Options')
@section('content')
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }

        #divAuthorizeNetPopupScreen {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: #808080;
            opacity: 0.5;
            -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
            filter: alpha(opacity=50);
        }

        #divAuthorizeNetPopup {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -200px;
            z-index: 2;
            overflow: visible;
        }

        .AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupOuter {
            background-color: #dddddd;
            border-width: 1px;
            border-style: solid;
            border-color: #a0a0a0 #909090 #909090 #a0a0a0;
            padding: 4px;
        }

        .AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupTop {
            height: 23px;
        }

        .AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose {
            position: absolute;
            right: 7px;
            top: 7px;
        }

        .AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a {
            background-image: url('content/closeButton1.png');
            background-repeat: no-repeat;
            height: 16px;
            width: 16px;
            display: inline-block;
        }

        .AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a:hover {
            background-image: url('content/closeButton1h.png');
        }

        .AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a:active {
            background-image: url('content/closeButton1a.png');
        }

        .AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupInner {
            background-color: #ffffff;
            border-width: 2px;
            border-style: solid;
            border-color: #cfcfcf #ebebeb #ebebeb #cfcfcf;
        }

        .AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupBottom {
            height: 30px;
        }

        .AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupLogo {
            position: absolute;
            right: 9px;
            bottom: 4px;
            width: 200px;
            height: 25px;
            background-image: url('content/powered_simple.png');
        }

        .AuthorizeNetPopupSimpleTheme .AuthorizeNetPopupOuter {
            border: 1px solid #585858;
            background-color: #ffffff;
        }
    </style>

    <div class=" mt-4">
        <div class="alert alert-danger alert-block d-none" id="errorhide">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong id="errorMsg"></strong>
        </div>
        {{-- <span class="text-danger text-center" id="errorMsg"></span> --}}
        <div class="row perentDiv">
            @foreach ($data as $item)
                @if (isset(Auth::guard('app_user')->user()->subscription_id) &&
                        Auth::guard('app_user')->user()->subscription_id == $item->subscription_id)
                    <div class="col-md-4">
                        <div class="card card-secondary">
                            <div class="card-header" style="background: #000000;color: #f0ac63 !important;">
                                <h3 class="card-title">{{ $item->subscription_name }}</h3>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group text-center">
                                            @if(Auth::guard('app_user')->user()->subscription_type == 1)
                                                <span class="text-center font-weight-bold"> ${{number_format($item->subscription_price_per_month,2) }} / Monthly</span>
                                                {{-- <p class="text-center mb-2 mt-2">
                                                    {{ strip_tags(preg_replace('/\s+/', '', $item->subscription_content)) }}</p> --}}
                                            @else
                                                <span class="text-center font-weight-bold"> ${{number_format($item->subscription_price_per_year,2) }} / Year</span>
                                                
                                            @endif
                                          
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <p class="text-center mb-2 mt-2">
                                            {{ strip_tags(preg_replace('/\s+/', '', $item->subscription_content)) }}</p>
                                    </div>
                                </div>

                            </div>
                            <div class="card-footer text-center"style="background: #000000;color: #f0ac63 !important;">
                                <span class="p-3"> Current Subscription</span>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="col-md-4">
                        <div class="card card-secondary">
                            <div class="card-header" style="background: #000000;color: #f0ac63 !important;">
                                <h3 class="card-title">{{ $item->subscription_name }}</h3>
                            </div>
                            <div class="card-body">
                                <form action="" method="post" id="form-{{$item->subscription_id}}">
                                    @csrf
                                    <div class="row">
                                        <!--<div class="col-12">-->
                                        <!--    <div class="form-group d-flex">-->
                                        <!--        <input type="hidden" class="form-control subscription_amount"-->
                                        <!--            id="subscription_amount" name="amount" value="">-->
                                        <!--        <input type="hidden" class="form-control subscription_type"-->
                                        <!--            id="subscription_type" name="subscription_type" value="">-->
                                        <!--        <input type="hidden" class="form-control subscription_id"-->
                                        <!--            id="subscription_id" name="subscription_id" value="">-->
                                        <!--        <div class="mr-3 d-flex">-->
                                        <!--            <label style="font-size: 14px;">-->
                                        <!--            <input class="mr-2" type="radio"-->
                                        <!--                id="customRadio-1-{{ $item->subscription_id }}" name="customRadio3"-->
                                        <!--                data-id={{ $item->subscription_price_per_month }}-->
                                        <!--                data-sub={{ $item->subscription_id }} value="1">-->
                                        <!--                ${{ number_format($item->subscription_price_per_month,2) }} /-->
                                        <!--                Month-->
                                        <!--            </lable>-->
                                                    <!--<label for="customRadio1"-->
                                                    <!--    class="mt-1" style="font-size: 14px;">${{ number_format($item->subscription_price_per_month,2) }} /-->
                                                    <!--    Month</label>-->
                                        <!--        </div>-->
                                        <!--        <div class="d-flex">-->
                                        <!--             <label style="font-size: 14px;">-->
                                        <!--                <input class="mr-2" type="radio"-->
                                        <!--                id="customRadio-2-{{ $item->subscription_id }}" name="customRadio3"-->
                                        <!--                value="2" data-id={{ $item->subscription_price_per_year }}-->
                                        <!--                data-sub={{ $item->subscription_id }}>-->
                                        <!--                ${{number_format($item->subscription_price_per_year,2)  }} /-->
                                        <!--                Year-->
                                        <!--            </label>-->
                                                    <!--<label for="customRadio2"-->
                                                    <!--    class="mt-1"style="font-size: 14px;">${{number_format($item->subscription_price_per_year,2)  }} /-->
                                                    <!--    Year</label>-->
                                        <!--        </div>-->
                                        <!--    </div>-->
                                            
                                        <!--</div>-->
                                        <div class="col-12">
                                            <div class="row">
                                                <input type="hidden" class="form-control subscription_amount" id="subscription_amount" name="amount" value="">
                                                <input type="hidden" class="form-control subscription_type" id="subscription_type" name="subscription_type" value="">
                                                <input type="hidden" class="form-control subscription_id" id="subscription_id" name="subscription_id" value="">
                                                <div class="col-md-6">
                                                    <label  style="font-size: 14px;" class="radio-buttons" data-id="">
                                                        <input class="mr-2" type="radio" id="customRadio-{{ $item->subscription_id }}" name="customRadio3"
                                                            data-id={{ $item->subscription_price_per_month }} data-sub={{ $item->subscription_id }} value="1">
                                                        ${{ number_format($item->subscription_price_per_month,2) }} / Month
                                                    </label>
                                                </div>
                                                <div class="col-md-6 text-center">
                                                    <label  style="font-size: 14px;"class="radio-buttons"id="">
                                                        <input class="mr-2" type="radio" id="customRadio-{{ $item->subscription_id }}" name="customRadio3"
                                                            value="2" data-id={{ $item->subscription_price_per_year }} data-sub={{ $item->subscription_id }}>
                                                        ${{ number_format($item->subscription_price_per_year,2) }} / Year
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <p class="text-center mb-2 mt-2">
                                                {{ strip_tags(preg_replace('/\s+/', '', $item->subscription_content)) }}
                                            </p>
                                        </div>
                                        
                                    </div>
                            </div>
                            <div class="card-footer text-center">
                                <button type="button" class="btn btn-sm mt-2 buy_now" data-target="customRadio-{{ $item->subscription_id }}" id="submitTaxo"
                                    style="background: #000000;color: #f0ac63 !important;">Subscribe</button>
                            </div>
                            </form>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>

        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Checkout (Make Payment)</h5>
                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">X</button>
                    </div>
                    <div class="modal-body">
                        <div id="iframe_holder" class="center-block" style="width:90%;max-width: 1000px"
                            data-mediator="payment-form-loader">
                            <iframe id="load_payment" class="embed-responsive-item" name="load_payment" width="100%"
                                height="550px" frameborder="0" scrolling="no">
                            </iframe>

                            <form id="send_hptoken" action="https://test.authorize.net/payment/payment" method="post"
                                target="load_payment">
                                <input type="hidden" name="token" id="payment_token" value="">
                                {{-- <button type="submit">submit</button> --}}
                            </form>
                        </div>
                    </div>
                    {{-- <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div> --}}
                </div>
            </div>
        </div>

        <div id="acceptJSReceiptModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" >
                        <h4 class="modal-title" id="acceptJSReceiptHeader"></h4>
                    </div>
                    <div class="modal-body">
                        <span class="text-cebter"id="acceptJSReceiptBody"></span>
                        <div class="" id="paymentDetail">
                            <ul class="nav nav-pills flex-column">
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        Amount :
                                        <span class=" text-success" id="totalAmpunt"></span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        Subscription :
                                        <span class=" text-success" id="SubscriptionId"> </span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        Subscription Type :
                                        <span class=" text-success" id="SubscriptionType"> </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="closeModalR" class="btn btn-secondary" data-dismiss="modal">Ok</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('child-scripts')
    <script>
        $(document).ready(function() {
            
            
           $('.radio-buttons input[type="radio"]').on('click', function(){
                $('.radio-buttons input[type="radio"]').prop('checked', false);
                $(this).prop('checked', true);
                var dataTargets = []; // Array to store data-target values
                $('.buy_now').each(function() {
                    dataTargets.push($(this).data('target')); // Push each data-target value to the array
                });
                var currentIndex = dataTargets.indexOf($(this).attr('id')); // Find the index of the current targetOption
                
                 $('.buy_now').each(function(index) {
                    if (index !== currentIndex) {
                        $(this).prop('disabled', true);
                    } else {
                        $(this).prop('disabled', false);
                    }
                });
                
                console.log("Current data-target: " + dataTargets[currentIndex]);
            });
            
            // $('.buy_now').on('click', function(){
            //     var targetOption = $(this).data('target');
            //     $('input[type="radio"]').prop('checked', false);
            //     $('#' + targetOption).addClass('d-none');
            // });


            $('input[name="customRadio3"]').change(function(e) {
                e.preventDefault();
                var value_type = $('input[name="customRadio3"]:checked').val();
                var value_amount = $('input[name="customRadio3"]:checked').data('id');
                var value_subscription_id = $('input[name="customRadio3"]:checked').data('sub');
                // console.log(value_subscription_id);
                $('.subscription_type').val(value_type);
                $('.subscription_amount').val(value_amount);
                $('.subscription_id').val(value_subscription_id);
            });

            $('.buy_now').click(function(e) {
                e.preventDefault();
               var amount= $('.subscription_amount').val();
               if (amount) {
                    $('#errorhide').addClass('d-none')
                    var form = {
                        amount: $('.subscription_amount').val(),
                        subscription_type: $('.subscription_type').val(),
                        subscription_id: $('.subscription_id').val(),
                    }
                    var url = "{{ route('payment.redirect') }}";
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        type: "POST",
                        data: form,
                        url: url,
                        dataType: "JSON",
                        success: function(response) {
                            $('#exampleModal').modal('show');
                            // console.log('Ajax Success:', response); 
                            $('#payment_token').val(response.token);
                            window.CommunicationHandler = {};

                            function parseQueryString(str) {
                                var vars = [];
                                var arr = str.split('&');
                                var pair;
                                for (var i = 0; i < arr.length; i++) {
                                    pair = arr[i].split('=');
                                    vars[pair[0]] = unescape(pair[1]);
                                }
                                return vars;
                            }


                            window.CommunicationHandler.onReceiveCommunication = function(
                                argument) {

                                // console.log('communication handler enter');

                                var params = parseQueryString(argument.qstr)

                                switch (params['action']) {
                                    case "resizeWindow":
                                        console.log('resize');
                                        break;

                                    case "successfulSave":
                                        console.log('save');
                                        break;

                                    case "cancel":
                                            $('#exampleModal').modal('hide');
                                            // $('#acceptJSReceiptModal').modal('show');
                                            setTimeout(function() {
                                                location.reload();
                                            }, 1000);
                                        break;

                                    case "transactResponse":
                                        sessionStorage.removeItem("HPTokenTime");

                                        console.log('transaction complete');

                                        var transResponse = JSON.parse(params['response']);
                                        console.log(transResponse);
                                        $.ajaxSetup({
                                            headers: {
                                                'X-CSRF-TOKEN': $(
                                                    'meta[name="csrf-token"]').attr(
                                                    'content')
                                            }
                                        });

                                        $.ajax({
                                            url: '{{ route('authorize-success') }}', // Replace with your Laravel route
                                            type: 'POST',
                                            data: {
                                                transResponse: transResponse
                                            },
                                            success: function(response) {
                                               
                                                if (response.status == true) {
                                                    if(response.data.subscription_type == 1){
                                                        var type = "Monthly";
                                                    }else{
                                                        var type = "Yearly";
                                                    }
                                                    $('#paymentDetail').removeClass('d-none');
                                                    $('#acceptJSReceiptHeader').html(response.message);
                                                    $('#totalAmpunt').html('$'+response.data.amount);
                                                     console.log("$"+response.data.amount);
                                                    $('#SubscriptionId').html(response.data.subscription_id);
                                                    $('#SubscriptionType').html(type);
                                                
                                                    $('#exampleModal').modal('hide');
                                                    $('#acceptJSReceiptModal').modal('show');
                                                    var okButton = document.getElementById("closeModalR");
                                                    okButton.onclick = function() {
                                                      $('#acceptJSReceiptModal').modal('show');
                                                      location.reload(); // Reloads the window
                                                    }
                                                    // setTimeout(function() {
                                                    //     location.reload();
                                                    // }, 10000);
                                                } else {
                                                    $('#acceptJSReceiptHeader').html('Payment Failed');
                                                    $('#acceptJSReceiptBody').html('something went to wrong please try after sometime');
                                                    $('#paymentDetail').addClass('d-none');
                                                    $('#totalAmpunt').html('');
                                                    $('#SubscriptionId').html('');
                                                    $('#SubscriptionType').html('');
                                                    $('#exampleModal').modal(
                                                    'hide');
                                                    $('#acceptJSReceiptModal')
                                                        .modal('show');
                                                        var okButton = document.getElementById("closeModalR");
                                                    okButton.onclick = function() {
                                                      $('#acceptJSReceiptModal').modal('show');
                                                      location.reload(); // Reloads the window
                                                    }
                                                    // setTimeout(function() {
                                                    //     location.reload();
                                                    // }, 10000);
                                                }
                                                // Redirect to the success page
                                                // window.location.href = 'http://127.0.0.1:8000/authorize-success/';
                                            },
                                            error: function(error) {
                                                console.error(':', error);

                                            }
                                        });

                                }
                            }

                            //send the token
                            $('#send_hptoken').submit();
                        },
                        error: function(error) {
                            console.log(error);
                            if (error.status == '404') {

                            } else {

                            }

                        }
                    });
               }else{
                    $('#errorhide').removeClass('d-none')
                    $('#errorMsg').html("Please Select Subscription Type");
               }
                

            });

            window.CommunicationHandler = {};

        });
    </script>
@endpush