@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.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{ 
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 5%;
    }

    #a2p_report_file_id{
        width: 75%;
        padding: 8px;
        border: 1px solid rgba(128, 128, 128, 0.281);
        border-radius: 12px;
    }
    #sample_csv_download p{
        position: relative;
        left: 40%;
        width: max-content;
    }

    #sample_csv_download p i{
        font-size: 1.2em;
        cursor: pointer;
        margin-left: 8px;
        transition: 0.5s ease-in-out;
    }

    #sample_csv_download p i:hover{
        color: rgb(120, 120, 120);
    }
    #upload_csv_button{
        margin-left: 20px;
    }

    #file_upload_button{
        margin-left: 12px;
        height: 35px !important;
        width: 15vw!important;
    }
    #edit_a2p_data{
        border: none;
        background: transparent
    }

</style>
  
  <div class="modal fade" id="modal_daily_report" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body">
            <div class="card-header">
                <b> CSV File Upload</b>
               </div>
               <div class="card-body">
                   <form action="{{ url('upload_csv_a2p_daily') }}" method="POST" enctype="multipart/form-data">
                       @csrf
                       <input id="a2p_report_file_id" type="file" name="csv_a2p_report" accept=".csv" required>
                       <button id='upload_csv_button' type="submit" class="btn btn-primary">Upload</button>
                   </form>
               </div>
               <div id="sample_csv_download">
                   <p>
                       sample csv format
                       <i onclick="downloadSampleCSV()" title="Download" class="fa fa-download" aria-hidden="true"></i>
                   </p>
               </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="$('#modal_daily_report').modal('hide')">Close</button>
        </div>
      </div>
    </div>
  </div>

<div class="container-fluid data_body">
    <div class="card">
        <div class="row ml-0 mr-0 mt-4 mb-n2">
            <div class="ml-0 p-2 mr-4 flex">
                @include('a2p_menu')
                  <button id="file_upload_button" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="$('#modal_daily_report').modal('show')">
                    File Upload
                  </button>
            </div>
        </div>
        <div class="card-body table-responsive">
                <table class="table-bordered table-hover text-center" id="a2p_table">
                    <thead>
                        <tr>
                            <th>S No.</th>
                            <th>Username</th>
                            <th>Report Date</th>
                            <th>Channel Type</th>
                            <th>Client</th>
                            <th>Type</th>
                            <th>Sent</th>
                            <th>Delivered</th>
                            <th>Billing Mode</th>
                            <th>Billing Type</th>
                            <th>Selling Price</th>
                            <th>Selling Price DLT</th>
                            <th>Revenue</th>
                            <th>User Type</th>
                            <th>Month of Onboarding</th>     
                            <th>Actions</th> 
                            <th>Logs</th>                            
                        </tr>
                    </thead>
                </table>
        </div>
    </div>
</div>

<script>

    function downloadSampleCSV(){
        // CSV file for Sample Folder
        var csvRelativePath = "{{ asset('Data/sample_a2p_daily_report.csv') }}";
        // public/Data/Daily_data_4_columns.csv
        var filePath = csvRelativePath;
  
        var link = document.createElement('a');
        link.href = filePath;
        link.download = 'sample_a2p_report.csv';
        
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    $(document).ready(function() {
        showA2P_table();
    });

// Fetch all data in data-table
function showA2P_table() {
    $("#a2p_table").DataTable().clear().destroy();
    $('#a2p_table').DataTable({
        "autoWidth": false,
        "processing": true,
        "serverSide": true,
        "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('getA2PDailyReport') }}",
        "dataType": "json",
        "type": "POST",
        "data": {
            _token: "{{csrf_token()}}",
        },
    },
        "columns": [
            { 
                "data": "daily_id", 
                "render": function(data, type, row, meta) {
                    return row.daily_id;
                }
            },
            { 
                "data": "username", 
                "render": function(data, type, row, meta) {
                    return row.username?row.username:"NA";
                }
            },
            { 
                "data": "report_date", 
                "render": function(data, type, row, meta) {
                    return row.report_date?row.report_date:"NA";
                }
            },
            { 
                "data": "channel_type", 
                "render": function(data, type, row, meta) {
                    let channel_type = row.channel_type;

                    if(channel_type==1) data = "A2P";
                    
                    else if(channel_type==2) data = "CPM";
                    
                    else if(channel_type==3) data = "RCS";
                    
                    else if(channel_type==4) data = "WhatsApp Marketing";
                    
                    else if(channel_type==5) data = "WhatsApp Services";
                    
                    else if(channel_type==6) data = "WhatsApp Utility";

                    else if(channel_type==7) data = "WABA";
                    
                    else channel_type = "NA";

                    return channel_type;
                }
            },
            { 
                "data": "client", 
                "render": function(data, type, row, meta) {
                    return row.client?row.client:"NA";
                }
            },
            { 
                "data": "type", 
                "render": function(data, type, row, meta) {
                    /* 0=> Empty  1=> EndUser 2=> Reseller */
                    return row.type==1?"EndUser":(row.type==2?"Reseller":"NA");
                }
            },
            { 
                "data": "sent", 
                "render": function(data, type, row, meta) {
                    return row.sent?row.sent:0;
                }
            },
            { 
                "data": "delivered", 
                "render": function(data, type, row, meta) {
                    return row.delivered?row.delivered:0;
                }
            },
            { 
                "data": "billing_mode", 
                "render": function(data, type, row, meta) {
                    /*  - 1=> Postpaid - 2=> Prepaid - 0=> NULL*/
                    return (row.billing_mode==1?"Postpaid":(row.billing_mode==2?"Prepaid":"NA"));
                }
            },
            { 
                "data": "billing_type", 
                "render": function(data, type, row, meta) {
                    /* 1=> Delivered 2=> Submission  else NA*/
                    return row.billing_type==1?"Delivered":(row.billing_type==2?"Submission":"NA");
                }
            },
            { 
                "data": "selling_price", 
                "render": function(data, type, row, meta) {
                    return row.selling_price?row.selling_price:"0";
                }
            },
            { 
                "data": "selling_price_DLT", 
                "render": function(data, type, row, meta) {
                    return  row.selling_price_DLT?row.selling_price_DLT:0;
                }
            },
            {
                "data": "revenue",
                "render": function(data, type, row, meta) {
                    return row.revenue ?? 0.00;
                }
            }
            ,
            { 
                "data": "user_type", 
                "render": function(data, type, row, meta) {
                    /* Existing -> 1 New -> 2 */
                    return row.user_type==1?"Existing":(row.user_type==2?"New":"NA");
                }
            },
            { 
                "data": "month_of_onboarding", 
                "render": function(data, type, row, meta) {
                    return row.month_of_onboarding?row.month_of_onboarding:"NA";
                }
            },

            /* Edit Option, user can edit any particular row Redirects to a particular page with a form */

            { 
                "data": "data", 
                "render": function(data, type, row, meta) {
                    let edit_enable = `<a href='edit_a2p_data/${row.id}'><i class="edit-data fa fa-edit greenIcon creditbtn"></i></a>`;
                    let edit_disabled = `<i class="edit-data fa fa-edit greyIcon creditbtn"></i>`;
                    @can('isSupport')
                        return edit_enable;
                    @endcan
                    return edit_disabled;
                }
            },
            { 
                "data": "data", 
                "render": function(data, type, row, meta) {
                   return `<button onClick="displayLog('${row.daily_id}')" class='btn-secondary'>View Logs</button>`;
                }
            },
        ]
    });
}


document.getElementById('a2p_report_file_id').addEventListener('change', function(event) {
    const file = event.target.files[0];

    /*
        Papa Phrase Library is being used because 
        in normal checking data is being split on the basis of 
        comma but if some columns have comma or any other operator for 
        seperation then it would give extra count and columns 
    */

    // fetch the data from csv file
    Papa.parse(file, {
        complete: function(results) {

            // get the row count and get th4 row having max number of columns
            //if any row have columns greater then the required or sample csv then show an alert message of using another csv
            const rows = results.data;
            const columnCounts = rows.map(row => row.length);

            const maxColumnCount = Math.max(...columnCounts);

            if (maxColumnCount !== 3) {
                // show the alert message of using another csv
                alert(`Please look into Sample csv for your reference, some rows have ${maxColumnCount} columns, It should be ${3}`);
                $('#a2p_report_file_id').val('');
                return;
            }
        }
    });
});

</script>

@endsection