@extends('layouts.admin_dynamic')

@section('content')
<div class="content-wrapper">
    <section class="content-header m-3">
        <h1>{{ __('Transaction Status Query') }}</h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-8">
                <div class="box box-success">
                    <div class="box-header with-border">
                        <h3 class="box-title">Query Transaction Status</h3>
                    </div>
                    <div class="box-body">
                       <form action="{{ route('mpesa.transaction.status') }}" method="POST" id="transactionStatusForm">
                                    @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Transaction ID <span class="text-red">*</span></label>
                                    <input type="text" name="transaction_id" class="form-control" required placeholder="Enter M-Pesa Transaction ID">
                                </div>
                                <div class="col-md-6">
                                    <label>Amount <span class="text-red">*</span></label>
                                    <input type="number" step="0.01" name="amount" class="form-control" required placeholder="e.g. 1000.00">
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <label>Phone Number (MSISDN) <span class="text-red">*</span></label>
                                    <input type="text" name="phone_number" class="form-control" required placeholder="e.g. 2547XXXXXXXX">
                                </div>
                                <div class="col-md-6">
                                    <label>Remarks (Optional)</label>
                                    <input type="text" name="remarks" class="form-control" placeholder="Transaction status query">
                                </div>
                            </div>

                            <div class="mt-3">
                                <button type="submit" class="btn btn-success" id="queryBtn">
                                    <i class="fa fa-search"></i> Query Transaction
                                </button>
                                <button type="reset" class="btn btn-default">
                                    <i class="fa fa-refresh"></i> Reset
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Quick Tips -->
            <div class="col-md-4">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">Quick Tips</h3>
                    </div>
                    <div class="box-body">
                        <ul class="list-unstyled">
                            <li><i class="fa fa-info-circle text-blue"></i> Enter the exact M-Pesa Transaction ID</li>
                            <li><i class="fa fa-info-circle text-blue"></i> Amount must match the original payment</li>
                            <li><i class="fa fa-info-circle text-blue"></i> Phone format: 2547XXXXXXXX</li>
                            <li><i class="fa fa-info-circle text-blue"></i> Callback may take a few seconds</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Results Section -->
        <div id="queryTransactionStatusdiv"></div>
    </section>
</div>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <i class="fa fa-spinner fa-spin fa-3x text-primary"></i>
                <h4>Querying Transaction...</h4>
                <p>Please wait while we fetch transaction details.</p>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
$('#transactionStatusForm').on('submit', function (e) {
    e.preventDefault();
    const $btn = $('#queryBtn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Querying...');
    $('#queryTransactionStatusdiv').html('');
    $('#loadingModal').modal({ backdrop: 'static', keyboard: false });

    $.ajax({
        url: $(this).attr('action'),
        method: 'POST',
        data: $(this).serialize(),
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        success: function (res) {
            $('#loadingModal').modal('hide');
            if (res.replaceWith && res.replaceWith['#queryTransactionStatusdiv']) {
                $('#queryTransactionStatusdiv').replaceWith(res.replaceWith['#queryTransactionStatusdiv']);
            }
        },
        error: function (xhr) {
            $('#loadingModal').modal('hide');
            const msg = xhr.responseJSON?.message || 'An error occurred. Please try again.';
            $('#queryTransactionStatusdiv').html(
                '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> ' + msg + '</div>'
            );
        },
        complete: function () {
            $btn.prop('disabled', false).html('<i class="fa fa-search"></i> Query Transaction');
        }
    });
});
</script>
@endsection