@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">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif
                        <h3 class="font-weight-bold float-left mb-4 mr-3">{{ __('Ticket Details') }}</h3>
                        <a href="{{route('home')}}" class="btn btn-secondary float-left">Back</a>

                        @if($ticket->status !== \App\Ticket::STATUS_CLOSE)
                            <form method="post" action="{{route('tickets.close', ['ticket' => $ticket])}}" class="float-right">
                                @csrf
                                <button class="btn btn-danger" type="submit">Close Ticket</button>
                            </form>
                        @endif
                            <div style="clear: both"></div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row mb-4">
                                    <div class="col-md-6 mb-2"><i class="fa fa-user ticket_icon mr-2"></i>{{$ticket->parent_name}}</div>
                                    <div class="col-md-6 mb-2"><i class="fa fa-clock-o ticket_icon mr-2"></i>{{$ticket->created_at->diffForHumans()}}</div>
                                    <div class="col-md-6 mb-2"><i class="fa fa-bars ticket_icon mr-2"></i>{{$ticket->status_name}}</div>
                                    <div class="col-md-6 mb-2"><i class="fa fa-bars ticket_icon mr-2"></i>{{$ticket->type_name}}</div>
                                    <div class="col-md-6 mb-2"><i class="fa fa-exclamation-circle ticket_icon mr-2"></i><span
                                            >{{$ticket->time['status']}}</span>
                                    </div>
                                    <div class="col-md-12 mb-4"><i class="fa fa-quote-left ticket_icon mr-2"></i>{{$ticket->message}}</div>
                                </div>
                                @if($ticket->status !== \App\Ticket::STATUS_CLOSE)
                                <form method="post" action="{{route('tickets.reply', ['ticket' => $ticket])}}" enctype="multipart/form-data">
                                    @csrf
                                    <div class="form-group">
                                        <label for="reply">Message</label>
                                        <textarea name="message" id="reply" class="form-control @if($errors->first('message')) is-invalid @endif"></textarea>
                                        @if($errors->first('message'))
                                            <div class="invalid-feedback d-block">
                                                {{$errors->first('message')}}
                                            </div>
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label for="file">File</label>
                                        <input type="file" name="file" id="file" class="form-control-file @if($errors->first('file')) is-invalid @endif" />
                                        @if($errors->first('file'))
                                            <div class="invalid-feedback d-block">
                                                {{$errors->first('file')}}
                                            </div>
                                        @endif
                                    </div>
                                    <button class="btn btn-primary" type="submit" name="action" value="submit">Submit</button>
                                </form>
                                @endif
                            </div>
                            <div class="col-md-6">
                                @if($ticket->advisor)
                                    <p>Advisor: {{$ticket->advisor->name}} ({{$ticket->advisor->email}})
                                @else
                                    <form class="mb-3"
                                          action="{{route('tickets.associate_advisor', ['ticket' => $ticket])}}"
                                          method="post">
                                        @csrf
                                        @if($ticket->advisor_email)
                                            <p class="mb-0 mr-3">Advisor not found: {{$ticket->advisor_email }}</p>
                                        @endif
                                        <div class="form-group mb-0">
                                            <select name="advisor" class="select2_advisor form-control">
                                                <option value="" disabled selected>Select Advisor</option>
                                                @foreach($advisors as $advisor)
                                                    <option value="{{$advisor->id}}">{{$advisor->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </form>


                                @endif
                                @foreach($replies as $reply)
                                    <div class="border py-2 pr-3  flex-column align-items-start mb-2 single_reply">
                                        <div class="d-flex w-100 justify-content-between color-primary">
                                            <h5 class="mb-1">{{$reply->user ? $reply->user->name .' ('. $reply->user->user_type->name.')': $ticket->parent_name}}</h5>
                                            <small>{{$reply->created_at->diffForHumans()}}</small>
                                        </div>
                                        <p class="{{$reply->file ? 'mb-2' : 'mb-0'}}">{{$reply->message}}</p>
                                        @if($reply->file)
                                        <a class="mb-0" href="{{$reply->file}}" target="_blank">{{$reply->file_name}}</a>
                                        @endif
                                    </div>
                                @endforeach
                                {{$replies->links()}}
                            </div>
                        </div>
                    </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_advisor').select2();
                $('.select2_advisor').on('change', function (event) {
                    event.preventDefault();
                    if (!$(this).val()) {
                        return
                    }
                    if (confirm('Are you sure')) {
                        $(this).closest('form').submit();
                    } else {
                        $(this).val(null).trigger('change');
                    }
                })
            })
        })(window.jQuery)
    </script>
    <style>
        .single_reply {
            position: relative;
            padding-left: 35px;
        }

        .ticket_icon, .color-primary{
            color: #007bff;
        }
        .single_reply::before {
            content: "\f10d";
            color: #007bff;
            position: absolute;
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            left: 10px;
            top: 13px;
        }
    </style>
@endsection