@extends('admin.layouts.app')

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

@section('content')
<x-admin.page-header title="{{ __('dashboard.members') }}" :breadcrumbs="[__('dashboard.members') => route('admin.members.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.members.create') }}" label="{{ __('dashboard.add_member') }}"/>
                <div class="d-flex flex-wrap gap-2 mt-2">
                    <a href="{{ route('admin.members.export') }}" class="btn btn-soft-primary btn-sm">
                        <i class="ri-download-2-line me-1"></i> {{ __('Export Members CSV') }}
                    </a>
                    <a href="{{ route('admin.members.import.template') }}" class="btn btn-soft-info btn-sm">
                        <i class="ri-file-download-line me-1"></i> {{ __('Import Template') }}
                    </a>
                    <a href="{{ route('admin.members.import.page') }}" class="btn btn-soft-success btn-sm">
                        <i class="ri-upload-2-line me-1"></i> {{ __('Import Members') }}
                    </a>
                </div>

                <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="status-filter" :enum="\App\Enums\MemberStatusEnum::class" />
                        </div>



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

                        <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' => 'members-table']) !!}
                </div>
            </div>
        </div>
    </div>
</div>



@endsection

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

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const table = $('#members-table').DataTable();
            const memberNotificationModalEl = document.getElementById('member-notification-modal');
            const memberNotificationModal = memberNotificationModalEl ? new bootstrap.Modal(memberNotificationModalEl) : null;

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

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

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

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

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

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

                filters: [
                    '#member-type-filter',
                    '#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.members.bulkDelete") }}',
                    status: '{{ route("admin.members.bulkStatus") }}'
                }
            });

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

            if (dtSearch && target) {
                target.appendChild(dtSearch);
                dtSearch.classList.remove('text-end');
            }

            let memberNotifyUrl = '';
            $(document).on('click', '.member-notify-btn', function () {
                memberNotifyUrl = $(this).data('url');
                $('#mn-member-id').val($(this).data('member-id'));
                $('#mn-member-name').val($(this).data('member-name'));
                $('#mn-title').val('');
                $('#mn-message').val('');
                memberNotificationModal?.show();
            });

            $('#member-notification-form').on('submit', function (e) {
                e.preventDefault();

                const $btn = $('#mn-submit-btn');
                $btn.prop('disabled', true);

                $.ajax({
                    url: memberNotifyUrl,
                    method: 'POST',
                    data: $(this).serialize(),
                    success: function (res) {
                        if (res.success) {
                            showToast('success', res.message || '{{ __("Notification queued successfully.") }}');
                            memberNotificationModal?.hide();
                        } else {
                            showToast('error', res.message || '{{ __("Error occurred") }}');
                        }
                    },
                    error: function (xhr) {
                        showToast('error', xhr.responseJSON?.message || '{{ __("Error occurred") }}');
                    },
                    complete: function () {
                        $btn.prop('disabled', false);
                    }
                });
            });
        });
    </script>
@endpush
