@extends('admin.layouts.app')

@section('title', $order->order_number)
@section('page_title', 'Захиалга: ' . $order->order_number)

@section('content')

<div class="grid lg:grid-cols-3 gap-6">

    {{-- Гол агуулга --}}
    <div class="lg:col-span-2 space-y-6">

        {{-- Үндсэн мэдээлэл --}}
        <div class="bg-white rounded-2xl border border-gray-100 p-6">
            <div class="flex items-start justify-between mb-4">
                <div class="flex-1 min-w-0">
                    <h2 class="text-xl font-bold mb-1">{{ $order->title }}</h2>
                    <div class="text-sm text-gray-500">{{ $order->order_number }} · {{ $order->created_at->format('Y-m-d H:i') }}</div>
                </div>
                <span class="text-xs px-3 py-1 rounded-full bg-{{ $order->statusColor() }}-100 text-{{ $order->statusColor() }}-700">{{ $order->statusLabel() }}</span>
            </div>

            <div class="prose prose-sm max-w-none mb-4">
                {!! nl2br(e($order->description)) !!}
            </div>

            <dl class="grid grid-cols-2 gap-4 text-sm pt-4 border-t border-gray-100">
                @if($order->service)<div><dt class="text-xs text-gray-500">Үйлчилгээ</dt><dd class="font-semibold">{{ $order->service->title }}</dd></div>@endif
                @if($order->deadline)<div><dt class="text-xs text-gray-500">Эцсийн өдөр</dt><dd class="font-semibold">{{ $order->deadline->format('Y-m-d') }}</dd></div>@endif
                @if($order->budget)<div><dt class="text-xs text-gray-500">Төсөв</dt><dd class="font-semibold">{{ number_format($order->budget) }} ₮</dd></div>@endif
                <div><dt class="text-xs text-gray-500">Ач холбогдол</dt><dd class="capitalize font-semibold">{{ $order->priority }}</dd></div>
            </dl>

            @if($order->attachmentUrls())
            <div class="mt-4 pt-4 border-t border-gray-100">
                <h4 class="text-xs font-semibold text-gray-500 mb-2">Хавсралтууд</h4>
                <div class="flex flex-wrap gap-2">
                    @foreach($order->attachmentUrls() as $a)
                        <a href="{{ $a['url'] }}" target="_blank" class="text-sm text-nsma-red hover:underline flex items-center gap-1">
                            <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.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
                            {{ $a['name'] }}
                        </a>
                    @endforeach
                </div>
            </div>
            @endif
        </div>

        {{-- Чат --}}
        <div class="bg-white rounded-2xl border border-gray-100 p-6">
            <h3 class="font-bold mb-4">Захидал харилцаа</h3>

            <div id="messages-list" class="space-y-3 mb-4 max-h-96 overflow-y-auto">
                @forelse($order->messages as $m)
                    @php
                        $isAdmin = $m->sender_type === \App\Models\User::class;
                    @endphp
                    <div class="p-3 rounded-lg {{ $m->is_internal ? 'bg-yellow-50 border border-yellow-200' : ($isAdmin ? 'bg-blue-50' : 'bg-gray-50') }}">
                        <div class="flex items-center justify-between mb-1">
                            <div class="flex items-center gap-2 text-xs">
                                <span class="font-semibold">{{ $m->sender->name ?? '-' }}</span>
                                <span class="px-1.5 py-0.5 rounded text-xs {{ $isAdmin ? 'bg-blue-200 text-blue-800' : 'bg-gray-200 text-gray-800' }}">{{ $isAdmin ? 'Админ' : 'Харилцагч' }}</span>
                                @if($m->is_internal)<span class="px-1.5 py-0.5 rounded bg-yellow-200 text-yellow-800">🔒 Дотоод</span>@endif
                            </div>
                            <span class="text-xs text-gray-500">{{ $m->created_at->format('Y-m-d H:i') }}</span>
                        </div>
                        <div class="text-sm whitespace-pre-wrap">{{ $m->message }}</div>
                        @if($m->attachmentUrls())
                            <div class="mt-2 flex flex-wrap gap-2">
                                @foreach($m->attachmentUrls() as $a)
                                    <a href="{{ $a['url'] }}" target="_blank" class="text-xs text-nsma-red">📎 {{ $a['name'] ?? 'хавсралт' }}</a>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @empty
                    <p class="text-sm text-gray-500 text-center py-6">Зурвас байхгүй байна.</p>
                @endforelse
            </div>

            {{-- Шинэ зурвас бичих --}}
            <form id="message-form" enctype="multipart/form-data" class="border-t border-gray-100 pt-4">
                <textarea name="message" rows="3" required placeholder="Зурвас бичих..." class="w-full px-3 py-2 border border-gray-200 rounded-lg outline-none text-sm"></textarea>
                <div class="flex items-center justify-between mt-2">
                    <div class="flex items-center gap-3">
                        <input type="file" name="attachments[]" multiple class="text-xs">
                        <label class="flex items-center gap-1 text-xs text-gray-600">
                            <input type="checkbox" name="is_internal" value="1" class="rounded">
                            Дотоод (зөвхөн админ)
                        </label>
                    </div>
                    <button type="submit" class="bg-nsma-red text-white font-semibold px-4 py-2 rounded-lg text-sm">Илгээх</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Sidebar --}}
    <div class="space-y-6">
        {{-- Харилцагч --}}
        <div class="bg-white rounded-2xl border border-gray-100 p-6">
            <h3 class="font-bold mb-3">Харилцагч</h3>
            <a href="{{ route('admin.clients.show', $order->client) }}" class="block hover:bg-gray-50 -m-2 p-2 rounded-lg">
                <div class="font-semibold">{{ $order->client->name }}</div>
                <div class="text-xs text-gray-500">{{ $order->client->company_name }}</div>
                <div class="text-xs text-gray-500 mt-1">{{ $order->client->email }} · {{ $order->client->phone }}</div>
            </a>
        </div>

        {{-- Статус өөрчлөх --}}
        <div class="bg-white rounded-2xl border border-gray-100 p-6">
            <h3 class="font-bold mb-3">Статус өөрчлөх</h3>
            <select id="status-select" class="w-full px-3 py-2 border border-gray-200 rounded-lg outline-none mb-2 text-sm">
                @foreach(['submitted'=>'Илгээгдсэн','reviewing'=>'Хянагдаж буй','approved'=>'Зөвшөөрсөн','in_progress'=>'Хийгдэж буй','on_hold'=>'Түр зогссон','completed'=>'Дууссан','cancelled'=>'Цуцлагдсан','rejected'=>'Татгалзсан'] as $val => $lbl)
                    <option value="{{ $val }}" @selected($order->status === $val)>{{ $lbl }}</option>
                @endforeach
            </select>
            <input id="status-comment" type="text" placeholder="Тайлбар (заавал биш)" class="w-full px-3 py-2 border border-gray-200 rounded-lg outline-none mb-2 text-sm">
            <button id="apply-status" class="w-full bg-nsma-red text-white font-semibold py-2 rounded-lg text-sm">Хадгалах</button>
        </div>

        {{-- Хариуцагч + ач холбогдол --}}
        <form action="{{ route('admin.orders.update', $order) }}" method="POST" class="bg-white rounded-2xl border border-gray-100 p-6">
            @csrf @method('PUT')
            <h3 class="font-bold mb-3">Удирдах</h3>
            <div class="space-y-3 text-sm">
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Хариуцагч</label>
                    <select name="assigned_to" class="w-full px-3 py-2 border border-gray-200 rounded-lg outline-none">
                        <option value="">— Хуваарилаагүй —</option>
                        @foreach($admins as $a)
                            <option value="{{ $a->id }}" @selected($order->assigned_to == $a->id)>{{ $a->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Ач холбогдол</label>
                    <select name="priority" class="w-full px-3 py-2 border border-gray-200 rounded-lg outline-none">
                        @foreach(['low'=>'Бага','normal'=>'Хэвийн','high'=>'Өндөр','urgent'=>'Яаралтай'] as $val => $lbl)
                            <option value="{{ $val }}" @selected($order->priority === $val)>{{ $lbl }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Эцсийн өдөр</label>
                    <input type="date" name="deadline" value="{{ $order->deadline?->format('Y-m-d') }}" class="w-full px-3 py-2 border border-gray-200 rounded-lg outline-none">
                </div>
            </div>
            <button class="mt-3 w-full bg-nsma-dark text-white font-semibold py-2 rounded-lg text-sm">Хадгалах</button>
        </form>

        {{-- Статус түүх --}}
        <div class="bg-white rounded-2xl border border-gray-100 p-6">
            <h3 class="font-bold mb-3">Статус түүх</h3>
            <div class="space-y-3 text-sm">
                @foreach($order->statusHistory as $h)
                    <div class="flex items-start gap-3 pb-3 border-b border-gray-100 last:border-0">
                        <span class="w-2 h-2 rounded-full bg-nsma-red mt-1.5 flex-shrink-0"></span>
                        <div class="flex-1 min-w-0">
                            <div class="font-medium">{{ $h->from_status ?? 'эхлэл' }} → <strong>{{ $h->to_status }}</strong></div>
                            @if($h->comment)<div class="text-xs text-gray-600">{{ $h->comment }}</div>@endif
                            <div class="text-xs text-gray-400 mt-1">{{ $h->changedBy->name ?? 'систем' }} · {{ $h->created_at->diffForHumans() }}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Статус өөрчлөх
    document.getElementById('apply-status').addEventListener('click', async () => {
        const status = document.getElementById('status-select').value;
        const comment = document.getElementById('status-comment').value;
        const r = await window.ajaxJson('{{ route('admin.orders.status', $order) }}', {
            method: 'POST',
            body: JSON.stringify({ status, comment }),
        });
        if (r.ok) {
            window.showToast('Статус шинэчлэгдлээ.');
            setTimeout(() => location.reload(), 800);
        } else {
            window.showToast(r.data.message || 'Алдаа гарлаа.', 'error');
        }
    });

    // Зурвас илгээх
    document.getElementById('message-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);
        const r = await window.ajaxJson('{{ route('admin.orders.messages', $order) }}', {
            method: 'POST',
            body: formData,
        });
        if (r.ok) {
            form.reset();
            window.showToast('Зурвас илгээгдлээ.');
            setTimeout(() => location.reload(), 600);
        } else {
            window.showToast('Алдаа гарлаа.', 'error');
        }
    });
</script>
@endpush

@endsection