@extends('admin.layouts.app')

@section('title', __('dashboard.subscription_types'))

@section('content')
<x-admin.page-header title="{{ __('dashboard.subscription_types') }}" :breadcrumbs="[__('dashboard.subscription_types') => route('admin.subscription-types.index')]" />

<div class="row">
    <div class="col-lg-12 p-0">
        <div class="card">
            <div class="card-header pb-0 card-no-border">
                <x-add route="{{ route('admin.subscription-types.create') }}" label="{{ __('dashboard.add_subscription_type') }}"/>

                <div class="filter-section">
                    <div class="row g-3 align-items-end">

                        <div class="col-12">
                            <x-report name="report"/>
                        </div>

                        <div class="col-6">
                            <x-status-filter name="is_active" :enum="\App\Enums\StatusEnum::class" />
                        </div>

                        <x-select col="3"
                                  name="orderBy-filter"
                                  label="{{ __('dashboard.orderBy') }}"
                                  :options="\App\Enums\OrderByEnum::labels()" />

                        <x-date-range name="range-date" label="{{ __('dashboard.date_range') }}" />

                        <div class="col-12 d-flex justify-content-end gap-2 mt-2">
                            <div id="export-buttons-wrapper"></div>
                        </div>
                    </div>
                </div>

                <div class="mt-3">
                    <x-bulk />
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive custom-scrollbar server-side-table">
                    {!! $dataTable->table(['class' => 'table table-bordered', 'id' => 'subscription-types-table']) !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    {!! $dataTable->scripts() !!}

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const table = $('#subscription-types-table').DataTable();

            $('.report').on('click', function() {
                $('.report').removeClass('active');
                $(this).addClass('active');
                table.draw();
            });

            $('.status-filter').on('click', function() {
                table.draw();
            });

            $('#orderBy-filter').on('change', function() {
                table.draw();
            });

            $('#range-date').on('change', function() {
                table.draw();
            });

            initDataTableFilters({
                tableId: 'subscription-types-table',
                csrf: '{{ csrf_token() }}',

                filters: [
                    '#orderBy-filter',
                    '#range-date'
                ],

                buttons: {
                    apply: '#apply-filters',
                    clear: '#clear-filters'
                },

                selectAll: '#check-all',

                bulk: {
                    actions: '#bulk-actions',
                    delete: '#bulk-delete',
                    activate: '#bulk-activate',
                    deactivate: '#bulk-deactivate'
                },

                routes: {
                    delete: '{{ route("admin.subscription-types.bulkDelete") }}',
                    status: '{{ route("admin.subscription-types.bulkStatus") }}'
                }
            });

            const dtSearch = document.querySelector('#subscription-types-table_filter');
            const target = document.getElementById('datatable-search-wrapper');

            if (dtSearch && target) {
                target.appendChild(dtSearch);
                dtSearch.classList.remove('text-end');
            }
        });
    </script>
@endpush