@extends('components.dashboard.layouts.master')

@section('styles')
    @stack('datatableStyles')
    <style>
        .filter-section {
            background: #f8f8f8;
            padding: 15px 20px;
            border-radius: 5px;
            margin-bottom: 20px;
            border: 1px solid #eee;
        }

        .filter-section .form-label {
            font-weight: 500;
            color: #5e5873;
        }

        .filter-section .form-control {
            background-color: #fff;
            border: 1px solid #d8d6de;
            border-radius: 0.357rem;
        }

        .filter-actions {
            display: flex;
            align-items: flex-end;
            gap: 10px;
        }

        .filter-section .btn {
            height: 38px;
        }
    </style>
@endsection

@section('title')
    {{ __('payments 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="{{ __('payments List') }}" />

                    <!-- ✅ Filter Form -->
                    <form id="filter-form" method="GET" action="{{ route('teacher.payments.index') }}">
                        <div class="filter-section">
                            <div class="row">
                                <!-- From Date -->
                                <div class="col-md-3 mb-2">
                                    <label for="start-date" class="form-label">{{ __('From Date') }}</label>
                                    <input type="date" class="form-control" id="start-date" name="start_date" value="{{ request('start_date') }}">
                                </div>

                                <!-- To Date -->
                                <div class="col-md-3 mb-2">
                                    <label for="end-date" class="form-label">{{ __('To Date') }}</label>
                                    <input type="date" class="form-control" id="end-date" name="end_date" value="{{ request('end_date') }}">
                                </div>


                                <!-- Action Buttons -->
                                <div class="col-md-3 mb-2 filter-actions">
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="fa fa-filter me-1"></i> {{ __('Filter') }}
                                    </button>
                                    <a href="{{ route('teacher.payments.index') }}" class="btn btn-outline-secondary w-100">
                                        <i class="fa fa-undo me-1"></i> {{ __('Reset') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- ✅ DataTable Section -->
                    <section id="column-selectors">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">{{ __('payments List') }}</h4>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-body card-dashboard">
                                            <x-pages.datatable
                                                :title="__('Add payments ')"
                                                route="teacher.payments"
                                                :datatable="$dataTable"
                                                :create="false"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </section>
            </div>
        </div>
    </div>
@endsection

@section('script')
    @stack('datatableScripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Init Select2 (if you enable the course/student/status fields)
            $('.select2').select2({
                placeholder: function () {
                    return $(this).data('placeholder');
                },
                allowClear: true,
                width: '100%'
            });
        });
    </script>
@endsection