@extends('layouts.admin')
@section('title', 'جزئیات چیدمان کیبورد')
@section('content')
<x-ui.page-header title="چیدمان #{{ $layout->id }}" subtitle="{{ $layout->name }}">
    <x-slot:actions>
        <a href="{{ route('admin.bot-keyboard-layouts.edit', $layout) }}" class="cb-btn-primary">ویرایش</a>
        <form method="POST" action="{{ route('admin.bot-keyboard-layouts.destroy', $layout) }}" onsubmit="return confirm('آیا از حذف این چیدمان مطمئن هستید؟')">
            @csrf
            @method('DELETE')
            <button type="submit" class="cb-btn-muted">حذف</button>
        </form>
    </x-slot:actions>
</x-ui.page-header>

<div class="grid gap-5 lg:grid-cols-3">
    <x-ui.card class="lg:col-span-1">
        <dl class="space-y-3 text-sm">
            <div><dt class="text-slate-500">دامنه</dt><dd class="font-semibold">{{ $layout->scope }}</dd></div>
            <div><dt class="text-slate-500">پلتفرم</dt><dd class="font-semibold">{{ $layout->platform ?: '-' }}</dd></div>
            <div><dt class="text-slate-500">ربات</dt><dd class="font-semibold">{{ $layout->botAccount?->name ?: '-' }}</dd></div>
            <div><dt class="text-slate-500">نسخه</dt><dd class="font-semibold">{{ $layout->version }}</dd></div>
            <div><dt class="text-slate-500">وضعیت</dt><dd class="font-semibold">{{ $layout->is_active ? 'فعال' : 'غیرفعال' }}</dd></div>
        </dl>
    </x-ui.card>

    <x-ui.card class="lg:col-span-2">
        <p class="mb-2 text-sm text-slate-500">ساختار JSON</p>
        <pre class="overflow-auto rounded-xl bg-slate-900 p-4 text-xs text-slate-100">{{ json_encode($layout->layout, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE) }}</pre>

        <div class="mt-4">
            <h3 class="mb-2 text-sm font-semibold text-slate-700">آخرین استقرارها</h3>
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead>
                        <tr class="border-b border-slate-200 text-right text-slate-500">
                            <th class="px-3 py-2">شناسه</th>
                            <th class="px-3 py-2">ربات</th>
                            <th class="px-3 py-2">وضعیت</th>
                            <th class="px-3 py-2">موفق/ناموفق</th>
                            <th class="px-3 py-2">مشاهده</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($layout->deployments as $deployment)
                            <tr class="border-b border-slate-100">
                                <td class="px-3 py-2">{{ $deployment->id }}</td>
                                <td class="px-3 py-2">{{ $deployment->bot_account_id }}</td>
                                <td class="px-3 py-2">{{ $deployment->status }}</td>
                                <td class="px-3 py-2">{{ $deployment->sent_count }}/{{ $deployment->failed_count }}</td>
                                <td class="px-3 py-2"><a class="cb-btn-muted" href="{{ route('admin.bot-keyboard-deployments.show', $deployment) }}">جزئیات</a></td>
                            </tr>
                        @empty
                            <tr><td class="px-3 py-4 text-center text-slate-500" colspan="5">استقراری ثبت نشده است.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </x-ui.card>
</div>
@endsection