@extends('admin.layouts.main')

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

@section('content')
<div class="row">
    <div class="col-md-8">
        <!-- Ticket Info -->
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption caption-md">
                    <span class="caption-subject theme-font bold uppercase">Ticket Information</span>
                </div>
                <div class="actions">
                    <a href="{{ route('admin.tickets.edit', $ticket) }}" class="btn btn-sm blue"><i class="fa fa-pencil"></i> Edit</a>
                </div>
            </div>
            <div class="portlet-body">
                <table class="table table-bordered table-striped">
                    <tr><th style="width:30%">Ticket Number</th><td>{{ $ticket->ticket_number }}</td></tr>
                    <tr><th>Subject</th><td>{{ $ticket->subject }}</td></tr>
                    <tr><th>Client</th><td>@if($ticket->user)<a href="{{ route('admin.customers.show', $ticket->user) }}">{{ $ticket->user->first_name }} {{ $ticket->user->last_name }}</a> ({{ $ticket->user->email }})@else N/A @endif</td></tr>
                    <tr><th>Department</th><td>{{ $ticket->department ?? '-' }}</td></tr>
                    <tr><th>Related Service</th><td>{{ $ticket->related_service ?? '-' }}</td></tr>
                    <tr><th>Created</th><td>{{ $ticket->created_at->format('M d, Y H:i') }}</td></tr>
                </table>
            </div>
        </div>

        <!-- Conversation Thread -->
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption caption-md">
                    <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="background: {{ $reply->is_staff ? '#e8f4fd' : '#f5f5f5' }}; border-radius: 4px; padding: 15px; margin-bottom: 15px; border-left: 3px solid {{ $reply->is_staff ? '#3598dc' : '#999' }};" id="reply-{{ $reply->id }}">
                    <div style="margin-bottom: 8px; display:flex; justify-content:space-between; align-items:center;">
                        <div>
                            <strong>{{ $reply->user->first_name ?? 'Unknown' }} {{ $reply->user->last_name ?? '' }}</strong>
                            @if($reply->is_staff)
                                <span class="label label-sm label-info">Staff</span>
                            @else
                                <span class="label label-sm label-default">Client</span>
                            @endif
                            <span class="font-grey-mint" style="margin-left:10px;">{{ $reply->created_at->format('M d, Y H:i') }}</span>
                        </div>
                        <div>
                            <button type="button" class="btn btn-xs blue" onclick="editReply({{ $reply->id }})" title="Edit"><i class="fa fa-pencil"></i></button>
                            <form action="{{ route('admin.tickets.reply.destroy', $reply) }}" method="POST" style="display:inline;" onsubmit="return confirm('Delete this reply?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-xs btn-danger" title="Delete"><i class="fa fa-trash"></i></button>
                            </form>
                        </div>
                    </div>
                    <div class="reply-content" id="reply-content-{{ $reply->id }}" style="white-space: pre-wrap;">{{ $reply->message }}</div>
                    <div class="reply-edit-form" id="reply-edit-{{ $reply->id }}" style="display:none;">
                        <form action="{{ route('admin.tickets.reply.update', $reply) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <textarea name="message" class="form-control" rows="4">{{ $reply->message }}</textarea>
                            <div style="margin-top:8px;">
                                <button type="submit" class="btn btn-xs btn-success"><i class="fa fa-save"></i> Save</button>
                                <button type="button" class="btn btn-xs btn-default" onclick="cancelEditReply({{ $reply->id }})">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
                @endforeach

                @if($ticket->replies->isEmpty())
                    <p class="text-center font-grey-mint">No replies yet.</p>
                @endif
            </div>
        </div>

        <!-- Reply Form -->
        @if($ticket->status !== 'closed')
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption caption-md">
                    <span class="caption-subject theme-font bold uppercase">Send Reply</span>
                </div>
            </div>
            <div class="portlet-body">
                <form action="{{ route('admin.tickets.reply', $ticket) }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <textarea name="message" class="form-control" rows="6" placeholder="Type your reply..." required>{{ old('message') }}</textarea>
                        @error('message')
                            <span class="help-block text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <button type="submit" class="btn blue"><i class="fa fa-paper-plane"></i> Send Reply</button>
                </form>
            </div>
        </div>
        @endif
    </div>

    <div class="col-md-4">
        <!-- Status Panel -->
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption caption-md">
                    <span class="caption-subject theme-font bold uppercase">Manage Ticket</span>
                </div>
            </div>
            <div class="portlet-body">
                <form action="{{ route('admin.tickets.update', $ticket) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" class="form-control">
                            @foreach(['open', 'in_progress', 'answered', 'customer_reply', 'on_hold', 'closed'] as $status)
                                <option value="{{ $status }}" {{ $ticket->status === $status ? 'selected' : '' }}>{{ ucwords(str_replace('_', ' ', $status)) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Priority</label>
                        <select name="priority" class="form-control">
                            @foreach(['low', 'medium', 'high', 'urgent'] as $priority)
                                <option value="{{ $priority }}" {{ $ticket->priority === $priority ? 'selected' : '' }}>{{ ucfirst($priority) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Department</label>
                        <input type="text" name="department" class="form-control" value="{{ $ticket->department }}">
                    </div>
                    <div class="form-group">
                        <label>Assigned To</label>
                        <select name="assigned_to" class="form-control">
                            <option value="">-- Unassigned --</option>
                            @foreach($adminUsers as $admin)
                                <option value="{{ $admin->id }}" {{ $ticket->assigned_to == $admin->id ? 'selected' : '' }}>{{ $admin->first_name }} {{ $admin->last_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn blue btn-block"><i class="fa fa-save"></i> Update</button>
                </form>
            </div>
        </div>

        <!-- Actions Panel -->
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption caption-md">
                    <span class="caption-subject theme-font bold uppercase">Actions</span>
                </div>
            </div>
            <div class="portlet-body">
                @if($ticket->status !== 'closed')
                <form action="{{ route('admin.tickets.close', $ticket) }}" method="POST" onsubmit="return confirm('Close this ticket?')" style="margin-bottom:10px;">
                    @csrf
                    <button type="submit" class="btn btn-warning btn-block"><i class="fa fa-times"></i> Close Ticket</button>
                </form>
                @else
                <div class="alert alert-info text-center" style="margin-bottom: 10px;">
                    Closed on {{ $ticket->closed_at?->format('M d, Y H:i') ?? 'N/A' }}
                </div>
                @endif

                <form action="{{ route('admin.tickets.destroy', $ticket) }}" method="POST" onsubmit="return confirm('PERMANENTLY DELETE this ticket and all replies? This cannot be undone.')" style="margin-bottom:10px;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-block"><i class="fa fa-trash"></i> Delete Ticket</button>
                </form>

                <a href="{{ route('admin.tickets.index') }}" class="btn default btn-block"><i class="fa fa-arrow-left"></i> Back to List</a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function editReply(id) {
    document.getElementById('reply-content-' + id).style.display = 'none';
    document.getElementById('reply-edit-' + id).style.display = 'block';
}
function cancelEditReply(id) {
    document.getElementById('reply-content-' + id).style.display = 'block';
    document.getElementById('reply-edit-' + id).style.display = 'none';
}
</script>
@endpush