<?php $__env->startSection('title', 'Countries'); ?>
<?php $__env->startSection('page-title', 'Countries'); ?>

<?php $__env->startSection('content'); ?>


<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
    <div>
        <h2 class="text-xl font-bold text-gray-800">All Countries</h2>
        <p class="text-sm text-gray-500 mt-0.5"><?php echo e($countries->total()); ?> <?php echo e(Str::plural('country', $countries->total())); ?> total</p>
    </div>
    <a href="<?php echo e(route('admin.countries.create')); ?>"
       class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2.5 rounded-lg transition shadow-sm">
        <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="M12 4v16m8-8H4"/>
        </svg>
        Add Country
    </a>
</div>


<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-4">
    <form method="GET" action="<?php echo e(route('admin.countries.index')); ?>" class="flex gap-3">
        <input
            type="text"
            name="search"
            value="<?php echo e(request('search')); ?>"
            placeholder="Search by country name…"
            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button type="submit"
                class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition">
            Search
        </button>
        <?php if(request('search')): ?>
            <a href="<?php echo e(route('admin.countries.index')); ?>"
               class="px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition">
                Clear
            </a>
        <?php endif; ?>
    </form>
</div>


<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <?php if($countries->isEmpty()): ?>
        <div class="text-center py-16">
            <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6H11l-1-1H5a2 2 0 00-2 2zm9-13.5V9"/>
            </svg>
            <p class="text-gray-500 text-sm">No countries found.</p>
            <a href="<?php echo e(route('admin.countries.create')); ?>" class="mt-3 inline-block text-blue-600 text-sm hover:underline">
                Add your first country →
            </a>
        </div>
    <?php else: ?>
        <table class="min-w-full divide-y divide-gray-100">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide">Country</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide hidden md:table-cell">Slug</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide hidden lg:table-cell">Status</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide hidden lg:table-cell">Order</th>
                    <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wide">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <?php $__currentLoopData = $countries; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $country): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <tr class="hover:bg-gray-50 transition" id="row-<?php echo e($country->id); ?>">
                    
                    <td class="px-5 py-4">
                        <div class="flex items-center gap-3">
                            <?php if($country->flag_image): ?>
                                <img src="<?php echo e($country->flag_url); ?>"
                                     alt="<?php echo e($country->name); ?> flag"
                                     class="w-8 h-6 object-cover rounded border border-gray-200 flex-shrink-0" />
                            <?php else: ?>
                                <div class="w-8 h-6 bg-gray-200 rounded flex items-center justify-center flex-shrink-0">
                                    <span class="text-gray-400 text-xs">🏳</span>
                                </div>
                            <?php endif; ?>
                            <div>
                                <p class="text-sm font-semibold text-gray-800"><?php echo e($country->name); ?></p>
                                <?php if($country->short_description): ?>
                                    <p class="text-xs text-gray-400 truncate max-w-xs"><?php echo e(Str::limit($country->short_description, 60)); ?></p>
                                <?php endif; ?>
                            </div>
                        </div>
                    </td>

                    
                    <td class="px-5 py-4 hidden md:table-cell">
                        <code class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded"><?php echo e($country->slug); ?></code>
                    </td>

                    
                    <td class="px-5 py-4 hidden lg:table-cell">
                        <button
                            onclick="toggleStatus(<?php echo e($country->id); ?>)"
                            id="status-btn-<?php echo e($country->id); ?>"
                            class="inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full transition
                                   <?php echo e($country->is_active
                                       ? 'bg-green-100 text-green-700 hover:bg-green-200'
                                       : 'bg-gray-100 text-gray-600 hover:bg-gray-200'); ?>">
                            <span class="w-1.5 h-1.5 rounded-full <?php echo e($country->is_active ? 'bg-green-500' : 'bg-gray-400'); ?>"
                                  id="status-dot-<?php echo e($country->id); ?>"></span>
                            <span id="status-label-<?php echo e($country->id); ?>">
                                <?php echo e($country->is_active ? 'Active' : 'Inactive'); ?>

                            </span>
                        </button>
                    </td>

                    
                    <td class="px-5 py-4 hidden lg:table-cell">
                        <span class="text-sm text-gray-500"><?php echo e($country->sort_order); ?></span>
                    </td>

                    
                    <td class="px-5 py-4">
                        <div class="flex items-center justify-end gap-2">
                            <a href="<?php echo e($country->public_url); ?>" target="_blank"
                               title="View on site"
                               class="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition">
                                <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                                </svg>
                            </a>
                            <a href="<?php echo e(route('admin.countries.edit', $country)); ?>"
                               title="Edit"
                               class="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition">
                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                </svg>
                            </a>
                            <form method="POST"
                                  action="<?php echo e(route('admin.countries.destroy', $country)); ?>"
                                  onsubmit="return confirm('Delete <?php echo e(addslashes($country->name)); ?>? This cannot be undone.')">
                                <?php echo csrf_field(); ?>
                                <?php echo method_field('DELETE'); ?>
                                <button type="submit"
                                        title="Delete"
                                        class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition">
                                    <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>

        
        <?php if($countries->hasPages()): ?>
            <div class="px-5 py-4 border-t border-gray-100">
                <?php echo e($countries->links()); ?>

            </div>
        <?php endif; ?>
    <?php endif; ?>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
function toggleStatus(id) {
    fetch(`/admin/countries/${id}/toggle`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        }
    })
    .then(r => r.json())
    .then(data => {
        const btn   = document.getElementById(`status-btn-${id}`);
        const dot   = document.getElementById(`status-dot-${id}`);
        const label = document.getElementById(`status-label-${id}`);

        if (data.is_active) {
            btn.className   = btn.className.replace('bg-gray-100 text-gray-600 hover:bg-gray-200', 'bg-green-100 text-green-700 hover:bg-green-200');
            dot.className   = dot.className.replace('bg-gray-400', 'bg-green-500');
            label.textContent = 'Active';
        } else {
            btn.className   = btn.className.replace('bg-green-100 text-green-700 hover:bg-green-200', 'bg-gray-100 text-gray-600 hover:bg-gray-200');
            dot.className   = dot.className.replace('bg-green-500', 'bg-gray-400');
            label.textContent = 'Inactive';
        }
    });
}
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('admin.layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/gpsmigration/public_html/gpsmigration.com/resources/views/admin/countries/index.blade.php ENDPATH**/ ?>