<?php $__env->startSection('main-content'); ?>
<style>
    [x-cloak] { display: none !important; }

    /* Custom Pagination Styling */
    .pagination-container nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .pagination-container nav > div:first-child p {
        font-size: 10px !important;
        text-transform: uppercase;
        font-weight: 700;
        color: #94a3b8;
        letter-spacing: 0.025em;
    }

    /* Container for the numbers and arrows */
    .pagination-container nav div:last-child {
        box-shadow: none !important;
        display: flex;
        gap: 5px;
    }

    /* Base button style (for all: numbers and arrows) */
    .pagination-container nav div:last-child a, 
    .pagination-container nav div:last-child span[aria-current="page"] > span,
    .pagination-container nav div:last-child span[aria-disabled="true"] > span {
        height: 30px !important;    /* Fixed uniform height */
        min-width: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        transition: all 0.2s;
        border: 1px solid #e2e8f0 !important;
        line-height: 1 !important;
    }

    /* Active Page Number (Indigo Background, White Text) */
    .pagination-container nav div:last-child span[aria-current="page"] > span {
        background-color: #6366f1 !important; 
        color: #ffffff !important; 
        border-color: #6366f1 !important;
    }

    /* Previous & Next Buttons (Indigo Theme Color, not Black) */
    .pagination-container nav div:last-child a:first-child,
    .pagination-container nav div:last-child a:last-child,
    .pagination-container nav div:last-child span[aria-disabled="true"] > span {
        background-color: #f5f7ff !important; /* Light indigo tint */
        color: #6366f1 !important;           /* Indigo theme color */
        border-color: #6366f1 !important;
    }

    /* Hover effect for numbers and arrows */
    .pagination-container nav div:last-child a:hover {
        background-color: #6366f1 !important;
        color: #ffffff !important;
        border-color: #6366f1 !important;
    }

    /* Fix Icon sizes inside arrows */
    .pagination-container svg {
        width: 14px !important;
        height: 14px !important;
        display: block;
    }

    /* Hide redundant mobile links */
    .pagination-container nav > a {
        display: none !important;
    }
</style>

<div x-data="{ 
    searchQuery: '', 
    countryFilter: '',
    selected: [],
    
    get allSelected() {
        const visibleIds = this.getVisibleIds();
        return visibleIds.length > 0 && visibleIds.every(id => this.selected.includes(id));
    },

    toggleAll() {
        const visibleIds = this.getVisibleIds();
        if (this.allSelected) {
            this.selected = this.selected.filter(id => !visibleIds.includes(id));
        } else {
            this.selected = [...new Set([...this.selected, ...visibleIds])];
        }
    },

    getVisibleIds() {
        const ids = [];
        document.querySelectorAll('.supplier-row').forEach(el => {
            if (el.style.display !== 'none') ids.push(el.dataset.id);
        });
        return ids;
    },

    matchesSearch(name, email, country) {
        const query = this.searchQuery.toLowerCase();
        const matchesText = name.toLowerCase().includes(query) || email.toLowerCase().includes(query);
        const matchesCountry = this.countryFilter === '' || country === this.countryFilter;
        return matchesText && matchesCountry;
    }
}">
    <div class="mb-8 border-b border-slate-200 pb-4 flex justify-between items-end">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Suppliers</h1>
            <p class="text-slate-500 text-[11px] font-bold uppercase tracking-widest text-indigo-600 underline decoration-indigo-200 decoration-2 underline-offset-4">Vendor Master Ledger</p>
        </div>
        <a href="<?php echo e(route('suppliers.create')); ?>" class="bg-indigo-600 text-white px-6 py-2 rounded text-[11px] font-bold shadow-sm hover:bg-indigo-700 transition flex items-center gap-2">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
            New Supplier
        </a>
    </div>

    <div class="mb-6 flex flex-col lg:flex-row justify-between items-center gap-4">
        <div class="flex flex-wrap items-center gap-2 w-full lg:w-auto">
            <select x-model="countryFilter" class="bg-white border border-slate-300 rounded px-3 py-1.5 text-[10px] font-bold text-slate-600 uppercase outline-none focus:border-indigo-500 transition">
                <option value="">All Countries</option>
                <?php $__currentLoopData = $suppliers->unique('country')->pluck('country'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $country): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($country); ?>"><?php echo e(strtoupper($country)); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>

            <button type="submit" form="bulk-form" name="action" value="export_all" class="bg-white border border-slate-300 text-slate-700 px-3 py-1.5 rounded text-[10px] font-bold uppercase hover:bg-slate-50 shadow-sm flex items-center gap-2">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                Export All
            </button>
        </div>

        <div class="relative w-full lg:w-64">
            <input type="text" x-model="searchQuery" placeholder="Search current page..." class="w-full bg-white border border-slate-300 rounded px-3 py-2 pl-9 text-xs focus:border-indigo-500 outline-none transition shadow-sm">
            <svg class="absolute left-3 top-2.5 h-4 w-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
    </div>

    <form id="bulk-form" action="<?php echo e(route('suppliers.bulk')); ?>" method="POST">
        <?php echo csrf_field(); ?>
        <template x-for="id in selected" :key="id">
            <input type="hidden" name="ids[]" :value="id">
        </template>

        <div x-show="selected.length > 0" x-cloak x-transition class="mb-4 bg-indigo-50 border border-indigo-200 rounded p-3 flex items-center justify-between shadow-sm">
            <span class="text-[11px] font-bold text-indigo-700 uppercase" x-text="selected.length + ' selected' "></span>
            <div class="flex gap-2">
                <button type="submit" name="action" value="export" class="bg-white border border-slate-300 text-slate-700 px-4 py-1.5 rounded text-[10px] font-bold uppercase hover:bg-slate-50">Export</button>
                <button type="submit" name="action" value="delete" onclick="return confirm('Archive selected?')" class="bg-white border border-red-300 text-red-600 px-4 py-1.5 rounded text-[10px] font-bold uppercase hover:bg-red-50">Delete</button>
            </div>
        </div>
    </form>

    <div class="bg-white border border-slate-300 rounded-sm overflow-hidden shadow-sm">
        <table class="w-full text-left border-collapse">
            <thead class="bg-slate-50 border-b border-slate-300">
                <tr class="text-[10px] font-bold text-slate-500 uppercase">
                    <th class="px-4 py-3 w-10 border-r border-slate-200 text-center">
                        <input type="checkbox" @click="toggleAll()" :checked="allSelected" class="rounded border-slate-300 text-indigo-600">
                    </th>
                    <th class="px-4 py-3 border-r border-slate-200">Company Name</th>
                    <th class="px-4 py-3 border-r border-slate-200 text-center">Country</th>
                    <th class="px-4 py-3 border-r border-slate-200">Contact Person</th>
                    <th class="px-4 py-3 border-r border-slate-200 text-right">Balance</th>
                    <th class="px-4 py-3 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="text-xs">
                <?php $__empty_1 = true; $__currentLoopData = $suppliers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $supplier): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <tr x-show="matchesSearch('<?php echo e(addslashes($supplier->name)); ?>', '<?php echo e(addslashes($supplier->email ?? '')); ?>', '<?php echo e($supplier->country); ?>')" 
                    class="supplier-row border-b border-slate-200 hover:bg-slate-50 transition" 
                    data-id="<?php echo e($supplier->id); ?>">
                    
                    <td class="px-4 py-3 border-r border-slate-200 text-center">
                        <input type="checkbox" value="<?php echo e($supplier->id); ?>" x-model="selected" class="rounded border-slate-300 text-indigo-600">
                    </td>
                    <td class="px-4 py-3 border-r border-slate-200">
                        <div class="flex flex-col">
                            <span class="font-bold text-slate-800 tracking-tight"><?php echo e($supplier->name); ?></span>
                            <span class="text-[10px] text-slate-400 tracking-tighter"><?php echo e($supplier->email); ?></span>
                        </div>
                    </td>
                    <td class="px-4 py-3 border-r border-slate-200 text-center uppercase text-[9px] font-bold text-slate-500">
                        <span class="px-2 py-0.5 rounded <?php echo e($supplier->country == 'Zambia' ? 'bg-slate-100 text-slate-600' : 'bg-indigo-50 text-indigo-600'); ?>">
                            <?php echo e($supplier->country); ?>

                        </span>
                    </td>
                    <td class="px-4 py-3 border-r border-slate-200 text-slate-600 font-medium"><?php echo e($supplier->contact_full_name); ?></td>
                    <td class="px-4 py-3 border-r border-slate-200 text-right font-mono font-bold text-slate-900"><?php echo e(number_format($supplier->opening_balance, 2)); ?></td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex justify-end gap-3 font-bold text-[10px] uppercase">
                            <a href="<?php echo e(route('suppliers.statement', $supplier->id)); ?>" class="text-indigo-600 hover:text-indigo-800 transition">Statement</a>
                            <div class="w-px h-3 bg-slate-200"></div>
                            <a href="<?php echo e(route('suppliers.edit', $supplier->id)); ?>" class="text-slate-400 hover:text-indigo-600 transition">Edit</a>
                        </div>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <tr><td colspan="6" class="p-12 text-center italic text-slate-400">No vendors found.</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <div class="mt-8 pagination-container">
        <?php echo e($suppliers->links()); ?>

    </div>
</div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.aura-main', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/edugfqvw/auraaccountify.online/portal/resources/views/suppliers/index.blade.php ENDPATH**/ ?>