@extends('layouts.app')

@section('title', $ticket->reference)

@section('content')
@include('managementtools::layouts.nav')

<section class="content no-print mt-page">
    <div class="mt-page-header">
        <div>
            <h1 style="margin-bottom:4px;">
                <i class="fas fa-ticket-alt" style="color:#2563eb;margin-left:8px;"></i>
                {{ $ticket->reference }}
            </h1>
            <p style="margin:0;color:#64748b;">{{ $ticket->subject }}</p>
        </div>
        <a href="{{ action([\Modules\ManagementTools\Http\Controllers\TicketController::class, 'index']) }}" class="btn btn-default">
            <i class="fa fa-arrow-right"></i> @lang('managementtools::lang.ticket_back_list')
        </a>
    </div>

    <div class="row" style="margin:0 15px;">
        <div class="col-md-8">
            <div class="mt-card">
                <div class="mt-card-header">
                    <h3 class="mt-card-title">@lang('managementtools::lang.ticket_conversation')</h3>
                </div>
                <div class="mt-card-body mt-ticket-thread">
                    <div class="mt-ticket-msg mt-ticket-msg--original">
                        <div class="mt-ticket-msg__head">
                            <strong>{{ $ticket->user ? $ticket->user->user_full_name : '—' }}</strong>
                            <span class="text-muted">{{ $mtUtil->formatDateTime($ticket->created_at) }}</span>
                            <span class="label label-default">@lang('managementtools::lang.ticket_original')</span>
                        </div>
                        <div class="mt-ticket-msg__body">{!! nl2br(e($ticket->body)) !!}</div>
                    </div>

                    @foreach($ticket->replies as $reply)
                    <div class="mt-ticket-msg {{ (int)$reply->user_id === (int)$ticket->user_id ? '' : 'mt-ticket-msg--staff' }}">
                        <div class="mt-ticket-msg__head">
                            <strong>{{ $reply->user ? $reply->user->user_full_name : '—' }}</strong>
                            <span class="text-muted">{{ $mtUtil->formatDateTime($reply->created_at) }}</span>
                        </div>
                        <div class="mt-ticket-msg__body">
                            @if($reply->body)
                            {!! nl2br(e($reply->body)) !!}
                            @endif
                            @if($reply->attachment)
                            <div class="mt-ticket-attachment">
                                <a href="{{ asset('storage/'.$reply->attachment) }}" target="_blank" class="btn btn-xs btn-default">
                                    <i class="fa fa-paperclip"></i> @lang('managementtools::lang.ticket_download_attachment')
                                </a>
                            </div>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            @if((int)$ticket->status !== \Modules\ManagementTools\Entities\MtUserTicket::STATUS_CLOSED)
            <div class="mt-card">
                <div class="mt-card-header">
                    <h3 class="mt-card-title">@lang('managementtools::lang.ticket_reply')</h3>
                </div>
                <div class="mt-card-body">
                    {!! Form::open(['url' => action([\Modules\ManagementTools\Http\Controllers\TicketController::class, 'reply'], [$ticket->id]), 'method' => 'post', 'id' => 'mt_ticket_reply_form', 'files' => true]) !!}
                    <div class="form-group">
                        {!! Form::textarea('body', null, ['class' => 'form-control', 'rows' => 4, 'placeholder' => __('managementtools::lang.ticket_reply_placeholder')]) !!}
                    </div>
                    <div class="form-group">
                        <label>@lang('managementtools::lang.ticket_attachment')</label>
                        <input type="file" name="attachment" class="form-control">
                        <p class="help-block">@lang('managementtools::lang.ticket_attachment_hint')</p>
                    </div>
                    <button type="submit" class="mt-btn-primary">
                        <i class="fa fa-reply"></i> @lang('managementtools::lang.ticket_send_reply')
                    </button>
                    {!! Form::close() !!}
                </div>
            </div>
            @else
            <div class="alert alert-info">@lang('managementtools::lang.ticket_closed_notice')</div>
            @endif
        </div>

        <div class="col-md-4">
            <div class="mt-card">
                <div class="mt-card-header">
                    <h3 class="mt-card-title">@lang('managementtools::lang.ticket_details')</h3>
                </div>
                <div class="mt-card-body">
                    <table class="table table-condensed">
                        <tr>
                            <th>@lang('managementtools::lang.ticket_status')</th>
                            <td><span class="label {{ $ticket->statusBadgeClass() }}">{{ $ticket->statusLabel() }}</span></td>
                        </tr>
                        <tr>
                            <th>@lang('managementtools::lang.ticket_priority')</th>
                            <td><span class="label {{ $ticket->priorityBadgeClass() }}">{{ $ticket->priorityLabel() }}</span></td>
                        </tr>
                        <tr>
                            <th>@lang('managementtools::lang.ticket_requester')</th>
                            <td>{{ $ticket->user ? $ticket->user->user_full_name : '—' }}</td>
                        </tr>
                        <tr>
                            <th>@lang('managementtools::lang.ticket_assignee')</th>
                            <td>{{ $ticket->assignee ? $ticket->assignee->user_full_name : '—' }}</td>
                        </tr>
                        <tr>
                            <th>@lang('managementtools::lang.date')</th>
                            <td>{{ $mtUtil->formatDateTime($ticket->created_at) }}</td>
                        </tr>
                        <tr>
                            <th>@lang('managementtools::lang.ticket_last_update')</th>
                            <td>{{ $mtUtil->formatDateTime($ticket->updated_at) }}</td>
                        </tr>
                    </table>

                    @if($can_manage)
                    <hr>
                    <h4 style="font-size:14px;font-weight:700;">@lang('managementtools::lang.ticket_manage')</h4>
                    {!! Form::open(['url' => action([\Modules\ManagementTools\Http\Controllers\TicketController::class, 'update'], [$ticket->id]), 'method' => 'put', 'id' => 'mt_ticket_update_form']) !!}
                    <div class="form-group">
                        {!! Form::label('status', __('managementtools::lang.ticket_status')) !!}
                        {!! Form::select('status', $statuses, $ticket->status, ['class' => 'form-control']) !!}
                    </div>
                    <div class="form-group">
                        {!! Form::label('priority', __('managementtools::lang.ticket_priority')) !!}
                        {!! Form::select('priority', $priorities, $ticket->priority, ['class' => 'form-control']) !!}
                    </div>
                    <div class="form-group">
                        {!! Form::label('assigned_to', __('managementtools::lang.ticket_assignee')) !!}
                        <select name="assigned_to" class="form-control select2">
                            <option value="">@lang('managementtools::lang.ticket_unassigned')</option>
                            @foreach($agents as $agent)
                            <option value="{{ $agent->id }}" @if((int)$ticket->assigned_to === (int)$agent->id) selected @endif>
                                {{ $agent->user_full_name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fa fa-save"></i> @lang('managementtools::lang.save')
                    </button>
                    {!! Form::close() !!}

                    <button type="button" class="btn btn-danger btn-block mt-delete-ticket" style="margin-top:10px;"
                        data-href="{{ action([\Modules\ManagementTools\Http\Controllers\TicketController::class, 'destroy'], [$ticket->id]) }}">
                        <i class="fa fa-trash"></i> @lang('managementtools::lang.ticket_delete')
                    </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.mt-ticket-thread { max-height: none; }
.mt-ticket-msg {
    border: 1px solid #e8edf5; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
    background: #fafbfe;
}
.mt-ticket-msg--staff { background: #eff6ff; border-color: #bfdbfe; }
.mt-ticket-msg--original { background: #fff; border-right: 3px solid #2563eb; }
.mt-ticket-msg__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.mt-ticket-msg__body { color: #334155; line-height: 1.7; }
.mt-ticket-attachment { margin-top: 10px; }
</style>
@endsection

@section('javascript')
<script type="text/javascript">
$(document).ready(function() {
    $('form#mt_ticket_reply_form').on('submit', function(e) {
        e.preventDefault();
        var form = $(this);
        var data = new FormData(form[0]);
        $.ajax({
            method: 'POST',
            url: form.attr('action'),
            data: data,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(result) {
                if (result.success) {
                    toastr.success(result.msg);
                    window.location.reload();
                } else {
                    toastr.error(result.msg);
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    $.each(xhr.responseJSON.errors, function(k, v) { toastr.error(v[0]); });
                } else {
                    toastr.error(LANG.something_went_wrong);
                }
            }
        });
    });

    $('form#mt_ticket_update_form').on('submit', function(e) {
        e.preventDefault();
        var form = $(this);
        $.ajax({
            method: 'PUT',
            url: form.attr('action'),
            data: form.serialize(),
            dataType: 'json',
            success: function(result) {
                if (result.success) {
                    toastr.success(result.msg);
                    window.location.reload();
                } else {
                    toastr.error(result.msg);
                }
            }
        });
    });

    $('.mt-delete-ticket').on('click', function() {
        var url = $(this).data('href');
        swal({ title: LANG.sure, icon: 'warning', buttons: true, dangerMode: true }).then(function(ok) {
            if (ok) {
                $.ajax({
                    method: 'DELETE',
                    url: url,
                    dataType: 'json',
                    success: function(result) {
                        if (result.success) {
                            toastr.success(result.msg);
                            window.location = '{{ action([\Modules\ManagementTools\Http\Controllers\TicketController::class, "index"]) }}';
                        }
                    }
                });
            }
        });
    });
});
</script>
@endsection