@extends('front.layouts.main')

@section('title', 'Kua Products')

@push('pageCss')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
<style>
    /* Custom table row colors for lead timeline */
    .products-table tbody tr.table-success {
        background-color: #DDF1E1 !important;
        border-left: 4px solid #28a745;
    }

    .products-table tbody tr.table-warning {
        background-color: rgba(255, 193, 7, 0.1) !important;
        border-left: 4px solid #ffc107;
    }

    .products-table tbody tr.table-danger {
        background-color: rgba(220, 53, 69, 0.1) !important;
        border-left: 4px solid #dc3545;
    }

    /* Badge styling */
    .badge {
        padding: 6px 12px;
        font-size: 0.8rem;
        font-weight: 600;
        border-radius: 12px;
    }

    .badge-success {
        background-color: #28a745;
        color: white;
    }

    .badge-danger {
        background-color: #dc3545;
        color: white;
    }

    .badge-secondary {
        background-color: #6c757d;
        color: white;
    }

    /* Filter button styling */
    .btn-filter {
        position: relative;
    }

    .btn-filter.has-filters::after {
        content: '';
        position: absolute;
        top: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        background-color: #dc3545;
        border-radius: 50%;
    }

    /* Color legend styling */
    .color-legend {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #e9ecef;
    }

    .color-legend h6 {
        color: #495057;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .legend-item {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .legend-color {
        border-radius: 4px;
    }

    @media (max-width: 768px) {
        .color-legend .d-flex {
            flex-direction: column;
            gap: 10px !important;
        }
    }

    .em-badge.dark-green {
        color: #ffffff;
        background-color: #28a745;
    }

    #pending-update-modal .modal-body {
        padding: 20px 30px;
    }

    .font-14 {
        font-size: 14px;
        line-height: 16px;
    }

    .fw-500 {
        font-weight: 500;
    }

    .btn-small {
        padding: 10px 12px;
        font-size: 14px;
        line-height: 16px;
        font-weight: 500;
        height: 36px;
    }

    .btn-grey:hover,
    .btn-grey:active,
    .btn-grey:focus,
    .btn-grey {
        background-color: #585c6d;
        color: #2c3035;
    }

    .btn-black,
    .btn-black:hover,
    .btn-black:active,
    .btn-black:focus {
        background-color: #2c3035;
        color: #ffffff;
    }
    .doc-list{
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .doc-list a {
        height: 24px;
    }
    .materia-icon-height {
        height: 24px;
    }
</style>
@endpush

@section('content')
<main class="products-page-container">
    <div class="products-card">
        {{-- Header --}}
        <div class="card-header-bar">
            <h2>Products</h2>
        </div>

        {{-- Search and Pagination Form --}}
        <form action="{{ url()->current() }}" method="GET" id="main-form">
            <div class="controls-bar">
                <div class="search-input-wrapper">
                    <i class="fa-solid fa-search"></i>
                    <input type="text" name="search" value="{{ request('search') }}"
                        placeholder="Search by client or product name">
                </div>

                <div class="pagination-controls">
                    <div class="record-per-page">
                        <label for="per_page">Record Per Page</label>
                        <select name="per_page" id="per_page" onchange="this.form.submit()">
                            <option value="10" @if (request('per_page', 10)==10) selected @endif>10</option>
                            <option value="25" @if (request('per_page')==25) selected @endif>25</option>
                            <option value="50" @if (request('per_page')==50) selected @endif>50</option>
                            <option value="100" @if (request('per_page')==100) selected @endif>100</option>
                        </select>
                    </div>
                    {{-- THIS IS THE CORRECTION: Use total() for paginated collections --}}
                    <span>Total {{ $products->total() }}</span>

                    <nav class="pagination-nav">
                        <a href="{{ $products->previousPageUrl() }}"
                            class="{{ $products->onFirstPage() ? 'disabled' : '' }}"><i
                                class="fa-solid fa-arrow-left"></i></a>
                        <span class="page-number active">{{ $products->currentPage() }}</span>
                        <a href="{{ $products->nextPageUrl() }}"
                            class="{{ !$products->hasMorePages() ? 'disabled' : '' }}"><i
                                class="fa-solid fa-arrow-right"></i></a>
                    </nav>
                </div>
            </div>
        </form>
        @if($products->count() > 0)
        {{-- products Table --}}
        <div id="customers-table-container">
            <table class="products-table">
                <thead>
                    <tr>
                        @php
                        $currentSort = request('sort_by');
                        $currentOrder = request('order') === 'asc' ? 'desc' : 'asc';
                        @endphp
                        <th>
                            <a
                                href="{{ request()->fullUrlWithQuery(['sort_by' => 'client', 'order' => $currentSort == 'client' ? $currentOrder : 'asc']) }}">
                                Client
                                @if ($currentSort === 'client')
                                <i class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                @else
                                <i class="fa-solid fa-sort"></i>
                                @endif
                            </a>
                        </th>
                        <th>
                            <a
                                href="{{ request()->fullUrlWithQuery(['sort_by' => 'product_name', 'order' => $currentSort == 'product_name' ? $currentOrder : 'asc']) }}">
                                Product
                                @if ($currentSort === 'product_name')
                                <i class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                @else
                                <i class="fa-solid fa-sort"></i>
                                @endif
                            </a>
                        </th>
                        <th>
                            <a href="javascript:void(0)">
                                Commission Agreement
                            </a>
                        </th>
                        <th>
                            <a href="javascript:void(0)">
                                Product Documents
                            </a>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($products as $product)