@extends('layouts.site')

@section('meta_title', 'Products')

@section('content_header')
@include('partials._components._heading', ['heading' => 'Overview'])
@endsection

@section('content')
<section class="site-main-section">
    <div class="site-container">
        <div class="content-rich">
            <header>
                <h1 class="text-3xl font-extrabold text-slate-900">Products</h1>
                <p class="mt-3 max-w-6xl text-base text-slate-600">
                    Browse our complete product catalog or search for specific items by SKU or product name.
                </p>
            </header>
            <section class="my-5">
                <label class="sr-only" for="products-search">Search products</label>
                <div class="relative">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </span>
                    <input id="products-search" type="search"
                        class="block w-full rounded-xl border border-slate-200 bg-white py-4 pl-11 pr-4 text-base text-slate-800 shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
                        placeholder="Search by SKU or product name..." />
                </div>
            </section>

            <div class="my-5 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
                <table class="table mb-0 w-full" id="productsTable" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>SKU</th>
                            <th>Product Name</th>
                            <th>Category</th>
                            <th class="text-right">Points</th>
                            <th class="text-right">Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products as $product)
                        <tr>
                            <td>{{ $product['sku'] }}</td>
                            <td>{{ $product['name'] }}</td>
                            <td>{{ $product['category'] }}</td>
                            <td class="text-right">{{ number_format($product['points']) }}</td>
                            <td class="text-right">${{ number_format($product['price'], 2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')
@parent
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        var productsTable = $('#productsTable').DataTable({
            paging: true,
            pageLength: 10,
            ordering: false,
            searching: true,
            lengthChange: false,
            info: false,
            autoWidth: false,
            responsive: false,
            dom: 'tp'
        });

        $('#productsTable_filter').hide();

        $('#products-search').on('input', function () {
            productsTable.search(this.value).draw();
        });

        var $wrapper = $('#productsTable_wrapper');
        var $paginate = $wrapper.find('.dataTables_paginate');
        var $footer = $('<div class="activities-table-footer"></div>');
        var $summary = $('<div class="activities-table-footer__summary"></div>');

        $paginate.before($summary);
        $paginate.addClass('activities-table-footer__pagination');
        $paginate.add($summary).wrapAll($footer);

        function updateProductsSummary() {
            var info = productsTable.page.info();
            var totalPages = info.pages > 0 ? info.pages : 1;
            var currentPage = info.pages > 0 ? (info.page + 1) : 1;
            $summary.text('Page ' + currentPage + ' of ' + totalPages + ' | Showing ' + info.recordsDisplay + ' of ' + info.recordsTotal + ' products');
        }

        productsTable.on('draw', updateProductsSummary);
        productsTable.columns.adjust().draw(false);
        updateProductsSummary();
    });
</script>
@endsection