@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-header">{{ __('Tickets') }}</div>

                    <div class="card-body">
                        @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">
                                    <select class="select2" name="school">
                                        @foreach($schools as $school)
                                            <option
                                                value="{{$school}}" {{request('school') == $school?'selected':''}}>
                                                {{$school ?? 'Select School'}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </form>

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

                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Parent</th>
                                        <th>Type</th>
                                        <th>Status</th>
                                        <th>Requested At</th>
                                        <th>?</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($tickets as $ticket)
                                        <tr>
                                            <td>{{$ticket->id}}</td>
                                            <td>{{$ticket->parent_name}}</td>
                                            <td>{{$ticket->type_name}}</td>
                                            <td>{{$ticket->status_name}}</td>
                                            <td>{{$ticket->created_at->diffForHumans()}}</td>
                                            <td><span
                                                    class="text-{{$ticket->time['key']}}">{{$ticket->time['status']}}</span>
                                            </td>
                                            <td><a href="{{route('tickets.view', ['ticket' => $ticket])}}" class="btn btn-primary">View</a></td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <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').on('change', function () {
                    $(this).closest('form').submit();
                })
            })
        })(window.jQuery)
    </script>
@endsection