@extends('layouts.app')
@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">

@endsection
@section('content')
@section('page_title')
Email Template List
@endsection

<style>
    .dataTables_scroll {
        overflow: auto;
    }

    .modal-content {
        width: 140%;
    }
</style>
<div class="container-fluid">
    <div class="card-header flex justify-content-between">
        <h3>Email Template Details </h3>
        @can('hasAddPermission')
        <div>
            <a href="{{url('createEmailTemplate')}}" class="btn btn-sm btn-dark">Create Template</a>
        </div>
        @endcan
    </div>
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="emailtemplatelist">
                <thead>
                    <tr>
                        <th>Sl. NO.</th>
                        <th>Organisation Name</th>
                        <th>Mail Server</th>
                        <th>Email Account</th>
                        <th>Template Name</th>
                        <th>Template ID</th>
                        <th>Created On</th>
                        <th>Approval Status</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>
    getEmailTemplate();
    //    fetch all data in data-table
    function getEmailTemplate() {
        $("#emailtemplatelist").DataTable().clear().destroy();
        $("#emailtemplatelist").DataTable({
            "processing": true,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "autowidth":true,
            "ordering": true,
            "scrollX": true,
            "scrollY":  400,
            "pageLength": 20,
            "scrollCollapse": true,
            "order": [
                [1, "desc"]
            ],
            "language": {
                search: '',
                searchPlaceholder: "Search...",
            },
            "ajax": {
                "url": "{{ url('emailTemplateList') }}",
                "dataType": "json",
                "type": "POST",
                "data": {
                    _token: "{{csrf_token()}}",
                },
            },
            aoColumns: [{
                    data: "",
                    orderable: false,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data:"organisation_name",
                    render: function(data, type, row, meta){
                        return ((row.organisation_name) ? row.organisation_name : "NA")
                    }
                },
                {
                    data:"server_name",
                    render: function(data, type, row, meta){
                        return ((row.server_name) ? row.server_name : "NA")
                    }
                },
                {
                    data:"email_account",
                    render: function(data, type, row, meta){
                        return ((row.email_account) ? row.email_account : "NA")
                    }
                },
                {
                    data: "template_name",
                    render: function(data, type, row, meta) {
                        return ((row.template_name) ? row.template_name : "NA")
                    }
                },
                {
                    data: "template_id",
                    render: function(data, type, row, meta) {
                        return ((row.template_id) ? row.template_id : "NA")
                    }
                },
                {
                    data: "created_on",
                    render: function(data, type, row, meta) {
                        return ((row.created_on) ? row.created_on : "NA")
                    }
                },
                {
                    data: "approval_Status",
                    render: function(data, type, row, meta){
                        if(row.approval_Status == 1 || row.approval_Status == 2) {
                             data = '<input id="'+row.id+'" type="checkbox" '+(row.approval_Status == 1 ? 'checked' : '' )+' data-onstyle="success" class="toggle-event action" data-toggle="toggle" data-offstyle="danger" data-on="Approved" data-off="Rejected" data-size="small" data-info="'+row.id+'" >';
                        } else if(row.approval_Status == 0) {
                            data = '<input id="'+row.id+'" type="checkbox" '+(row.approval_Status == 0 ? '' : 'checked' )+' data-onstyle="success" class="toggle-event action" data-toggle="toggle" data-offstyle="warning" data-on="Approved" data-off="Pending" data-size="small" data-info="'+row.id+'" >';
                        }
                        return data;
                        }
                },
            ],
            "fnDrawCallback": function() {
                jQuery('.toggle-event').bootstrapToggle();
            }
        });
    }

    $(document).on('change', '.action', function (e) {
        let click_val = $(this).prop('checked');
        let id_val = $(this).attr('data-info');
        console.log(click_val);
        let url;
        if (click_val) {
            click_val = 1;
            $message = "Are you sure you want to Approve this Template?";
        } else {
            click_val = 2;
            $message = "Are you sure you want to Reject this Template?";
        }
        if (confirm($message)) {
            $.ajax({
                type: "POST",
                url: "{{ url('/emailTemplateUpdateStatus') }}",
                data: {
                    "_token" : "{{ csrf_token() }}",
                    "row_id" : id_val,
                    "action" : click_val
                },
                dataType:'json',
                success: function(data) {
                    if(click_val != 2){
                        console.log(click_val);
                        toastr.success('Approved Successfully !!');
                    }else{
                        toastr.error('Rejected Successfully !!');
                    }
                }
            });
        }else {
            if(click_val == 1){
                $(this).prop('checked', false);
                $(this).parent().removeClass('btn-sm btn-success').addClass('btn-danger off btn-sm');
            }else{
                $(this).prop('checked', true);
                $(this).parent().removeClass('btn-danger off btn-sm').addClass('btn-sm btn-success');
            }
        }
    });
</script>
@endsection