@extends('layouts.app')
@push('style')
    <style>
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 12px;
        }

        .product-card {
            border: 1px solid #e9ecef;
            border-radius: 12px;
            background: #fff;
            overflow: hidden;
            display: flex;
            flex-direction: column
        }

        .product-card img {
            width: 100%;
            height: 160px;
            object-fit: cover
        }

        .product-card .body {
            padding: 10px
        }

        .product-card .name {
            font-weight: 600;
            line-height: 1.2
        }

        .product-card .meta {
            font-size: .85rem;
            color: #64748b
        }

        .product-card .price {
            margin-top: 6px;
            font-weight: 600;
            text-align: right
        }
    </style>
@endpush

@push('middle_part')
    @can('product-create')
        <a href="{{ route('product.create') }}" class="btn btn-primary">New Product</a>
        <p class="gaps">|</p>
        <div class="ml-1 mmr-1 d-inline-flex align-items-center gap-2">
            <button class="btn btn-outline-secondary" id="toggleViewBtn" title="Toggle List/Grid">
                <i class="bi bi-grid-3x3-gap" id="toggleIcon"></i>
            </button>

            <button class="btn btn-primary" id="exportExcelBtn" title="Export Excel">
                <i class="bi bi-filetype-xlsx"></i>
            </button>

          {{--   <form id="importForm" class="d-inline-flex align-items-center gap-2" enctype="multipart/form-data" method="POST"
                action="{{ route('product.import') }}">
                @csrf
                <input type="file" name="file" id="importFile" accept=".xlsx,.xls,.csv"
                    class="form-control form-control-sm" style="width:220px">
                <button type="submit" class="btn btn-outline-primary btn-sm">Import</button>
            </form> --}}
        </div>
    @endcan
@endpush

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    @php
                        $page_name = 'Product > Product List';
                        $page_number = 1;
                    @endphp
                    @include('layouts.table_top')
                </div>

                <div class="col-md-12">
                    <div class="left-card">
                        <div class="row mb-3 align-items-end g-2">
                            <div class="col-md-3">
                                {{-- Bulk actions toolbar --}}
                                <div class="d-flex align-items-center gap-2" id="bulk-actions-bar">
                                    <select id="bulk-action" class="form-select">
                                        <option value="">{{ __('Bulk actions') }}</option>
                                      {{--   <option value="trash">{{ __('Move to Trash') }}</option> --}}
                                        <option value="delete">{{ __('Delete Permanently') }}</option>
                                    </select>
                                    <button id="apply-bulk" class="btn btn-secondary">{{ __('Apply') }}</button>
                                </div>

                            </div>

                            @if (usertype() == 'admin')
                                <div class="col-md-2">
                                    <select id="branch_id" name="branch_id" class="form-control custom-form">
                                        @foreach (branches() as $branch)
                                            <option value="{{ $branch->id }}">{{ $branch->branch_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @else
                                <input type="hidden" id="branch_id" value="{{ branch_id() }}">
                            @endif

                            <div class="col-md-2">
                                <select id="category_id" class="form-control custom-form">
                                    <option value="">Select Category</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2">
                                <select id="sub_category_id" class="form-control custom-form">
                                    <option value="">Select Sub-category</option>
                                    @foreach ($subcategories as $subcategory)
                                        <option value="{{ $subcategory->id }}">{{ $subcategory->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2">
                                <select id="brand_id" class="form-control custom-form">
                                    <option value="">Select Brand</option>
                                    @foreach ($brands as $brand)
                                        <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-1">
                                <button class="btn btn-secondary filter">Filter</button>
                            </div>
                            
                        </div>

                        {{-- LIST container (server-rendered table partial) --}}
                        <div class="table-fixed-head d-none" id="items-table"></div>

                        {{-- GRID container (cards + infinite load) --}}
                        <div id="items-grid" class="product-grid d-none"></div>
                        <div id="grid-sentinel" class="text-center text-muted small py-3 d-none">Loading more…</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

    <script>
        let currentView = localStorage.getItem('product_view') || 'list';
        let currentPage = 1;
        let loading = false;
        let lastPageReached = false;
        const $grid = $('#items-grid');
        const $table = $('#items-table');
        const $sentinel = $('#grid-sentinel');

        function applyViewUI() {
            if (currentView === 'grid') {
                $('#toggleIcon').removeClass('bi-list-ul').addClass('bi-grid-3x3-gap');
                $table.addClass('d-none');
                $grid.removeClass('d-none');
                $sentinel.removeClass('d-none');
            } else {
                $('#toggleIcon').removeClass('bi-grid-3x3-gap').addClass('bi-list-ul');
                $grid.addClass('d-none').empty();
                $sentinel.addClass('d-none');
                $table.removeClass('d-none');
            }
        }

        function params(extra = {}) {
            return Object.assign({
                page: currentPage,
                perPage: (currentView === 'grid' ? 12 : $('#page_number').val() || 10),
                view: currentView,
                category_id: $("#category_id").val(),
                sub_category_id: $("#sub_category_id").val(),
                brand_id: $("#brand_id").val(),
                branch_id: $("#branch_id").val(),
                search: $("#form_search").val()
            }, extra);
        }

        function loadList(page = 1) {
            $('#loading-indicator').show();
            $.get("{{ route('product.getdata') }}", params({
                page
            }), function(html) {
                $('#loading-indicator').hide();
                $table.html(html);
            }).fail(() => {
                $('#loading-indicator').hide();
                toastr.error('Failed to load data');
            });
        }

        function loadGridAppend() {
            if (loading || lastPageReached) return;
            loading = true;
            $sentinel.text('Loading more…');
            $.get("{{ route('product.getdata') }}", params(), function(html) {
                    if (!$.trim(html)) {
                        lastPageReached = true;
                        $sentinel.text('No more items');
                        return;
                    }
                    $grid.append(html);
                    $grid.find('.pagination').remove();
                    currentPage++;
                    $sentinel.text('');
                }).fail(() => {
                    toastr.error('Failed to load data');
                })
                .always(() => {
                    loading = false;
                });
        }

        function resetAndLoad() {
            currentPage = 1;
            lastPageReached = false;
            if (currentView === 'grid') {
                $grid.empty();
                loadGridAppend();
            } else {
                loadList(1);
            }
        }

        $(document).ready(function() {

            // initial view
            applyViewUI();
            resetAndLoad();

            // Toggle view
            $('#toggleViewBtn').on('click', function() {
                currentView = (currentView === 'grid') ? 'list' : 'grid';
                localStorage.setItem('product_view', currentView);
                applyViewUI();
                resetAndLoad();
            });

            // List pagination (delegated)
            $('#items-table').on('click', '.pagination a', function(e) {
                e.preventDefault();
                const page = $(this).attr('href').split('page=')[1];
                currentPage = parseInt(page, 10) || 1;
                loadList(currentPage);
            });

            // Filters & search (debounced)
            const doFilter = _.debounce(function() {
                resetAndLoad();
            }, 300);
            $('.filter, #page_number, #category_id, #sub_category_id, #brand_id, #branch_id').on('change',
                doFilter);
            $('#form_search').on('keyup', doFilter);

            // Grid infinite scroll via IntersectionObserver
            const io = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting && currentView === 'grid') {
                        loadGridAppend();
                    }
                });
            }, {
                root: null,
                threshold: 0.1
            });
            io.observe(document.getElementById('grid-sentinel'));

            // Export Excel
            $('#exportExcelBtn').on('click', function() {
                $('#loading-indicator').show();
                $.ajax({
                    url: "{{ route('product.getdata') }}",
                    type: "GET",
                    data: {
                        ...params(),
                        export: 'excel'
                    },
                    xhrFields: {
                        responseType: 'blob'
                    },
                    success: function(response) {
                        const blob = new Blob([response], {
                            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                        });
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = 'products.xlsx';
                        document.body.appendChild(a);
                        a.click();
                        a.remove();
                        URL.revokeObjectURL(url);
                    },
                    complete: function() {
                        $('#loading-indicator').hide();
                    }
                });
            });

            // Import guard
            $('#importForm').on('submit', function(e) {
                if (!$('#importFile').val()) {
                    e.preventDefault();
                    toastr.warning('Please select a file to import');
                }
            });
        });
    </script>
@endpush