@php
    $termsContent = \App\Models\CmsPage::where('page_name', \App\Models\CmsPage::TERMS_AND_CONDITIONS)->first();
@endphp

@if($termsContent && !auth()->user()->terms_accepted)
<style>
#termsModal .modal-dialog {
    max-width: 95% !important;
    width: 1450px !important;
    max-height: 90vh !important;
}
#termsModal .modal-content {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important;
}
#termsModal .modal-header {
    border-radius: 20px 20px 0 0 !important;
    border-bottom: 1px solid #eee !important;
}
#termsModal .modal-footer {
    border-radius: 0 0 20px 20px !important;
    border-top: 1px solid #eee !important;
}
</style>
<dialog id="termsModal" class="modal fade show" style="display: block; background: rgba(0,0,0,0.5); border: none; padding: 0;">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Terms & Conditions</h4>
            </div>
            <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
                <div class="terms-content">
                    {!! $termsContent->content !!}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="acceptTermsBtn">
                    <span class="btn-text">Accept and Continue</span>
                    <span class="loading" style="display: none;">
                        <span class="fa fa-spinner fa-spin" aria-hidden="true"></span> Processing...
                    </span>
                </button>
            </div>
        </div>
    </div>
</dialog>

<script>
$(document).ready(function() {
    // Handle accept button click
    $('#acceptTermsBtn').click(function() {
        var $btn = $(this);
        var $btnText = $btn.find('.btn-text');
        var $loading = $btn.find('.loading');
        
        // Show loading state
        $btnText.hide();
        $loading.show();
        $btn.prop('disabled', true);
        
        // Send AJAX request to accept terms
        $.ajax({
            url: '{{ route("terms.accept") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.status) {
                    // Hide modal
                    $('#termsModal').modal('hide');
                    $('#termsModal').remove();
                    
                    // Show success message
                    toastr.success(response.message || 'Terms accepted successfully!');
                } else {
                    toastr.error(response.message || 'Failed to accept terms. Please try again.');
                    resetButton();
                }
            },
            error: function(xhr) {
                var errorMessage = 'Failed to accept terms. Please try again.';
                
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                
                toastr.error(errorMessage);
                resetButton();
            }
        });
        
        function resetButton() {
            $btnText.show();
            $loading.hide();
            $btn.prop('disabled', false);
        }
    });
});
</script>
@endif