@extends('layouts.app')

@section('content')
    <div class="min-h-screen bg-gray-50">
        @include('admin.partials.top-nav')

        <div class="flex">
            @include('admin.partials.sidebar')

            <!-- Main Content -->
            <div class="flex-1 lg:ml-0">
                <div class="px-4 sm:px-6 lg:px-8 py-6 md:py-8">
                    <!-- Header -->
                    <div class="mb-6">
                        <h1 class="text-2xl font-bold text-gray-900 mb-2">Tambah Antrian Manual</h1>
                        <p class="text-gray-600">Bantu pasien yang tidak bisa antri online dengan membuat antrian manual</p>
                    </div>

                    <!-- Search User Section -->
                    <div class="bg-white rounded-lg shadow-sm border p-6 mb-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-4">Cari Pasien</h2>

                        <div class="flex space-x-4 mb-4">
                            <div class="flex-1">
                                <input type="text" id="searchInput"
                                    placeholder="Cari berdasarkan nama, NIK, atau nomor HP..."
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <button id="searchBtn"
                                class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500">
                                Cari
                            </button>
                        </div>

                        <!-- Search Results -->
                        <div id="searchResults" class="hidden">
                            <h3 class="text-md font-medium text-gray-900 mb-3">Hasil Pencarian:</h3>
                            <div id="userList" class="space-y-2"></div>
                        </div>

                        <!-- No Results Message -->
                        <div id="noResults" class="hidden text-center py-4 text-gray-500">
                            Tidak ada hasil yang ditemukan
                        </div>
                    </div>

                    <!-- Selected User & Poli Selection -->
                    <div id="userSelection" class="hidden bg-white rounded-lg shadow-sm border p-6 mb-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-4">Pilih Poli</h2>

                        <div class="mb-4">
                            <h3 class="text-md font-medium text-gray-700 mb-2">Pasien yang dipilih:</h3>
                            <div id="selectedUserInfo" class="bg-gray-50 rounded-lg p-3"></div>
                        </div>

                        <div class="mb-4">
                            <label for="poliSelect" class="block text-sm font-medium text-gray-700 mb-2">Pilih Poli:</label>
                            <select id="poliSelect"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <option value="">Pilih Poli</option>
                                @foreach ($polis as $poli)
                                    <option value="{{ $poli->id }}">{{ ucfirst($poli->nama_poli) }}</option>
                                @endforeach
                            </select>
                        </div>

                        <button id="createQueueBtn"
                            class="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:ring-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
                            disabled>
                            Buat Antrian
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Logout Form -->
    <form id="logout-form" method="POST" action="{{ route('logout') }}" class="hidden">
        @csrf
    </form>

    <script>
        let selectedUser = null;

        // Search functionality
        document.getElementById('searchBtn').addEventListener('click', function() {
            const searchTerm = document.getElementById('searchInput').value.trim();
            if (searchTerm.length < 3) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Masukkan minimal 3 karakter untuk pencarian',
                    confirmButtonColor: '#3B82F6'
                });
                return;
            }
            searchUsers(searchTerm);
        });

        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('searchBtn').click();
            }
        });

        function searchUsers(searchTerm) {
            fetch('{{ route('admin.antrian.cari-user') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        search: searchTerm
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.users.length > 0) {
                        displaySearchResults(data.users);
                    } else {
                        showNoResults();
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan saat mencari user',
                        confirmButtonColor: '#EF4444'
                    });
                });
        }

        function displaySearchResults(users) {
            const userList = document.getElementById('userList');
            const searchResults = document.getElementById('searchResults');
            const noResults = document.getElementById('noResults');

            userList.innerHTML = '';

            users.forEach(user => {
                const userDiv = document.createElement('div');
                userDiv.className =
                    'flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer';
                userDiv.innerHTML = `
            <div>
                <div class="font-medium text-gray-900">${user.nama}</div>
                <div class="text-sm text-gray-600">NIK: ${user.no_ktp} | HP: ${user.no_hp}</div>
                <div class="text-sm text-gray-500">${user.jenis_kelamin} - ${user.alamat}</div>
            </div>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm" onclick="selectUser(${JSON.stringify(user).replace(/"/g, '&quot;')})">
                Pilih
            </button>
        `;
                userList.appendChild(userDiv);
            });

            searchResults.classList.remove('hidden');
            noResults.classList.add('hidden');
        }

        function showNoResults() {
            document.getElementById('searchResults').classList.add('hidden');
            document.getElementById('noResults').classList.remove('hidden');
        }

        function selectUser(user) {
            selectedUser = user;

            // Display selected user info
            const selectedUserInfo = document.getElementById('selectedUserInfo');
            selectedUserInfo.innerHTML = `
        <div class="font-medium text-gray-900">${user.nama}</div>
        <div class="text-sm text-gray-600">NIK: ${user.no_ktp} | HP: ${user.no_hp}</div>
        <div class="text-sm text-gray-500">${user.jenis_kelamin} - ${user.alamat}</div>
    `;

            // Show user selection section
            document.getElementById('userSelection').classList.remove('hidden');

            // Reset poli selection
            document.getElementById('poliSelect').value = '';
            document.getElementById('createQueueBtn').disabled = true;

            // Hide search results
            document.getElementById('searchResults').classList.add('hidden');
            document.getElementById('searchInput').value = '';
        }

        // Poli selection change
        document.getElementById('poliSelect').addEventListener('change', function() {
            const createQueueBtn = document.getElementById('createQueueBtn');
            createQueueBtn.disabled = !this.value;
        });

        // Create queue
        document.getElementById('createQueueBtn').addEventListener('click', function() {
            if (!selectedUser || !document.getElementById('poliSelect').value) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Pilih user dan poli terlebih dahulu',
                    confirmButtonColor: '#3B82F6'
                });
                return;
            }

            createQueue();
        });

        function createQueue() {
            const poliId = document.getElementById('poliSelect').value;

            fetch('{{ route('admin.antrian.store') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        user_id: selectedUser.id,
                        poli_id: poliId
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: data.message,
                            confirmButtonColor: '#10B981'
                        }).then(() => {
                            resetForm();
                        });
                    } else {
                        // Check if it's an existing queue error with additional details
                        if (data.existing_queue) {
                            let statusText = '';
                            let alertIcon = 'warning';
                            let titleText = 'Antrian Sudah Ada!';

                            switch (data.existing_queue.status) {
                                case 'menunggu':
                                    statusText = 'Menunggu';
                                    break;
                                case 'dipanggil':
                                    statusText = 'Dipanggil';
                                    alertIcon = 'info';
                                    titleText = 'Antrian Sedang Dipanggil!';
                                    break;
                                case 'sedang_diperiksa':
                                    statusText = 'Sedang Diperiksa';
                                    alertIcon = 'error';
                                    titleText = 'Sedang Dalam Pemeriksaan!';
                                    break;
                            }

                            Swal.fire({
                                icon: alertIcon,
                                title: titleText,
                                html: `
                    <div class="text-left">
                        <p class="mb-3">${data.message}</p>
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-3">
                            <div class="flex items-center">
                                <svg class="w-5 h-5 text-yellow-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                </svg>
                                <span class="font-medium text-yellow-800">Detail Antrian Aktif:</span>
                            </div>
                            <div class="mt-2 text-sm text-yellow-700">
                                <p><strong>No. Antrian:</strong> ${data.existing_queue.no_antrian}</p>
                                <p><strong>Status:</strong> ${statusText}</p>
                            </div>
                        </div>
                        ${data.existing_queue.status === 'sedang_diperiksa' 
                            ? '<p class="text-sm text-red-600 font-medium">⚠️ User tidak dapat mengambil antrian baru di poli yang sama selama masih dalam proses pemeriksaan.</p>'
                            : '<p class="text-sm text-gray-600">Silakan tunggu hingga antrian selesai atau dibatalkan terlebih dahulu.</p>'
                        }
                    </div>
                    `,
                                confirmButtonColor: data.existing_queue.status === 'sedang_diperiksa' ?
                                    '#EF4444' : '#F59E0B'
                            });
                        } else {
                            // Generic error
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: data.message,
                                confirmButtonColor: '#EF4444'
                            });
                        }
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan saat membuat antrian',
                        confirmButtonColor: '#EF4444'
                    });
                });
        }

        function resetForm() {
            selectedUser = null;
            document.getElementById('userSelection').classList.add('hidden');
            document.getElementById('searchResults').classList.add('hidden');
            document.getElementById('noResults').classList.add('hidden');
            document.getElementById('searchInput').value = '';
            document.getElementById('poliSelect').value = '';
            document.getElementById('createQueueBtn').disabled = true;
        }
    </script>

    @include('admin.partials.sidebar-script')
@endsection