@extends('layouts.business')

@section('title', 'Features')
@section('breadcrumb_title', 'Features')
@section('breadcrumb_title_route', route('business.features.index'))
@section('breadcrumb_sub_title', 'List')
@section('page_title', 'Features ')

@push('styles')
    <style>
        .badge {
            font-weight: 600;
        }
    </style>
@endpush

@section('content')
    <div class="min-h-screen bg-gray-50">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="mb-0">Features</h5>
                                <p class="text-sm mb-0">Manage all vehicle features.</p>
                            </div>
                            @if (Auth::user()->hasPermissionTo('Create_Feature'))
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#CreateModal">
                                    <i class="fas fa-plus me-2"></i>Add New Feature
                                </button>
                            @endif
                        </div>
                    </div>

                    <!-- Filters Section -->
                    <div class="card-body border-bottom">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="filterStatus" class="form-label business-fileters ">Status</label>
                                    <select class="form-control no-select2" id="filterStatus">
                                        <option value="">All Statuses</option>
                                        <option value="1">Active</option>
                                        <option value="0">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <div class="form-group text-end">
                                    <button type="button" class="btn btn-primary" id="applyFilters">Apply Filters</button>
                                    <button type="button" class="btn btn-secondary" id="clearFilters">Clear
                                        Filters</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-flush" id="datatable-search">
                            <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>Feature Name</th>
                                    {{-- <th>Created By</th> --}}
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="features-table-body">
                                <!-- Data will be loaded here via JavaScript -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Include Modals --}}
    @include('business.features.modals.create')
    @include('business.features.modals.edit')
    @include('business.features.modals.view')
@endsection

@section('scripts')
    @include('business.features.scripts.index-scripts')
@endsection