@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/bootstrap-multiselect.js')}}"></script>
    <link rel="stylesheet" href="{{ asset('css/bootstrap-multiselect.css')}}"/>
    <script src="{{asset('js/jquery.dataTables.min.js')}}"></script>
    <script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
@endsection

@section('content')

<style>
    .card-body form{
        align-items: center;
        justify-content: center;
        margin-top: 5%;
    }
    .export_form{
        position: relative;
        left: 16%;
        top: 20px
    }
    .hide{
        display: none
    }
    .date_box{
        position: relative;
        left: -40vw;
        top: 20px;
    }
    .date_box div{
        margin-left: 20px
    }
    #sales_dropdown{
        margin-top: 20px !important;
        width: 15vw !important;
        margin-left: 20px;
    }
</style>
  
<div class="container-fluid data_body">
    <div class="card">
        <div class="d-flex">
            @include('a2p_menu')
            <div class="form-group col-md-2 d-flex date_box">
                <div id="from_date_div">
                    <label for="date">From Date</label>
                    <input type="date" class="form-control" id="date" name="date" placeholder="Select Start Date">
                </div>
                <div id="to_date_div">
                    <label for="to_date">To Date</label>
                    <input type="date" class="form-control" id="to_date" name="to_date" placeholder="Select End Date">
                </div>
            </div>
        </div>
        <div class="card-body table-responsive">
            <table class="table-bordered table-hover text-center" id="a2p_table">
                <thead>
                    <tr>
                        <th>Channel</th>
                        <th>Total Count</th>
                        <th>Prepaid</th>
                        <th>Postpaid</th>
                        <th id='current_date_heading_sent'>Currrent Date Sent</th>
                        <th>MTD Count</th>
                        <th id='current_date_heading_revenue'>Revenue for current Date</th>
                        <th>MTD Revenue</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td>Total</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>


<script>
    $(document).ready(function() {
        let currDate = new Date().toISOString().split("T")[0];
        $("#date").val(currDate);
        $("#to_date").val(currDate);
        $('#current_date_heading_sent').text(`${currDate} Sent`);
        $(`#current_date_heading_revenue`).text(`${currDate} Revenue`);
        showA2P_table();
    });

    $(document).on('change', '#date, #to_date', function(){
        let selectedToDate = $(`#to_date`).val().split('-');
        let selectedFromDate = $(`#date`).val().split('-');
        if (selectedFromDate < selectedToDate) {
            let messageDate = `(${selectedFromDate[2]}/${selectedFromDate[1]} - ${selectedToDate[2]}/${selectedToDate[1]})`;
            $('#current_date_heading_sent').text(`${messageDate} Sent`);
            $('#current_date_heading_revenue').text(`${messageDate} Revenue`);
            showA2P_table();
        }
    })

    function formatIndianCurrency(value) {
        let num = parseFloat(value); 
        return num.toLocaleString('en-IN', { maximumFractionDigits: 3 });
    }

    // Fetch all data in data-table
    function showA2P_table() {
        let date_selected = $('#date').val();
        let selected_to_date = $('#to_date').val();

        $("#a2p_table").DataTable().clear().destroy();
        $('#a2p_table').DataTable({
            "autoWidth": false,
            "processing": true,
            "serverSide": false,
            "paging": true,
            "pageLength":20,
            "searching": true,
            "scrollX": true,
            "lengthChange": true,
            "ordering": true,
            "fixedHeader": true,
            "bLengthChange": true,
            "scrollY": 400,
            "pageLength": 20,
            "scrollCollapse": true,
            "order": [
                [0, "asc"]
            ],
            "language": {
                search: '',
                searchPlaceholder: "Search...",
            },
            "ajax": {
                "url": "{{ url('getA2pAnalytics') }}",
                "dataType": "json",
                "type": "POST",
                "data": {
                    _token: "{{csrf_token()}}",
                    date:date_selected,
                    to_date:selected_to_date
                },
            },
            "columns": [
                { 
                    "data": "channel_type", 
                    "render": function(data, type, row, meta) {
                        return row.channel_type;
                    }
                },
                { 
                    "data": "count_channel_type", 
                    "render": function(data, type, row, meta) {
                        return row.count_channel_type   ;
                    }
                },
                { 
                    "data": "prepaid", 
                    "render": function(data, type, row, meta) {
                        return row.prepaid;
                    }
                },
                { 
                    "data": "postpaid",
                    "render": function(data, type, row, meta) {
                        return row.postpaid;
                    }
                },
                { 
                    "data": "daily_sent", 
                    "render": function(data, type, row, meta) {
                        return row.daily_sent;
                    }
                },
                { 
                    "data": "monthly_sent", 
                    "render": function(data, type, row, meta) {
                        return row.monthly_sent;
                    }
                },
                { 
                    "data": "revenue", 
                    "render": function(data, type, row, meta) {
                        return (row.revenue % 1) > 0.4 ? Math.ceil(row.revenue) : row.revenue;
                    }
                },
                { 
                    "data": "monthly_revenue", 
                    "render": function(data, type, row, meta) {
                        return (row.monthly_revenue % 1) > 0.4 ? Math.ceil(row.monthly_revenue) : Math.floor(row.monthly_revenue);
                    }
                },
                
            ],
            fnRowCallback: function(nRow, aData) {
                    return nRow;
            },
            "footerCallback": function (row, data, start, end, display) {
                var api = this.api();
                var getColumnTotal = function (columnIndex) {
                    return api
                        .column(columnIndex, { search: 'applied' }) // Consider only filtered rows
                        .data()
                        .reduce((sum, value) => sum + (parseFloat(value) || 0), 0); // Sum up the values
                };

                
                // Get totals for visible/search-filtered data
                let count_channel_type_total = formatIndianCurrency(getColumnTotal(1).toFixed(3));
                let prepaid_total = formatIndianCurrency(getColumnTotal(2).toFixed(3));
                let postpaid_total = formatIndianCurrency(getColumnTotal(3).toFixed(3));
                let daily_sent_total = formatIndianCurrency(getColumnTotal(4).toFixed(3));
                let monthly_sent = formatIndianCurrency(getColumnTotal(5).toFixed(3));
                let revenue_total = formatIndianCurrency(getColumnTotal(6).toFixed(3));
                let monthly_revenue_total = formatIndianCurrency(getColumnTotal(7).toFixed(3));
                
                // Update footer
                $(api.column(1).footer()).html(count_channel_type_total);
                $(api.column(2).footer()).html(prepaid_total);
                $(api.column(3).footer()).html(postpaid_total);
                $(api.column(4).footer()).html(daily_sent_total);
                $(api.column(5).footer()).html(monthly_sent);
                $(api.column(6).footer()).html(Math.ceil(revenue_total));
                $(api.column(7).footer()).html(Math.ceil(monthly_revenue_total));
            }
        });
    }

</script>

@endsection