@extends('layouts.app')
@section('title')Ticket #{{ $ticket->ticket_number }} @endsection
@section('content')
<style>
    .ticket-header {
        background: #f8f9fa;
        border-left: 4px solid #007bff;
        padding: 20px;
        margin-bottom: 20px;
    }
    .message-container {
        max-height: 500px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        padding: 15px;
        background: #fff;
    }
    .message {
        margin-bottom: 20px;
        padding: 15px;
        border-radius: 8px;
        position: relative;
    }
    .message.user-message {
        background: #e3f2fd;
        margin-left: 50px;
        border-bottom-right-radius: 3px;
    }
    .message.admin-message {
        background: #f1f8e9;
        margin-right: 50px;
        border-bottom-left-radius: 3px;
    }
    .message.my-message {
        background: #e8f5e8;
        margin-left: 300px;
        border-bottom-right-radius: 3px;
    }
    .message.my-message .message-header {
        text-align: right;
    }
    .message.other-message {
        background: #f0f0f0;
        margin-right: 300px;
        border-bottom-left-radius: 3px;
    }
    .message.other-message .message-header {
        text-align: left;
    }
    .message-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        font-size: 12px;
        color: #6c757d;
    }
    .message-content {
        line-height: 1.6;
        word-wrap: break-word;
    }
    .attachment-item {
        display: inline-block;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 8px 12px;
        margin: 5px 5px 5px 0;
        text-decoration: none;
        color: #495057;
        font-size: 13px;
    }
    .attachment-item:hover {
        background: #e9ecef;
        text-decoration: none;
        color: #495057;
    }
    .status-badge {
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 15px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: white !important;
    }
    .priority-badge {
        font-size: 11px;
        padding: 5px 10px;
        border-radius: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: white !important;
    }
    /* Status Color Overrides */
    .status-open {
        background-color: #007bff !important;
        box-shadow: 0 0 3px rgba(0, 123, 255, 0.3);
        border: none !important;
    }
    .status-in_progress {
        background-color: #ffc107 !important;
        color: #212529 !important;
        border: none !important;
    }
    .status-resolved {
        background-color: #28a745 !important;
        box-shadow: 0 0 3px rgba(40, 167, 69, 0.3);
        border: none !important;
    }
    .status-closed {
        background-color: #6c757d !important;
        border: none !important;
    }
    /* Priority Color Overrides */
    .priority-low {
        background-color: #17a2b8 !important;
        border: none !important;
    }
    .priority-medium {
        background-color: #ffc107 !important;
        color: #212529 !important;
        border: none !important;
    }
    .priority-high {
        background-color: #dc3545 !important;
        border: none !important;
    }
    .priority-urgent {
        background-color: #343a40 !important;
        animation: pulse 2s infinite;
        box-shadow: 0 0 5px rgba(52, 58, 64, 0.5);
        border: none !important;
    }
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    .reply-form {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 5px;
        margin-top: 20px;
    }
    .admin-controls {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 20px;
    }
</style>

<section class="content top-head">
    <div class="row">
        <div class="col-md-12">
            <!-- Ticket Header -->
            <div class="ticket-header">
                <div class="row">
                    <div class="col-md-8">
                        <h3>{{ $ticket->subject }}</h3>
                        @php
                            $cat = $ticket->category ?? '';
                            if ($cat === 'it') {
                                $categoryLabel = 'Technical Support';
                            } elseif ($cat === 'account') {
                                $categoryLabel = 'Account Manager';
                            } elseif ($cat === 'admin') {
                                $categoryLabel = 'Admin';
                            } else {
                                $categoryLabel = $cat ? ucfirst($cat) : '—';
                            }
                        @endphp
                        <p class="mb-1"><strong>Category:</strong> {{ $categoryLabel }}</p>
                        <p class="text-muted mb-2">Ticket #{{ $ticket->ticket_number }}</p>
                        <small class="text-muted">
                            <i class="fa fa-user"></i> Created by: {{ $ticket->user->name }} ({{ $ticket->user->email }})
                            <i class="fa fa-clock-o ml-3"></i> {{ $ticket->created_at->format('M d, Y h:i A') }}
                            @if($ticket->assignedTo)
                                <i class="fa fa-user-md ml-3"></i> Assigned to: {{ $ticket->assignedTo->name }}
                            @endif
                        </small>
                    </div>
                    <div class="col-md-4 text-right">
                        <span class="badge badge-{{ $ticket->status_color }} status-badge status-{{ $ticket->status }}">
                            {{ ucfirst(str_replace('_', ' ', $ticket->status)) }}
                        </span>
                        <br>
                        <span class="badge badge-{{ $ticket->priority_color }} priority-badge priority-{{ $ticket->priority }} mt-2">
                            {{ ucfirst($ticket->priority) }} Priority
                        </span>
                    </div>
                </div>
            </div>

            <!-- Admin Controls (Only for Super Admin) -->
            @if(Auth::user()->user_role == 1)
                <div class="admin-controls">
                    <h5><i class="fa fa-cogs"></i> Admin Controls</h5>
                    <div class="row">
                        <div class="col-md-4">
                            <form method="POST" action="{{ route('support.updateStatus', $ticket->id) }}" style="display: inline-block;">
                                @csrf
                                @method('PATCH')
                                <div class="input-group">
                                    <select name="status" class="form-control" onchange="this.form.submit()">
                                        <option value="open" {{ $ticket->status == 'open' ? 'selected' : '' }}>Open</option>
                                        <option value="in_progress" {{ $ticket->status == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                        <option value="resolved" {{ $ticket->status == 'resolved' ? 'selected' : '' }}>Resolved</option>
                                        <option value="closed" {{ $ticket->status == 'closed' ? 'selected' : '' }}>Closed</option>
                                    </select>
                                    <span class="input-group-addon">Status</span>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-4">
                            <form method="POST" action="{{ route('support.updatePriority', $ticket->id) }}" style="display: inline-block;">
                                @csrf
                                @method('PATCH')
                                <div class="input-group">
                                    <select name="priority" class="form-control" onchange="this.form.submit()">
                                        <option value="low" {{ $ticket->priority == 'low' ? 'selected' : '' }}>Low</option>
                                        <option value="medium" {{ $ticket->priority == 'medium' ? 'selected' : '' }}>Medium</option>
                                        <option value="high" {{ $ticket->priority == 'high' ? 'selected' : '' }}>High</option>
                                        <option value="urgent" {{ $ticket->priority == 'urgent' ? 'selected' : '' }}>Urgent</option>
                                    </select>
                                    <span class="input-group-addon">Priority</span>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-4">
                            <form method="POST" action="{{ route('support.assign', $ticket->id) }}" style="display: inline-block;">
                                @csrf
                                @method('PATCH')
                                <div class="input-group">
                                    <select name="assigned_to" class="form-control" onchange="this.form.submit()">
                                        <option value="">Unassigned</option>
                                        @foreach(\App\User::where('user_role', 1)->get() as $admin)
                                            <option value="{{ $admin->id }}" {{ $ticket->assigned_to == $admin->id ? 'selected' : '' }}>
                                                {{ $admin->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="input-group-addon">Assign</span>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- second row: category + back -->
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <form method="POST" action="{{ route('support.updateCategory', $ticket->id) }}" style="display: inline-block;">
                                @csrf
                                @method('PATCH')
                                <div class="input-group">
                                    <select name="category" class="form-control" onchange="this.form.submit()">
                                        <option value="it" {{ $ticket->category == 'it' ? 'selected' : '' }}>Technical Support</option>
                                        <option value="account" {{ $ticket->category == 'account' ? 'selected' : '' }}>Account Manager</option>
                                        <option value="admin" {{ $ticket->category == 'admin' ? 'selected' : '' }}>Admin</option>
                                    </select>
                                    <span class="input-group-addon">Category</span>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="{{ route('support.index') }}" class="btn btn-default">
                                <i class="fa fa-arrow-left"></i> Back to Tickets
                            </a>
                        </div>
                    </div>
                </div>
            @else
                <div class="text-right mb-3">
                    <a href="{{ route('support.index') }}" class="btn btn-default">
                        <i class="fa fa-arrow-left"></i> Back to Tickets
                    </a>
                </div>
            @endif

            <!-- Conversation -->
            <div class="box box-info">
                <div class="box-header with-border">
                    <h4 class="box-title"><i class="fa fa-comments"></i> Conversation ({{ $ticket->messages->count() + 1 }} messages)</h4>
                </div>
                <div class="box-body">
                    <div class="message-container">
                        <!-- Initial Request -->
                        <div class="message {{ $ticket->user_id == Auth::id() ? 'my-message' : 'other-message' }}">
                            <div class="message-header">
                                <strong>
                                    {{ $ticket->user->name }}
                                    @if($ticket->user_id == Auth::id())
                                        <span class="badge badge-primary">You</span>
                                    @endif
                                </strong>
                                <span>{{ $ticket->created_at->format('M d, Y h:i A') }}</span>
                            </div>
                            <div class="message-content">
                                {!! nl2br(e($ticket->description)) !!}
                            </div>
                            @if($ticket->attachments->where('message_id', null)->count() > 0)
                                <div class="mt-3">
                                    @foreach($ticket->attachments->where('message_id', null) as $attachment)
                                        <a href="{{ route('support.downloadAttachment', $attachment->id) }}" class="attachment-item">
                                            <i class="fa fa-paperclip"></i> {{ $attachment->file_name }}
                                            <small>({{ $attachment->file_size_formatted }})</small>
                                        </a>
                                    @endforeach
                                </div>
                            @endif
                        </div>

                        <!-- Replies -->
                        @foreach($ticket->messages as $message)
                            <div class="message {{ $message->user_id == Auth::id() ? 'my-message' : 'other-message' }}">
                                <div class="message-header">
                                    <strong>
                                        {{ $message->user->name }}
                                        @if($message->is_admin_reply)
                                            <span class="badge badge-success">Admin</span>
                                        @endif
                                        @if($message->user_id == Auth::id())
                                            <span class="badge badge-primary">You</span>
                                        @endif
                                    </strong>
                                    <span>{{ $message->created_at->format('M d, Y h:i A') }}</span>
                                </div>
                                <div class="message-content">
                                     {!! nl2br(e($message->message)) !!}
                                </div>
                                @if($message->attachments->count() > 0)
                                    <div class="mt-3">
                                        <strong>Attachments:</strong><br>
                                        @foreach($message->attachments as $attachment)
                                            <a href="{{ route('support.downloadAttachment', $attachment->id) }}" class="attachment-item">
                                                <i class="fa fa-paperclip"></i> {{ $attachment->file_name }}
                                                <small>({{ $attachment->file_size_formatted }})</small>
                                            </a>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Reply Form -->
            @if(!in_array($ticket->status, ['closed']))
                <div class="box box-success">
                    <div class="box-header with-border">
                        <h4 class="box-title"><i class="fa fa-reply"></i> Add Reply</h4>
                    </div>
                    <div class="box-body">
                        <form method="POST" action="{{ route('support.reply', $ticket->id) }}" enctype="multipart/form-data" id="replyForm">
                            @csrf
                            <div class="form-group">
                                <label for="message">Your Reply <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="message" name="message" rows="5" 
                                          required placeholder="Type your reply here...">{{ old('message') }}</textarea>
                                @error('message')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>Attachments</label>
                                <input type="file" id="replyAttachments" name="attachments[]" multiple 
                                       accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.txt,.zip" class="form-control">
                                <small class="text-muted">Maximum file size: 10MB per file</small>
                                @error('attachments.*')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group text-right">
                                <button type="submit" class="btn btn-primary" id="replyBtn">
                                    <i class="fa fa-paper-plane"></i> Send Reply
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            @else
                <div class="alert alert-info">
                    <i class="fa fa-info-circle"></i> This Ticket is closed and cannot receive new replies.
                </div>
            @endif
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-scroll to bottom of messages
    const messageContainer = document.querySelector('.message-container');
    if (messageContainer) {
        messageContainer.scrollTop = messageContainer.scrollHeight;
    }

    // Form submission
    document.getElementById('replyForm')?.addEventListener('submit', function() {
        const btn = document.getElementById('replyBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Sending...';
    });
});
</script>
@endsection