@extends('layouts.app')
@section('title')
Mail Alert
@endsection
@push('styles')
<link href="../assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />

@endpush

@section('content')
<!-- BEGIN page-header -->
<h1 class="page-header">Mail Alert</h1>
<!-- END page-header -->

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-body">
        <div class="table-responsive">
            <table id="mailalert_table" class="table table-striped table-bordered align-middle nowrap w-100">
                <thead>
                    <tr>
                    <th></th>
                    <th>Mail Name</th>
                    <th>Alert to</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
                <tfoot>
                    <tr>
                        <th></th>
                        <th>Mail Name</th>
                        <th>Alert to</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<!-- END panel -->


@endsection
@include('modals.editmailalert')
@push('scripts')
<script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>

<script>
$('#mailalert_table').DataTable({
        pageLength: 10,
        lengthMenu: [5, 10, 20, 50],
        order: [[ 1, "asc" ]],
        search: {
            return: true,
        },
        columns: [
            {data:'id',name:'id',className:'text-center',
                render: function ( data, type, row, meta ) {
                    var html = `
                    <button type="button" class="btn btn-primary" onclick="geteditmailalert(`+data+`)"><i class="fa fa-edit"></i></button>
                    `;
                    return html;

                },searchable: false,orderable:false
            },
            {data:'mail_name',name:'mail_name',searchable: true,orderable:true},
            {data:'id',name:'id',className:'text-center',
                render: function ( data, type, row, meta ) {

                    var html = `<div id="alertto`+data+`"></div>`;
                    $.ajax({
                        type: "post",
                        url: 'getuserbymailid',
                        data:{mid:data},
                        dataType: "json",
                        success: function (response) {

                            var user = "";
                            if(response.status == "success"){
                                response.data.forEach(element => {
                                    user+= `<span class="badge bg-primary">`+element.name+' '+element.surname+`</span> `;
                                });
                            }
                            $('#alertto'+data).html(user);
                        }
                    });
                    return html;
                },searchable: false,orderable:false
            },

        ],
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{route('getmailalertdata')}}",
            type: 'post',
            data: function (d) {

            },
        },
    });


</script>
@endpush