From c6d92b8a3952cf53a6080e18d0dc58555bee8f8d Mon Sep 17 00:00:00 2001
From: sayliraut <sayliraut2903@gmail.com>
Date: Mon, 8 Jul 2024 14:52:25 +0530
Subject: [PATCH] dashboard recent transaction

---
 resources/views/Admin/dashboard.blade.php | 455 +++++++++++++---------
 1 file changed, 264 insertions(+), 191 deletions(-)

diff --git a/resources/views/Admin/dashboard.blade.php b/resources/views/Admin/dashboard.blade.php
index b146820..8e23a70 100644
--- a/resources/views/Admin/dashboard.blade.php
+++ b/resources/views/Admin/dashboard.blade.php
@@ -100,7 +100,7 @@
                                         </div> --}}
 
                 </div>
-                {{-- <div class="col-12 d-flex align-items-center p-0 mb-4">
+                <div class="col-12 d-flex align-items-center p-0 mb-4">
                     <div class="col-md-12">
                         <div class="card">
                             <div class="card-body">
@@ -151,14 +151,14 @@
                                                             <a class="view-btn m-0 pointer sub_admin_permission"
                                                                 data-toggle="modal" data-target="#payment-details-modal"
                                                                 data-id="{{ $recent_transactions['id'] }}"
+                                                                data-name="{{ $recent_transactions['subscription']['first_name'] }}"
                                                                 data-price="{{ $recent_transactions['amount'] }}"
-                                                                data-first_name="{{ $recent_transactions['subscription']['first_name'] }}"
-                                                                data-stripeCustId="{{ $recent_transactions['stripe_customer_id'] }}"
-                                                                data-subId="{{ $recent_transactions['subscription_id'] }}"
-                                                                data-subStatus="{{ $recent_transactions['subscription_status'] }}"
-                                                                data-subStartPeriod="{{ $recent_transactions['current_period_start'] }}"
-                                                                data-subCurrentPeriod="{{ $recent_transactions['current_period_end'] }}"
-                                                                data-subNextPeriod="{{ $recent_transactions['next_payment_date'] }}">View</a>
+                                                                data-subscription-id="{{ $recent_transactions['subscription_id'] }}"
+                                                                data-customer-id="{{ $recent_transactions['stripe_customer_id'] }}"
+                                                                data-subscription-status="{{ $recent_transactions['subscription_status'] }}"
+                                                                data-start-date="{{ $recent_transactions['current_period_start'] }}"
+                                                                data-end-date="{{ $recent_transactions['current_period_end'] }}"
+                                                                data-next-date="{{ $recent_transactions['next_payment_date'] }}">View</a>
                                                         </td>
                                                     </tr>
                                                 @endforeach
@@ -170,204 +170,277 @@
                         </div>
                     </div>
 
-                </div> --}}
+                    <!-- Modal -->
+                    <div class="modal fade" id="payment-details-modal" tabindex="-1" role="dialog"
+                        aria-labelledby="exampleModalLabel" aria-hidden="true">
+                        <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 550px;">
+                            <div class="modal-content">
+                                <div class="modal-body">
+                                    <div class="modal-header d-flex justify-content-between modal-title">
+                                        <h5>View Details</h5>
+                                        <button type="button pointer" class="btn-close" data-dismiss="modal"
+                                            aria-label="Close">
+                                            x
+                                        </button>
+                                    </div>
+                                    <div class="row" style="padding: 0px 10px;">
+                                        <div class="form-group subadmin-option col-md-12">
+                                            <div class="payment-main-div">
+                                                <div class="payment-inn-div">
+                                                    <p><strong>Name:</strong></p><span></span>
+                                                </div>
+                                                <div class="payment-inn-div">
+                                                    <p><strong>Price:</strong></p><span></span>
+                                                </div>
+                                                <div class="payment-inn-div">
+                                                    <p><strong>Subscription ID:</strong></p><span></span>
+                                                </div>
+                                                <div class="payment-inn-div">
+                                                    <p><strong>Stripe Customer Id:</strong></p><span></span>
+                                                </div>
+                                                <div class="payment-inn-div">
+                                                    <p><strong>Subscription Status:</strong></p><span></span>
+                                                </div>
+                                                <div class="payment-inn-div">
+                                                    <p><strong>Current Start Period:</strong></p><span></span>
+                                                </div>
+                                                <div class="payment-inn-div">
+                                                    <p><strong>Current End Period:</strong></p><span></span>
+                                                </div>
+                                                <div class="payment-inn-div">
+                                                    <p><strong>Next Period Date:</strong></p><span></span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
             </div>
-        </div>
-    @endsection
+        @endsection
 
-    @section('section_script')
-        <script>
-            $('#zero-config').DataTable({
-                "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
-                    "<'table-responsive'tr>" +
-                    "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
-                "oLanguage": {
-                    "oPaginate": {
-                        "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
-                        "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
-                    },
-                    "sInfo": "Showing page PAGE of _PAGES_",
-                    "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
-                    "sSearchPlaceholder": "Search...",
-                    "sLengthMenu": "Results :  _MENU_",
-                },
-                "stripeClasses": [],
-                "lengthMenu": [7, 10, 20, 50],
-                "pageLength": 10
-            });
-
-            $('#zero-config2').DataTable({
-                "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
-                    "<'table-responsive'tr>" +
-                    "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
-                "oLanguage": {
-                    "oPaginate": {
-                        "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
-                        "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
-                    },
-                    "sInfo": "Showing page PAGE of _PAGES_",
-                    "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
-                    "sSearchPlaceholder": "Search...",
-                    "sLengthMenu": "Results :  _MENU_",
-                },
-                "stripeClasses": [],
-                "lengthMenu": [7, 10, 20, 50],
-                "pageLength": 10
-            });
-
-
-            $(function(e) {
-                $("#select-all-ids").click(function() {
-                    $(".form-check-input").prop('checked', $(this).prop('checked'));
-                });
-
-                $(".form-check-input").click(function() {
-                    if (!$(this).prop('checked')) {
-                        $("#select-all-ids").prop('checked', false);
-                    } else {
-                        if ($(".form-check-input:checked").length === $(".form-check-input").length) {
-                            $("#select-all-ids").prop('checked', true);
-                        }
-                    }
-                });
-
-                $(document).on("click", "#download-selected", function(e) {
-                    e.preventDefault();
-
-                    var allIds = [];
-
-                    // Iterate over each page of the DataTable
-                    var table = $('#zero-config').DataTable();
-                    for (var i = 0; i < table.page.info().pages; i++) {
-                        table.page(i).draw(false); // Switch to page i
-                        $('#zero-config tbody input:checked').each(function() {
-                            allIds.push($(this).val());
-                        });
-                    }
-
-                    if (allIds.length > 0) {
-                        // If there are selected customers
-                        $('#ids').prop('disabled', false);
-                        $('#all_id').prop('disabled', true);
-                        $('#ids').val(allIds);
-                        // Now submit the form or perform download action
-                        $('#customer-form').submit(); // Or perform your download action here
-                    } else {
-                        // No customers selected
-                        toastr.error("Please select at least one customer to download.");
-                    }
-                });
-
-
-
-
-                $(document).on("click", "#download_all", function(e) {
-                    $('#all_id').prop('disabled', false);
-                    $('#ids').prop('disabled', true);
-                })
-            });
-
-            $(document).on("click", ".more", function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-            });
-        </script>
-
-        <script>
-            document.addEventListener("DOMContentLoaded", function() {
-                // Initial data and categories
-                var userChartData = getUserChartData('monthly');
-                var userCategories = getUserChartCategories('monthly');
-
-                // Chart options
-                var userOptions = {
-                    chart: {
-                        type: 'line',
-                        zoom: {
-                            enabled: false
+        @section('section_script')
+            <script>
+                $('#zero-config').DataTable({
+                    "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
+                        "<'table-responsive'tr>" +
+                        "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
+                    "oLanguage": {
+                        "oPaginate": {
+                            "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
+                            "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                         },
-                        toolbar: {
-                            show: false
-                        }
+                        "sInfo": "Showing page PAGE of _PAGES_",
+                        "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
+                        "sSearchPlaceholder": "Search...",
+                        "sLengthMenu": "Results :  _MENU_",
                     },
-                    series: userChartData,
-                    xaxis: {
-                        categories: userCategories
+                    "stripeClasses": [],
+                    "lengthMenu": [7, 10, 20, 50],
+                    "pageLength": 10
+                });
+
+                $('#zero-config2').DataTable({
+                    "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
+                        "<'table-responsive'tr>" +
+                        "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
+                    "oLanguage": {
+                        "oPaginate": {
+                            "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
+                            "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
+                        },
+                        "sInfo": "Showing page PAGE of _PAGES_",
+                        "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
+                        "sSearchPlaceholder": "Search...",
+                        "sLengthMenu": "Results :  _MENU_",
                     },
-                    stroke: {
-                        curve: 'smooth',
-                        width: [4, 4]
-                    }
-                };
+                    "stripeClasses": [],
+                    "lengthMenu": [7, 10, 20, 50],
+                    "pageLength": 10
+                });
 
-                // Create the chart
-                var userChart = new ApexCharts(document.querySelector("#user-chart"), userOptions);
-                userChart.render();
 
-                // Event listener for filter select element
-                document.getElementById('graph-filter').addEventListener('change', function(event) {
-                    var selectedFilter = event.target.value;
-                    userChartData = getUserChartData(selectedFilter);
-                    userCategories = getUserChartCategories(selectedFilter);
+                $(function(e) {
+                    $("#select-all-ids").click(function() {
+                        $(".form-check-input").prop('checked', $(this).prop('checked'));
+                    });
 
-                    userChart.updateSeries(userChartData);
-                    userChart.updateOptions({
-                        xaxis: {
-                            categories: userCategories
+                    $(".form-check-input").click(function() {
+                        if (!$(this).prop('checked')) {
+                            $("#select-all-ids").prop('checked', false);
+                        } else {
+                            if ($(".form-check-input:checked").length === $(".form-check-input").length) {
+                                $("#select-all-ids").prop('checked', true);
+                            }
                         }
                     });
+
+                    $(document).on("click", "#download-selected", function(e) {
+                        e.preventDefault();
+
+                        var allIds = [];
+
+                        // Iterate over each page of the DataTable
+                        var table = $('#zero-config').DataTable();
+                        for (var i = 0; i < table.page.info().pages; i++) {
+                            table.page(i).draw(false); // Switch to page i
+                            $('#zero-config tbody input:checked').each(function() {
+                                allIds.push($(this).val());
+                            });
+                        }
+
+                        if (allIds.length > 0) {
+                            // If there are selected customers
+                            $('#ids').prop('disabled', false);
+                            $('#all_id').prop('disabled', true);
+                            $('#ids').val(allIds);
+                            // Now submit the form or perform download action
+                            $('#customer-form').submit(); // Or perform your download action here
+                        } else {
+                            // No customers selected
+                            toastr.error("Please select at least one customer to download.");
+                        }
+                    });
+
+
+
+
+                    $(document).on("click", "#download_all", function(e) {
+                        $('#all_id').prop('disabled', false);
+                        $('#ids').prop('disabled', true);
+                    })
                 });
-            });
 
-            function getUserChartData(filter) {
-                switch (filter) {
-                    case 'monthly':
-                        return [{
-                                name: 'Total Accounts',
-                                data: <?php echo json_encode(array_values($dataMonthlyWithType3)); ?>
+                $(document).on("click", ".more", function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                });
+            </script>
+            <script>
+                $(document).ready(function() {
+                    $('<button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-mid avatar-indicators avatar-online"><h3>Export</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a></div><div class="dropdown-item"><a href="javascript:void(0)" id="download-selected"><span id="export">Download Selected</span></a></div></div></li></ul></button>')
+                        .insertBefore("#zero-config_filter label");
+
+                    $("#zero-config").on("click", ".sub_admin_permission", function() {
+                        var Name = $(this).data('name');
+                        var Price = $(this).data('price');
+                        var SubID = $(this).data('subscription-id');
+                        var CustID = $(this).data('customer-id');
+                        var SubStatus = $(this).data('subscription-status');
+                        var startDate = $(this).data('start-date');
+                        var endDate = $(this).data('end-date');
+                        var nextDate = $(this).data('next-date');
+                        var formattedPrice = '$' + Price;
+
+                        $('.subadmin-option span').eq(0).text(Name);
+                        $('.subadmin-option span').eq(1).text(formattedPrice);
+                        $('.subadmin-option span').eq(2).text(SubID);
+                        $('.subadmin-option span').eq(3).text(CustID);
+                        $('.subadmin-option span').eq(4).text(SubStatus);
+                        $('.subadmin-option span').eq(5).text(startDate);
+                        $('.subadmin-option span').eq(6).text(endDate);
+                        $('.subadmin-option span').eq(7).text(nextDate); // Corrected index for next-date
+                    });
+                });
+            </script>
+
+            <script>
+                document.addEventListener("DOMContentLoaded", function() {
+                    // Initial data and categories
+                    var userChartData = getUserChartData('monthly');
+                    var userCategories = getUserChartCategories('monthly');
+
+                    // Chart options
+                    var userOptions = {
+                        chart: {
+                            type: 'line',
+                            zoom: {
+                                enabled: false
                             },
-                            {
-                                name: 'Total Subscribed',
-                                data: <?php echo json_encode(array_values($dataMonthlyWithType4)); ?>
+                            toolbar: {
+                                show: false
                             }
-                        ];
-                    case 'quarterly':
-                        return [{
-                                name: 'Total Accounts',
-                                data: <?php echo json_encode(array_values($dataQuarterlyWithType3)); ?>
-                            },
-                            {
-                                name: 'Total Subscribed',
-                                data: <?php echo json_encode(array_values($dataQuarterlyWithType4)); ?>
+                        },
+                        series: userChartData,
+                        xaxis: {
+                            categories: userCategories
+                        },
+                        stroke: {
+                            curve: 'smooth',
+                            width: [4, 4]
+                        }
+                    };
+
+                    // Create the chart
+                    var userChart = new ApexCharts(document.querySelector("#user-chart"), userOptions);
+                    userChart.render();
+
+                    // Event listener for filter select element
+                    document.getElementById('graph-filter').addEventListener('change', function(event) {
+                        var selectedFilter = event.target.value;
+                        userChartData = getUserChartData(selectedFilter);
+                        userCategories = getUserChartCategories(selectedFilter);
+
+                        userChart.updateSeries(userChartData);
+                        userChart.updateOptions({
+                            xaxis: {
+                                categories: userCategories
                             }
-                        ];
-                    case 'yearly':
-                        return [{
-                                name: 'Total Accounts',
-                                data: <?php echo json_encode(array_values($dataYearlyWithType3)); ?>
-                            },
-                            {
-                                name: 'Total Subscribed',
-                                data: <?php echo json_encode(array_values($dataYearlyWithType4)); ?>
-                            }
-                        ];
-                    default:
-                        return [];
+                        });
+                    });
+                });
+
+                function getUserChartData(filter) {
+                    switch (filter) {
+                        case 'monthly':
+                            return [{
+                                    name: 'Total Accounts',
+                                    data: <?php echo json_encode(array_values($dataMonthlyWithType3)); ?>
+                                },
+                                {
+                                    name: 'Total Subscribed',
+                                    data: <?php echo json_encode(array_values($dataMonthlyWithType4)); ?>
+                                }
+                            ];
+                        case 'quarterly':
+                            return [{
+                                    name: 'Total Accounts',
+                                    data: <?php echo json_encode(array_values($dataQuarterlyWithType3)); ?>
+                                },
+                                {
+                                    name: 'Total Subscribed',
+                                    data: <?php echo json_encode(array_values($dataQuarterlyWithType4)); ?>
+                                }
+                            ];
+                        case 'yearly':
+                            return [{
+                                    name: 'Total Accounts',
+                                    data: <?php echo json_encode(array_values($dataYearlyWithType3)); ?>
+                                },
+                                {
+                                    name: 'Total Subscribed',
+                                    data: <?php echo json_encode(array_values($dataYearlyWithType4)); ?>
+                                }
+                            ];
+                        default:
+                            return [];
+                    }
                 }
-            }
 
-            function getUserChartCategories(filter) {
-                switch (filter) {
-                    case 'monthly':
-                        return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-                    case 'quarterly':
-                        return ['Q1', 'Q2', 'Q3', 'Q4'];
-                    case 'yearly':
-                        return <?php echo json_encode(array_keys($dataYearlyWithType3)); ?>;
-                    default:
-                        return [];
+                function getUserChartCategories(filter) {
+                    switch (filter) {
+                        case 'monthly':
+                            return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+                        case 'quarterly':
+                            return ['Q1', 'Q2', 'Q3', 'Q4'];
+                        case 'yearly':
+                            return <?php echo json_encode(array_keys($dataYearlyWithType3)); ?>;
+                        default:
+                            return [];
+                    }
                 }
-            }
-        </script>
-
-    @endsection
+            </script>
+        @endsection