@extends('backend.layouts.app')

@section('title', 'Ticket #' . $feedback->ticket_no)

@section('content')
    @php
        $pageTitle = 'Ticket #' . $feedback->ticket_no;
        $indexRoute = 'content-feedback.index';
        $indexLabel = 'Feedback';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-6">
        {{-- Ticket Info Card --}}
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5 flex items-center justify-between">
                <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Ticket Information</h3>
                <span class="text-sm font-mono font-semibold text-brand-600 dark:text-brand-400">{{ $feedback->ticket_no }}</span>
            </div>
            <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                @php
                    $statusClass = match($feedback->status) {
                        'PENDING' => 'bg-warning-50 text-warning-600 dark:bg-warning-500/10 dark:text-warning-400',
                        'READ' => 'bg-error-50 text-error-600 dark:bg-error-500/10 dark:text-error-400',
                        'REPLIED' => 'bg-success-50 text-success-600 dark:bg-success-500/10 dark:text-success-400',
                        'CLOSED' => 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400',
                        default => 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400',
                    };
                @endphp

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-400">Name</label>
                        <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
                            <p class="text-sm text-gray-800 dark:text-white/90">{{ $feedback->name ?? '-' }}</p>
                        </div>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-400">Email</label>
                        <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
                            <p class="text-sm text-gray-800 dark:text-white/90">
                                @if($feedback->email)
                                    <a href="mailto:{{ $feedback->email }}" class="text-brand-500 hover:underline">{{ $feedback->email }}</a>
                                @else
                                    -
                                @endif
                            </p>
                        </div>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-400">Type</label>
                        <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
                            <span class="inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400">
                                {{ $types[$feedback->type] ?? $feedback->type ?? '-' }}
                            </span>
                        </div>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-400">Category</label>
                        <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
                            <p class="text-sm text-gray-800 dark:text-white/90">{{ $categories[$feedback->cat] ?? $feedback->cat ?? '-' }}</p>
                        </div>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-400">Status</label>
                        <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
                            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium {{ $statusClass }}">
                                {{ $statuses[$feedback->status] ?? $feedback->status }}
                            </span>
                        </div>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-400">Date</label>
                        <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
                            <p class="text-sm text-gray-800 dark:text-white/90">{{ $feedback->created_at->format('d/m/Y H:i') }}</p>
                        </div>
                    </div>
                </div>

                <div class="mb-6">
                    <label class="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-400">Subject</label>
                    <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
                        <p class="text-sm text-gray-800 dark:text-white/90">{{ $feedback->subject }}</p>
                    </div>
                </div>

                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-400">Feedback</label>
                    <div class="rounded-lg bg-gray-50 p-4 dark:bg-gray-800/50 text-sm text-gray-800 dark:text-white/90">
                        {{ nl2br(e($feedback->feedback)) }}
                    </div>
                </div>
            </div>
        </div>

        {{-- Messages Card --}}
        @if($feedback->messages->isNotEmpty())
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5">
                <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Conversation ({{ $feedback->messages->count() }})</h3>
            </div>
            <div class="border-t border-gray-100 dark:border-gray-800">
                <div class="space-y-4 p-5 sm:p-6">
                    @foreach($feedback->messages as $msg)
                        <div class="flex {{ $msg->created_user_type === 'admin' ? 'justify-end' : 'justify-start' }}">
                            <div class="max-w-[75%] rounded-lg px-4 py-3 text-sm {{ $msg->created_user_type === 'admin' ? 'bg-brand-50 text-brand-800 dark:bg-brand-500/10 dark:text-brand-200' : 'bg-gray-50 text-gray-800 dark:bg-gray-800 dark:text-gray-200' }}">
                                <div class="mb-1 flex items-center gap-2">
                                    <span class="text-xs font-medium {{ $msg->created_user_type === 'admin' ? 'text-brand-600 dark:text-brand-400' : 'text-gray-500' }}">
                                        {{ $msg->sender_label }}
                                    </span>
                                    <span class="text-xs text-gray-400">{{ $msg->created_at->format('d/m/Y H:i') }}</span>
                                    @if($msg->read_status === 'UNREAD' && $msg->send_to === 'admin')
                                        <span class="inline-flex items-center rounded bg-warning-100 px-1.5 py-0.5 text-xs font-medium text-warning-700 dark:bg-warning-500/10 dark:text-warning-400">New</span>
                                    @endif
                                </div>
                                <p>{{ nl2br(e($msg->message)) }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif

        {{-- Reply Form --}}
        <form action="{{ route('content-feedback.update', $feedback->id) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="px-5 py-4 sm:px-6 sm:py-5">
                    <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Reply / Update</h3>
                </div>
                <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                        <div>
                            <label class="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-400">Type</label>
                            <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
                                <p class="text-sm text-gray-800 dark:text-white/90">{{ $types[$feedback->type] ?? $feedback->type ?? '-' }}</p>
                            </div>
                            <input type="hidden" name="type" value="{{ $feedback->type }}">
                        </div>
                        <div>
                            <label class="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-400">Category</label>
                            <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
                                <p class="text-sm text-gray-800 dark:text-white/90">{{ $categories[$feedback->cat] ?? $feedback->cat ?? '-' }}</p>
                            </div>
                            <input type="hidden" name="cat" value="{{ $feedback->cat }}">
                        </div>
                    </div>

                    <div class="mb-6">
                        <label class="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-400">Status</label>
                        <div x-data="{ isOptionSelected: false }" class="relative z-20 bg-transparent">
                            <select name="status"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                :class="isOptionSelected && 'text-gray-800 dark:text-white/90'"
                                @change="isOptionSelected = true">
                                @foreach ($statuses as $code => $descr)
                                    <option value="{{ $code }}"
                                        class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
                                        {{ old('status', $feedback->status) == $code ? 'selected' : '' }}>{{ $descr }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="mb-6">
                        <label class="mb-1.5 block text-sm font-semibold text-gray-700 dark:text-gray-400">Reply Message</label>
                        <textarea name="reply_message" rows="4"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                            placeholder="Type your reply here...">{{ old('reply_message') }}</textarea>
                    </div>

                    <div class="flex justify-end gap-3">
                        <a href="{{ route('content-feedback.index') }}"
                            class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300">Cancel</a>
                        <button type="submit"
                            class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600">Update</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection