@extends('admin.layouts.app')

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

@section('content')
<x-admin.page-header
    title="{{ __('dashboard.member_qr_scans') }}"
    :breadcrumbs="[
        __('dashboard.qr_codes') => route('admin.qr-codes.index'),
        __('dashboard.member_qr_scans') => route('admin.qr-codes.member-scans.index'),
    ]"
/>

<div class="row">
    <div class="col-lg-12 p-0">
        <div class="card">
            <div class="card-header pb-0 card-no-border">
                <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">
                            <label class="form-label" for="member-scan-result-filter">{{ __('dashboard.scan_result') }}</label>
                            <select id="member-scan-result-filter" class="form-select form-select-sm">
                                <option value="">{{ __('dashboard.all') }}</option>
                                <option value="granted">{{ __('dashboard.granted') }}</option>
                                <option value="denied">{{ __('dashboard.denied') }}</option>
                            </select>
                        </div>

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

                        <div class="col-12 d-flex justify-content-end gap-2 mt-2 flex-wrap align-items-center">
                            <div id="datatable-search-wrapper"></div>
                            <x-filter-buttons />
                            <div id="export-buttons-wrapper"></div>
                        </div>
                    </div>
                </div>
            </div>

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

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

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

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

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

            initDataTableFilters({
                tableId: 'member-qr-scans-table',
                csrf: '{{ csrf_token() }}',
                filters: ['#member-scan-result-filter', '#member-scan-range-date'],
                buttons: {
                    apply: '#apply-filters',
                    clear: '#clear-filters',
                },
            });

            const dtSearch = document.querySelector('#member-qr-scans-table_filter');
            const target = document.getElementById('datatable-search-wrapper');
            if (dtSearch && target) {
                target.appendChild(dtSearch);
                dtSearch.classList.remove('text-end');
            }
        });
    </script>
@endpush
