@extends('layouts.portal')

@section('portal-content')

@php $pageTitle = "Message List"; @endphp

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body p-2">
                <a href="{{ asset('/portal/messsage-form') }}" class="btn btn-sm btn-primary">Send Message</a>
            </div>
        </div>

        <div class="card">
            <div class="card-body p-2">
                <div class="col-md-8">
                    <div id="imaginary_container">
                        <div class="input-group stylish-input-group">
                            <input class="form-control" [(ngModel)]="query" name="q" id="query" value="" placeholder="Search by Message" type="text">
                            <span class="input-group-addon"><button type="submit"><i class="fa fa-search"></i></button></span>
                        </div>
                    </div>
                </div>

                <div class="col-md-10 col-md-offset-2 py-2">
                    <div class="flot-right">
                        <button class="btn btn-default btn-sm mr-2" title="Clear" onclick="ClearFormValues('#searchForm')">
                            <i class="fa fa-circle-thin"></i> Clear
                        </button>
                        <button class="btn btn-info btn-sm mr-2" title="Export PDF" onclick="DownloadPDF();">
                            <i class="fa fa-file-pdf-o"></i> Export PDF
                        </button>
                        <button class="btn btn-info btn-sm mr-2" title="Export PDF" onclick="DownloadCSV();">
                            <i class="fa fa-file-excel-o"></i> Export EXCEL
                        </button>
                        <button class="btn btn-primary btn-sm mr-2" title="Search" onclick="Search()">
                        <i class="glyphicon glyphicon-search"></i> Search
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body p-0">
                <div id="search_frame"></div>
            </div>
        </div>

    </div>
</div>

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        Search();
    });
</script>

<script language="javascript" type="text/javascript">
    function Search(){
        AppGet(
            "{{ asset('/portal/message-list-search') }}",
            { "l":25, "query":$('#query').val() },
            function(result){
                $('#search_frame').html('<table id="table_frame" ></table>');
                $('#table_frame').bootstrapTable({
                    data : result.returnData.list_of_item,
                    cache : false,
                    striped: true,
                    minimumCountColumns: 2,
                    clickToSelect: true,
                    columns: [
                        {
                            field : 'id',
                            title: '#',
                            align: 'left'
                        },{
                            title: 'SUBJECT',
                            align: 'left',
                            formatter : function(value, row) {
                                return row.subject;
                            }
                        },{
                            title: 'CREATED AT',
                            align: 'left',
                            formatter : function(value, row) {
                                return row.created_at;
                            }
                        },{
                            title: 'STATUS',
                            align: 'left',
                            formatter : function(value, row) {
                                var returnHtml = '';
                                if(row.status == '{{ config('enums.messageStatus.PENDING') }}') {
                                    returnHtml += '<span class="badge badge-warning">PENDING</span>';
                                } else if(row.status == '{{ config('enums.messageStatus.SENT') }}') {
                                    returnHtml += '<span class="badge badge-success">SENT</span>';
                                }

                                return returnHtml;
                            }
                        },
                    ],
                    onLoadSuccess: function (data) {
                        Pop_Up_Scripts();
                        return false;
                    }
                });
            },
            true
        );
    }
</script>

@endsection