@extends('layouts.app')

@section('content')
    <div class="container py-3 col-6">
        <div class="card mt-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Butiran Pembayaran</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <strong>No. Akaun Pinjaman:</strong> {{ $data['account_no'] }}
                        </li>
                        <li class="list-group-item">
                            <strong>Nama Pembayar:</strong> {{ $data['payer_name'] }}
                        </li>
                        <li class="list-group-item">
                            <strong>Nombor Tel. Pembayar:</strong> {{ $data['payer_phoneno'] }}
                        </li>
                        <li class="list-group-item">
                            <strong>Tujuan Pembayaran:</strong> {{ $data['trx_description'] }}
                        </li>
                        <li class="list-group-item">
                            <strong>Nilai Bayaran:</strong> RM {{ number_format($data['payment_amount'], 2) }}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-footer">
                <form action="{{ route('postbayar') }}" method="POST" id="edcpaymentform">
                    @csrf
                    <input type="hidden" name="account_no" value="{{ $data['account_no'] }}" />
                    <input type="hidden" name="payer_idno" value="{{ $data['payer_idno'] }}" />
                    <input type="hidden" name="payer_name" value="{{ $data['payer_name'] }}" />
                    <input type="hidden" name="payer_email" value="{{ $data['payer_email'] }}" />
                    <input type="hidden" name="payer_phoneno" value="{{ $data['payer_phoneno'] }}" />
                    <input type="hidden" name="trx_description" value="{{ $data['trx_description'] }}" />
                    <input type="hidden" name="payment_amount" value="{{ $data['payment_amount'] }}" />
                    <div class="form-group">
                        <label for="payment_mode" style="font-size: 14px;"><b>Kaedah Pembayaran:</b></label>
                        <select class="form-control" id="payment_mode" name="payment_mode">
                            <option selected value='' disabled>Sila Pilih Kaedah Pembayaran</option>
                            @foreach ($payment_method as $method)
                                <option value="{{ $method->method }}">
                                    @if ($method->method === 'EDC')
                                        {{ 'EDC RHB' }}
                                    @elseif ($method->method === 'QR')
                                        {{ 'QR RHB' }}
                                    @elseif ($method->method === 'MBB')
                                        {{ 'EDC MBB' }}
                                    @else
                                        {{ $method->method }}
                                    @endif
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div id="edc_MBB_container" class="form-group" style="display: none;">
                        <div class="form-group">
                            <label for="edc_id_MBB" style="font-size: 14px;"><b>Sila Pilih EDC:</b></label>
                            <select class="form-control" id="edc_id_MBB" name="edc_id_MBB">
                                <option selected value='' disabled>Sila Pilih No. EDC</option>
                                @foreach ($edclist as $edc)
                                    @if ($edc->edc_bankcode === 'MBB')
                                        <option value="{{ $edc->edc_id }}">{{ $edc->edc_id }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edc_card_MBB" style="font-size: 14px;"><b>4 Digit Terakhir Kad<span
                                        style="color: red;">*</span>:</b></label>
                            <input type="text" class="form-control" id="edc_card_MBB" name="edc_card_MBB"
                                placeholder="Masukkan 4 Digit Terakhir Kad" required>
                        </div>
                        <div class="form-group">
                            <label for="card_type_MBB" style="font-size: 14px;"><b>Jenis Kad:</b></label>
                            <select class="form-control" id="card_type_MBB" name="card_type_MBB">
                                <option selected value='' disabled>Sila Pilih Jenis Kad</option>
                                @foreach ($card_type as $card)
                                    <option value="{{ $card->code }}">{{ $card->description }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edc_code_MBB" style="font-size: 14px;"><b>Kod Verifikasi<span
                                        style="color: red;">*</span>:</b></label>
                            <input type="text" class="form-control" id="edc_code_MBB" name="edc_code_MBB"
                                placeholder="Masukkan Kod Verifikasi" required>
                        </div>
                    </div>
                    <div id="edc_RHB_container" class="form-group" style="display: none;">
                        <div class="form-group">
                            <label for="edc_id_RHB" style="font-size: 14px;"><b>Sila Pilih EDC:</b></label>
                            <select class="form-control" id="edc_id_RHB" name="edc_id_RHB">
                                <option selected value='' disabled>Sila Pilih No. EDC</option>
                                @foreach ($edclist as $edc)
                                    @if ($edc->edc_bankcode === 'RHB')
                                        <option value="{{ $edc->edc_id }}">{{ $edc->edc_id }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edc_card_RHB" style="font-size: 14px;"><b>4 Digit Terakhir Kad<span
                                        style="color: red;">*</span>:</b></label>
                            <input type="text" class="form-control" id="edc_card_RHB" name="edc_card_RHB"
                                placeholder="Masukkan 4 Digit Terakhir Kad" required>
                        </div>
                        <div class="form-group">
                            <label for="card_type_RHB" style="font-size: 14px;"><b>Jenis Kad:</b></label>
                            <select class="form-control" id="card_type_RHB" name="card_type_RHB">
                                <option selected value='' disabled>Sila Pilih Jenis Kad</option>
                                @foreach ($card_type as $card)
                                    <option value="{{ $card->code }}">{{ $card->description }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edc_code_RHB" style="font-size: 14px;"><b>Kod Verifikasi<span
                                        style="color: red;">*</span>:</b></label>
                            <input type="text" class="form-control" id="edc_code_RHB" name="edc_code_RHB"
                                placeholder="Masukkan Kod Verifikasi" required>
                        </div>

                    </div>
                    <div class="text-center">
                        <a href="{{ url()->previous() }}" class="btn btn-outline-danger col-3 py-2">Kembali</a>
                        <a id="submitButton" class="btn btn-success col-3 ml-auto py-2">Bayar</a>
                    </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">
                                    <div class="form-group row">
                                        <label for="payment_amount" class="col-sm-6 col-form-label font-weight-bold">Nilai
                                            Bayaran (RM):</label>
                                        <div class="col-sm-6"> <!-- Adjusted column size to 6 -->
                                            <span type="text" class="form-control-plaintext" id="payment_amount">
                                                {{ number_format($data['payment_amount'], 2) }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="edc_id" class="col-sm-6 col-form-label font-weight-bold">No
                                            EDC:</label>
                                        <div class="col-sm-6"> <!-- Adjusted column size to 6 -->
                                            <span class="form-control-plaintext" id="display_edc_id">
                                                <!-- Display selected edc_id here -->
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="edc_code" class="col-sm-6 col-form-label font-weight-bold">Kod
                                            Verifikasi</label>
                                        <div class="col-sm-6"> <!-- Adjusted column size to 6 -->
                                            <span class="form-control-plaintext" id="display_edc_code">
                                                <!-- Display inserted edc_code here -->
                                            </span>
                                        </div>
                                    </div>

                                    <hr>
                                    <p>Sila sahkan butiran berikut sebelum meneruskan pembayaran</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                    <button id="modalConfirm" type="submit" class="btn btn-primary">Bayar</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Loading Modal -->
                    <div id="overlay"
                        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999;">
                    </div>

                    <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>
                                    Transaksi sedang berlangsung...Sila tekan butang 'SALE' pada terminal yang dipilih
                                </div>

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

        </div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('payment_mode').addEventListener('change', function() {
                var edcMBBContainer = document.getElementById('edc_MBB_container');
                var edcRHBContainer = document.getElementById('edc_RHB_container');

                if (this.value === 'MBB') {
                    edcMBBContainer.style.display = 'block';
                    edcRHBContainer.style.display = 'none';
                } else if (this.value === 'EDC') {
                    edcMBBContainer.style.display = 'none';
                    edcRHBContainer.style.display = 'block';
                } else {
                    edcMBBContainer.style.display = 'none';
                    edcRHBContainer.style.display = 'none';
                }
            });

            // Event listener for submit button
            document.getElementById('submitButton').addEventListener('click', function() {
                var selectedEdcId;
                var enteredEdcCode;

                // Get selectedEdcId and enteredEdcCode based on the payment mode
                if (document.getElementById('payment_mode').value === 'MBB') {
                    selectedEdcId = document.getElementById('edc_id_MBB').value;
                    enteredEdcCode = document.getElementById('edc_code_MBB').value;

                    document.getElementById('edc_id_RHB').disabled = true;
                    document.getElementById('edc_code_RHB').disabled = true;
                    document.getElementById('edc_card_RHB').disabled = true;
                    document.getElementById('card_type_RHB').disabled = true;
                } else if (document.getElementById('payment_mode').value === 'EDC') {
                    selectedEdcId = document.getElementById('edc_id_RHB').value;
                    enteredEdcCode = document.getElementById('edc_code_RHB').value;

                    document.getElementById('edc_id_MBB').disabled = true;
                    document.getElementById('edc_code_MBB').disabled = true;
                    document.getElementById('edc_card_MBB').disabled = true;
                    document.getElementById('card_type_MBB').disabled = true;
                } else {
                    selectedEdcId = document.getElementById('edc_id').value;
                    enteredEdcCode = document.getElementById('edc_code').value;
                }

                // Display the values in the modal
                document.getElementById('display_edc_id').textContent = selectedEdcId;
                document.getElementById('display_edc_code').textContent = enteredEdcCode;

                // Show the confirmation modal
                $('#confirmationModal').modal('show');
            });

            // Event listener for modal confirm button
            document.getElementById('modalConfirm').addEventListener('click', function() {
                // Show overlay to prevent user interaction
                document.getElementById('overlay').style.display = 'block';

                // Submit the form
                $('#confirmationModal').modal('hide');
                $('#loadingModal').modal('show');

                // Submit the form after a short delay (to ensure modal transitions are complete)
                setTimeout(function() {
                    $('#edcpaymentform').submit();
                }, 500); // Adjust delay time as needed
            });

            // Optional: Re-enable user interaction after form submission completes
            $('#edcpaymentform').submit(function() {
                // Hide overlay after form submission is complete
                document.getElementById('overlay').style.display = 'none';
            });
        });
    </script>
@endsection