@extends('admin.layouts.dashboard')

@section('title', 'Member Transactions')

@section('content')
    <x-page-header
        title="Member Transaction"
        description="Full subscription and payment history for one member."
        :breadcrumbs="['Dashboard' => url('/dashboard'), 'Reports' => null, 'Member transactions' => null]"
    />

    <x-card title="Filter" class="u-mb-6">
        <form id="member-report-form" method="POST" action="{{ route('members.report.subcription.history') }}" class="filter-bar">
            @csrf
            <x-field label="Select member" name="mem_id">
                <select id="mem_id" name="mem_id" class="select" style="min-width: 280px;" required>
                    <option value="">Select a member…</option>
                    @foreach ($all_member as $member)
                        <option value="{{ $member->id }}" @selected($mem_id == $member->id)>
                            {{ ucwords($member->fullname) }}
                        </option>
                    @endforeach
                </select>
            </x-field>

            <div class="filter-bar__actions">
                <button type="submit" class="btn btn--primary" id="member-report-submit">
                    <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                    Show history
                </button>
            </div>
        </form>
    </x-card>

    <div id="display">
        <div class="card" id="report-panel" hidden>
            <div id="report-content"></div>

            <div class="card__footer no-print">
                <button type="button" class="btn btn--secondary btn--sm" onclick="printPageArea('display')">
                    <i class="fa-solid fa-print" aria-hidden="true"></i>
                    Print
                </button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    (function () {
        const form = document.getElementById('member-report-form');
        const panel = document.getElementById('report-panel');
        const content = document.getElementById('report-content');
        const submit = document.getElementById('member-report-submit');

        form.addEventListener('submit', async function (event) {
            event.preventDefault();

            submit.classList.add('is-loading');
            submit.disabled = true;
            panel.hidden = true;

            try {
                const response = await fetch(form.action, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: new FormData(form),
                });

                if (!response.ok) {
                    throw new Error('Request failed with status ' + response.status);
                }

                content.innerHTML = await response.text();
                panel.hidden = false;

                // The fragment ships its own accordion triggers.
                content.querySelectorAll('[data-accordion-trigger]').forEach((trigger) => {
                    trigger.addEventListener('click', () => {
                        const target = document.getElementById(trigger.getAttribute('aria-controls'));
                        if (!target) return;
                        const open = target.hidden;
                        target.hidden = !open;
                        trigger.setAttribute('aria-expanded', String(open));
                    });
                });
            } catch (error) {
                window.toast('Could not load the member history. Please try again.', {
                    type: 'danger',
                    title: 'Report failed',
                });
            } finally {
                submit.classList.remove('is-loading');
                submit.disabled = false;
            }
        });
    })();
</script>
@endpush