@extends('admin.layouts.app')

@section('title', 'Products')
@section('page-title', 'Products')

@section('content')
<!-- Top Bar: Search and Actions -->
<div class="mb-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
    <!-- Search Bar -->
    <div class="relative flex-1 max-w-md">
        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 text-sm"></i>
        <input type="text" id="productsSearch" placeholder="Search here" 
               class="w-full pl-10 pr-4 py-2.5 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
    </div>
    
    <!-- Action Buttons -->
    <div class="flex items-center gap-3">
        <button type="button" id="filterBtn" 
                class="inline-flex items-center px-4 py-2.5 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            <i class="fas fa-filter mr-2"></i>Filter
        </button>
        <a href="{{ route('admin.products.create') }}" 
           class="inline-flex items-center px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
            <i class="fas fa-plus mr-2"></i>New Product
        </a>
    </div>
</div>

<!-- Filter Panel (Hidden by default) -->
<div id="filterPanel" class="mb-6 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-4 hidden">
    <form id="filterForm" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
            <select name="category_id" 
                    class="py-2 px-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
                <option value="">All Categories</option>
                @foreach($allCategories as $category)
                    @if($category->parent_id === null)
                        <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                            {{ $category->name }}
                        </option>
                    @else
                        <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                            &nbsp;&nbsp;└ {{ $category->name }}
                        </option>
                    @endif
                @endforeach
            </select>
            
            <select name="in_stock" 
                    class="py-2 px-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
                <option value="1">All Stock Status</option>
                <option value="1" {{ request('in_stock') === '1' ? 'selected' : '' }}>In Stock</option>
                <option value="0" {{ request('in_stock') === '0' ? 'selected' : '' }}>Out of Stock</option>
            </select>
            
            <select name="on_sale" 
                    class="py-2 px-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
                <option value="">All Sale Status</option>
                <option value="1" {{ request('on_sale') === '1' ? 'selected' : '' }}>On Sale</option>
                <option value="0" {{ request('on_sale') === '0' ? 'selected' : '' }}>Not on Sale</option>
            </select>
            
            <div class="flex gap-2">
                <input type="number" name="price_min" value="{{ request('price_min') }}" 
                       placeholder="Min Price" step="0.01" min="0"
                       class="flex-1 py-2 px-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
                <input type="number" name="price_max" value="{{ request('price_max') }}" 
                       placeholder="Max Price" step="0.01" min="0"
                       class="flex-1 py-2 px-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
            </div>
        </div>
        
        <div class="flex items-center gap-3">
            <button type="button" id="clearFilters"
                    class="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
                Clear Filters
            </button>
        </div>
    </form>
</div>

<!-- DataTable -->
<div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
    <div class="overflow-x-auto">
        <table id="productsTable" class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
            <thead class="bg-gray-50 dark:bg-gray-900">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                        <input type="checkbox" id="selectAll" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                        Image
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
                        Product name <i class="fas fa-chevron-down ml-1 text-xs"></i>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
                        Category <i class="fas fa-chevron-down ml-1 text-xs"></i>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
                        Price <i class="fas fa-chevron-down ml-1 text-xs"></i>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
                        Status <i class="fas fa-chevron-down ml-1 text-xs"></i>
                    </th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                        <i class="fas fa-th ml-auto"></i>
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-950 divide-y divide-gray-200 dark:divide-gray-800"></tbody>
    </table>
    </div>
</div>


<!-- jQuery and DataTables JS -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>

@include('admin.partials.datatables-styles')

<script>
$(document).ready(function() {
    var searchDelay;
    
    // Initialize DataTable
    var table = $('#productsTable').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        searchDelay: 200,
        ajax: {
            url: "{{ route('admin.products.index') }}",
            type: 'GET',
            dataSrc: function(data) {
                console.log('DataTables Response:', data);
                return data.data || [];
            },
            data: function(d) {
                d.category_id = $('select[name="category_id"]').val();
                d.in_stock = $('select[name="in_stock"]').val();
                d.on_sale = $('select[name="on_sale"]').val();
                d.price_min = $('input[name="price_min"]').val();
                d.price_max = $('input[name="price_max"]').val();
            },
            error: function(xhr, error, thrown) {
                console.error('DataTables AJAX Error:', {xhr: xhr, error: error, thrown: thrown});
            }
        },
        columns: [
            { data: 'checkbox', orderable: false, searchable: false, 
              render: function(data) { return data || ''; } },
            { data: 'image', orderable: false, searchable: false,
              render: function(data) { return data || ''; } },
            { data: 'product', orderable: true,
              render: function(data) { return data || ''; } },
            { data: 'category', orderable: true,
              render: function(data) { return data || ''; } },
            { data: 'price', orderable: true,
              render: function(data) { return data || ''; } },
            { data: 'status', orderable: true, searchable: false,
              render: function(data) { return data || ''; } },
            { data: 'actions', orderable: false, searchable: false,
              render: function(data) { return data || ''; } }
        ],
        pageLength: 25,
        lengthMenu: [[25, 50, 100, 200], [25, 50, 100, 200]],
        order: [[1, 'asc']], // Sort by product name by default
        columnDefs: [
            { orderable: false, targets: [0, 1, 6] }, // Disable sorting on checkbox, image, and actions columns
            { className: "text-left", targets: [1, 2, 3, 4, 5] },
            { className: "text-right", targets: [6] }
        ],
        language: {
            lengthMenu: "Show _MENU_",
            info: "Showing _START_ to _END_ of _TOTAL_",
            infoEmpty: "Showing 0 to 0 of 0",
            infoFiltered: "(filtered from _MAX_ total)",
            paginate: {
                first: "«",
                last: "»",
                next: "›",
                previous: "‹"
            },
            emptyTable: "No products available",
            processing: "Loading..."
        },
        dom: '<"flex justify-between items-center mb-4"<"flex items-center gap-2"l><"flex items-center gap-2"f>>rt<"flex justify-between items-center mt-4"<"text-sm text-gray-600 dark:text-gray-400"i><"flex items-center gap-1"p>>',
        pagingType: "simple_numbers",
        drawCallback: function() {
            // Re-initialize dropdowns after table redraw
            $('[id^="dropdown-"]').addClass('hidden');
        }
    });
    
    // Search input with 200ms debounce
    $('#productsSearch').on('keyup', function() {
        clearTimeout(searchDelay);
        var searchTerm = this.value;
        searchDelay = setTimeout(function() {
            table.search(searchTerm).draw();
        }, 200);
    });

    // Reload table when any filter changes
    $('select[name="category_id"], select[name="in_stock"], select[name="on_sale"], input[name="price_min"], input[name="price_max"]').on('change', function() {
        table.ajax.reload();
    });

    // Filter button toggle
    $('#filterBtn').on('click', function() {
        $('#filterPanel').toggleClass('hidden');
    });
    
    // Clear all filters
    $('#clearFilters').on('click', function() {
        $('select[name="category_id"]').val('');
        $('select[name="in_stock"]').val('');
        $('select[name="on_sale"]').val('');
        $('input[name="price_min"]').val('');
        $('input[name="price_max"]').val('');
        $('#productsSearch').val('');
        table.search('').ajax.reload();
    });
    
    // Select all checkbox
    $('#selectAll').on('click', function() {
        $('.row-checkbox').prop('checked', this.checked);
    });
    
    // Individual checkbox change
    $(document).on('change', '.row-checkbox', function() {
        var total = $('.row-checkbox').length;
        var checked = $('.row-checkbox:checked').length;
        $('#selectAll').prop('checked', total === checked);
    });
});

function toggleDropdown(id) {
    const dropdown = document.getElementById('dropdown-' + id);
    const isHidden = dropdown.classList.contains('hidden');
    
    // Close all other dropdowns
    document.querySelectorAll('[id^="dropdown-"]').forEach(el => {
        if (el.id !== 'dropdown-' + id) {
            el.classList.add('hidden');
        }
    });
    
    // Toggle current dropdown
    if (isHidden) {
        dropdown.classList.remove('hidden');
    } else {
        dropdown.classList.add('hidden');
    }
}

// Close dropdowns when clicking outside
document.addEventListener('click', function(event) {
    if (!event.target.closest('[onclick*="toggleDropdown"]') && !event.target.closest('[id^="dropdown-"]')) {
        document.querySelectorAll('[id^="dropdown-"]').forEach(el => {
            el.classList.add('hidden');
        });
    }
});
</script>
@endsection