@extends('layouts.app')

@section('content')
    <div class="flex-1 space-y-6">
        <!-- Breadcrumb -->
        <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>
            <span>Tracking</span>
        </div>

        <!-- Header -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold text-slate-900 mb-1 flex items-center gap-2">
                    <i data-lucide="calendar-check" class="w-8 h-8 text-blue-600"></i>
                    Tracking
                </h1>
                <p class="text-slate-600 text-sm">Theo dõi nguồn traffic và tiếp nhận tư vấn theo UTM.</p>
            </div>
            <button type="button" onclick="exportExcel()"
                class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors shadow-sm">
                <i data-lucide="file-spreadsheet" class="w-4 h-4"></i>
                Export Excel
            </button>
        </div>

        <!-- Bộ lọc -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <form method="GET" action="{{ route('tracking.index') }}" id="filterForm" class="space-y-4">
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
                    <div>
                        <label for="date_from" class="block text-sm font-medium text-slate-700 mb-1">Từ ngày</label>
                        <input type="date" id="date_from" name="date_from" value="{{ $dateFrom }}"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                    </div>
                    <div>
                        <label for="date_to" class="block text-sm font-medium text-slate-700 mb-1">Đến ngày</label>
                        <input type="date" id="date_to" name="date_to" value="{{ $dateTo }}"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                    </div>
                    <div>
                        <label for="utm_campaign" class="block text-sm font-medium text-slate-700 mb-1">utm_campaign</label>
                        <input type="text" id="utm_campaign" name="utm_campaign" value="{{ $utmCampaign }}"
                            placeholder="utm_campaign"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                    </div>
                    <div>
                        <label for="utm_term" class="block text-sm font-medium text-slate-700 mb-1">utm_term</label>
                        <input type="text" id="utm_term" name="utm_term" value="{{ $utmTerm }}" placeholder="utm_term"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                    </div>
                    <div>
                        <label for="utm_source" class="block text-sm font-medium text-slate-700 mb-1">utm_source</label>
                        <input type="text" id="utm_source" name="utm_source" value="{{ $utmSource }}"
                            placeholder="utm_source"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                    </div>
                    <div>
                        <label for="utm_medium" class="block text-sm font-medium text-slate-700 mb-1">utm_medium</label>
                        <input type="text" id="utm_medium" name="utm_medium" value="{{ $utmMedium }}"
                            placeholder="utm_medium"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                    </div>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 items-end">
                    <div>
                        <label for="phone" class="block text-sm font-medium text-slate-700 mb-1">Số điện thoại</label>
                        <input type="text" id="phone" name="phone" value="{{ $phone }}" placeholder="Số điện thoại"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                    </div>
                    <div>
                        <label for="consultation" class="block text-sm font-medium text-slate-700 mb-1">Tiếp nhận tư
                            vấn</label>
                        <select id="consultation" name="consultation"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                            <option value="all" {{ $consultation == 'all' ? 'selected' : '' }}>Tất cả</option>
                            <option value="yes" {{ $consultation == 'yes' ? 'selected' : '' }}>Có</option>
                            <option value="no" {{ $consultation == 'no' ? 'selected' : '' }}>Không</option>
                        </select>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <button type="submit"
                            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">
                            <i data-lucide="filter" class="w-4 h-4"></i>
                            Lọc
                        </button>
                        <!-- <button type="button" onclick="exportExcel()" class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors">
                            <i data-lucide="file-spreadsheet" class="w-4 h-4"></i>
                            Export Excel
                        </button> -->
                    </div>
                </div>
            </form>
        </div>

        <!-- Bảng -->
        <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-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Họ
                                tên</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Số
                                điện thoại</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Source</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Medium</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Campaign</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Term</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                User Id</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Ngày ghi nhận</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Tiếp nhận tư vấn</th>
                            <th class="px-4 py-3 text-right text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Thao tác</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-slate-200">
                        @forelse($trackings as $tracking)
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ $tracking->student_name ?? 'N/A' }}
                                </td>
                                <td class="px-4 py-3 text-sm text-slate-700">{{ $tracking->student_phone ?? 'N/A' }}</td>
                                <td class="px-4 py-3 text-sm text-slate-700">{{ $tracking->utm_source ?? '—' }}</td>
                                <td class="px-4 py-3 text-sm text-slate-700">{{ $tracking->utm_medium ?? '—' }}</td>
                                <td class="px-4 py-3 text-sm text-slate-700">{{ $tracking->utm_campaign ?? '—' }}</td>
                                <td class="px-4 py-3 text-sm text-slate-700">{{ $tracking->utm_term ?? '—' }}</td>
                                <td class="px-4 py-3 text-sm text-slate-700">{{ $tracking->user_id ?? '—' }}</td>
                                <td class="px-4 py-3 text-sm text-slate-700">
                                    {{ $tracking->created_at ? $tracking->created_at->addHours(7)->format('H:i d/m/Y') : 'N/A' }}
                                </td>
                                <td class="px-4 py-3 text-sm">
                                    <span
                                        class="inline-flex px-2.5 py-0.5 rounded-lg text-xs font-medium bg-green-100 text-green-800">Có</span>
                                </td>
                                <td class="px-4 py-3 text-sm text-right">
                                    <button type="button" 
                                            onclick="openAnswersModal({{ $tracking->id }}, '{{ addslashes($tracking->student_name ?? 'N/A') }}')"
                                            class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-600 rounded-lg text-xs font-medium hover:bg-blue-100 transition-colors shadow-sm">
                                        <i data-lucide="eye" class="w-3.5 h-3.5"></i> Chi tiết
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="px-4 py-12 text-center text-slate-500">
                                    <i data-lucide="inbox" class="w-12 h-12 mx-auto text-slate-300 mb-2"></i>
                                    <p>Không có dữ liệu</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <!-- Pagination -->
            @if($trackings->hasPages())
                <div class="px-4 md:px-6 py-4 border-t border-slate-200 bg-slate-50">
                    <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                        <div class="text-xs sm:text-sm text-slate-500">
                            Hiển thị <span class="font-medium text-slate-700">{{ $trackings->firstItem() ?? 0 }} -
                                {{ $trackings->lastItem() ?? 0 }}</span> trong tổng số <span
                                class="font-medium text-slate-700">{{ $trackings->total() }}</span> bản ghi
                        </div>
                        <div class="flex items-center gap-1.5 sm:gap-2 overflow-x-auto">
                            @if($trackings->onFirstPage())
                                <span
                                    class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-400 bg-slate-100 rounded-lg cursor-not-allowed flex-shrink-0"><i
                                        data-lucide="chevron-left" class="w-4 h-4 inline-block"></i></span>
                            @else
                                <a href="{{ $trackings->appends(request()->query())->previousPageUrl() }}"
                                    class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0"><i
                                        data-lucide="chevron-left" class="w-4 h-4 inline-block"></i></a>
                            @endif
                            @php
                                $trackings->appends(request()->query());
                                $currentPage = $trackings->currentPage();
                                $lastPage = $trackings->lastPage();
                                $onEachSide = 1;
                                $start = max(2, $currentPage - $onEachSide);
                                $end = min($lastPage - 1, $currentPage + $onEachSide);
                            @endphp

                            {{-- Page 1 --}}
                            @if($currentPage == 1)
                                <span
                                    class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm font-medium text-white bg-blue-600 rounded-lg flex-shrink-0 min-w-[2rem] text-center">1</span>
                            @else
                                <a href="{{ $trackings->url(1) }}"
                                    class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center">1</a>
                            @endif

                            {{-- Start Ellipsis --}}
                            @if($start > 2)
                                <span
                                    class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-400 bg-slate-50 rounded-lg flex-shrink-0 min-w-[2rem] text-center">...</span>
                            @endif

                            {{-- Middle Pages --}}
                            @for($i = $start; $i <= $end; $i++)
                                @if($i == $currentPage)
                                    <span
                                        class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm font-medium text-white bg-blue-600 rounded-lg flex-shrink-0 min-w-[2rem] text-center">{{ $i }}</span>
                                @else
                                    <a href="{{ $trackings->url($i) }}"
                                        class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center">{{ $i }}</a>
                                @endif
                            @endfor

                            {{-- End Ellipsis --}}
                            @if($end < $lastPage - 1)
                                <span
                                    class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-400 bg-slate-50 rounded-lg flex-shrink-0 min-w-[2rem] text-center">...</span>
                            @endif

                            {{-- Last Page --}}
                            @if($lastPage > 1)
                                @if($currentPage == $lastPage)
                                    <span
                                        class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm font-medium text-white bg-blue-600 rounded-lg flex-shrink-0 min-w-[2rem] text-center">{{ $lastPage }}</span>
                                @else
                                    <a href="{{ $trackings->url($lastPage) }}"
                                        class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center">{{ $lastPage }}</a>
                                @endif
                            @endif
                            @if($trackings->hasMorePages())
                                <a href="{{ $trackings->appends(request()->query())->nextPageUrl() }}"
                                    class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0"><i
                                        data-lucide="chevron-right" class="w-4 h-4 inline-block"></i></a>
                            @else
                                <span
                                    class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-400 bg-slate-100 rounded-lg cursor-not-allowed flex-shrink-0"><i
                                        data-lucide="chevron-right" class="w-4 h-4 inline-block"></i></span>
                            @endif
                        </div>
                    </div>
            @endif
            </div>
        </div>

        <!-- Answers Modal -->
        <div id="answersModal" class="hidden fixed inset-0 z-[60] overflow-y-auto" aria-modal="true">
            <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" onclick="closeAnswersModal()"></div>
            <div class="flex min-h-full items-center justify-center p-4">
                <div class="relative bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col">
                    <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200 bg-white rounded-t-xl text-slate-800">
                        <div>
                            <h3 class="text-lg font-bold flex items-center gap-2">
                                <i data-lucide="help-circle" class="w-5 h-5 text-blue-600"></i> Xem Đáp Án
                            </h3>
                            <p class="text-xs text-slate-500 mt-1">Học sinh: <span id="answers-modal-student-name" class="font-semibold text-blue-700"></span></p>
                        </div>
                        <button type="button" class="text-slate-500 hover:text-slate-700 transition-colors bg-slate-100 hover:bg-slate-200 rounded-lg p-1.5" onclick="closeAnswersModal()">
                            <i data-lucide="x" class="w-5 h-5"></i>
                        </button>
                    </div>
                    <div class="flex-1 overflow-auto px-6 py-6 bg-slate-50" id="answers-container">
                        <div class="flex justify-center items-center py-12" id="answers-loading">
                            <i data-lucide="loader" class="w-8 h-8 text-blue-500 animate-spin"></i>
                        </div>
                        <div id="answers-content" class="space-y-4 hidden">
                        </div>
                    </div>
                    <div class="px-6 py-4 border-t border-slate-200 bg-white rounded-b-xl flex justify-end">
                        <button type="button" onclick="closeAnswersModal()" class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors shadow-sm">
                            Đóng
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            function exportExcel() {
                var form = document.getElementById('filterForm');
                var formData = new FormData(form);
                var params = new URLSearchParams(formData);
                window.location.href = '{{ route("tracking.export") }}?' + params.toString();
            }

            function openAnswersModal(trackingId, studentName) {
                $('#answersModal').removeClass('hidden');
                $('#answers-loading').removeClass('hidden');
                $('#answers-content').addClass('hidden');
                $('#answers-content').empty();
                $('#answers-modal-student-name').text(studentName);

                $.ajax({
                    url: '{{ url("/tracking") }}/' + trackingId + '/answers',
                    type: 'GET',
                    success: function(res) {
                        $('#answers-loading').addClass('hidden');
                        $('#answers-content').removeClass('hidden');
                        
                        if (res.success && res.data) {
                            let questions = res.data.questions;
                            let userAnswers = res.data.answers || {};
                            
                            let html = '';
                            questions.forEach((q, index) => {
                                let title = q.content || 'Câu ' + (index + 1);
                                let options = q.options || [];
                                let userAnswerIds = userAnswers[q.id] || [];
                                // Ensure it's an array for easier checking
                                if (!Array.isArray(userAnswerIds)) {
                                    userAnswerIds = [userAnswerIds];
                                }
                                
                                let answersHtml = '';
                                options.forEach((opt) => {
                                    let isSelected = userAnswerIds.includes(opt.key) || userAnswerIds.includes(opt.key.toString());
                                    let bgClass = isSelected ? 'bg-blue-50 border-blue-200 shadow-sm' : 'bg-white border-slate-200 opacity-60';
                                    let textClass = isSelected ? 'text-blue-700 font-bold' : 'text-slate-600';
                                    let icon = isSelected ? '<i data-lucide="check-circle-2" class="w-4 h-4 text-blue-600 shrink-0"></i>' : '<div class="w-4 h-4 rounded-full border border-slate-300 shrink-0"></div>';
                                    
                                    answersHtml += `
                                        <div class="flex items-start gap-2.5 p-3 rounded-lg border ${bgClass} transition-colors">
                                            <div class="mt-0.5">${icon}</div>
                                            <span class="text-sm ${textClass} font-semibold shrink-0">${opt.key}.</span>
                                            <span class="text-sm ${textClass} leading-relaxed">${opt.value}</span>
                                        </div>
                                    `;
                                });

                                html += `
                                    <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
                                        <h4 class="font-semibold text-slate-800 mb-4 text-sm leading-relaxed flex items-start gap-2">
                                            <span class="flex items-center justify-center bg-blue-100 text-blue-700 text-xs font-bold rounded min-w-[24px] h-6 px-1.5 shrink-0">
                                                ${index + 1}
                                            </span> 
                                            <span>${title}</span>
                                        </h4>
                                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                            ${answersHtml}
                                        </div>
                                    </div>
                                `;
                            });
                            
                            if(questions.length === 0) {
                                html = '<div class="text-center py-12 text-slate-500 bg-white rounded-xl border border-slate-200"><i data-lucide="inbox" class="w-12 h-12 text-slate-300 mx-auto mb-3"></i>Không có dữ liệu câu hỏi.</div>';
                            }
                            
                            $('#answers-content').html(html);
                            if (typeof lucide !== 'undefined') {
                                lucide.createIcons();
                            }
                        } else {
                            $('#answers-content').html(`<div class="text-center py-12 text-red-500 bg-white rounded-xl border border-red-200"><i data-lucide="alert-circle" class="w-12 h-12 text-red-300 mx-auto mb-3"></i>${res.message || 'Không thể tải dữ liệu'}</div>`);
                            if (typeof lucide !== 'undefined') lucide.createIcons();
                        }
                    },
                    error: function() {
                        $('#answers-loading').addClass('hidden');
                        $('#answers-content').removeClass('hidden');
                        $('#answers-content').html('<div class="text-center py-12 text-red-500 bg-white rounded-xl border border-red-200"><i data-lucide="wifi-off" class="w-12 h-12 text-red-300 mx-auto mb-3"></i>Lỗi kết nối máy chủ</div>');
                        if (typeof lucide !== 'undefined') lucide.createIcons();
                    }
                });
            }

            function closeAnswersModal() {
                $('#answersModal').addClass('hidden');
            }

            if (typeof lucide !== 'undefined') lucide.createIcons();
        </script>

@endsection