@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">

                    <div class="card-body">
                        <h1>{{ __('Tickets') }}</h1>
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif
                        <form action="/">
                            <div class="row">
                                <div class="col-md-6 d-flex align-items-center mb-3">
                                    <div class="form-group mb-0 mr-3">
                                        <select class="select2" name="status">
                                            <option value="">Open Tickets</option>
                                            @foreach(\App\Ticket::STATUSES as $key => $status)
                                                <option
                                                    value="{{$key}}" {{request('status') == $key?'selected':''}}>
                                                    {{$status}} Tickets
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <p class="mb-0">{{$tickets->total()}} {{request('status') ?  \App\Ticket::STATUSES[request('status')] . ' Tickets' : 'Open Tickets'}}</p>
                                </div>
                                <div class="col-md-6 d-flex justify-content-end mb-3">
                                    <div class="form-group mb-0 mr-3">
                                    <select class="select2_school" name="school" style="width: 100%;">
                                        <option></option>
                                        @foreach($schools as $school)
                                            <option
                                                value="{{$school}}" {{request('school') == $school?'selected':''}}>
                                                {{$school ?? 'Select School'}}
                                            </option>
                                        @endforeach
                                    </select>
                                    </div>
                                </div>
                            </div>
                        </form>

                        @if(count($tickets) > 0)
                            <div class="table-responsive">

                                <table class="table">
                                    <tbody>
                                    @foreach($tickets as $ticket)
                                        <tr>
                                            <td><i class="fa fa-user ticket_icon mr-2"></i>{{$ticket->parent_name}}</td>
                                            <td><i class="fa fa-quote-left ticket_icon mr-2"></i>{{$ticket->message}}</td>
                                            <td><i class="fa fa-clock-0 ticket_icon mr-2"></i>{{$ticket->created_at->diffForHumans()}}</td>
                                            <td><i class="fa fa-bars ticket_icon mr-2"></i>{{$ticket->status_name}}</td>
                                            <td><span
                                                    class="text-{{$ticket->time['key']}}"><i class="fa fa-exclamation-circle ticket_icon mr-2"></i>{{$ticket->time['status']}}</span>
                                            </td>
                                            <td><a href="{{route('tickets.view', ['ticket' => $ticket])}}" class="btn btn-primary">View</a></td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                                {{$tickets->withQueryString()->links()}}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script>
        (function ($) {
            $(document).ready(function () {
                $('.select2').select2();
                $('.select2_school').select2({
                    placeholder: "Select School",
                    allowClear: true
                })
                $('.select2, .select2_school').on('change', function () {
                    $(this).closest('form').submit();
                })
            })
        })(window.jQuery)
    </script>
    <style>
        .ticket_icon, .color-primary{
            color: #007bff;
        }
    </style>
@endsection