@extends('admin.layouts.layout', $headerOption)

@section('content')
<div class="col-12">
    <div class="project-box">
        <x-heading-sec :module="$module" :options="$headingOptions" />

        {{-- Status Tabs --}}
        <ul class="nav nav-tabs project-tab mb-30" id="appTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ $activeTab === 'all' ? 'active' : '' }} waves-effect"
                        type="button" role="tab"
                        data-tab-url="{{ route('turbo-app.applications.index', array_filter(['tab' => 'all', 'search_text' => $search, 'date_from' => $dateFrom, 'date_to' => $dateTo])) }}">
                    All <span class="badge bg-secondary ms-1">{{ $totalCount }}</span>
                </button>
            </li>
            @foreach($statuses as $key => $status)
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ $activeTab === $key ? 'active' : '' }} waves-effect"
                        type="button" role="tab"
                        data-tab-url="{{ route('turbo-app.applications.index', array_filter(['tab' => $key, 'search_text' => $search, 'date_from' => $dateFrom, 'date_to' => $dateTo])) }}">
                    {{ $status['name'] }}
                    <span class="badge bg-{{ $status['badge'] }} ms-1">{{ $tabCounts[$key] }}</span>
                </button>
            </li>
            @endforeach
        </ul>

        {{-- Table --}}
        <div class="table-responsive project-table">
            <table id="datatable" class="{{ \Config::get('view.table.table_class') }}">
                @include('admin.components.form-header-fields')
                @include('admin.components.form-data-fields')
            </table>
        </div>

    </div>{{-- /.project-box --}}

    @include('admin.components.pagination')

</div>
@endsection

@push('page_modals')
    @include('admin.turbo-app.applications.partials.filter_offcanvas')
@endpush

@push('page_script')
<script src="{{ asset('assets/js/common.js') }}"></script>
<script src="{{ asset('assets/js/filter-form-handler.js') }}"></script>
<script>
(function () {
    // Tab switching — navigate on click
    $(document).on('click', '[data-tab-url]', function () {
        var url = $(this).data('tab-url');
        if (url) { window.location.href = url; }
    });

    // Search (Enter key) and clear icon are handled by common.js via .module-search and .search-clear-icon.
    // common.js uses search_text as the URL param, which the controller reads.
    // Row-click navigation is handled by form-data-fields component via tableParams.rowLink.
})();
</script>
@endpush