@extends('backoffice.layouts.app')

@push('styles')
<style>
    .glass-card {
        background: rgba(30,41,59,.72);
        backdrop-filter: blur(10px);
    }

    .transaction-table {
        --bs-table-bg: transparent;
        --bs-table-border-color: rgba(148,163,184,.08);
    }

    .transaction-table thead.table-dark th {
        background: rgba(255,255,255,.03) !important;
        border-bottom: 1px solid rgba(148,163,184,.08);
        color: #94a3b8;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        padding: 1rem;
    }

    .transaction-table tbody td {
        padding: 1rem;
        border-color: rgba(148,163,184,.06);
        vertical-align: middle;
    }

    .transaction-table tbody tr {
        transition: all .2s ease;
    }

    .transaction-table tbody tr:hover {
        background: rgba(255,255,255,.025);
    }

    .trx-id {
        font-weight: 700;
        color: #fff;
    }

    .amount-text {
        font-weight: 600;
        color: #f59e0b;
    }

    .type-badge {
        font-size: .72rem;
        padding: .45rem .7rem;
        border-radius: 999px;
    }
</style>
@endpush

@section('content')
<div class="container-xxl container-p-y">

    {{-- HEADER --}}
    <div class="card border-0 shadow-sm overflow-hidden position-relative mb-4 glass-card">

        <div class="position-absolute top-0 end-0"
             style="
                width:220px;
                height:220px;
                background:
                radial-gradient(circle,
                rgba(99,102,241,.14) 0%,
                transparent 72%);
                pointer-events:none;">
        </div>

        <div class="card-body position-relative z-1 d-flex justify-content-between align-items-center flex-wrap gap-2">

            <div>

                <h5 class="mb-1 text-white fw-semibold">
                    All Transactions
                </h5>

                <small class="text-body-secondary">
                    View all deposit, withdraw, and automatic transactions
                </small>

            </div>

            <a href="{{ route('admin.transaction.all') }}"
               class="btn btn-label-secondary">

                <i class="ti tabler-refresh me-1"></i>
                Refresh

            </a>

        </div>

    </div>

    {{-- ALERT --}}
    @include('backoffice.pages.transaction.partials.alert')

    {{-- SEARCH --}}
    <div class="card border-0 shadow-sm mb-4 glass-card">

        <div class="card-body">

            <div class="row g-2 align-items-center">

                {{-- SEARCH --}}
                <div class="col-12 col-lg">

                    <form method="GET"
                          action="{{ route('admin.transaction.all') }}"
                          class="d-flex flex-column flex-md-row gap-2">

                        <div class="input-group flex-grow-1">

                            <span class="input-group-text border-0 bg-transparent">
                                <i class="ti tabler-search"></i>
                            </span>

                            <input
                                type="text"
                                name="search"
                                class="form-control border-0"
                                placeholder="Search trx id / username / bank / account..."
                                value="{{ request('search') }}">

                        </div>

                        <div class="d-grid d-md-flex gap-2">

                            <button type="submit"
                                    class="btn btn-primary text-nowrap">

                                Search

                            </button>

                            @if(request('search'))

                                <a href="{{ route('admin.transaction.all') }}"
                                   class="btn btn-label-secondary text-nowrap">

                                    Reset

                                </a>

                            @endif

                        </div>

                    </form>

                </div>

                {{-- EXPORT --}}
                <div class="col-12 col-lg-auto">

                    <div class="d-grid d-sm-flex gap-2 justify-content-lg-end">

                        <button type="button"
                                class="btn btn-label-primary text-nowrap"
                                id="btn-export"
                                data-module="transactions">

                            <i class="ti tabler-upload me-1"></i>
                            Export

                        </button>

                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- TABLE --}}
    <div class="card border-0 shadow-sm overflow-hidden">

        <div class="card-header border-0 bg-transparent d-flex justify-content-between align-items-center flex-wrap gap-2">

            <div>

                <h6 class="mb-1 fw-semibold text-white">
                    Transaction List
                </h6>

                <small class="text-body-secondary">
                    Semua data transaksi website
                </small>

            </div>

            <span class="badge rounded-pill bg-label-primary px-3 py-2">
                {{ $transactions->count() }} Transactions
            </span>

        </div>

        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-hover mb-0 align-middle text-nowrap">

                    <thead class="table-dark">

                        <tr>

                            <th>ID</th>
                            <th>TRX ID</th>
                            <th>User</th>
                            <th>Type</th>
                            <th>Bank</th>
                            <th>Account</th>
                            <th>Amount</th>
                            <th>Unique</th>
                            <th>Status</th>
                            <th>Date</th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($transactions as $trx)

                            <tr>

                                <td class="fw-semibold text-body-secondary">
                                    #{{ $trx->id }}
                                </td>

                                <td class="trx-id">
                                    {{ $trx->trxid }}
                                </td>

                                <td>

                                    <div class="fw-semibold text-white">
                                        {{ $trx->user?->username ?? '-' }}
                                    </div>

                                    <small class="text-body-secondary">
                                        ID: {{ $trx->user_id ?? '-' }}
                                    </small>

                                </td>

                                <td>

                                    @php
                                        $type = strtolower($trx->payment_type ?? '-');
                                    @endphp

                                    @if($type === 'deposit')

                                        <span class="badge bg-success type-badge">
                                            Deposit
                                        </span>

                                    @elseif($type === 'withdraw')

                                        <span class="badge bg-danger type-badge">
                                            Withdraw
                                        </span>

                                    @else

                                        <span class="badge bg-label-secondary type-badge">
                                            {{ ucfirst($trx->payment_type ?? '-') }}
                                        </span>

                                    @endif

                                </td>

                                <td>
                                    {{ $trx->bank ?? '-' }}
                                </td>

                                <td>

                                    <div>
                                        {{ $trx->account_name ?? '-' }}
                                    </div>

                                    <small class="text-body-secondary">
                                        {{ $trx->account_number ?? '-' }}
                                    </small>

                                </td>

                                <td class="amount-text">
                                    Rp {{ number_format((float) $trx->amount, 0, ',', '.') }}
                                </td>

                                <td>
                                    Rp {{ number_format((float) ($trx->unique_code ?? 0), 0, ',', '.') }}
                                </td>

                                <td>

                                    @if($trx->status === 'pending')

                                        <span class="badge bg-warning">
                                            Pending
                                        </span>

                                    @elseif($trx->status === 'success')

                                        <span class="badge bg-success">
                                            Success
                                        </span>

                                    @elseif($trx->status === 'failed')

                                        <span class="badge bg-danger">
                                            Failed
                                        </span>

                                    @elseif($trx->status === 'rejected')

                                        <span class="badge bg-danger">
                                            Rejected
                                        </span>

                                    @else

                                        <span class="badge bg-secondary">
                                            {{ $trx->status }}
                                        </span>

                                    @endif

                                </td>

                                <td>
                                    {{ optional($trx->created_at)->format('d-m-Y H:i') }}
                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td colspan="10"
                                    class="text-center py-5 text-body-secondary">

                                    Tidak ada data transaksi

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

        {{-- PAGINATION --}}
        @include('backoffice.pages.transaction.partials.pagination')

    </div>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const btnExport = document.getElementById('btn-export');

    if (!btnExport) return;

    btnExport.addEventListener('click', function () {

        const module =
            this.getAttribute('data-module') || 'transactions';

        const url = new URL(
            "{{ route('admin.exports.module', ['module' => '__MODULE__']) }}"
            .replace('__MODULE__', module),
            window.location.origin
        );

        const currentParams =
            new URLSearchParams(window.location.search);

        currentParams.forEach((value, key) => {
            url.searchParams.set(key, value);
        });

        window.location.href = url.toString();

    });

});
</script>
@endpush