@extends('layout.guest')

@section('title')
GGP Directory Product List
@endsection

@section('content')
    <div>
        @include('directory.partials.header', ['title' => $title, 'not_product_group' => true])
        <div class="directory-listing-header">
            <div class="d-flex justify-content-between align-items-center px-2">
                <div class="breadcrumbs">
                    @foreach($breadcrumbs as $breadcrumb)
                        @if ($loop->last)
                            <b>{{ $breadcrumb['name'] }}</b>
                        @else
                            <span class="text-gray">
                                @if(isset($breadcrumb['link']))
                                    <a class="text-gray" href="{{ $breadcrumb['link'] }}">
                                        {{ $breadcrumb['name'] }}
                                    </a>
                                @else
                                    {{ $breadcrumb['name'] }}
                                @endif
                            </span> > 
                        @endif
                    @endforeach
                </div>
                <div class="sort-group">
                    <span>Sort by:</span>
                    <select name="sort" id="sort" onchange="editSort(this.value)">
                        <option value="asc">A to Z</option>
                        <option value="desc">Z to A</option>
                    </select> 
                </div>
            </div>
            <hr style="margin-top:0.3rem"/>
        </div>
        <div class="directory-listing">
            <div class="directory-company-title">
                <h4>{{ $company->company_name }}</h4>
            </div>
            <table class="table-listing">
                <thead>
                    <tr>
                        <th>Listing No.</th>
                        <th>Certified Date</th>
                        <th>Expiry Date</th>
                        <th>Product Name</th>
                        <th>Brand</th>
                        <th>Model</th>
                        <th>Action</th>
                    </tr>
                    <tr>
                        <div class="text-center" id="list-prompt" style="margin-bottom:calc(20px + 1rem)">Loading...</div>
                        <div id="list-error" style="display:none"><p class="text-danger">Failed to load data.</p></div>
                    </tr>
                </thead>
                <tbody id="item-list">
                    {{-- @foreach ($products as $product)
                        @php
                            $name = $product->itemDetails->filter(function ($itemDetail) {
                                    return $itemDetail->formDetail->name == 'Product Name' || $itemDetail->formDetail->name == 'Service Name';
                                })->first()->value ?? '-';
                        @endphp
                        <tr>
                            <td>{{ $product->application->application_no }}</td>
                            <td>{{ $product->application->myhijau_cert_date ?? '-' }}</td>
                            <td>{{ $product->application->myhijau_exp_date ?? '-' }}</td>
                            <td>{{ $name }}</td>
                            <td><a href="">View</a></td>
                        </tr>
                    @endforeach --}}
                </tbody>
                <tfoot>
                    <td colspan="5">
                        <div class="directory-table-footer">
                            <div class="left-group">
                                <span>
                                    Show 
                                    <select name="limit" id="limit" onchange="editOffset(this.value)">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select> 
                                    items
                                </span>
                                <div class="pagination-group">
                                    <button onclick="loadPage(currentPage - 1)" id="prev-btn" class="btn">Previous</button>
                                    <button onclick="loadPage(currentPage + 1)" id="next-btn" class="btn">Next</button>
                                </div>
                            </div>
                            <div id="page-total" class="d-flex align-items-center">
                            </div>
                        </div>
                    </td>
                </tfoot>
            </table>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    let currentPage = 1;
    let offset_limit = 10;
    let sort = 'asc';
    let search = null;

    $('#search_name').on('input', function () {
        search = $(this).val();
    });

    function editSort (sorting) {
        sort = sorting;
        loadPage(currentPage, offset_limit);
    }

    function editOffset(offset) {
        offset_limit = parseInt(offset);
        loadPage(currentPage, offset_limit);
    }

    function goToPage() {
        currentPage = parseInt($('#page').val());
        loadPage(currentPage, offset_limit);
    }

    function searchFunc() {
        loadPage(currentPage, offset_limit);
    }

    function clearAll() {
        $('#search_name').val(null);
        search = null;
        currentPage = 1;
        loadPage(currentPage, offset_limit);
    }

    function loadPage(page, limit = offset_limit, sorting = sort) {
        $.ajax({
            url: "{{ $ajaxLink }}",
            method: 'GET',
            data: {
                page: page,
                limit: limit,
                sort: sorting,
                search_name: search,
            },
            dataType: 'json',
            beforeSend: function() {
                $('#list-error').hide();
                $('#item-list').empty();
                $('#pagination').empty();
                $('#list-prompt').text('Loading...');
                $('#list-prompt').show();
                $('#prev-btn').prop('disabled', true);
                $('#next-btn').prop('disabled', true);
                $('#page-total').empty();
            },
            success: function (data) {
                const list = $('#item-list');

                if (!data.data || data.data.length === 0) {
                    $('#list-prompt').text('No items found.');
                } else {
                    $('#list-prompt').hide();
                    // Chunk data into groups of 4
                    for (let i = 0; i < data.data.length; i += 4) {
                        const rowItems = data.data.slice(i, i + 4);

                        rowItems.forEach(item => {
                            const row = $(`
                                <tr>
                                    <td>${item.item_no}</td>
                                    <td>${item.application.myhijau_cert_date}</td>
                                    <td>${item.application.myhijau_exp_date}</td>
                                    <td>${item.name}</td>
                                    <td>${item.brand}</td>
                                    <td>${item.model}</td>
                                    <td><a class="btn btn-primary-light-green text-white view-btn" href="{{ $itemLink }}/${item.id}">View</a></td>
                                </tr>
                            `);
                            list.append(row);
                        });
                    }
                }

                currentPage = parseInt(data.page);
                totalPage = parseInt(data.total_pages);
                if(totalPage == 0){
                    $('.directory-table-footer').hide();
                } else {
                    $('.directory-table-footer').show();
                    $('#prev-btn').prop('disabled', currentPage === 1 );
                    $('#next-btn').prop('disabled', currentPage >= totalPage);
                    $('#page-total').html(`<div class="d-flex align-items-center">
                        <span>Page</span>
                        <input type="text" class="form-control mx-2" name="page" id="page" value="${data.page}">
                        <span>of ${totalPage}</span> 
                        <button class='btn btn-go ms-2' id="go_to_page" onclick="goToPage()">Go</button>
                    </div>`);
                }

                // $('html, body').animate({
                //     scrollTop: $('.directory-header').offset().top
                // }, 500);
            },
            error: function (xhr, status, error) {
                console.error('AJAX error:', error);
                $('#list-prompt').hide();
                $('#list-error').show();
            }
        });
    }
    
    $(document).ready(function() {
        $('#search_name').val('');
        $('#search_name').on('keypress', function(e) {
            if (e.which === 13) { // 13 = Enter key
                $('.search-btn').click();
            }
        });
        loadPage(currentPage);
    });
</script>
@endsection