@extends('layouts.app')

@section('content')
    <div class="container py-3 col-10">
        <div class="card my-4">
            <div class="card">
                <div class="card-header text-white" style="background-color: #343a40">
                    <div class="row justify-content-between align-items-center">
                        <div class="col text-center">
                            <h4 class="mb-0">Senarai Transaksi Kaunter - {{ $pusat->description }}</h4>
                        </div>
                        <div class="col-auto">
                            <a id="buttonClosing" class="btn btn-warning text-white" style="font-size: 18px;">
                                <i class="bi bi-calendar-x px-2"> </i> Closing
                            </a>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead class="text-center">
                            <tr>
                                <th>Bil.</th>
                                <th>No. Rujukan Transaksi</th>
                                <th>Masa Transaksi</th>
                                <th>Nilai (RM)</th>
                                <th>Cara Bayar</th>
                                <th>ID Terminal</th>
                                <th>Diproses oleh</th>
                                <th>ID Pembayar</th>
                                <th class="col-1">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $count = 1 @endphp
                            @foreach ($transactions as $transaction)
                                <tr class="text-center">
                                    <td><b>{{ $count++ }}.</b></td>
                                    <td>{{ $transaction->trx_ref }}</td>
                                    <td>{{ $transaction->transaction_time }}</td>
                                    <td>{{ number_format($transaction->amount, 2) }}</td>
                                    <td>{{ $transaction->payment_method }}</td>
                                    <td>{{ $transaction->edc_code }} - {{ $transaction->edc_bankcode }}</td>
                                    <td>{{ $transaction->submitted_by }}</td>
                                    <td>{{ $transaction->buyer_id }}</td>
                                    <td>{{ $transaction->closing_status }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- TID selection Modal -->
                <div id="edcSelectModal" 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>Pilih Terminal untuk proses 'Closing'</p>
                                @php
                                    // Get unique edc_code values from $transactions
                                    $uniqueEdcCodes = $transactions
                                        ->where('closing_status', 'OPEN')
                                        ->pluck('edc_code')
                                        ->unique();
                                @endphp

                                @if ($uniqueEdcCodes->isEmpty())
                                    <div class="row">
                                        <div class="col-12">
                                            <p class="text-center text-secondary">Tiada data ditemui</p>
                                        </div>
                                    </div>
                                @else
                                    @foreach ($uniqueEdcCodes as $edcCode)
                                        @php
                                            // Filter transactions for the current edc_code
                                            $transactionsForEdcCode = $transactions->where('edc_code', $edcCode);

                                            // Calculate total transaction count and amount for the current edc_code
                                            $totalTrx = $transactionsForEdcCode
                                                ->where('transaction_status', 'SUCCESS')
                                                ->where('closing_status', 'OPEN')
                                                ->count();
                                            $totalAmount = $transactionsForEdcCode
                                                ->where('transaction_status', 'SUCCESS')
                                                ->where('closing_status', 'OPEN')
                                                ->sum('amount');
                                        @endphp

                                        <div class="row">
                                            <div class="col-12">
                                                <a href="{{ route('trx.closing', ['tid' => $transactionsForEdcCode->first()->edc_code]) }}"
                                                    class="text-decoration-none">
                                                    <div class="card btn btn-outline-secondary col-12 text-left font-weight-bold">
                                                        <div class="card-header">
                                                            EDC - {{ $edcCode }}
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="col">
                                                                <span type="text" id="transaction_count">
                                                                    Bil. Transaksi: {{ $totalTrx }}
                                                                </span>
                                                            </div>
                                                            <div class="col">
                                                                <span type="text" id="transaction_amount">
                                                                    Jumlah Amaun: RM {{ number_format($totalAmount, 2) }}
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <hr>
                                    @endforeach
                                @endif

                            </div>

                        </div>
                    </div>
                </div>
                {{-- //on page pagination to be done --}}
            </div>
        </div>
        <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
                $('#edcSelectModal').modal('show');
            });
        });
    </script>
@endsection