@php
    $statusColors = [
        'pending'   => 'secondary',
        'won'       => 'success',
        'lost'      => 'danger',
        'paid'      => 'primary',
        'cancelled' => 'warning',
    ];
    $ticketData = [
        'ticket_number' => $entry->ticket_number,
        'status'        => ucfirst($entry->status),
        'color'         => $statusColors[$entry->status] ?? 'secondary',
        'played_at'     => $entry->played_at,
        'lottery'       => optional($entry->lottery)->name ?? '—',
        'draw'          => optional($entry->draw)->name ?? '—',
        'amount'        => number_format($entry->amount, 2),
        'seller'        => optional($entry->user)->name ?? '—',
        'manager'       => optional(optional(optional($entry->pointOfSale)->manager)->user)->name ?? '—',
        'pos_imei'      => optional($entry->pointOfSale)->imei ?? '—',
        'cancelled_by'  => $entry->cancelled_by,
        'numbers'       => $entry->numbers->map(fn($num) => [
            'game'   => optional($num->game)->name ?? '—',
            'number' => $num->number,
            'opt1'   => $num->opt1 ?? '—',
            'opt2'   => $num->opt2 ?? '—',
            'opt3'   => $num->opt3 ?? '—',
            'amount' => number_format($num->amount, 2),
        ])->values()->toArray(),
        'numbers_total' => number_format($entry->numbers->sum('amount'), 2),
    ];
@endphp

<button type="button"
        class="btn btn-sm btn-info ticket-detail-btn"
        data-ticket="{{ json_encode($ticketData, JSON_HEX_QUOT | JSON_HEX_TAG) }}">
    <i class="la la-list"></i> {{ __('crud.details') }}
</button>

@push('after_scripts')
@if(request()->ajax()) @endpush @endif
<div class="modal fade" id="ticket-detail-modal" tabindex="-1" role="dialog" aria-labelledby="ticket-detail-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="ticket-detail-modal-label">
                    Ticket <strong id="tdm-ticket-number"></strong>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-sm-6">
                        <p class="mb-1">
                            <strong>{{ __('crud.status') }}:</strong>
                            <span id="tdm-status" class="badge"></span>
                        </p>
                        <p class="mb-1"><strong>{{ __('crud.modal_played_at') }}:</strong> <span id="tdm-played-at"></span></p>
                        <p class="mb-1"><strong>{{ __('crud.lottery') }}:</strong> <span id="tdm-lottery"></span></p>
                        <p class="mb-1"><strong>{{ __('crud.draw') }}:</strong> <span id="tdm-draw"></span></p>
                        <p class="mb-1"><strong>{{ __('crud.amount') }}:</strong> HTG <span id="tdm-amount"></span></p>
                    </div>
                    <div class="col-sm-6">
                        <p class="mb-1"><strong>{{ __('crud.seller') }}:</strong> <span id="tdm-seller"></span></p>
                        <p class="mb-1"><strong>{{ __('crud.manager') }}:</strong> <span id="tdm-manager"></span></p>
                        <p class="mb-1"><strong>{{ __('crud.modal_pos_imei') }}:</strong> <span id="tdm-pos-imei"></span></p>
                        <p class="mb-1 text-danger" id="tdm-cancelled-by-row">
                            <strong>{{ __('crud.cancelled_by') }}:</strong> <span id="tdm-cancelled-by"></span>
                        </p>
                    </div>
                </div>

                <h6 class="mb-2">{{ __('crud.modal_numbers_played') }}</h6>
                <table class="table table-sm table-bordered table-striped">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>{{ __('crud.game') }}</th>
                            <th>{{ __('crud.number') }}</th>
                            <th>Opt 1</th>
                            <th>Opt 2</th>
                            <th>Opt 3</th>
                            <th class="text-end">{{ __('crud.amount') }}</th>
                        </tr>
                    </thead>
                    <tbody id="tdm-numbers-body"></tbody>
                    <tfoot>
                        <tr class="table-light">
                            <td colspan="6" class="text-end"><strong>Total</strong></td>
                            <td class="text-end"><strong id="tdm-numbers-total"></strong></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('crud.close') }}</button>
            </div>

        </div>
    </div>
</div>

<script>
if (typeof window.ticketDetailInitialized === 'undefined') {
    window.ticketDetailInitialized = true;

(function () {
    // Move modal to body so Bootstrap can display it correctly regardless of DOM nesting
    var modal = document.getElementById('ticket-detail-modal');
    if (modal && modal.parentNode !== document.body) {
        document.body.appendChild(modal);
    }

    document.addEventListener('click', function (e) {
        var btn = e.target.closest('.ticket-detail-btn');
        if (!btn) return;

        // Remove duplicate modals injected by per-row rendering, keep only the one in body
        var allModals = document.querySelectorAll('#ticket-detail-modal');
        var modalEl = null;
        allModals.forEach(function (m) {
            if (m.parentNode === document.body) {
                modalEl = m;
            } else {
                bootstrap.Modal.getInstance(m) && bootstrap.Modal.getInstance(m).dispose();
                m.remove();
            }
        });
        if (!modalEl) return;

        var t = JSON.parse(btn.dataset.ticket);

        document.getElementById('tdm-ticket-number').textContent = '#' + t.ticket_number;

        var statusEl = document.getElementById('tdm-status');
        statusEl.textContent = t.status;
        statusEl.className = 'badge bg-' + t.color;

        document.getElementById('tdm-played-at').textContent   = t.played_at;
        document.getElementById('tdm-lottery').textContent     = t.lottery;
        document.getElementById('tdm-draw').textContent        = t.draw;
        document.getElementById('tdm-amount').textContent      = t.amount;
        document.getElementById('tdm-seller').textContent      = t.seller;
        document.getElementById('tdm-manager').textContent     = t.manager;
        document.getElementById('tdm-pos-imei').textContent    = t.pos_imei;

        var cancelledRow = document.getElementById('tdm-cancelled-by-row');
        if (t.cancelled_by) {
            document.getElementById('tdm-cancelled-by').textContent = t.cancelled_by;
            cancelledRow.style.display = '';
        } else {
            cancelledRow.style.display = 'none';
        }

        var tbody = document.getElementById('tdm-numbers-body');
        if (t.numbers.length === 0) {
            tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">{{ __("crud.modal_no_numbers") }}</td></tr>';
        } else {
            tbody.innerHTML = t.numbers.map(function (n, i) {
                return '<tr>' +
                    '<td>' + (i + 1) + '</td>' +
                    '<td>' + n.game + '</td>' +
                    '<td>' + n.number + '</td>' +
                    '<td>' + n.opt1 + '</td>' +
                    '<td>' + n.opt2 + '</td>' +
                    '<td>' + n.opt3 + '</td>' +
                    '<td class="text-end">' + n.amount + '</td>' +
                    '</tr>';
            }).join('');
        }

        document.getElementById('tdm-numbers-total').textContent = t.numbers_total;

        var bsModal = bootstrap.Modal.getOrCreateInstance(modalEl);
        bsModal.show();
    });
})();
}
</script>
@if(!request()->ajax()) @endpush @endif