@extends('template.master')

@section('page_styles')
    <style>
        .tox-tinymce-aux {
            display: none !important;
        }
        .badge {
            font-size: 12px;
            font-weight: 600;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/css/datatable/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ asset('css/layout/support.css') }}">
@stop

@section('content')
    <div class="container-fluid">

        <!-- Begin Page Header-->
        <div class="row">
            <div class="page-header">
                <div class="d-flex align-items-center mobile-flex-column-reverse">
                    <h2 class="page-header-title text-gradient-02 mb-2">Support Center</h2>
                    <div class="mb-2">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}"><i class="ti ti-home"></i></a></li>
                            <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Support</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Page Header -->

{{--        @include('support.index_old')--}}

        <div class="row flex-row" style="">
            <div class="col-md-12">

                <div class="row">
                    <div class="clearfix"><br /></div>

                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-12">
                                <div class="widget has-shadow">
                                    <div class="row">

                                        <div class="col-xl-5" style="margin-top:20px;">
                                            <div class="widget">
                                                <div class="widget-body">
                                                    <div class="row">
                                                        <div class="col-md-12 wow animated fadeInLeft" data-wow-delay=".2s">
                                                            <h1 class="section-title">Hi! How can we help you today?</h1>
                                                        </div>
                                                        <div class="col-md-12 mt-3 contact-widget-section2 wow animated fadeInLeft" data-wow-delay=".2s">
                                                            <p>Please fill out the quick form and we will be in touch with you as soon as possible.</p>

                                                            <form class="support-form" action="{{route('support.store')}}" method="post">
                                                                <div class="form-group row mb-3">
                                                                    <div class="col-xl-6 flex-column align-items-start flex-row justify-content-start  mb-3">
                                                                        <label class="form-control-label">Channel</label>
                                                                        <select name="type" class="form-control" autocomplete="off">
                                                                            <option value="32455">General Support</option>
                                                                            <option value="32455">Web Design Support</option>
                                                                            <option value="32455">SEO Support</option>
                                                                            <option value="32455">IT Support</option>
                                                                            {{--                                            <option value="31796">Internal Company Communication</option>--}}
                                                                            <option value="30814">Real Time Chat</option>
                                                                            <option value="30482">Real Time Reviews</option>
                                                                            <option value="30813">Real Time Social</option>
                                                                            {{--                                            <option value="31783">Trenchless IT Support</option>--}}
                                                                            {{--                                            <option value="30867">Trenchless Marketing Support</option>--}}
                                                                            {{--                                            <option value="30873">Trenchless Reporting</option>--}}
                                                                            {{--                                            <option value="9999999999">My Tickets</option>--}}
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-xl-6 flex-column align-items-start flex-row justify-content-start ">
                                                                        <label class="form-control-label">Subject</label>
                                                                        <input type="text" name="subject" placeholder="Subject" class="form-control">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group row mb-4">
                                                                    <div class="col-xl-12 flex-column align-items-start flex-row justify-content-start ">
                                                                        <label class="form-control-label">Message</label>
                                                                        <textarea placeholder="Your message" name="message" class="form-control" rows="12"></textarea>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group row mt-4">
                                                                    <div class="col-xl-12 action-col flex-column align-items-start flex-row justify-content-start ">
                                                                        <button type="submit" class="btn btn-primary btn-square btn-lg btn-block">Send</button>
                                                                    </div>
                                                                </div>
                                                            </form>

                                                            <hr />
                                                            <br />
                                                            @include('support.partial_logo_icons')
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-7" style="margin-top:20px;">
                                            <div class="col-md-12"><br/>
                                                <h1 class="text-left">Your Tickets</h1> <br/>
                                                <div class="float-right mb-3">
                                                    <div class="styled-checkbox">
                                                        <input type="checkbox" name="checkbox" id="check-1">
                                                        <label for="check-1">Toggle Closed Tickets</label>
                                                    </div>
                                                </div>

                                                <table id="ticketTable" class="table table-bordered table-striped table-alternate">
                                                    <thead>
                                                    <tr class="site-bg">
                                                        <th class="text-white">SUBJECT</th>
                                                        {{-- <th class="text-white">ID</th> --}}
                                                        <th class="text-white text-center">REQUIRES YOUR RESPONSE?</th>
                                                        <th class="text-white text-center">STATUS</th>
                                                        <th class="text-white text-center">CREATED</th>
                                                        <th class="text-white text-center">LAST ACTIVITY</th>
                                                        {{-- <th class="text-white"></th> --}}
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @if (isset($tickets) && !is_null($tickets))
                                                        @foreach ($tickets as $ticket)
                                                            <tr data-ticket="{{ $ticket['status'] }}">
                                                                <td class="text-left" style="width: 40%"><a href="{{route('support.view_ticket', ['id' => $ticket['id']])}}" target="_blank">{{$ticket['subject']}}</a></td>

                                                                {{-- <td style="width: 10%">#{{$ticket['id']}}</td> --}}

                                                                <td class=" text-center" style="width: 10%">
                                                                    <span class="badge
                                                                        @if(in_array($ticket['status'], ['waiting', 'requires-response']))
                                                                            badge-danger
                                                                        @else
                                                                            badge-warning
                                                                        @endif ">

                                                                        @if(in_array($ticket['status'], ['waiting', 'requires-response']))
                                                                            Yes
                                                                        @else
                                                                            No
                                                                        @endif
                                                                    </span>
                                                                </td>

                                                                <td class=" text-center" style="width: 10%">
                                                                    <span class="badge
                                                                        @if($ticket['status'] === 'active') badge-success
                                                                        @elseif($ticket['status'] == 'waiting') badge-warning
                                                                        @elseif (in_array($ticket['status'], ['closed', 'solved'])) badge-primary
                                                                        @elseif ($ticket['status'] == 'requires-response') badge-info
                                                                        @elseif ($ticket['status'] =='spam') badge-secondary
{{--                                                                        @elseif ($ticket['status'] == 'Merged') badge-dark @endif">--}}
                                                                        @elseif ($ticket['status'] == 'Merged') badge-success @endif">

                                                                        @if (in_array($ticket['status'], ['closed', 'solved']))
                                                                            Closed
                                                                        @else
                                                                            @if(auth()->user()->company->company_type == 2)
                                                                                @if($ticket['status'] == 'waiting')
                                                                                    Requires Your Response
                                                                                @elseif($ticket['status'] == 'active')
                                                                                    Awaiting Feedback
                                                                                @else
                                                                                    {{strtoupper($ticket['status'])}}
                                                                                @endif

                                                                            @else
                                                                                {{strtoupper($ticket['status'])}}
                                                                            @endif
                                                                        @endif
                                                                    </span>
                                                                </td>

                                                                <td class=" text-center" style="width: 15%">
                                                                    {{ date('M d, Y H:i a', strtotime($ticket['createdAt'])) }}<br/>
                                                                    <i>({{ \Carbon\Carbon::createFromTimeStamp(strtotime($ticket['createdAt']))->diffForHumans() }})</i>
                                                                </td>

                                                                <td class=" text-center" style="width: 15%">
                                                                    {{ date('M d, Y H:i a', strtotime($ticket['updatedAt'])) }}<br/>
                                                                    <i>({{ \Carbon\Carbon::createFromTimeStamp(strtotime($ticket['updatedAt']))->diffForHumans() }})</i>
                                                                </td>

                                                                {{-- <td style="width: 10%"><a href="javasript: void(0)" data-toggle="modal" data-target="#modal-preview-{{$ticket['id']}}">View</a></td> --}}
                                                            </tr>
                                                        @endforeach
                                                    @endif
                                                    </tbody>
                                                </table>

                                            </div>

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


                    </div>
                </div>

            </div>
        </div>
        <!-- End Row -->
{{----}}


@stop

@section('page_modals')
    @if (isset($tickets) && !is_null($tickets))
        @foreach ($tickets as $ticket)
            @include('support.modal.preview', ['id' => $ticket['id'], 'preview' => $ticket['preview']])
        @endforeach
    @endif
@stop
@section('page_scripts')
    <!--CUSTOM SCRIPTS-->
    <script src="{{ asset('assets/js/datatable/jquery.dataTables.min.js') }}"></script>

    <script>
        $(function(){
            var groupColumn = 4;
            var table = $('#ticketTable').DataTable({
                "order": [[ groupColumn, 'desc' ]]
            });

            // Hide / Show Tickets
            $('#check-1').click(function(){
                $.fn.dataTable.ext.search.pop();
                table.draw();

                if($(this).prop("checked") == true){
                    $.fn.dataTable.ext.search.push(
                      function(settings, data, dataIndex) {
                          return $(table.row(dataIndex).node()).attr('data-ticket') == 'closed' ||
                                    $(table.row(dataIndex).node()).attr('data-ticket') == 'solved';
                        }
                    );
                }
                else{
                    $.fn.dataTable.ext.search.push(
                      function(settings, data, dataIndex) {
                          return $(table.row(dataIndex).node()).attr('data-ticket') == 'active' ||
                                    $(table.row(dataIndex).node()).attr('data-ticket') == 'waiting' ||
                                    $(table.row(dataIndex).node()).attr('data-ticket') == 'requires-response' ||
                                    $(table.row(dataIndex).node()).attr('data-ticket') == 'spam' ||
                                    $(table.row(dataIndex).node()).attr('data-ticket') == 'Merged';
                        }
                    );
                }
                table.draw();
            });

            // Tweaks
            setTimeout(function(){ $('#check-1').click(); $('#check-1').click(); }, 500);
        });

    </script>
@stop