@extends('layouts.app')

@section('content')
    <div class="container py-5">
        @if (session('success'))
            <div class="alert alert-success" role="alert">
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-deanger" role="alert">
                {{ session('error') }}
            </div>
        @endif
        <div class="jumbotron p-4">
            <h2 class="text-center mb-4">Senarai Transaksi - Terminal {{ $tid }}</h2>
            <h4 class="text-center mb-3">Pusat: {{ $pusat->code }} - {{ $pusat->description }}</h4>
            <hr class="my-4">
            <div class="row">
                <div class="col">
                    <h4 class="text-center mb-3">Transaksi (SALE)</h4>
                    <h5 class="text-center mb-3">{{ $totalTrx ?? '-' }}</h5>
                </div>
                <div class="col">
                    <h4 class="text-center mb-3">Jumlah (SALE)</h4>
                    <h5 class="text-center mb-3">RM{{ number_format($totalAmount, 2) ?? '-' }}</h5>
                </div>
                <div class="col">
                    <h4 class="text-center mb-3">Closing Terakhir</h4>
                    <h5 class="text-center mb-3">{{ $closing->closing_time ?? '-' }}</h5>
                </div>
            </div>
            <hr class="my-2">
            <button id="buttonClosing" class="btn btn-warning col-12 btn-lg mt-1"><i class="bi bi-calendar-x px-2"> </i>
                Close Semua Transaksi</button>
        </div>

        @if ($transactions->isEmpty())
            <div class="alert alert-info text-center" role="alert">
                Tiada transaksi untuk ditutup.
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead class="thead-dark">
                        <tr>
                            <th class="text-center">Masa Transaksi</th>
                            <th class="text-center">No. Rujukan</th>
                            <th class="text-center">Nilai (RM)</th>
                            <th class="text-center">Kod Bank</th>
                            <th class="text-center">Diproses oleh</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($transactions as $transaction)
                            <tr>
                                <td class="text-center">{{ $transaction->transaction_time }}</td>
                                <td class="text-center">{{ $transaction->trx_ref }}</td>
                                <td class="text-center">{{ number_format($transaction->amount, 2) }}</td>
                                <td class="text-center">{{ $transaction->edc_bankcode }}</td>
                                <td class="text-center">{{ $transaction->submitted_by }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Closing Modal -->
            <div id="closingModal" 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>Sahkan maklumat untuk proses 'Closing'</p>
                            <form method="post" action="{{ route('trx.closingpost') }}" id="edcpaymentform">
                                @csrf

                                <div class="form-group">
                                    <label for="closed_by">ID Staff:</label>
                                    <input type="text" class="form-control" id="closed_by" name="closed_by"
                                        value="{{ $user->id }}" readonly>
                                    <input type="hidden" class="form-control" id="kod_pusat" name="kod_pusat"
                                        value="{{ $user->kod_pusat }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="edc_code">EDC:</label>
                                    <input type="text" class="form-control" id="edc_code" name="edc_code"
                                        value="{{ $tid }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="trx_count">Bilangan Transaksi:</label>
                                    <input type="text" class="form-control" id="trx_count" name="trx_count"
                                        value="{{ $totalTrx }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="trx_amount">Jumlah Transaksi (RM):</label>
                                    <input type="text" class="form-control" id="trx_amount" name="trx_amount"
                                        value="{{ $totalAmount }}" readonly>
                                </div>
                                {{-- <div class="form-group">
                                    <label for="batch_no">No. Rujukan Batch:</label>
                                    <input type="text" class="form-control" id="batch_no" name="batch_no"
                                        placeholder="Sila masukkan No. Rujukan" required>
                                </div> --}}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
                            <button id="modalConfirm" type="submit" class="btn btn-primary">Sahkan</button>
                        </div>
                        </form>
                    </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 mb-4" 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>


            <!-- Pagination links -->
            <div class="d-flex justify-content-center my-3">
                <a class="btn btn-secondary mr-2" href="{{ $transactions->previousPageUrl() }}"
                    @if (!$transactions->previousPageUrl()) style="pointer-events: none; opacity: 0.5;" @endif>
                    Sebelumnya
                </a>
                <div class="d-flex justify-content-center">
                    @if ($transactions->previousPageUrl())
                        <a class="btn btn-secondary mr-2" href="{{ $transactions->previousPageUrl() }}">
                            {{ $transactions->currentPage() - 1 }}
                        </a>
                    @endif
                    <span class="btn btn-primary mr-2">{{ $transactions->currentPage() }}</span>
                    @if ($transactions->nextPageUrl())
                        <a class="btn btn-secondary mr-2" href="{{ $transactions->nextPageUrl() }}">
                            {{ $transactions->currentPage() + 1 }}
                        </a>
                    @endif
                </div>
                <a class="btn btn-secondary" href="{{ $transactions->nextPageUrl() }}"
                    @if (!$transactions->nextPageUrl()) style="pointer-events: none; opacity: 0.5;" @endif>
                    Seterusnya
                </a>
            </div>
        @endif
        <a href="{{ route('home')}}" class="mb-2 col-4 btn btn-danger btn-block">Kembali</a>
    </div>

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

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

@endsection