@extends('components.dashboard.layouts.master')
@section('styles')
    @stack('datatableStyles')
    <style>
        .filter-section {
            background: #f8f8f8;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            border: 1px solid #eee;
        }
        .filter-group {
            margin-bottom: 15px;
        }
        .filter-section label {
            font-weight: 500;
            color: #5e5873;
            margin-bottom: 5px;
            display: block;
        }
        .filter-actions {
            display: flex;
            align-items: flex-end;
            gap: 10px;
        }
    </style>
@endsection
@section('title')
    {{ __('Courses List') }}
@endsection

@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row"></div>
            <div class="content-body">
                <section class="users-list-wrapper">
                    <x-dashboard.layouts.breadcrumb now="{{ __('Courses List') }}"></x-dashboard.layouts.breadcrumb>

                    <section id="column-selectors">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">{{ __('Courses List') }}</h4>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-body card-dashboard">
                                            <!-- Filter Section -->
                                            <form id="filter-form" method="GET" action="{{ route('teacher.courses.index') }}">
                                                <div class="filter-section">
                                                    <div class="row">
                                                        <!-- Standardized Test Filter -->
                                                        <div class="col-md-4 filter-group">
                                                            <label for="standardized-test">{{ __('Standardized Test') }}</label>
                                                            <select class="form-control" id="standardized-test" name="standardized_test_id">
                                                                <option value="">{{ __('All Tests') }}</option>
                                                                @foreach($standardizedTests as $test)
                                                                    <option value="{{ $test->id }}" {{ request('standardized_test_id') == $test->id ? 'selected' : '' }}>
                                                                        {{ $test->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <!-- Status Filter -->


                                                        <!-- Filter Actions -->
                                                        <div class="col-md-4 filter-group filter-actions">
                                                            <button type="submit" id="filter-btn" class="btn btn-primary">
                                                                <i class="fa fa-filter"></i> {{ __('Filter') }}
                                                            </button>
                                                            <a href="{{ route('teacher.courses.index') }}" id="reset-btn" class="btn btn-outline-secondary">
                                                                <i class="fa fa-undo"></i> {{ __('Reset') }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>

                                            <x-pages.datatable
                                                :title="__('Add Courses')"
                                                route="teacher.courses"
                                                :datatable="$dataTable"
                                                :create="true"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </section>
            </div>
        </div>
    </div>
@endsection

@section('script')
    @stack('datatableScripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize select2 for better dropdowns
            $('#standardized-test, #status').select2({
                placeholder: $(this).data('placeholder'),
                allowClear: true,
                width: '100%'
            });

            const dataTable = window.LaravelDataTables['{{ $dataTable->getTableId() }}'];
        });
    </script>
@endsection