@extends('client.layouts.main')

@section('title', 'Ticket #' . $ticket->ticket_number)

@section('content')
@php
    $priorityColors = [
        'low' => 'default',
        'medium' => 'info',
        'high' => 'warning',
        'urgent' => 'danger',
    ];
    $statusColors = [
        'open' => 'warning',
        'in_progress' => 'info',
        'answered' => 'success',
        'customer_reply' => 'warning',
        'on_hold' => 'default',
        'closed' => 'default',
    ];
@endphp

<!-- Ticket Info -->
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption"><span class="caption-subject theme-font bold uppercase">Ticket Information</span></div>
        <div class="actions">
            <a href="{{ route('client.tickets.index') }}" class="btn btn-default">
                <i class="fa fa-arrow-left"></i> Back to Tickets
            </a>
        </div>
    </div>
    <div class="portlet-body">
        <div class="row">
            <div class="col-md-3">
                <strong>Ticket Number</strong>
                <p>{{ $ticket->ticket_number }}</p>
            </div>
            <div class="col-md-3">
                <strong>Subject</strong>
                <p>{{ $ticket->subject }}</p>
            </div>
            <div class="col-md-2">
                <strong>Status</strong>
                <p><span class="label label-sm label-{{ $statusColors[$ticket->status] ?? 'default' }}">{{ ucfirst(str_replace('_', ' ', $ticket->status)) }}</span></p>
            </div>
            <div class="col-md-2">
                <strong>Priority</strong>
                <p><span class="label label-sm label-{{ $priorityColors[$ticket->priority] ?? 'default' }}">{{ ucfirst($ticket->priority) }}</span></p>
            </div>
            <div class="col-md-2">
                <strong>Department</strong>
                <p>{{ ucfirst($ticket->department) }}</p>
            </div>
        </div>
        <div class="row" style="margin-top:10px;">
            <div class="col-md-3">
                <strong>Created</strong>
                <p>{{ $ticket->created_at->format('M d, Y h:i A') }}</p>
            </div>
            @if($ticket->related_service)
            <div class="col-md-3">
                <strong>Related Service</strong>
                <p>{{ $ticket->related_service }}</p>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Conversation Thread -->
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption"><span class="caption-subject theme-font bold uppercase">Conversation</span></div>
    </div>
    <div class="portlet-body">
        @foreach($ticket->replies->sortBy('created_at') as $reply)
        <div style="border-left: 3px solid {{ $reply->is_staff ? '#3598dc' : '#e1e5ec' }}; padding: 15px; margin-bottom: 15px; background: {{ $reply->is_staff ? '#f6fbff' : '#fafafa' }};">
            <div style="margin-bottom: 10px;">
                <strong>{{ $reply->is_staff ? 'Support Staff' : 'You' }}</strong>
                @if($reply->is_staff)
                    <span class="label label-sm label-info" style="margin-left: 5px;">Staff</span>
                @endif
                <span class="font-grey-mint pull-right">{{ $reply->created_at->diffForHumans() }}</span>
            </div>
            <div>{!! nl2br(e($reply->message)) !!}</div>
        </div>
        @endforeach
    </div>
</div>

<!-- Reply Form / Closed Notice -->
@if($ticket->status === 'closed')
<div class="portlet light">
    <div class="portlet-body text-center font-grey-mint">
        <i class="fa fa-lock"></i> This ticket is closed. If you need further assistance, please open a new ticket.
    </div>
</div>
@else
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption"><span class="caption-subject theme-font bold uppercase">Reply</span></div>
    </div>
    <form action="{{ route('client.tickets.reply', $ticket) }}" method="POST">
        @csrf
        <div class="portlet-body">
            <div class="form-group">
                <textarea name="message" class="form-control" rows="6" required placeholder="Type your reply...">{{ old('message') }}</textarea>
                @if($errors->has('message'))<span class="help-block text-danger">{{ $errors->first('message') }}</span>@endif
            </div>
        </div>
        <div class="panel-footer">
            <button type="submit" class="btn btn-success">
                <i class="fa fa-reply"></i> Send Reply
            </button>
        </div>
    </form>
</div>

<div class="portlet light">
    <div class="portlet-body">
        <form action="{{ route('client.tickets.close', $ticket) }}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to close this ticket?');">
            @csrf
            <button type="submit" class="btn btn-default">
                <i class="fa fa-times"></i> Close Ticket
            </button>
        </form>
    </div>
</div>
@endif
@endsection