@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title')
    Show Sender Details
@endsection
<style type="text/css">
    .form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio{
        display: unset;
    }
    .entity_id{
        border: #fff;
        background: #fff;
    }
    .entity_idtd{
        width: 200px;
        padding-right: 0px !important;
        padding-left: 0px !important;
        border-radius: 10px;
        margin-right: 5px;
    }
    span.fa{
        cursor: pointer;
        padding: 8px;
        border-radius: 5px;
        background: orange;
    }
</style>
<div class="container-fluid">
<div class="card-header flex"><h3>Sender List </h3>

<!-- count section start-->
<form class="flex m-auto">
   <div class="form-group m-0 d-flex align-items-center">
        <!-- count section start -->
        <div class="btn-outline-success active count-div" id="countfilter2" data-toggle="tooltip">
            <label> Total:</label>
        <small id="total_count0"></small>
        </div>
        <div class="count-div" id="countfilter1" data-toggle="tooltip">
            <label>Active: </label>
            <small id="active_count1"></small>
        </div>
        <div class="count-div" id="countfilter0" data-toggle="tooltip">
            <label>In-Active: </label>
            <small id="inactive_count2"></small>
        </div>
        <!-- count section end -->
    </div>
</form>
<h3>  <a class="btn btn-sm btn-dark border-radius-0 pull-right text-white" href="{{ url('addsender') }}">Add Sender ID</a></h3>&ensp; &emsp;
<!-- excel start -->
@can('hasExcelPermission')
    <form action="{{ url('exportsenderlist') }}" method="post" class="pull-right">
        @csrf
        <button type="submit" class="export_sender_excel btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
        <input type="hidden" name="parentid" id="parent_id_hidden" />
        <input type="hidden" name="sender_state" id="sender_state_hidden" />
    </form>
@endcan
<!-- excel end -->
</div>
    <div class="card">

    <div class="card-body">
        <form>
            <div class="row d-flex align-items-start">
                <div class="form-group col-sm-3">
                    <select class="form-control" name="orgid[]" multiple id="orgid">
                    <optgroup label="ACTIVE">
                        @foreach ($sender_details ?? '' as $key => $value)
                        @if( $value->status > 0)
                            <option value="{{ $value->id }}">{{ $value->account_name }}-({{$value->id}})</option>
                        @endif
                        @endforeach
                    </optgroup>
                    <optgroup label="INACTIVE">
                        @foreach ($sender_details ?? '' as $key => $value)
                        @if( $value->status == 0)
                            <option value="{{ $value->id }}">{{ $value->account_name }}-({{$value->id}})</option>
                        @endif
                        @endforeach
                    </optgroup>

                    </select>
                </div>
            </div>
        </form>
        <table class="table-bordered" id="showsenderdetails">
            <thead>
                <tr>
                    <th>Sl.No</th>
                    <th>Organisation Name</th>
                    <th>Email</th>
                    <th>Server Name</th>
                    <th>User Name</th>
                    <th>Sender Name</th>
                    <th>DLT Entity ID</th>
                    @can('hasUpdatePermission')
                    <th>Action</th>
                    @endcan

                </tr>
            </thead>
        </table>
    </div>
</div>
<script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
<script type="application/javascript">
    var sender_state = 2;
$('#orgid').multiselect({
    enableFiltering: true,
    includeSelectAllOption: true,
    selectAllJustVisible: false,
    allSelectedText: 'All Accounts selected',
    nonSelectedText: 'No Account selected',
    selectAllValue: 'all',
    selectAllText: 'Select all',
    unselectAllText: 'Unselect all',
    buttonWidth: '100%',
    templates: {
        filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button">Clear</button></span>',
            },
    enableCaseInsensitiveFiltering: true,
});

$(document).ready(function() {
    get_sender_count(); // calling the function to get active inactive count and total count
    $('.toggle-event').bootstrapToggle();
        $(document).on('change', '.toggle-event', function (e) {
            let click_val = $(this).prop('checked');
            let id_val = $(this).attr('data-info');
            let url;

            if(click_val){
                click_val = 1;
            }else{
                click_val = 0;
            }
            $.ajax({
                type: "POST",
                url: "{{ url('/senderid_active_deactive') }}",
                data: {
                    "_token" : "{{ csrf_token() }}",
                    "row_id" : id_val,
                    "action" : click_val
                },
                dataType:'json',
                success: function(data) {
                    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 !!');
                    }
                    //$("#usernamepass").html('<option value="'+data[0].server_account_id+'">'+data[0].username+' - '+data[0].password+'</option>');
                }
            });
        });

    $(".export_sender_excel").click(function(){
        var parent_id = $('#orgid').val();
        $('#parent_id_hidden').val(parent_id);
        $('#sender_state_hidden').val(sender_state);
        $(this).submit();
    });
    senderdetails_list($('#orgid').val(),sender_state);

    $('#orgid').change(function() {
        let org_id = $(this).val();
        senderdetails_list(org_id,sender_state);
    });

    $(document).on('click', '.fa-edit', function(event) {
        event.preventDefault();
        let row_id = $(this).attr('data-id');
        $(this).addClass('d-none');
        $(this).closest('span').next('.fa-save').removeClass('d-none');
        $('#entityid-' + row_id).removeAttr('disabled').removeClass('entity_id');
    });

    $(document).on('click', '.fa-save', function(event) {
        event.preventDefault();
        let row_id = $(this).attr('data-id');
        $(this).addClass('d-none').prev('.fa-edit').removeClass('d-none');
        $('#entityid-' + row_id).addClass('entity_id').prop('disabled', true);

        var entity_id = $('#entityid-' + row_id).val();
        let sender_name = $(this).attr('sender_name');
        let server_id = $(this).attr('server_id');
        let parent_id = $(this).attr('parent_id');

        $.ajax({
            type: 'post',
            url: 'update_entity_id',
            data: {
                "_token": "{{ csrf_token() }}",
                "row_id": row_id,
                "sender": sender_name,
                "server": server_id,
                "org_id": parent_id,
                "entity": entity_id
            },
            success: function(data) {
                $('#entityid-' + data.row_id).val(entity_id);
            }
        });
    });
});

    // Getting Report Publisher Count
function get_sender_count(){
    $.ajax({
        "url": "{{ url('get_sender_count') }}",
        "type": "POST",
        "data": {
            _token: "{{csrf_token()}}",
        },
        "dataType": "json",
        success: function(response) {
            $("#total_count0").html(response[0].total);
            $("#active_count1").html(response[0].active);
            $("#inactive_count2").html(response[0].inactive);
        }
    });
}
$('.count-div').click(function (e) {
    e.preventDefault();
    sender_state = parseInt(this.id.slice(-1));
    let  org_id = $('#orgid').val();
    senderdetails_list(org_id,sender_state);
    $('.count-div').removeClass('btn-outline-success active');
    $(this).addClass('btn-outline-success active');
});
function senderdetails_list(org_id,sender_state = null) {
    $("#showsenderdetails").DataTable().clear().destroy();
    $('#showsenderdetails').DataTable({
        "processing": true,
        "serverSide": true,
        "paging": true,
        "searching": true,
        "ordering": true,
        "scrollX": true,
        "scrollCollapse": true,
        "scrollY":  400,
        "pageLength": 20,
        "order": [
            [0, "desc"]
        ],
        "language": { search: '', searchPlaceholder: "Search..." },
        "ajax": {
            "url": "{{ url('showsenderdetails') }}",
            "dataType": "json",
            "type": "POST",
            "data": {
                _token: "{{csrf_token()}}",
                org_id: org_id,
                sender_state:sender_state
            },
        },
        "columns": [
            { data: "sender_id",
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            { data: "account_name" },
            { data: "email" },
            { data: "alias_server_name",
                render: function(data, type, row, meta) {
                    return row.alias_server_name;
                }
            },
            {
                data: "username"
            },
            { data: "sender_name" },
            { data: "tbl_sender_details.entity_id",
                render: function(data, type, row, meta) {
                    data = '<input type="text" id="entityid-' + row.sender_id + '" name="entity_id" value="' + (row.entity_id ? row.entity_id : '') + '" class="entity_id entity_idtd col-md-10"  disabled />';

                    @can('hasUpdatePermission')
                    data += '<span class="fa fa-edit text-left" for="entity_id" data-id="' + row.sender_id + '" sender_name="' + row.sender_name + '" server_id="' + row.server_id + '" parent_id="' + row.parent_id + '" ></span>';
                    data += '<span class="fa fa-save text-left d-none" for="entity_id" data-id="' + row.sender_id + '" sender_name="' + row.sender_name + '" server_id="' + row.server_id + '" parent_id="' + row.parent_id + '" ></span';
                    @endcan

                    return data;
                }
            },

            @can('hasUpdatePermission') {
                data: "tbl_sender_details.status",
                render: function(data, type, row, meta) {
                    data = '<input id="' + row.sender_id + '" type="checkbox" ' + (row.status == 1 ? 'checked' : '') + ' data-onstyle="success" data-offstyle="danger" data-on="Active" data-off="De-Active" data-info="' + row.sender_id + '" class="toggle-event" data-toggle="toggle" />';
                    return data;
                }
            }
            @endcan
        ],
        "fnDrawCallback": function() {
            jQuery('.toggle-event').bootstrapToggle();
        }
    });
}
</script>
@endsection