@extends('layouts.app')
@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title')
RichMedia List
@endsection
<style>
    .border-radius-0 {
    border-radius: 40px;
}
    .rcs-image {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .rcs-thumbnail {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .button_display_images{
        background: transparent;
        border: none;
        font-size: 20px;
    }
    .not_allowed{
        color: rgb(155, 155, 155);
        cursor: not-allowed;
    }

    tbody{
        border-top: 3px solid transparent;
    }
    th{
        font-weight: 500;
    }
    .fa-eye{
        cursor: pointer;
        font-size: 1.2rem;
    }
    #approval_filter_count{
        height: 45px;
        width: 60%;
        margin-left: 5vw;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    } 
    #approval_filter_count input{
        display: none;
    }
    #approval_filter_count button{
        padding: 4px;
        width: 9vw;
        border-radius: 12px;
        border: 1px solid rgba(75, 75, 75, 0.49);
        background: white;
        transition: 0.2s ease-in-out all;
    }

    #approval_filter_count button:hover{
        box-shadow: 0.2 white beige;
        background: rgb(91, 89, 89) !important;
        color: white;
    }
    .dark{
        background: rgb(77, 76, 76) !important;
        color: white;
        border: none;
    }
    </style>
    @include('sms_templates.rcs_header')
<div class="container-fluid">
    <div class="card">
        <div class="card-header row">
            <h3> RichMedia Template Details </h3>
            <div id='approval_filter_count'>
                <label for="total"><button onclick="handleClick('total')" class="dark">Total: {{$status_counter['total_count']}} </button>  <input class="filter_radio" type="radio" id="total" name="brand"> </label>
                <label for="active"><button onclick="handleClick('active')">Active: {{$status_counter['active_status_count']}}</button><input class="filter_radio" type="radio" id="active" name="brand"></label>
                <label for="in_active"> <button onclick="handleClick('in_active')">In-Active: {{$status_counter['deactivated_status_count']}} </button> <input class="filter_radio" type="radio" id="in_active" name="brand"></label>
                <label for="approved"> <button onclick="handleClick('approved')">Approved: {{$status_counter['approved_status_count']}}</button> <input class="filter_radio" type="radio" id="approved" name="brand" ></label>
                <label for="rejected"><button onclick="handleClick('rejected')">Rejected: {{$status_counter['rejected_status_count']}}</button><input class="filter_radio" type="radio" id="rejected" name="brand" ></label>
                <label for="pending"> <button onclick="handleClick('pending')">Pending: {{$status_counter['pending_status_count']}}</button> <input class="filter_radio" type="radio" id="pending" name="brand" ></label>
            </div>
        </div>
        <div class="card-body table-responsive">
            <form class="flex">
                <div class="form-group col-md-2">
                    <label for="period_filter">Choose Time Period</label>
                    <select id="period_filter" class="form-control">
                        <option value='' selected>Select</option>
                        <option value="1">Today</option>
                        <option value="2">Yesterday</option>
                        <option value="3">This Month</option>
                        <option value="4">Last Month</option>
                        <option value="5">Last 6 Months</option>
                        <option value="6">This Year</option>
                        <option value="7">Last Year</option>
                    </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="start_date">From Date</label>
                    <input type="text" class="form-control" id="start_date" name="start_date" placeholder="Select Date" value="">
                </div>
                <div class="form-group col-md-2">
                    <label for="end_date">To Date</label>
                    <input type="text" class="form-control" id="end_date" name="end_date" placeholder="Select Date"  value="">
                </div>

                <div class="form-group col-md-2">
                    <label for="richmedia_type_id">Richmedia Type</label>
                    <select id="richmedia_type_id" name="richmedia_type" class="form-control">
                        <option value="">Select Richmedia Type</option>
                        @foreach ($richmedia_type as $key => $type)
                            <option value="{{ $key }}">{{ $type }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group col-md-2">
                    <label for="template_type_id">Template Type</label>
                    <select id="template_type_id" name="template_type" class="form-control">
                        <option value="">Select Richmedia Type</option>
                        @foreach ($template_type as $key => $type)
                            <option value="{{ $key }}">{{ $type }}</option>
                        @endforeach
                    </select>
                </div>
            </form>
            <table class="table-bordered table-hover text-center" id="rcs-template-table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th> Account Name</th>
                        <th> Header Name </th>
                        <th> Template Name </th>
                        <th> Template Type </th>
                        <th> Suggested Content </th>
                        <th> RichMedia Type</th>
                        <th> RichMedia Title</th>
                        <th> Core Entity</th>
                        <th> Core url</th>
                        <th> RichMedia Image </th> 
                        {{-- <th> RichMedia Thumbnail </th>  --}}
                        <th> Campaign urls</th>
                        <th> Action Tags</th>
                        <th> Created On </th>
                        @can('hasUpdatePermission')
                        <th> Display Status </th>
                        <th> Approval Status </th>
                        <th> Action </th>
                        @endcan
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
<script>
/* call function while DOM get ready to get all records.*/
let filter_type_global = "total";
getrcstemplates();

/*
    - Gets the clicked Button for Filter
    - set the filter globally
    - On Select of Global Filters : Remove all internal filters (Date, Dropdowns)
    - Selection of Date / Period to be accessable on prior to Global
*/
function handleClick(filter_type){

    $('#approval_filter_count button').removeClass('dark');    
    $(`button[onclick="handleClick('${filter_type}')"]`).addClass('dark');
    filter_type_global = filter_type;   // provide the filter type to global variable
    $('#period_filter').val('');
    $("#start_date").val('');
    $("#end_date").val('');
    $('#richmedia_type_id').val('');
    $('#template_type_id').val('');
    getrcstemplates();
}

/**select from date here***/
$("#start_date").datepicker({
    dateFormat: 'yy-mm-dd',
    maxDate: 0,
    autoclose: true,
    todayHighlight: true,
    endDate: 'today',
    onSelect: function (selectedDate) {
        var startDate = $('#start_date').datepicker('getDate');
        $('#end_date').datepicker('option', 'minDate', startDate);
        $('#end_date').datepicker('setDate', startDate);
        getrcstemplates();
        $('#period_filter').val('');
    }
});
/**select to date here***/
$("#end_date").datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: $("#start_date").datepicker("getDate"),
    maxDate: 0,
    autoclose: true,
    todayHighlight: true,
    onClose: function () {
        var startDate = $('#start_date').datepicker('getDate');
        var endDate = $('#end_date').datepicker('getDate');
        if (startDate == null) {
            $('#start_date').datepicker('setDate', endDate);
        }
        if (endDate < startDate) {
            var minDate = $('#end_date').datepicker('option', 'minDate', startDate);
            $('#end_date').datepicker('setDate', minDate);
        }
        getrcstemplates();
    },
    onSelect: function () {
        $('#period_filter').val('');
    }
});

$("body").on("change", "#richmedia_type_id",'#template_type_id', function () {
    getrcstemplates();
})
$("body").on("change", "#template_type_id", function () {
    getrcstemplates();
})

$("body").on("change", "#period_filter", function () {
    var periodValue = $(this).val();
    $("#start_date").val('');
    $("#end_date").val('');
    if (periodValue == '') {
        getrcstemplates();
    }
    //filter by today
    if (periodValue == '1') {
        var start_date = new Date().toJSON().slice(0, 10);
        var end_date = new Date().toJSON().slice(0, 10);
        $('#start_date').val(start_date);
        $('#end_date').datepicker('option', 'minDate', start_date);
        $('#end_date').datepicker('setDate', end_date);
        getrcstemplates();
    }
    //filter by yesterday
    else if (periodValue == '2') {
        var start_date = new Date(Date.now() - 864e5).toJSON().slice(0, 10);
        var end_date = new Date(Date.now() - 864e5).toJSON().slice(0, 10);
        $('#start_date').val(start_date);
        $('#end_date').datepicker('option', 'minDate', start_date);
        $('#end_date').datepicker('setDate', end_date);
        getrcstemplates();
    }
    //filter by this month
    else if (periodValue == '3') {
        var start_date = new Date();
        var end_date = new Date().toJSON().slice(0, 10);
        start_date = new Date(start_date.setMonth(start_date.getMonth()));
        start_date = new Date(start_date.setDate(1));
        start_date = start_date.toJSON().slice(0, 10);
        $('#start_date').val(start_date);
        $('#end_date').datepicker('option', 'minDate', start_date);
        $('#end_date').datepicker('setDate', end_date);
        getrcstemplates();
    }
    //filter by last month
    else if (periodValue == '4') {
        var start_date = new Date();
        var end_date = new Date();
        start_date = new Date(start_date.setDate(1));
        start_date = new Date(start_date.setMonth(start_date.getMonth() - 1));
        start_date = start_date.toJSON().slice(0, 10);
        end_date = new Date(end_date.setDate(1) - 864e5);
        end_date = end_date.toJSON().slice(0, 10);
        $('#start_date').val(start_date);
        $('#end_date').datepicker('option', 'minDate', start_date);
        $('#end_date').datepicker('setDate', end_date);
        getrcstemplates();
    }
    //filter by last 6 month
    else if (periodValue == '5') {
        var start_date = new Date();
        var end_date = new Date();
        end_date = new Date(end_date.setDate(1) - 864e5);
        end_date = end_date.toJSON().slice(0, 10);
        start_date = new Date(start_date.setDate(1));
        start_date = new Date(start_date.setMonth(start_date.getMonth() - 6));
        start_date = start_date.toJSON().slice(0, 10);
        $('#start_date').val(start_date);
        $('#end_date').datepicker('option', 'minDate', start_date);
        $('#end_date').datepicker('setDate', end_date);
        getrcstemplates();
    }
    //filter by this year
    else if (periodValue == '6') {
        var end_date = new Date().toJSON().slice(0, 10);
        var makeDate = new Date(end_date);
        var start_date = new Date(makeDate.setMonth(0));
        start_date = new Date(makeDate.setDate(1));
        start_date = start_date.toJSON().slice(0, 10);
        $('#start_date').val(start_date);
        $('#end_date').datepicker('option', 'minDate', start_date);
        $('#end_date').datepicker('setDate', end_date);
        getrcstemplates();
    }
    //filter by previous year
    else if (periodValue == '7') {
        var end_date = new Date();
        var start_date = new Date();
        end_date = new Date(end_date.setMonth(0));
        end_date = new Date(end_date.setDate(1) - 864e5).toJSON().slice(0, 10);
        start_date = new Date(start_date.setMonth(start_date.getMonth() - 12));
        start_date = new Date(start_date.setMonth(0));
        start_date = new Date(start_date.setDate(1)).toJSON().slice(0, 10);
        $('#start_date').val(start_date);
        $('#end_date').datepicker('option', 'minDate', start_date);
        $('#end_date').datepicker('setDate', end_date);
        getrcstemplates();
    }
});
const videoExtensions = ['mp4', 'mkv', 'avi', 'mov', 'wmv', 'flv', 'webm', 'm4v'];

function closeModal (modalId){
    $(`#${modalId}`).modal('hide');
}

//all records displaying here
function getrcstemplates() {
    var start_date = $('#start_date').val();
    var end_date = $('#end_date').val();
    var richmedia_type_id = $('#richmedia_type_id').val();
    var template_type_id = $('#template_type_id').val();
    $.ajax({
        type: 'POST',
        url: "{{ url('getRcsTemplatedata') }}",
        "data": {
            _token: "{{csrf_token()}}",
            start_date: start_date,
            end_date: end_date,
            filter_type:filter_type_global,
            richmedia_type:richmedia_type_id,
            template_type:template_type_id
        },
        success: function (data) {
            var landingpagedata = data['data'];
            $("#rcs-template-table").DataTable().clear().destroy();
         var table = $('#rcs-template-table').DataTable({
                data: landingpagedata,
                "scrollX": true,
                "scrollY":  400,
                "scrollCollapse": true,
                "paging": true,
                "pageLength": 20,
                "fixedHeader":{ header: true},
                language: { search: '', searchPlaceholder: "Search..." },
                scrollCollapse: true,
                aoColumns: [
                    { data: "", render: function ( data, type, row ) {
                        return '';
				    }
                    },
                    {
                        data: "account_name"
                    },
                    {
                        data: "header_name"
                    },
                    {
                        data: "template_name"
                    },
                    {
                        data: "template_type"
                    },
                    {
                        data: "suggested_content",
                        render: function(data, type, row, meta) {
                            let buttonId = `showContentBtn_${meta.row}`;
                            let modalId = `suggestedContentModal_${meta.row}`;

                            // Split data by '^'
                            let testData = data.split('^');

                            // Generate modal HTML
                            let modalHtml = `
                                <div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}Label" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="${modalId}Label">Suggested Content</h5>
                                            </div>
                                            <div class="modal-body">
                            `;

                            // Add content sections
                            testData.forEach((content, index) => {
                                modalHtml += `
                                    <div>
                                        <h4>Content ${testData.length>1 ?index+1:'' }:</h4>
                                        <pre>${content.trim()}</pre>
                                    </div>
                                    ${testData.length>1?'<hr/>':''}
                                `;
                            });

                            modalHtml += `
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" onClick="closeModal('${modalId}')" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `;

                            // Create button HTML
                            let buttonHtml = `<i class="fa fa-eye" id="${buttonId}"></i>`;

                            // Attach event listener to the button
                            $(document).on('click', `#${buttonId}`, function() {
                                $('body').append(modalHtml); // Append modal to body
                                $(`#${modalId}`).modal('show'); // Show modal
                            });

                            // Remove modal from DOM after it is hidden
                            $(document).on('hidden.bs.modal', `#${modalId}`, function () {
                                $(this).remove();
                            });

                            return buttonHtml;
                        }
                    }
                    ,

                    {
                        data: "rcs_type",
                        render: function(data, type, row, meta){
                            var data = (row.rcs_type == '1' ? 'RichMedia-G' : (row.rcs_type == '2' ? 'RichMedia-Y' : (row.rcs_type=='3'?'Richmedia-YS':'RichMedia-Jio')));
                        return data;
                        }
                    },
                    {
                        data: "rcs_title",
                        render: function(data, type, row, meta){
                            var data = row.rcs_title;
                            if(data.charAt(0)=='['){
                                data = data.substring(1);
                            }
                            if(data.charAt(data.length-1)==']'){
                                data = data.substring(0,data.length-1);
                            }
                        data = data.replace(/"/g, '');
                        return data;
                        }
                    },
                    {
                        data: "core_entity"
                    },
                    {
                        data: "core_url",
                            render: function(data, type, row, meta){
                                var data = (row.core_url != 'NA') ? '<a href="' + row.core_url + '" target="_blank">' + row.core_url + '</a>' : "NA";
                                return data;
                            }
                    },
                    {
                        data: "rcs_image",
                        render: function(data, type, row, meta) {
                            let rcs_type = row.rcs_type;
                            let template_type = row.template_type;
                            let rcs_images = row.rcs_image.split(',');
                            let rcs_thumbnails = row.rcs_thumbnail.split(',');
                            let buttonId = `viewModalBtn_${meta.row}`;
                            
                            let modalHtml = `
                                <div class="modal fade" id="rcsModal_${meta.row}" tabindex="-1" aria-labelledby="rcsModalLabel_${meta.row}" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h6 class="modal-title"><b>Images and Thumbnails</b></h6>
                                            </div>
                                            <div class="modal-body">
                                                <table class="table">
                                                    <tr>
                                                        <th style="width: 50%; text-align: center;">Images/Video</th>
                                                        <th style="width: 50%; text-align: center;">Thumbnail</th>
                                                    </tr>
                            `;

                            // Iterate over both arrays simultaneously
                            for (let i = 0; i < rcs_images.length; i++) {
                                let fileExtension = rcs_images[i].split('.').pop().toLowerCase();
                                modalHtml += '<tr>' +
                                                '<td style="width: 50%;">';
                                // Display image or video
                                if (videoExtensions.includes(fileExtension)) {
                                    modalHtml += '<iframe src="' + rcs_images[i] + '" class="embed-responsive-item" allowfullscreen style="max-width: 100%; max-height: 400px;"></iframe>';
                                } else if (rcs_images[i] === 'NA') {
                                    modalHtml += 'N/A'; // Display N/A if the item is not available
                                } else {
                                    modalHtml += '<img src="' + rcs_images[i] + '" class="img-fluid rcs-image" alt="Image/Video" style="max-width: 100%; max-height: 400px;">';
                                }
                                modalHtml += `
                                                <br>
                                                <a href="${rcs_images[i]}" target="_blank">
                                                    <img src="${rcs_images[i]}" style="display: none;" alt="NA">
                                                </a> &nbsp; 
                                                <a href="getFileFromBucket?path=${rcs_images[i]}" data-path="${rcs_images[i]}">
                                                    <i title="Download" class="fa fa-cloud-download" aria-hidden="true"></i>
                                                    <i class="bi bi-cloud-arrow-up"></i>
                                                </a>
                                                </td>
                                                <td style="width: 50%;">`;
                     
                                // Display thumbnail or N/A
                                if (rcs_thumbnails[i] && rcs_thumbnails[i] !== 'NA' && rcs_thumbnails[i]!='NULL' && rcs_thumbnails[i]!=null) {
                                    modalHtml += '<img src="' + rcs_thumbnails[i] + '" class="img-fluid rcs-thumbnail" alt="Thumbnail" style="max-width: 100%; max-height: 400px;">';
                                    modalHtml += `
                                                <br>
                                                <a href="${rcs_thumbnails[i]}" target="_blank">
                                                    <img src="${rcs_thumbnails[i]}" style="display: none;" alt="NA">
                                                </a> &nbsp; 
                                                <a href="rcsImageBucket?path=${rcs_thumbnails[i]}" data-path="${rcs_thumbnails[i]}">
                                                    <i title="Download" class="fa fa-cloud-download" aria-hidden="true"></i>
                                                    <i class="bi bi-cloud-arrow-up"></i>
                                                </a>
                                                </td>
                                                <td style="width: 50%;">`;

                                } else {
                                    modalHtml += 'N/A'; // Display N/A if thumbnail data is null or "NA"
                                }
                                modalHtml +=     '</td>' +
                                            '</tr>';
                            }

                            modalHtml +=           '</table>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>';

                            let buttonHtml = '<button type="button" class="button_display_images" id="' + buttonId + '"><i class="fa fa-eye"></i></button>';

                            if((rcs_type==1 && template_type=='text_message') || rcs_type==3){
                                buttonHtml = '<button type="button" class="button_display_images" id="' + buttonId + ' disabled"><i class="fa fa-eye not_allowed"></i></button>';
                            }

                            $(document).on('click', '#' + buttonId, function() {
                                $('body').append(modalHtml);
                                $('#rcsModal_' + meta.row).modal('show');
                            });

                            $(document).on('hidden.bs.modal', '#rcsModal_' + meta.row, function () {
                                $(this).remove();
                            });

                            return buttonHtml;
                        }
                    }

                   ,
                    // {
                    //     data: "rcs_thumbnail",
                    //     render: function(data, type, row, meta) {
                    //         // if data is not NA i.e. image is there then only show image url else donot show
                    //     if(data!='NA'){
                    //         data = (row.rcs_type != '3' ? '<div><a href="' + row.rcs_thumbnail + '" target="_blank"><img src="' + row.rcs_thumbnail + '" style="width: 80%;" alt="NA"></a> &nbsp; <a href="rcsImageBucket?path=' + row.rcs_thumbnail + '" data-path="' + row.rcs_thumbnail + '"><i title="Download" class="fa fa-cloud-download" aria-hidden="true"></i> <i  class="bi bi-cloud-arrow-up"></i></a></div>' : 'NA'); 
                    //     }
                    //     return data;
                    //     }
                    // },
                    {
                        data: "campaign_urls",
                        render: function(data, type, row, meta) {
                            if(row.template_type=='carousel'){
                                let cleanedData = data.replace(/[\[\]"]/g, '');
                                let urls = cleanedData.split(',');
                                var formattedUrls = urls.map(function(url) {
                                    return '<a href="' + url.trim() + '" target="_blank">' + url.trim() + '</a><br>';
                                });
                                return formattedUrls.join("");
                            }
                            else if(type === "display" && data) {
                                var urls = data.split(",");
                                var formattedUrls = urls.map(function(url) {
                                    return '<a href="' + url.trim() + '" target="_blank">' + url.trim() + '</a><br>';
                                });
                                return formattedUrls.join("");
                            }
                            return data;
                        }
                    },
                    {
                        data: "action_tags",
                        render: function(data, type, row, meta) {
                            if(row.template_type=='carousel'){
                                let cleanedData = data.replace(/[\[\]"]/g, '');
                                let items = cleanedData.split(',');
                                let html = '';
                                items.forEach(item => {
                                    html += item.trim() + '<br>'; 
                                });
                                return html;
                            }
                            else{
                                if (type === "display" && data) {
                                    var tags = data.split(",");
                                    var formattedText = tags.map(function(tag) {
                                        return tag.trim();
                                    }).join("<br>");
                                    return formattedText;
                                }
                            }
                            return data;
                        }
                    },
                    {
                        data: "created_on"
                    },
                    @can('hasUpdatePermission')
                    //0-Deactivated,1- Approved,2- pending,3- Rejected
                    { data: "status",
                    render: function(data, type, row, meta){
                        if(row.status == 2) {
                        data = '<input id="'+row.id+'" type="checkbox" '+(row.status ==1 ? 'checked' : '' )+' data-onstyle="success" class="toggle-event action" data-toggle="toggle" data-offstyle="warning" data-on="Active" data-off="Pending" data-size="small" data-info="'+row.id+'" >';
                        } else if (row.status == 0) {
                            data = '<input id="'+row.id+'" type="checkbox" '+(row.status ==1 ? 'checked' : '' )+' data-onstyle="success" class="toggle-event action" data-toggle="toggle" data-offstyle="danger" data-on="Active" data-off="De-Active" data-size="small" data-info="'+row.id+'" >';
                        }else if (row.status == 1) {
                            data = '<input id="'+row.id+'" type="checkbox" '+(row.status ==1 ? 'checked' : '' )+' data-onstyle="success" class="toggle-event action" data-toggle="toggle" data-offstyle="danger" data-on="Active" data-off="De-Active" data-size="small" data-info="'+row.id+'" >';
                        }else if (row.status == 3){
                            return '<span class="number-quality-low">' + (row.status == 3 ? 'Rejected' : 'NA') + '</span>';
                        }
                        return data;
                        }
                },
                { data: "is_approved",
                    render: function(data, type, row, meta){
                        // here we can change the status of activity
                        if(row.status==1){
                                let checked = row.is_approved === 1 ? 'checked' : '';
                                data =  `<input type="checkbox" data-onstyle="success" data-offstyle="${row.is_approved==2?"warning":"danger"}"  class="toggle-event action toggle-approval" id="${row.is_approved == 1 ? 'approved_button' : (row.is_approved == 2 ? 'pending_button' : 'rejected_button')}"  data-changestatus="${row.is_approved == 1 ? 'make_deactivate' : 'make_approved'}" data-id="${row.id}" data-toggle="toggle" data-on="Approved" data-off="${row.is_approved==3?"Rejected":"Pending"}" ${checked}>`;
                         }
                        // for deactivated data
                        // when status for that row is deactivated then make the Buttons as Disabled
                        else{
                            let checked = row.is_approved === 1 ? 'checked' : '';
                            data =  `<input type="checkbox" data-onstyle="success" data-offstyle="${row.is_approved==2?"warning":"danger"}"  class="toggle-event action toggle-approval" data-id="${row.id}" data-toggle="toggle" data-on="Approved" data-off="${row.is_approved==3?"Rejected":"Pending"}" data-changestatus="no_change" ${checked}>`;
                         
                        }
                        return data;
                        }
                },
                    { 
                        data: "",
                        render: function(data, type, row, meta){
                        data = '<a id="edit'+row.id+'" title="Edit RCS Template" href="editRcsTemplate/'+row.id +'" class="btn btn-info edit-data fa fa-edit cursor-pointer greyIcon creditbtn '+((row.status == 0 || row.status == 2 || row.status == 3) ? 'disabled': 'active')+'">Edit</a>';
                        return data;
                    }
                    },
                @endcan
                ],
                order:[],
                fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    $('td:eq(0)', nRow).html(iDisplayIndexFull + 1);
                    return nRow;
                },
                "fnDrawCallback": function () {
                    $('.paginate_button').click(function(){
                        $('.dataTables_scrollBody').scrollTop(0);
                    });
                    jQuery('.toggle-event').bootstrapToggle();
                }
            });
        }
    });
}
  

// change aproval status 
function changeApprovalStatus(change_status,curr_row_id){
    
    // currrent state is either in Pending or rejected , convert it to Approved
    let confirmation_done = false;

    if(change_status=='make_approved'){
        let confirmation = confirm('Are You Sure you want to change Approval status to Approved');
        if(confirmation){
            // if user allowed to change status
            confirmation_done = true;
            change_status = 1;
        }
        else{

            toastr.error('Approval Status Not Changed');
        }
    }
    else{
        let confirmation = confirm('Are You Sure you want to change Approval status to Rejected');
        if(confirmation){
            confirmation_done = true;
            change_status=3;
        }
        else{
            toastr.error('Approval Status Not Changed');
        }
    } 


    if(confirmation_done){

        $.ajax({
            type: "POST",
            url: "{{ url('/rcs_approval_status_toggle') }}",
            data: {
                "_token" : "{{ csrf_token() }}",
                "new_status":change_status,
                "id":curr_row_id
            },
            dataType:'json',
            success: function(data) {
                // change status data
                if(change_status==2){
                    $('.button_' + curr_row_id).attr('id', 'pending_button');
                    $(`.button_${curr_row_id}`).text('Pending');
                }
                else if(change_status==1){
                    $('.button_' + curr_row_id).attr('id', 'approved_button');
                    $(`.button_${curr_row_id}`).text('Approved');
                }
                else if(change_status==1){
                    $('.button_' + curr_row_id).attr('id', 'rejected_button');
                    $(`.button_${curr_row_id}`).text('Rejected');
                }

                toastr.success('Successfully changed the Approval Status');
                getrcstemplates();
            }
        
        });

    }
    getrcstemplates();
}

$(document).on('change', '.toggle-event', function (e) {
    let click_val = $(this).prop('checked');
    let id_val = $(this).attr('data-info');
    let changedStatus = $(this).attr('data-changeStatus');
    if(changedStatus){
        if(changedStatus=='no_change'){
            alert("Your status is De-Active, You cannot change Approval Status.");
            getrcstemplates();
        }
        else{
            let curr_row_id = $(this).attr('data-id');
            changeApprovalStatus(changedStatus,curr_row_id)
        }

        return;
    }
    let url;

    if(click_val)
    { 
        click_val = 1;
        $(this).closest('tr').find('.edit-data').addClass('active').removeClass('disabled');
        $message = "Are you sure you want to Activate this Template?";
    }else{
        click_val = 0;
        $(this).closest('tr').find('.edit-data').removeClass('active').addClass('disabled');
        $message = "Are you sure you want to Deactive this Template?";
    }
    if (confirm($message)) {
    $.ajax({
        type: "POST",
        url: "{{ url('/richMedia_de_activate') }}",
        data: {
            "_token" : "{{ csrf_token() }}",
            "row_id" : id_val,
            "action" : click_val
        },
        dataType:'json',
        success: function(data) {
            // window.location.reload();
            if(click_val){
                $('#'+data.row_id).parent().removeClass("btn-danger off").addClass('btn-success');
                toastr.success('Activated Successfully !!');
            }else{
                $('#'+data.row_id).parent().removeClass("btn-success").addClass('btn-danger off');
                toastr.error('De-Activated Successfully !!');
            }
        }
    
    });
    } else {
        if(click_val){
            $(this).prop('checked', false);
            $(this).parent().removeClass('btn-success').addClass('btn-warning off');
            $(this).parent().removeClass('btn-danger off').addClass('btn-warning off');
            $('#edit' + id_val).closest('tr').find('.edit-data').removeClass('active').addClass('disabled');
        }else{
            $(this).prop('checked', true);
            $(this).parent().removeClass('btn-danger off').addClass('btn-success');
            $('#edit' + id_val).closest('tr').find('.edit-data').addClass('active').removeClass('disabled');
        }
    }
    getrcstemplates();

});
</script>
@endsection