@extends('layouts.app')
@section('title', 'WHMCS Admin - Support Tickets')
@section('page-title', 'View Ticket')

@section('breadcrumb')
    <a href="{{ route('dashboard') }}" class="breadcrumb-item">Dashboard</a>
    <span class="breadcrumb-item active">Support/View Ticket</span>
@endsection

@push('styles')
    <style>
        .chat-box {
            max-height: 500px;
            overflow-y: auto;
            padding: 15px;
            background: #f7f7f7;
            border-radius: 12px;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            scroll-behavior: smooth;
        }

        .chat-message {
            margin-bottom: 16px;
            max-width: 75%;
            padding: 12px 20px;
            border-radius: 25px;
            position: relative;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            word-wrap: break-word;
            transition: background-color 0.2s ease;
            font-size: 14px;
            line-height: 1.4;
        }

        .chat-message:hover {
            background-color: #f0f0f0;
        }

        /* Other people's messages */
        .chat-message.left {
            background-color: #ffffff;
            border-top-left-radius: 0;
            text-align: left;
            margin-right: auto;
            display: flex;
            align-items: flex-end;
            gap: 10px;
        }

        /* Your own messages */
        .chat-message.right {
            background-color: #d1e7dd;
            border-top-right-radius: 0;
            margin-left: auto;
            text-align: right;
            display: flex;
            align-items: flex-end;
            gap: 10px;
            justify-content: flex-end;
        }

        .chat-meta {
            font-size: 11px;
            color: #6c757d;
            margin-top: 6px;
            display: block;
        }

        /* Avatar style */
        .chat-avatar {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            background-color: #6c757d;
            color: white;
            font-weight: 600;
            font-size: 14px;
            line-height: 36px;
            text-align: center;
            border-radius: 50%;
            user-select: none;
        }

        /* Avatar color for self */
        .chat-message.right .chat-avatar {
            background-color: #198754;
        }

        /* Attachments styling */
        .chat-attachments a {
            display: inline-block;
            margin-top: 6px;
            font-size: 13px;
            color: #0d6efd;
            text-decoration: none;
        }

        .chat-attachments a:hover {
            text-decoration: underline;
        }

        /* Scrollbar styling for modern browsers */
        .chat-box::-webkit-scrollbar {
            width: 8px;
        }

        .chat-box::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }
    </style>
@endpush

@section('content')
   <div class="whmcs-card mt-4" style="border: none; box-shadow: none;">

        <div class="whmcs-card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="fas fa-ticket-alt me-2"></i> Ticket #{{ $ticket->id }}</h5>
            <span class="badge bg-{{ $ticket->status === 'closed' ? 'danger' : 'success' }}">
                {{ ucfirst($ticket->status) }}
            </span>
        </div>

        <div class="whmcs-card-body">
            <h6 class="mb-2"><strong>Subject:</strong> {{ $ticket->subject }}</h6>
            <p><strong>Created At:</strong> {{ $ticket->created_at->format('d M, Y h:i A') }}</p>

            @if ($ticket->user)
                <p><strong>Submitted By:</strong> {{ $ticket->user->name }} ({{ $ticket->user->email }})</p>
            @endif

            <div class="mb-3">
                <h6><strong>Description:</strong></h6>
                <p>{{ $ticket->description }}</p>
            </div>

            @if ($ticket->attachments && is_array($ticket->attachments))
                <div class="mb-3">
                    <h6><strong>Attachments:</strong></h6>
                    <ul>
                        @foreach ($ticket->attachments as $file)
                            <li>
                                <a href="{{ asset('storage/' . $file) }}" target="_blank">
                                    {{ basename($file) }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <hr>
            <div class="chat-box mb-3" id="chatBox">
                @foreach ($ticket->replies as $reply)
                    @php
                        $isSelf = $reply->user_id === auth()->id();
                        $name = $reply->user->name ?? 'Staff';
                        $avatarInitials = collect(explode(' ', $name))
                            ->map(fn($word) => strtoupper(substr($word, 0, 1)))
                            ->join('');
                    @endphp
                    <div class="chat-message {{ $isSelf ? 'right' : 'left' }}">
                        @if (!$isSelf)
                            <div class="chat-avatar" title="{{ $name }}">{{ $avatarInitials }}</div>
                        @endif
                        <div>
                            <div>{{ $reply->message }}</div>
                            @if ($reply->attachments && is_array($reply->attachments))
                                <div class="chat-attachments">
                                    @foreach ($reply->attachments as $file)
                                        <a href="{{ asset('storage/' . $file) }}" target="_blank"
                                            title="{{ basename($file) }}">
                                            📎 {{ basename($file) }}
                                        </a>
                                    @endforeach
                                </div>
                            @endif
                            <span class="chat-meta">{{ $name }} •
                                {{ $reply->created_at->diffForHumans() }}</span>
                        </div>
                        @if ($isSelf)
                            <div class="chat-avatar" title="You">{{ $avatarInitials }}</div>
                        @endif
                    </div>
                @endforeach
            </div>

            @if ($ticket->status !== 'closed')
                <form action="{{ route('support.reply', $ticket->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="message" class="form-label">Reply Message</label>
                        <textarea name="message" id="message" rows="3" class="form-control" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="attachments" class="form-label">Attach files</label>
                        <input type="file" name="attachments[]" id="attachments" class="form-control" multiple>
                    </div>
                    <button type="submit" class="whmcs-btn whmcs-btn-primary">
                        <i class="fas fa-paper-plane me-1"></i> Send Reply
                    </button>
                </form>
            @endif
        </div>

        <div class="whmcs-card-footer text-end">
            @if ($ticket->status !== 'closed')
                <a href="#" class="btn btn-outline-danger btn-sm"
                    onclick="event.preventDefault(); document.getElementById('close-form').submit();">
                    <i class="fas fa-ban me-1"></i> Close Ticket
                </a>
                <form id="close-form" method="POST" action="{{ route('support.close', $ticket->id) }}" class="d-none">
                    @csrf
                </form>
            @endif
        </div>
    </div>

@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            var chatBox = $('#chatBox');
            if (chatBox.length) {
                chatBox.scrollTop(chatBox.prop("scrollHeight"));
            }
        });
    </script>
@endpush