@extends('frontend.support.layouts')
@section('support-content')
    <div class="container my-4">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <h5 class="fw-bold mb-2">{{ $ticket->subject }}</h5>
                <p class="mb-0 text-muted small">
                    Ticket ID: {{ $ticket->ticket_number }} |
                    Created: {{ $ticket->created_at->format('d M Y, h:i A') }} |
                    Status:
                    <span class="badge bg-{{ $ticket->status == 'open' ? 'success' : 'secondary' }}">
                        {{ ucfirst($ticket->status) }}
                    </span>
                </p>
                <hr>
                <p class="mt-2">{{ $ticket->details }}</p>
            </div>
        </div>
        
        {{-- conversation messages --}}
        <div class="card shadow-sm mb-4 p-2">
            <div class="card-body p-2" style="max-height: 500px; overflow-y: auto;">
                @forelse($ticket->replies as $reply)
                    <div
                        class="d-flex mb-3
                {{ $reply->is_admin ? 'justify-content-end' : 'justify-content-start' }}">

                        {{-- avatar placeholder, you can replace src with real user images if available --}}
                        @if (!$reply->is_admin)
                            <div class="flex-shrink-0 me-2">
                                <img src="{{ asset('assets/backend/images/avater.png') }}" alt="User Avatar"
                                    class="rounded-circle" style="width: 35px; height: 35px;">
                            </div>
                        @endif

                        <div class="d-flex flex-column" style="max-width: 80%;">
                            <div class="
                        px-3 py-2
                        rounded-4
                        position-relative
                        {{ $reply->is_admin ? 'bg-success text-white' : 'bg-light text-dark' }}
                        shadow-sm
                    "
                                style="
                        word-break: break-word;
                        border-bottom-{{ $reply->is_admin ? 'right' : 'left' }}-radius: 0.25rem;
                        ">

                                {{-- reply text --}}
                                {{ $reply->reply_text }}

                                {{-- attachment --}}
                                @if ($reply->attachment)
                                    <div class="mt-2">
                                        <a href="{{ asset('storage/' . $reply->attachment) }}" target="_blank"
                                            class="text-decoration-underline {{ $reply->is_admin ? 'text-white' : 'text-success' }}">
                                            📎 View Attachment
                                        </a>
                                    </div>
                                @endif

                                {{-- date + time at the bottom right of the bubble --}}
                                <small class="d-block text-end mt-1 opacity-75" style="font-size: 0.7rem;">
                                    {{ $reply->created_at->format('d M Y, h:i A') }}
                                </small>
                            </div>
                        </div>

                        @if ($reply->is_admin)
                            <div class="flex-shrink-0 ms-2">
                                <img src="{{ asset('assets/backend/images/avater.png') }}" alt="Admin Avatar"
                                    class="rounded-circle" style="width: 35px; height: 35px;">
                            </div>
                        @endif
                    </div>
                @empty
                    <p class="text-muted text-center">No messages yet.</p>
                @endforelse
            </div>
        </div>


        {{-- reply form --}}
        @if ($ticket->status == 'open')
            <div class="card shadow-sm mb-4 border-0">
                <div class="card-body py-2 px-3">
                    <form action="{{ route('support.replyStore', $ticket->ticket_number) }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="d-flex align-items-center gap-2">

                            {{-- paperclip icon as file input --}}
                            <div class="position-relative">
                                <label for="attachment" class="btn btn-light border shadow-sm rounded-circle p-2 mb-0"
                                    style="width: 40px; height: 40px; cursor: pointer;">
                                    <i class="fas fa-paperclip text-secondary"></i>
                                </label>
                                <input type="file" name="attachment" id="attachment" class="d-none"
                                    accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.txt">
                            </div>
                            {{-- chat-style input --}}
                            <textarea name="message" class="form-control rounded-pill border shadow-sm" rows="1" style="resize: none;"
                                placeholder="Type a message" required></textarea>
                            {{-- send button --}}
                            <button class="btn btn-success rounded-circle d-flex justify-content-center align-items-center"
                                style="width: 40px; height: 40px;">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                        @error('message')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                        @error('attachment')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </form>
                </div>
            </div>
        @else
            <div class="alert alert-secondary text-center">
                This ticket is closed. You cannot reply further.
            </div>
        @endif


    </div>
@endsection