@extends('layouts_frontend.master')
@section('title','Support Case Manager')
<style>
    #header {
        background: rgba(40, 58, 90, 0.9);
    }
    
    .new_case {
        background: #47b2e4;
        border: 0;
        padding: 12px 34px;
        color: #fff;
        transition: 0.4s;
        border-radius: 50px;
    }
    
    .dismiss_new_case {
        background: red;
        border: 0;
        padding: 12px 34px;
        color: #fff;
        transition: 0.4s;
        border-radius: 50px;
    }
    
</style>

@section('content')

<section id="services" class="services section-bg">
    <div class="container" data-aos="fade-up">
        <div class="section-title" style="padding-top: 100px;">
            <h2>Support Case Summary</h2>
            <p></p>
        </div>
        
        <div class="row">
            <div class="col-md-12">
                <a href="javascript:void(0)" data-toggle="modal" data-target="#NewCaseModal" class="new_case">New Case</a>
            </div><br><br>
            
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#summary">Summary</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#attachments">Attachments</a>
                </li>
            </ul>
            
            <div class="tab-content">
                <div id="summary" class="container tab-pane active"><br>
                    <img src="{{url('/images/loading.gif')}}" alt="" class="src" id="img_loading">
                    <table class="table table-striped table-condensed" cellspacing="0" width="100%" id="tbl_mail_list" style="display: none;">
                        <thead>
                            <tr>
                                <th width="30%">Subject</th>
                                <th width="20%">Date</th>
                            </tr>
                        </thead>
                        <tbody id="mail_summery_list"></tbody>
                    </table>
                </div>
                <div id="attachments" class="container tab-pane fade"><br>
                    <img src="{{url('/images/loading.gif')}}" alt="" class="src" id="img_attach_loading">
                    <table class="table table-striped table-condensed" cellspacing="0" width="100%" id="tbl_attach_list" style="display: none;">
                        <thead>
                            <tr>
                                <th>Attachments</th>
                                <th>Subject</th>
                            </tr>
                        </thead>
                        <tbody id="mail_attachment_list"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal -->
    <div id="NewCaseModal" class="modal" role="dialog">
        <div class="modal-dialog">
            
            <!-- Modal content-->
            <div class="modal-content">
                
                <!-- Modal Header -->
                <form action="{{ url('/newcase_email_process') }}" id="newcase_submit" method="POST" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="modal-header">
                        <h4 class="modal-title">Open New Case</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    
                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="container">
                            <div class="form-group">
                                <label for="subject">Subject</label>
                                <input type="text" class="form-control" name="subject" id="subject" required>
                            </div>
                            <div class="form-group">
                                <label for="message">Messages</label>
                                <textarea class="form-control" name="message" rows="5" required></textarea>
                            </div>
                            <div class="form-group">
                                <label for="subject">Attach Files</label>
                                <input type="file" class="form-control" name="file[]" multiple>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="dismiss_new_case" data-dismiss="modal">Close</button>
                        <div class="text-center"><button type="submit" class="new_case" id="send-feedback">Submit</button></div>
                    </div>
                </form>	
            </div>	
        </div>
    </div>
    <!-- End Modal -->
</section>

@endsection
@section('extra-script')

<script>
    
    $(function(){
        getMailSummary();
        getMailAttachment()
    });
    
    function getMailSummary() {
        $.ajax({
            type: 'GET',
            url: '/get_mail_summary_data',
            dataType: 'json',
            data: {}
        }).done(function(data){
            $('#img_loading').hide();
            $('#tbl_mail_list').show();
            $('#mail_summery_list').empty();
            jQuery.each(data, function(index, item) {
                $('#mail_summery_list').append('<tr><td> <a href="/support_case_detail/'+item.token+'" class="href">'+item.subject+'</a></td><td>'+item.date+'</td></tr>');
            });
        })
    }
    
    function getMailAttachment() {
        $.ajax({
            type: 'GET',
            url: '/get_mail_attachments',
            dataType: 'json',
            data: {}
        }).done(function(data){
            $('#img_attach_loading').hide();
            $('#tbl_attach_list').show();
            $('#mail_attachment_list').empty();
            jQuery.each(data, function(index, item) {
                $('#mail_attachment_list').append('<tr><td><a href="open_attachment/'+item.message_id+'/'+item.attach_name+'" class="attach_detail" target="_blank" >'+item.attach_name+'</a></td><td>'+item.subject+'</td></tr>');
            });
        })
    }
</script>
@endsection