@extends('../../master_layout/website_master')

@section('title')
<title>{{env('APP_NAME')}} :: Helpdesk</title>
@endsection

@section('custom_css')
<!--datatable -->
<link rel="stylesheet" href="{{asset('public/backend_assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('public/backend_assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('public/backend_assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
@endsection

@section('heading')
<section class="page-heading">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="content flex-column flex-sm-row">
                    <a href="javascript:history.back()" class="btn btn-link">
                        <i class="fa fa-angle-left"></i> Back
                    </a>
                    <h1 class="py-2 py-sm-0">Support</h1>
                    <!-- breadcrumb -->
                    @php
                    $breadcrumb = array(
                        array('title'=>'Support', 'url'=>'', 'active'=>'1')
                    );
                    @endphp
                    @include('website_view.component.breadcrumb',  compact("breadcrumb"))
                    <!-- \breadcrumb -->
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('content')

@if (session('errors'))
<div class="alert alert-danger alert-dismissible">
    @foreach($errors->all() as $message)
    <li class="text-danger">{{$message}}</li>
    @endforeach
</div>
@endif
<section class="account-one">
    <div class="container-fluid">
        <div class="row gap-y-2">
            <!-- Message-->
            @if (session('message'))
            <div class="col-12">
                <div class="alert alert-{{session('message.type')}} alert-dismissible fade show" role="alert">
                    @if(session('message.type')=='danger')
                    <strong>Oops!</strong> {!! session('message.text') !!}
                    @else
                    <strong>Success!</strong> {!! session('message.text') !!}
                    @endif
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            @endif
            <!--end message-->

            
            <div class="col-12 d-md-none">
                <div class="heading-one text-center">
                    <h1>
                        Helpdesk
                    </h1>
                </div>
            </div>

            <div class="col-12">
                <div class="row gap-y-2">
                    <div class="dropdown dropdown-one">
                        <a class="btn btn-white dropdown-toggle" href="#" role="button" id="profile-listing" data-toggle="dropdown">
                            <span>
                                @if(isset($search_status) && $search_status =='solved')
                                Resolved
                                @else
                                Open / Awaiting
                                @endif
                            </span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="profile-listing">                        
                            <a class="dropdown-item" href="{{route('helpdesk')}}">Open / Awaiting</a>
                            <a class="dropdown-item" href="{{route('helpdesk',['status'=>'solved'])}}">Resolved</a>                            
                        </div>                        
                    </div>
                    <a href="{{route('contact')}}" class="btn btn-main ml-2">Create Ticket</a>
                </div>
            </div>

            <div class="col-12">
                <div class="row gap-y-2">
                    <div class="col-md-12">

                        <div class="card">
                            <div class="card-body table-responsive table-dark table-striped" style="overflow-x: auto">
                                <table id="helpdeskTable" class="table table-bordered table-striped tab table-sm text-sm">
                                    <thead>
                                        <tr>
                                            <th class="text-center" width="20%">Date</th>
                                            <th class="text-center">Subject</th>
                                            <th class="text-center" width="20%">Last Activity</th>
                                            <th class="text-center">Status</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div> 

                    </div>
                </div>
            </div>
             
        </div>
    </div>
</section>

@endsection

@section('custom_js')

<!-- DataTables  & Plugins -->
<script src="{{asset('public/backend_assets/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('public/backend_assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('public/backend_assets/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('public/backend_assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('public/backend_assets/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('public/backend_assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>

<script type="text/javascript">
    $(function() {

        $('#helpdeskTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            pageLength: 25,
            autoWidth: false,
            ajax: "{{ route('helpdesk',['status'=>request()->segment('2')]) }}",

            columns: [
                {
                    data: 'created_on',
                    type: 'num',
                    render: {
                        _: 'display',
                        sort: 'timestamp'
                    }
                },
                {
                    data: 'ticket_subject',
                    "render": function(data, type, row) {
                        return '<a href="' + data['link'] + '" target="_blank">'+data['subject']+'</a>';
                    }
                },
                {
                    data: 'updated_on',
                    name: 'updated_on'
                },
                {
                    data: 'ticket_status',
                    name: 'ticket_status'
                },
            ],

        });


    });
</script>
@endsection