@extends('admin_pages_master')

@section('content')
<main class="main">
    <!-- Start of Breadcrumb -->
    <nav class="breadcrumb-nav">
        <div class="container">
            <ul class="breadcrumb account-breadcrumb">
                <li><a href="{{ url('admin/dashboard') }}">Home</a></li>
                <li>Subscriptions</li>
            </ul>
        </div>
    </nav>
    <!-- End of Breadcrumb -->
  
    <!-- Start of Page Content -->
  
  
  
    <div class="page-content pt-2">
        <!-- Header Section -->
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <!-- Back Button -->
                <a class="back-btn d-flex align-items-center" id="back-btn" onclick="goBack()">
                    <i class="w-icon-long-arrow-left"></i>
                    <div>Back</div>
                </a>
                <!-- New Sub-Admin Button -->
                @if(now() > "2025-04-23")
                    @if(Auth::guard('admin')->user()->expiry_date < now())
                    <a href="#" id="process-order-form" class="btn btn-primary">Subscribe</a>
                    @endif
                @endif
            </div>
        </div>
  
        <!-- Table Section -->
        <div class="container mt-3">
            <div class="table-responsive">
                  @if (Session::has('success_message'))
                  <div class="alert alert-success alert-dismissible fade show" role="alert">
                      <strong>Good! </strong> {{ Session::get('success_message')}}
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>
                  @endif
                <table id="subadminsTable" class="table table-striped">
                    <thead>
                        <tr>
                            <th>S/N</th>
                            <th>Name</th>
                            <th>Amount</th>
                            <th>Payment Date</th>
                            <th>Expiry Date</th>
                        </tr>
                    </thead>
                    <tbody>
                      @foreach($subscriptions as $param)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $param->name }}</td>
                            <td class="text-right">{{ number_format($param->amount, 2) }}</td>
                            <td>{{ $param->payment_date }}</td>
                            <td>{{ $param->expiry_date }}</td>
                        </tr>
                    @endforeach
                        <!-- Additional rows as needed -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
 <!--paystack js-->
 <script src="https://js.paystack.co/v1/inline.js" defer></script>
<script>
    $('#process-order-form').click(function(e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // $('.preloader').show();
        e.preventDefault();
        // alert("ere")
        var form_details = $(this).serializeArray();
        processPayment(form_details);
    })


    function processPayment(data) {
        data = data;
        $('.preloader').show();
        $.ajax({
            type: 'POST',
            url: 'pay-subscription',
            dataType: 'json',
            data: data,
            success: function(e) {
                $('.preloader').hide();
                $('.preloader').hide();
                payWithPaystack(e);
            },
            error: function(e) {
                $('.preloader').hide();
                // var errorList = '';
                // Object.keys(e.responseJSON.message).forEach(function(key) {
                // errorList += '<li>' + e.responseJSON.message[key][0] + '</li>';
                // });
                new swal("Opss", e.responseJSON.message, "error");
            }
        })

    }

    const paystackSecretKey = @json(env('PAYSTACK_PUBLIC_KEY'));

    function payWithPaystack(data) {
        // console.log(data)
        var orderObj = {
            email: data.email,
            amount: data.amount_paid * 100,
            order_id: data.order_id,
            phone: data.phone,
            process_transaction: "1",
            card: data.card,
        };

        var data = data;
        var handler = PaystackPop.setup({
            key: paystackSecretKey,
            email: orderObj.email,
            amount: orderObj.amount,
            ref: data.transaction_id,
            metadata: {
                custom_fields: [{
                    display_name: "Order ID",
                    variable_name: "order_id",
                    value: orderObj.order_id
                }]
            },
            callback: function(response) {
                $('.preloader').show();
                location.href = "/paystack/transaction-successful?order_id=" + orderObj.order_id +
                    '&reference=' + response.reference;

            },
            onClose: function() {
                $('.preloader').hide();
                alert('Click "Pay online now" to retry payment.');
            }
        });
        handler.openIframe();
    }
</script>
<script>
    $(document).ready(function () {
        console.log("Document Ready - Running jQuery");

        // Select the last <li> that contains a <ul>
        let lastLi = $("li:has(ul)").last();

        if (lastLi.length) {
            lastLi.addClass("has-submenu"); // Add class to <li>
            
            let submenu = lastLi.find("ul").first(); // Find the submenu inside it
            if (submenu.length) {
                submenu.addClass("submenu"); // Add class to <ul>
            }
            
            console.log("Final Last LI found:", lastLi);
            console.log("Final Submenu found:", submenu);
        } else {
            console.log("No <li> with <ul> found.");
        }
    });

</script>
@endsection