@extends('layouts.app')
@section('title', 'Destek - ' . $ticket->subject)
@section('page-title', 'Destek Talebi')

@section('content')
{{-- Ticket Header --}}
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 mb-5">
    <div class="flex items-start justify-between gap-4">
        <div>
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">{{ $ticket->subject }}</h2>
            <div class="flex items-center gap-3 mt-2">
                <span class="text-xs text-gray-500 dark:text-gray-400">{{ $ticket->created_at->format('d.m.Y H:i') }}</span>
                <span class="text-gray-300 dark:text-gray-600">|</span>
                <span class="text-xs text-gray-500 dark:text-gray-400">Oncelik: <strong class="text-gray-700 dark:text-gray-300">{{ $ticket->priority_text }}</strong></span>
            </div>
        </div>
        @php
            $statusStyles = [
                'blue' => 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 ring-blue-600/10',
                'yellow' => 'bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300 ring-amber-600/10',
                'green' => 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 ring-emerald-600/10',
                'gray' => 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 ring-gray-500/10',
            ];
            $statusClass = $statusStyles[$ticket->status_color] ?? $statusStyles['gray'];
        @endphp
        <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold ring-1 ring-inset {{ $statusClass }} flex-shrink-0">
            {{ $ticket->status_text }}
        </span>
    </div>
</div>

{{-- Messages --}}
<div class="space-y-4 mb-5">
    {{-- Original message --}}
    <div class="flex gap-3">
        <div class="w-9 h-9 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
            {{ strtoupper(mb_substr(Auth::user()->first_name, 0, 1)) }}
        </div>
        <div class="flex-1">
            <div class="flex items-center gap-2 mb-1">
                <span class="text-sm font-semibold text-gray-800 dark:text-gray-100">Siz</span>
                <span class="text-xs text-gray-400 dark:text-gray-500">{{ $ticket->created_at->format('d.m.Y H:i') }}</span>
            </div>
            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl rounded-tl-md p-4 border border-blue-100 dark:border-blue-800/50">
                <p class="text-sm text-gray-700 dark:text-gray-300">{!! nl2br(e($ticket->message)) !!}</p>
            </div>
        </div>
    </div>

    @foreach($replies as $reply)
        @if($reply->is_from_staff)
            {{-- Staff reply - left aligned --}}
            <div class="flex gap-3">
                <div class="w-9 h-9 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-xl flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
                    Y
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <span class="text-sm font-semibold text-gray-800 dark:text-gray-100">Yurt Yonetimi</span>
                        <span class="text-xs text-gray-400 dark:text-gray-500">{{ $reply->created_at->format('d.m.Y H:i') }}</span>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-700/50 rounded-2xl rounded-tl-md p-4 border border-gray-200 dark:border-gray-600">
                        <p class="text-sm text-gray-700 dark:text-gray-300">{!! nl2br(e($reply->message)) !!}</p>
                    </div>
                </div>
            </div>
        @else
            {{-- Student reply - right aligned --}}
            <div class="flex gap-3">
                <div class="w-9 h-9 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
                    {{ strtoupper(mb_substr(Auth::user()->first_name, 0, 1)) }}
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <span class="text-sm font-semibold text-gray-800 dark:text-gray-100">Siz</span>
                        <span class="text-xs text-gray-400 dark:text-gray-500">{{ $reply->created_at->format('d.m.Y H:i') }}</span>
                    </div>
                    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl rounded-tl-md p-4 border border-blue-100 dark:border-blue-800/50">
                        <p class="text-sm text-gray-700 dark:text-gray-300">{!! nl2br(e($reply->message)) !!}</p>
                    </div>
                </div>
            </div>
        @endif
    @endforeach
</div>

{{-- Reply form --}}
@if($ticket->status != 4)
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
        <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-3">Yanit Yaz</h3>
        <form method="POST" action="{{ route('support.reply', $ticket) }}">
            @csrf
            <textarea name="message" rows="3" required class="w-full px-3.5 py-2.5 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl text-gray-800 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none resize-none mb-3 transition" placeholder="Yanitinizi yazin..."></textarea>
            <button type="submit" class="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-5 py-2.5 rounded-xl text-sm font-semibold transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                Gonder
            </button>
        </form>
    </div>
@else
    <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-5 text-center border border-gray-100 dark:border-gray-700">
        <p class="text-sm text-gray-500 dark:text-gray-400">Bu talep kapatilmistir. Yanit gonderemezsiniz.</p>
    </div>
@endif

<div class="mt-5">
    <a href="{{ route('support') }}" class="inline-flex items-center gap-1.5 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
        Taleplerime Don
    </a>
</div>
@endsection