@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')}}"/>
@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;
    }

    .export-master-report{
        position: absolute;
        left: 90vw;
        margin-top: -15px;
    }

    #edit_a2p_data{
        border: none;
        background: transparent
    }

</style>


{{-- modal to use --}}
 
<div class="modal fade" id="modal_daily_report" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal">
      <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') }}" method="POST" enctype="multipart/form-data">
                       @csrf
                       <input id="a2p_report_file_id" type="file" name="csv_a2p_report" accept=".csv,.xlsx" 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="modal fade" id="logModal" tabindex="-1" aria-labelledby="logModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logModalLabel">Master A2P Logs</h5>
                <button type="button" class="btn-close btn btn-secondary"" onclick="$('#logModal').modal('hide')" data-bs-dismiss="modal" aria-label="Close">close</button>
            </div>
            <div class="modal-body table-responsive">
                <table class="table table-bordered table-hover text-center" id="logTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Master Account</th>
                            <th>Updated By</th>
                            <th>Updated On</th>
                            <th>Log Data</th>
                        </tr>
                    </thead>
                    <tbody>
                       
                    </tbody>
                </table>
            </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>

        <form method="POST" action="export_a2p_master_report">
            @csrf
            <button type="none" class="export-master-report btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
        </form>

        <div class="card-body table-responsive">
                <table class="table-bordered table-hover text-center" id="a2p_table">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Username</th>
                            <th>Channel Type</th>
                            @if($access==true)
                                <th>Provider</th>
                            @endif
                            <th>Client</th>
                            <th>Type</th>
                            <th>Billing Mode</th>
                            <th>Billing Type</th>
                            <th>Selling Price</th>
                            <th>Selling Price DLT</th>
                            <th>User Type</th>
                            <th>Month of Onboarding</th>
                            <th>Actions</th>
                            <th>Logs</th>
                        </tr>
                    </thead>
                </table>
        </div>
    </div>
</div>
<script src="{{asset('js/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>

<script>

    function downloadSampleCSV(){
        // CSV file for Sample Folder
        var csvRelativePath = "{{ asset('Data/sample_a2p_master_report.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);
    }

    function displayLog(id){
        $('#logModal').modal('show')

        $("#logTable").DataTable().clear().destroy();
            $('#logTable').DataTable({
                "processing": true,
                "serverSide": false,
                "paging": true,
                "searching": true,
                "scrollX": true,
                "lengthChange": true,
                "ordering": true,
                "scrollY": 400,
                "pageLength": 20,
                "scrollCollapse": true,
            "order": [
                [0, "asc"]
            ],
            "language": {
                search: '',
                searchPlaceholder: "Search...",
            },
            "ajax": {
                "url": "{{ url('get_a2p_master_log') }}",
                "dataType": "json",
                "type": "POST",
                "data": {
                    _token: "{{csrf_token()}}",
                    id:id
                },
            },
            "columns": [
            {
                "data": "log_id",
                "render": function(data, type, row, meta) {
                    return row.log_id;
                }
            },
            {
                "data": "action_id",
                "render": function(data, type, row, meta) {
                    return `${row.username} (${row.action_id})`;
                }
            },
            {
                "data": "updated_by",
                "render": function(data, type, row, meta) {
                    return `${ row.updated_user ?? 'NA' } (${row.updated_by})`;
                }
            },
            {
                "data": "updated_on",
                "render": function(data, type, row, meta) {
                    return data;
                }
            },
            {
                "data": "log_data",
                "render": function(data, type, row, meta) {
                    return data;
                }
            },
        
            ],
            "initComplete": function(settings, json) {
                setTimeout(function() {
                    $('#logTable').DataTable().columns.adjust().draw();
                }, 200);
            }
        })
    }

    $(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,
        "searching": true,
        "scrollX": true,
        "lengthChange": true,
        "ordering": true,
        "bLengthChange": true,
        "scrollY": 400,
        "pageLength": 20,
        "scrollCollapse": true,
    "order": [
        [0, "asc"]
    ],
    "language": {
        search: '',
        searchPlaceholder: "Search...",
    },
    "ajax": {
        "url": "{{ url('getA2PReport') }}",
        "dataType": "json",
        "type": "POST",
        "data": {
            _token: "{{csrf_token()}}",
        },
    },
        "columns": [
            { 
                "data": "id", 
                "render": function(data, type, row, meta) {
                    return row.id;
                }
            },
            { 
                "data": "username", 
                "render": function(data, type, row, meta) {
                    return row.username?row.username:"NA";
                }
            },
            { 
                "data": "channel_type", 
                "render": function(datas, type, row, meta) {
                    let data = 'NA';
                    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 data = "NA";

                    return data;
                }
            },
            @if($access==true)
            { 
                "data": "provider",
                "render": function(data, type, row, meta) {
                    return row.provider?row.provider:"NA";
                }
            },
            @endif
            { 
                "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=> EndUser2=> Reseller*/
                    return row.type==1?"EndUser":(row.type==2?"Reseller":"NA");
                }
            },
            { 
                "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": "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": "month_of_onboarding", 
                "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>`;
                    return edit_enable;

                    let edit_disabled = `<i class="edit-data fa fa-edit greyIcon creditbtn"></i>`;
                    @can('isSupport')
                        return edit_enable;
                    @endcan
                    return edit_disabled;
                }
            },
            {
                "data": "month_of_onboarding", 
                "render": function(data, type, row, meta) {
                    return `
                        <i class="btn btn-primary" onClick="displayLog('${row.id}')">view log</i>
                    `
                }
            },
        ]
    });
}

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 
    */
    Papa.parse(file, {
        complete: function(results) {
            const rows = results.data;
            const columnCounts = rows.map(row => row.length);

            const maxColumnCount = Math.max(...columnCounts);
            if (maxColumnCount !== 11) {
                alert(`Please look into Sample csv for your reference, some rows have ${maxColumnCount} columns, It should be ${11}`);
                $('#a2p_report_file_id').val('');
                return;
            }
        }
    });
});

</script>

@endsection