@php
$currentSortField = request('sortField');
$currentSortDirection = request('sortDirection');
$moduleName = $title;
@endphp
<div class="common-table-wrapper">
    <div class="common-table-header">
        <h2 class="table-title">{{ $title ?? 'Records' }}</h2>

        <div class="table-actions">
            <div class="input-group mb-0 search-input-wrapper">
                <span class="input-group-text">
                    <img src="{{asset('images/icons/search.svg')}}" width="14" height="14" />
                </span>
                <input type="text" id="searchInput" class="form-control"
                    placeholder="Search {{$moduleName}}" autocomplete="off" />
            </div>
            <div class="dropdown table-dropdown">
                <button
                    class="btn btn-secondary-bordered no-padding icon32 flex-btn"
                    aria-label="Filter"
                    type="button"
                    id="filter-dropdown-1"
                    data-bs-toggle="dropdown"
                    aria-expanded="false">
                    <img
                        src="{{asset('images/icons/filter-icon.svg')}}"
                        alt="Filter"
                        width="14"
                        height="14"
                        class="img-fluid" />
                </button>
                <ul
                    class="dropdown-menu filter-dropdown-menu"
                    aria-labelledby="filter-dropdown-1">
                    <li>
                        <div class="mb-3">
                            <label for="filter-status">Status</label>
                            <select
                                class="form-select filter-select w-100"
                                aria-label="Current Quarter" id="status_filter">
                                <option value="">Select Status</option>
                                <option value="1">Active</option>
                                <option value="0">InActive</option>
                            </select>
                        </div>
                        <div
                            class="d-flex flex-row align-items-center justify-content-end gap-2">
                            <button type="button" id="reset_search" class="btn btn-secondary-bordered minh36">
                                Reset
                            </button>
                            <button type="button" id="search_status" class="btn btn-primary minh36">
                                Apply
                            </button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table common-table" id="commonTable"
            data-fetch-url="{{ $fetch_url }}">
            <thead>
                <tr>
                    @foreach ($columns as $col)
                    @php
                    $currentSortField = request('sortField') ?? 'id';
                    $currentSortDirection = request('sortDirection') ?? 'desc';
                    @endphp

                    <th class="{{ $col['class'] ?? '' }} {{ $col['sortable'] ? 'sortable' : '' }}"
                        data-sort="{{ $col['field'] ?? '' }}">
                        {{ $col['label'] }}

                        @if($col['sortable'])
                        @php
                        $iconClass = 'fas fa-sort';
                        if($currentSortField === $col['field'] && $currentSortDirection === 'asc') {
                        $iconClass = 'fas fa-sort-up';
                        } elseif($currentSortField === $col['field'] && $currentSortDirection === 'desc') {
                        $iconClass = 'fas fa-sort-down';
                        }
                        @endphp
                        <i class="{{ $iconClass }} sort-icon" style="margin-left:6px;"></i>
                        @endif
                    </th>

                    @endforeach
                </tr>
            </thead>
            <tbody id="tableBody"></tbody>
        </table>
    </div>

    <div id="paginationLinks" class="mt-3" style="float: inline-end;"></div>
</div>