@extends('layouts.app')
@section('content')
<style>
  button.dt-button, div.dt-button, a.dt-button, input.dt-button {
    border-radius: 5px;
    color: white;
    background-color: rgb(197, 7, 178);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), input.dt-button:hover:not(.disabled) {
    border: 1px solid #666;
    background-color: rgb(29, 29, 29);
}

.text-danger {
    color: red;
    font-weight: 900;
}

</style>
      <!-- partial -->
      <div class="main-panel">
        <div class="content-wrapper">
         
          <div class="row grid-margin">
            <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                  <div class="card-body">
                    <h4 class="card-title">Basic Tab</h4>
                    <p class="card-description">Horizontal bootstrap tab</p>
                    <ul class="nav nav-tabs" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home-1" role="tab" aria-controls="home-1" aria-selected="true">Expenses</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile-1" role="tab" aria-controls="profile-1" aria-selected="false">Top Up</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact-1" role="tab" aria-controls="contact-1" aria-selected="false">Contact</a>
                      </li>
                    </ul>
                    <div class="tab-content">
                      <div class="tab-pane fade show active" id="home-1" role="tabpanel" aria-labelledby="home-tab">
                        <div class="card-body" style="overflow-x: auto; -webkit-overflow-x: auto;">
                        <table id="expenses" class="table table-striped table-hover table-product  nowrap" style="width: 100%; ">
                            <thead>
                              <tr>
                                  <th>Date</th>
                                  <th>Time</th>
                                  <th>Title</th>
                                  <th>Category</th>
                                  <th>Sub Category</th>
                                  <th>Amount</th>
                                  <th>Branch</th>
                              </tr>
                            </thead>
                            <tbody>
                             
                          
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="4" style="text-align:right">Total:</th>
                                    <th></th>
                                    <th colspan="2"></th>
                                </tr>
                            </tfoot>
                          </table>
                      </div>
                    </div>
                      <div class="tab-pane fade" id="profile-1" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="card-body" style="overflow-x: auto; -webkit-overflow-x: auto;">
                            <table id="topup" class="table table-striped table-hover table-product  nowrap" style="width: 100%; ">
                                <thead>
                                  <tr>
                                      <th>Date</th>
                                      <th>Time</th>
                                      <th>Title</th>
                                      <th>Top Up</th>
                                      <th>Description</th>
                                  </tr>
                                </thead>
                                <tbody>
                                 
                              
                                </tbody>
                              </table>
                        
                      </div>
                    </div>
                    </div>
                  </div>
                </div>
              </div>
          </div>
         
          <div class="content-wrapper">
            {{-- <div class="page-header">
              <h3 class="page-title">
                Data table
              </h3>
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="#">Tables</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Data table</li>
                </ol>
              </nav>
            </div> --}}
          
          </div>
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-body">
                  <div class="d-md-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center mb-3 mb-md-0">
                      <button class="btn btn-social-icon btn-facebook btn-rounded">
                        <i class="fab fa-facebook-f"></i>
                      </button>
                      <div class="ml-4">
                        <h5 class="mb-0">Facebook</h5>
                        <p class="mb-0">813 friends</p>
                      </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 mb-md-0">
                      <button class="btn btn-social-icon btn-twitter btn-rounded">
                        <i class="fab fa-twitter"></i>
                      </button>
                      <div class="ml-4">
                        <h5 class="mb-0">Twitter</h5>
                        <p class="mb-0">9000 followers</p>
                      </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 mb-md-0">
                      <button class="btn btn-social-icon btn-google btn-rounded">
                        <i class="fab fa-google-plus-g"></i>
                      </button>
                      <div class="ml-4">
                        <h5 class="mb-0">Google plus</h5>
                        <p class="mb-0">780 friends</p>
                      </div>
                    </div>
                    <div class="d-flex align-items-center">
                      <button class="btn btn-social-icon btn-linkedin btn-rounded">
                        <i class="fab fa-linkedin-in"></i>
                      </button>
                      <div class="ml-4">
                        <h5 class="mb-0">Linkedin</h5>
                        <p class="mb-0">1090 connections</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- content-wrapper ends -->
        <!-- partial:../../partials/_footer.html -->
        <footer class="footer">
          <div class="d-sm-flex justify-content-center justify-content-sm-between">
            <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2025  <a href="https://www.urbanui.com/" target="_blank">Urbanui</a>. All rights reserved.</span>
            <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Hand-crafted & made with <i class="far fa-heart text-danger"></i></span>
          </div>
        </footer>
        <!-- partial -->
      </div>
     
     
      <script>
  function getQueryParam(param) {
        var urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(param);
    }
    $( document ).ready(function() {
    // Get the 'id' parameter
    var date = getQueryParam('date');

    $('#YearMonth').html(date);

    $('#expenses').DataTable({
            dom: "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            processing: true,
            info: true,
            responsive: true,
            lengthMenu: [
                [10, 25, 50, 100, 200, -1],
                [10, 25, 50, 100, 200, "All"]
            ],
            ajax: {
            url: "{{ route('get-annualy-report-data') }}",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                'date': date // Pass the date as a parameter
            },
            type: "POST",
        },
            columns: [
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'time',
                    name: 'time'
                },
                {
                    data: 'expenses',
                    name: 'expenses'
                },
                {
                    data: 'expenses_category',
                    name: 'expenses_category'
                },
                {
                    data: 'expenses_sub_category',
                    name: 'expenses_sub_category'
                },
              
                {
                    data: 'amount',
                    name: 'amount',
                    render: function(data, type, row, meta) {
                        var Payment = parseFloat(row.amount); // Convert to float if needed
                        let formattedTotalPayment = Payment.toFixed(2);
                        formattedTotalPayment = formattedTotalPayment.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        return formattedTotalPayment;
                    }
                  
                },
                {
                    data: 'branch_name',
                    name: 'branch_name'
                },
               
            ],
            footerCallback: function(row, data, start, end, display) {
            var api = this.api();

            // Function to remove formatting and get float values
            var intVal = function(i) {
                return typeof i === 'string' ?
                    parseFloat(i.replace(/[\$,]/g, '')) :
                    typeof i === 'number' ?
                        i : 0;
            };

            // Total over all pages
            var total = api
                .column(5)
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            // Total over this page
            var pageTotal = api
                .column(5, { page: 'current' })
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            // Format the numbers to currency format
            var formatCurrency = new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'LKR'
            }).format;

            // Update footer with formatted total
            $(api.column(5).footer()).html(
                // formatCurrency(pageTotal) + ' ( ' + formatCurrency(total) + ' total)'
                formatCurrency(pageTotal) 
            );
        }


        });
   
      

    $('#topup').DataTable({
            dom: "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            processing: true,
            info: true,
            responsive: true,
            lengthMenu: [
                [10, 25, 50, 100, 200, -1],
                [10, 25, 50, 100, 200, "All"]
            ],
            ajax: {
            url: "{{ route('get-annualy-topUp-data') }}",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                'date': date // Pass the date as a parameter
            },
            type: "POST",
        },
            columns: [
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'time',
                    name: 'time'
                },
                {
                    data: 'Title',
                    name: 'Title'
                },
                
                {
                    data: 'amount',
                    name: 'amount',
                    render: function(data, type, row, meta) {
                        var Payment = parseFloat(row.amount); // Convert to float if needed
                        let formattedTotalPayment = Payment.toFixed(2);
                        formattedTotalPayment = formattedTotalPayment.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        return formattedTotalPayment;
                    }
                  
                },
                {
                    data: 'description',
                    name: 'description'
                },
               
            ]
        


        });
    });
      </script>
@endsection
      <!-- main-panel ends -->