{{--
    Split History Modal Component
    Used for displaying user split history
    
    @param string $modalId - Unique modal ID (default: 'split-history-modal')
    @param string $title - Modal title (default: 'Split History')
--}}

@php
    $modalId = $modalId ?? 'split-history-modal';
    $title = $title ?? 'Split History';
@endphp

<div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-labelledby="{{ $modalId }}Label" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="{{ $modalId }}Label">{{ $title }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="{{ $modalId }}-content">
                    <!-- Content will be loaded dynamically -->
                    <div class="d-flex justify-content-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="mdi mdi-close me-1"></i>Close
                </button>
            </div>
        </div>
    </div>
</div>

<style>
#{{ $modalId }} .history-table {
    font-size: 0.9rem;
}

#{{ $modalId }} .history-table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

#{{ $modalId }} .history-table .badge {
    font-size: 0.75rem;
}
</style>