@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="profile-tab" data-toggle="tab" href="#profile-1" role="tab" aria-controls="profile-1" aria-selected="true">Sale</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link " id="home-tab" data-toggle="tab" href="#home-1" role="tab" aria-controls="home-1" aria-selected="false">Expenses</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">Top Up</a>
                      </li>
                       <li class="nav-item">
                        <a class="nav-link" id="purchase-tab" data-toggle="tab" href="#purchase-1" role="tab" aria-controls="purchase-1" aria-selected="false">Purchase</a>
                      </li>

                       <li class="nav-item">
                        <a class="nav-link" id="cash_register-tab" data-toggle="tab" href="#cash_register" role="tab" aria-controls="cash_register" aria-selected="false">Cash Register</a>
                      </li>
                    </ul>
                    <div class="tab-content">
                      <div class="tab-pane fade " 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>
                          </table>
                      </div>
                    </div>
                      <div class="tab-pane fade show active" id="profile-1" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="card-body" style="overflow-x: auto; -webkit-overflow-x: auto;">

                             <table id="sale" class="table table-striped table-hover table-product  nowrap" style="width: 100%; ">
                                <thead>
                                  <tr>
                                    <th>Id #</th>
                                    <th>Sale Id</th>
                                    <th>Date</th>
                                    <th>Supplier</th>
                                    <th>total Quantity</th>
                                    <th>total Cost</th>
                                    <th>total Price</th>
                                    <th>Paid</th>
                                    <th>Profit</th>
                                    <th>Action</th>
                                    <th>View</th>
                                  </tr>
                                </thead>
                                <tbody>
                                 
                              
                                </tbody>
                              </table>
                       
                        
                      </div>
                    </div>

                         <div class="tab-pane fade " id="contact-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 class="tab-pane fade " id="purchase-1" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="card-body" style="overflow-x: auto; -webkit-overflow-x: auto;">
                              <table id="purchase" class="table table-striped table-hover table-product  nowrap" style="width: 100%; ">
                                <thead>
                                  <tr>
                                      <th>Id #</th>
                              <th>Purchase Id</th>
                              <th>Date</th>
                              <th>Supplier</th>
                              <th>total Quantity</th>
                              <th>total Cost</th>
                              <th>total Paid</th>
                              <th>Status</th>
                              <th>view</th>
                                  </tr>
                                </thead>
                                <tbody>
                                 
                              
                                </tbody>
                              </table>
                        
                      </div>
                    </div>
                  <div class="tab-pane fade " id="cash_register" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="card-body" style="overflow-x: auto; -webkit-overflow-x: auto;">
                              <table id="cashRegister" class="table table-striped table-hover table-product  nowrap" style="width: 100%; ">
                                <thead>
                                  <tr>
                                  <th>Date</th>
                                  <th>Sale Cash <br> Amount</th>
                                  <th>Purchase Cash <br>Payment</th>
                                  <th>Expenses Cash <br>Payment</th>
                                  <th>Star Cash</th>
                                  <th>Balance</th>
                                  <th>End Cash</th>
                                  <th>Different</th>
                                  <th>View</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-daily-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) 
            );
        }


        });
   
      

         $('#sale').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"]
            ],
            order: [[0, 'desc']],
            ajax: "{{ url('list_sale_by_date') }}/" + date,
            columns: [
                {
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'sale_reference',
                    name: 'sale_reference'
                },
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'quantity',
                    name: 'quantity'
                },
                {
                    data: 'total_cost',
                    name: 'total_cost',
                    render: function(data, type, row) {
                    return parseFloat(data).toLocaleString('en-US', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                }

                },
                {
                    data: 'final_total_price',
                    name: 'final_total_price',
                    render: function(data, type, row) {
                    return parseFloat(data).toLocaleString('en-US', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                }

                },
                {
                    data: 'received_amount',
                    name: 'received_amount',
                    render: function(data, type, row) {
                    return parseFloat(data).toLocaleString('en-US', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                }

                },

                

                {
                data: 'received_amount',
                name: 'received_amount',
                render: function(data, type, row) {
                    var profit = parseFloat(data) - parseFloat(row.total_cost); // Apply parseFloat to both values
                    return profit.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
                }
                },
                {
                    data: 'id',
                    name: 'view',
                    render: function(data, type, row, meta) {
                      return `
                        <div class="dropdown" style="display: inline-block;">
                        <button 
                          class="btn btn-sm btn-secondary dropdown-toggle" 
                          type="button" 
                          data-bs-toggle="dropdown" 
                          aria-expanded="false"
                          style="background-color: #6c757d; border-color: #6c757d; padding: 5px 10px; font-size: 14px; border-radius: 4px;"
                        >
                        Action
                        </button>
                        <ul class="dropdown-menu shadow-sm" style="min-width: 120px;">
                          <li><a class="dropdown-item text-primary add-payment" id="addpayment" data-toggle="modal" data-id ="${data}" data-outstanding-amount="${row.outstanding_amount}" data-target="#exampleModal">Add Payment</a></li>
                          <li><a class="dropdown-item text-danger" href="#">Angular</a></li>
                          <li><a class="dropdown-item text-success" href="#">Vue</a></li>
                          <li><a class="dropdown-item text-warning" href="#">Svelte</a></li>
                        </ul>
                      </div>
                      `;
                  }
                },
                {
                    data: 'id',
                    name: 'view',
                    render: function(data, type, row, meta) {
                        return `<button type="button" class="btn  btn-outline-success view"  data-id="${data}" style="height:32px; margin:0px;">View</button>`;
                    }
                },

            ],


            createdRow: function(row, data, dataIndex) {
                $(row).css('font-size', '15px');
           
        }
        });



 $('#purchase').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"]
            ],
            order: [[0, 'desc']],
            ajax: "{{ url('list_purchase_by_date') }}/" + date,
            columns: [
                {
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'purchases_id',
                    name: 'purchases_id'
                },
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'total_quantity',
                    name: 'total_quantity'
                },
                {
                    data: 'total_cost',
                    name: 'total_cost',
                    render: function(data, type, row) {
                    return parseFloat(data).toLocaleString('en-US', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                }

                },
                {
                    data: 'total_paid',
                    name: 'total_paid',
                    render: function(data, type, row) {
                    return parseFloat(data).toLocaleString('en-US', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                }

                },
                 
                {
                    data: 'status',
                    name: 'status'
                },
                   {
                    data: 'id',
                    name: 'view',
                    render: function(data, type, row, meta) {
                      return `
                        <div class="dropdown" style="display: inline-block;">
                        <button 
                          class="btn btn-sm btn-secondary dropdown-toggle" 
                          type="button" 
                          data-bs-toggle="dropdown" 
                          aria-expanded="false"
                          style="background-color: #6c757d; border-color: #6c757d; padding: 5px 10px; font-size: 14px; border-radius: 4px;"
                        >
                        Action
                        </button>
                        <ul class="dropdown-menu shadow-sm" style="min-width: 120px;">
                          <li><a class="dropdown-item text-primary add-payment" id="addpayment" data-toggle="modal" data-id ="${data}" data-outstanding_amount="${row.outstanding_amount}" data-target="#exampleModal">Add Payment</a></li>
                          <li><a class="dropdown-item text-danger view"  data-id="${data}">View</a></li>
                        </ul>
                      </div>
                      `;
                  }
                },
               
              
              
            ],


           
            createdRow: function(row, data, dataIndex) {
            // Example condition to change font color
            // Adjust condition as needed
                $(row).css('font-size', '15px');
           
        }
        });









    $('#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-daily-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'
                },
               
            ]
        


        });


$('#cashRegister').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 : "{{ url('get_daily_report_list_by_date') }}/" + date,
            dataType: 'json',
            dataSrc: '', // Use an empty string if your data array is directly returned
        },
          columns: [
            { data: 'date', name: 'date' },
            {
                data: 'total_Sale_amount',
                name: 'total_Sale_amount',
                render: function(data, type, row) {
                    return parseFloat(data).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                }
            },
            {
                data: 'purchase_amount',
                name: 'purchase_amount',
                render: function(data, type, row) {
                    return parseFloat(data).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                }
            },

            
            {
                data: 'total_expenses',
                name: 'total_expenses',
                render: function(data, type, row) {
                    return parseFloat(data).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                }
            },
             {
                data: 'total_start_cash_registers',
                name: 'total_start_cash_registers',
                render: function(data, type, row) {
                    return parseFloat(data).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                }
            },
              

            
          {
            data: null,
            render: function(data, type, row) {
              let saleAmount = parseFloat(row.total_Sale_amount) || 0;
              let start_cash_registers = parseFloat(row.total_start_cash_registers) || 0;
              let purchaseAmount = parseFloat(row.purchase_amount) || 0;
              let expenses = parseFloat(row.total_expenses) || 0;
              let balance = (start_cash_registers + saleAmount) - (purchaseAmount + expenses);
              var textColorClass = balance < 0 ? 'text-danger' : '';
              var formattedResult = balance.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

              return '<span class="' + textColorClass + '">' + formattedResult + '</span>';
            }
          },

          {
            data: 'total_end_cash_registers',
            name: 'total_end_cash_registers',
              render: function(data, type, row) {
                    return parseFloat(data).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                }
          },
           {
            data: null,
            render: function(data, type, row) {
              let saleAmount = parseFloat(row.total_Sale_amount) || 0;
              let start_cash_registers = parseFloat(row.total_start_cash_registers) || 0;
              let total_end_cash_registers = parseFloat(row.total_end_cash_registers) || 0;
              let purchaseAmount = parseFloat(row.purchase_amount) || 0;
              let expenses = parseFloat(row.total_expenses) || 0;
              let balance = (start_cash_registers + saleAmount) - (purchaseAmount + expenses);
              let dif = total_end_cash_registers -  balance;
              var textColorClass = dif < 0 ? 'text-danger' : '';
              var formattedResult = dif.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

              return '<span class="' + textColorClass + '">' + formattedResult + '</span>';
            }
          },

          {
                data: 'date',
                name: 'date',
                render: function(data, type, row, meta) {
                    return `<button type="button" class="btn btn-outline-success view" data-id="${data}" style="height:32px; margin:0px;">View</button>`;
                }
            }
        ],
        createdRow: function(row, data, dataIndex) {
            $(row).css('font-size', '15px'); // Example row styling
        }
    });
      
  

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