@extends('layouts.main')
@section('content')
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Transaksi</h1>
                <div class="section-header-breadcrumb">
                    <div class="breadcrumb-item active"><a href="{{ route('admin.index') }}">Dashboard</a></div>
                    <div class="breadcrumb-item">Transaksi</div>
                </div>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped" id="table-4">
                                <thead>
                                    <tr>
                                        <th class="text-center">
                                            #
                                        </th>
                                        <th>ID</th>
                                        <th>Pembeli</th>
                                        <th>Penjual</th>
                                        <th>Total</th>
                                        <th>Tanggal Transaksi</th>
                                        <th>Tanggal Update</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($transactions as $transaction)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $transaction->id }}</td>
                                            <td>{{ $transaction->data_pembeli->nama_depan . ' ' . $transaction->data_pembeli->nama_belakang }}
                                            </td>
                                            <td>{{ $transaction->data_penjual->nama_depan . ' ' . $transaction->data_penjual->nama_belakang }}
                                            </td>
                                            <td>Rp {{ number_format($transaction->total_bayar, 2, ',', '.') }}</td>
                                            <td>{{ $transaction->created_at }}</td>
                                            <td>{{ $transaction->updated_at }}</td>
                                            <td><a href="#" data-toggle="modal" data-target="#modalKeteranganStatus"
                                                    class="badge {{ in_array($transaction->status, ['pending', 'created'])
                                                        ? 'badge-light'
                                                        : (in_array($transaction->status, ['settlement', 'capture'])
                                                            ? 'badge-info'
                                                            : (in_array($transaction->status, ['process', 'sending', 'sended'])
                                                                ? 'badge-warning'
                                                                : (in_array($transaction->status, ['cancel', 'expire', 'failure', 'refund'])
                                                                    ? 'badge-danger'
                                                                    : ($transaction->status == 'finished'
                                                                        ? 'badge-success'
                                                                        : '')))) }}">{{ ucwords($transaction->status) }}</a>
                                            </td>
                                            <td>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-primary dropdown-toggle"
                                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Action
                                                    </button>

                                                    <ul class="dropdown-menu">
                                                        <li><a class="dropdown-item"
                                                                href="{{ route('admin-transaction.show', $transaction->id) }}">Detail</a>
                                                        </li>

                                                        @if (!$transaction->transactionDescription->isEmpty())
                                                            <li><a class="dropdown-item" data-toggle="modal"
                                                                    data-target="#modalTracking"
                                                                    data-transaction="{{ $transaction->transactionDescription }}">Tracking</a>
                                                            </li>
                                                        @endif
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    @include('admin.transaction.modal-tracking')
    @extends('admin.transaction.modal-keterangan-status')
    <script>
        $(document).ready(function() {
            $('#modalTracking').on('show.bs.modal', function(event) {
                var triggerLink = $(event.relatedTarget); // Tombol yang memicu modal
                var transactionDatas = triggerLink.data('transaction'); // Ambil data dari tombol

                // Buat variabel untuk menyimpan HTML aktivitas
                transactionDatas = transactionDatas.reverse();
                var activitiesHtml = '';

                // Periksa apakah ada data transaksi
                if (transactionDatas && transactionDatas.length > 0) {
                    // Iterasi melalui data transaksi dan tambahkan ke activitiesHtml
                    $.each(transactionDatas, function(index, transactionDescription) {
                        activitiesHtml += `
                            <div class="activity">
                                <div class="activity-icon ${transactionDescription.background} text-white shadow-primary">
                                    <i class="${transactionDescription.judul}" style="font-size: 36px;"></i>
                                </div>
                                <div class="activity-detail">
                                    <div class="mb-2">
                                        <span class="text-job text-primary">${new Date(transactionDescription.created_at).toLocaleString()}</span>
                                    </div>
                                    <p>${transactionDescription.deskripsi}</p>
                                </div>
                            </div>
                        `;
                    });
                } else {
                    // Tidak ada data transaksi, tambahkan pesan kosong
                    activitiesHtml += `
                        <div class="activity">
                            <div class="activity-icon bg-primary text-white shadow-primary">
                                <i class="fas fa-ban" style="font-size: 36px;"></i>
                            </div>
                            <div class="activity-detail">
                                <div class="mb-2">
                                    <span class="text-job text-primary">--, --:--:-- --</span>
                                </div>
                                <p>Kosong</p>
                            </div>
                        </div>
                    `;
                }

                // Menampilkan data dalam modal
                var modal = $(this);
                modal.find('.activities').html(activitiesHtml);
            });

        });
    </script>
@endsection