@extends('layouts.app')

@section('content')
<div class="flex-1 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <a href="{{ route('exams.index') }}" class="hover:text-blue-600 cursor-pointer">Quản lý Exam</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Chi tiết Exam</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6">Chi tiết Exam</h1>

    <!-- Exam info card -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200">
            <h2 class="text-lg font-semibold text-slate-900">{{ $exam->name }}</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200">
                <tbody class="bg-white divide-y divide-slate-200">
                    <tr>
                        <th class="px-6 py-3 text-left text-sm font-medium text-slate-600 bg-slate-50 w-48">Slug</th>
                        <td class="px-6 py-3 text-sm text-slate-700">{{ $exam->slug }}</td>
                    </tr>
                    <tr>
                        <th class="px-6 py-3 text-left text-sm font-medium text-slate-600 bg-slate-50">EMS ID</th>
                        <td class="px-6 py-3 text-sm text-slate-700">{{ $exam->ems_id ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th class="px-6 py-3 text-left text-sm font-medium text-slate-600 bg-slate-50">Number Limit</th>
                        <td class="px-6 py-3 text-sm text-slate-700">
                            @if($exam->number_limit > 0)
                            {{ $exam->number_limit }} lần
                            @else
                            <span class="text-slate-500">Không giới hạn</span>
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <th class="px-6 py-3 text-left text-sm font-medium text-slate-600 bg-slate-50">Time Duration
                        </th>
                        <td class="px-6 py-3 text-sm text-slate-700">
                            @if($exam->time_duration > 0)
                            @php
                            $days = floor($exam->time_duration / 86400);
                            $hours = floor(($exam->time_duration % 86400) / 3600);
                            $minutes = floor(($exam->time_duration % 3600) / 60);
                            @endphp
                            {{ $days }} ngày
                            @if($hours > 0 || $minutes > 0)
                            {{ $hours > 0 ? ', ' . $hours . ' giờ' : '' }}{{ $minutes > 0 ? ', ' . $minutes . ' phút' :
                            '' }}
                            @endif
                            <br><span class="text-xs text-slate-500">({{ number_format($exam->time_duration) }}
                                giây)</span>
                            @else
                            <span class="text-slate-500">Không giới hạn</span>
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <th class="px-6 py-3 text-left text-sm font-medium text-slate-600 bg-slate-50">Ngày tạo</th>
                        <td class="px-6 py-3 text-sm text-slate-700">{{ $exam->created_at->format('d/m/Y H:i:s') }}</td>
                    </tr>
                    <tr>
                        <th class="px-6 py-3 text-left text-sm font-medium text-slate-600 bg-slate-50">Số Exam Final
                        </th>
                        <td class="px-6 py-3 text-sm text-slate-700">{{ $exam->campaignExams->count() }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Danh sách Exam Final -->
    <div>
        <h3 class="text-lg font-semibold text-slate-900 mb-3">Danh sách Exam URL Mapping</h3>
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-200">
                    <thead class="bg-slate-50">
                        <tr>
                            <th
                                class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                STT</th>
                            <th
                                class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Campaign</th>
                            <th
                                class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Exam URL Mapping</th>
                            <th
                                class="px-6 py-3 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Hành động</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-slate-200">
                        @foreach($exam->campaignExams as $index => $campaignExam)
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">{{ $index + 1 }}</td>
                            <td class="px-6 py-4 text-sm text-slate-700">
                                <span class="font-medium text-slate-900">{{ $campaignExam->campaign->name ?? '-'
                                    }}</span>
                                <br><span class="text-xs text-slate-500">Code: {{ $campaignExam->campaign->code ?? '-'
                                    }}</span>
                            </td>
                            <td class="px-6 py-4 text-sm">
                                <a href="http://{{ $campaignExam->exam_final }}" target="_blank" rel="noopener"
                                    class="text-blue-600 hover:text-blue-800 hover:underline">
                                    {{ $campaignExam->exam_final ?? '-' }}
                                </a>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                                <button type="button" data-copy-url="{{ e($campaignExam->exam_final ?? '') }}"
                                    class="copy-exam-btn inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-slate-700 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors">
                                    <i data-lucide="copy" class="w-3.5 h-3.5"></i>
                                    Copy
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="flex flex-wrap items-center gap-3">
        <a href="{{ route('exams.edit', ['id' => $exam->id]) }}"
            class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm">
            <i data-lucide="pencil" class="w-4 h-4"></i>
            Chỉnh sửa
        </a>
        <a href="{{ route('exams.index') }}"
            class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            Quay lại
        </a>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function copyToClipboard(text) {
        if (!text) return;
        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        if (typeof alert !== 'undefined') alert('Đã copy Exam: ' + text);
    }
    document.querySelectorAll('.copy-exam-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            copyToClipboard(this.getAttribute('data-copy-url'));
        });
    });
    if (typeof lucide !== 'undefined') lucide.createIcons();
</script>
@endsection