@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card mt-2">
                    <div class="card-header text-white" style="background-color: #343a40">
                        <h3 class="mb-0">Pembatalan Transaksi</h3>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <th style="width: 40%;">No. Rujukan Transaksi:</th>
                                        <td>{{ $trx->trx_ref }}</td>
                                    </tr>
                                    <tr>
                                        <th>Keterangan Transaksi:</th>
                                        <td>{{ $trx->trx_description }}</td>
                                    </tr>
                                    <tr>
                                        <th>Masa Transaksi:</th>
                                        <td>{{ $trx->trx_transaction_time }}</td>
                                    </tr>
                                    <tr>
                                        <th>Cara Pembayaran:</th>
                                        {{-- <td>{{ $trx->payment_method }} - {{ $trx->eps_transaction_id }}</td> --}}
                                        <td>{{ $trx->payment_method }} - {{ $trx->bankcode }}</td>
                                    </tr>
                                    <tr>
                                        {{-- <th>Kod Bank:</th>
                                        <td>{{ $trx->edc_bankcode }}</td> --}}
                                        <th>4 Digit Kad:</th>
                                        <td>{{ $trx->seller_order_no }}</td>
                                    </tr>
                                    <tr>
                                        {{-- <th>ID Terminal:</th>
                                        <td>{{ $trx->bankcode }}</td> --}}
                                        <th>Approval Code:</th>
                                        <td>{{ $trx->fpx_txn_id }}</td>
                                    </tr>
                                    <tr>
                                        <th>Nilai:</th>
                                        <td>RM {{ number_format($trx->trx_amount, 2) }}</td>
                                    </tr>
                                    <tr>
                                        <th>No. Akaun:</th>
                                        <td>{{ $trx->account_no }}</td>
                                    </tr>
                                    <tr>
                                        <th>Pembayar:</th>
                                        <td>{{ $trx->user_name }}</td>
                                    </tr>
                                    <tr>
                                        <th>No. Tel. Pembayar:</th>
                                        <td>{{ $trx->user_hp }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="card-footer bg-light text-md-center">
                        <form  id="voidtrxform" action="{{ route('transaction.voidtrx', $trx->trx_ref) }}" method="POST">
                            @csrf
                            <a href="{{ url()->previous() }}" class="btn btn-outline-danger col-3">Kembali</a>
                            <a id="submitButton" class="btn text-white btn-danger">Batal/Void Transaksi</a>
                        </form>
                    </div>

                    <!-- Confirmation Modal -->
                    <div id="confirmationModal" class="modal fade" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-titleext-center">PERHATIAN</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                <p>Adakah anda pasti untuk <b>membatalkan transaksi</b> berikut?</p>
                                    <div class="form-group row">
                                        <label for="account_no" class="col-sm-6 col-form-label font-weight-bold">No. Rujukan Transaksi:</label>
                                        <div class="col-sm-6">
                                            <span type="text" class="form-control-plaintext" id="account_no">
                                                {{ $trx->trx_ref }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="payment_amount" class="col-sm-6 col-form-label font-weight-bold">Nilai
                                            Transaksi (RM):</label>
                                        <div class="col-sm-6"> <!-- Adjusted column size to 6 -->
                                            <span type="text" class="form-control-plaintext" id="payment_amount">
                                                {{ number_format($trx->trx_amount, 2) }}
                                            </span>
                                        </div>
                                    </div>
                                    <hr>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                                    <button id="modalConfirm" type="submit" class="btn btn-danger">Batal/Void Transaksi</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Loading Modal -->
                    <div id="loadingModal" class="modal fade" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-titleext-center">PERHATIAN</h5>
                                    {{-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button> --}}
                                </div>
                                <div class="modal-body text-center">
                                    <div class="spinner-border" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div><br>
                                    Sila tunggu sebentar... Transaksi sedang berlangsung
                                </div>

                                <div class="modal-footer">
                                    {{-- <button type="button" class="btn btn-secondary disabled" data-dismiss="modal">Cancel</button> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Event listener for submit button
            document.getElementById('submitButton').addEventListener('click', function() {
                var selectedEdcId;
                // Show the confirmation modal
                $('#confirmationModal').modal('show');
            });

            // Event listener for modal confirm button
            document.getElementById('modalConfirm').addEventListener('click', function() {
                // Submit the form
                $('#confirmationModal').modal('hide');
                $('#loadingModal').modal('show');
                $('#voidtrxform').submit();
            });
        });
    </script>
@endsection