@extends('template.desktop.app')

@section('title', 'Riwayat Transaksi Mitra')

@section('content')

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">Riwayat Transaksi Mitra</h4>
            <div class="text-muted">{{ $actor->name }}</div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-md-4">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="text-muted mb-1">Saldo Aktif</div>
                    <h3 class="fw-bold text-success mb-0">
                        Rp {{ number_format($balance, 0, ',', '.') }}
                    </h3>
                </div>
            </div>
        </div>

        <div class="col-xl-9 col-md-8">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="text-muted">Username</div>
                            <div class="fw-semibold">{{ $user->username }}</div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-muted">Email</div>
                            <div class="fw-semibold">{{ $user->email }}</div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-muted">Kontak</div>
                            <div class="fw-semibold">{{ $user->phone_number }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">

            <div class="row g-2 align-items-end mb-3">
                <div class="col-lg-3">
                    <label class="form-label">Pencarian</label>
                    <input id="search" class="form-control" placeholder="TRX / Catatan">
                </div>

                <div class="col-lg-2">
                    <label class="form-label">Tipe</label>
                    <select id="transaction_type" class="form-select">
                        <option value="">Semua</option>
                        <option value="deposit">Deposit</option>
                        <option value="withdraw">Withdraw</option>
                        <option value="order">Order</option>
                        <option value="return">Return</option>
                    </select>
                </div>

                <div class="col-lg-2">
                    <label class="form-label">Status</label>
                    <select id="status" class="form-select">
                        <option value="">Semua</option>
                        <option value="pending">Pending</option>
                        <option value="process">Process</option>
                        <option value="approved">Approved</option>
                        <option value="rejected">Rejected</option>
                    </select>
                </div>

                <div class="col-lg-2">
                    <label class="form-label">Arah</label>
                    <select id="direction" class="form-select">
                        <option value="">Debit & Credit</option>
                        <option value="debit">Debit</option>
                        <option value="credit">Credit</option>
                    </select>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table align-middle">
                    <thead class="table-light">
                        <tr>
                            <th width="190">Tanggal</th>
                            <th width="160">TRX</th>
                            <th width="110">Tipe</th>
                            <th>Keterangan</th>
                            <th width="230">Bank</th>
                            <th class="text-end" width="130">Debit</th>
                            <th class="text-end" width="130">Credit</th>
                            <th class="text-center" width="110">Status</th>
                            <th class="text-center" width="80">Bukti</th>
                        </tr>
                    </thead>
                    <tbody id="transactionBody">
                        <tr>
                            <td colspan="9" class="text-center text-muted py-4">
                                Memuat data...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div id="pagination" class="d-flex justify-content-end gap-1 mt-3"></div>

        </div>
    </div>

@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        const userId = {{ $user->id }}

        function rupiah(v) {
            return 'Rp ' + Number(v).toLocaleString('id-ID')
        }

        function badge(status) {
            if (status === 'approved') return '<span class="badge bg-success">Approved</span>'
            if (status === 'pending') return '<span class="badge bg-warning">Pending</span>'
            if (status === 'process') return '<span class="badge bg-info">Process</span>'
            if (status === 'rejected') return '<span class="badge bg-danger">Rejected</span>'
            return status
        }

        function formatTanggalID(dateString) {
            if (!dateString) return '-'

            const bulan = [
                'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
            ]

            const d = new Date(dateString)
            const day = d.getDate().toString().padStart(2, '0')
            const month = bulan[d.getMonth()]
            const year = d.getFullYear()
            const hour = d.getHours().toString().padStart(2, '0')
            const minute = d.getMinutes().toString().padStart(2, '0')
            const second = d.getSeconds().toString().padStart(2, '0')

            return `${day} ${month} ${year} ${hour}:${minute}:${second} WIB`
        }

        function renderPagination(meta) {
            const pagination = document.getElementById('pagination')
            pagination.innerHTML = ''

            const current = meta.current_page
            const last = meta.last_page
            let pages = []

            for (let i = 1; i <= 3 && i <= last; i++) pages.push(i)

            if (current > 4) pages.push('...')

            for (let i = current - 1; i <= current + 1; i++) {
                if (i > 3 && i < last - 2) pages.push(i)
            }

            if (current < last - 3) pages.push('...')

            for (let i = last - 2; i <= last; i++) {
                if (i > 3) pages.push(i)
            }

            const uniquePages = []
            for (let i = 0; i < pages.length; i++) {
                if (uniquePages.indexOf(pages[i]) === -1) {
                    uniquePages.push(pages[i])
                }
            }

            for (let i = 0; i < uniquePages.length; i++) {
                const p = uniquePages[i]
                if (p === '...') {
                    pagination.innerHTML += `<span class="btn btn-sm btn-light disabled">…</span>`
                } else {
                    pagination.innerHTML += `
                <button class="btn btn-sm ${p === current ? 'btn-primary' : 'btn-outline-primary'}"
                        onclick="loadTransactions(${p})">${p}</button>
            `
                }
            }
        }

        function loadTransactions(page = 1) {
            axios.get(`/mitras/${userId}/transactions/data`, {
                params: {
                    search: search.value,
                    transaction_type: transaction_type.value,
                    status: status.value,
                    direction: direction.value,
                    page: page
                }
            }).then(res => {
                const tbody = document.getElementById('transactionBody')
                tbody.innerHTML = ''

                if (!res.data.data || res.data.data.length === 0) {
                    tbody.innerHTML = `
                <tr>
                    <td colspan="9" class="text-center text-muted py-4">
                        Tidak ada data transaksi
                    </td>
                </tr>`
                    return
                }

                for (let i = 0; i < res.data.data.length; i++) {
                    const r = res.data.data[i]

                    let bankInfo = '-'
                    if (r.bank_user && r.bank_user.bank) {
                        bankInfo = `
                    <div class="fw-semibold">${r.bank_user.bank.bank_name}</div>
                    <div class="text-muted small">${r.bank_user.account_name}</div>
                    <div class="text-muted small">${r.bank_user.account_number}</div>
                `
                    }

                    let note = r.notes ? r.notes : '-'
                    if (r.status === 'rejected' && r.rejection_reason) {
                        note += `<div class="text-danger small">Alasan: ${r.rejection_reason}</div>`
                    }

                    let proof = r.transfer_proof ?
                        `<a href="${r.transfer_proof}" target="_blank" class="btn btn-sm btn-outline-secondary">Lihat</a>` :
                        '-'

                    tbody.innerHTML += `
                <tr>
                    <td>${formatTanggalID(r.transaction_date)}</td>
                    <td class="fw-semibold">${r.trx_no || '-'}</td>
                    <td class="text-capitalize">${r.transaction_type}</td>
                    <td>${note}</td>
                    <td>${bankInfo}</td>
                    <td class="text-end text-danger">${r.direction === 'debit' ? rupiah(r.amount) : '-'}</td>
                    <td class="text-end text-success">${r.direction === 'credit' ? rupiah(r.amount) : '-'}</td>
                    <td class="text-center">${badge(r.status)}</td>
                    <td class="text-center">${proof}</td>
                </tr>
            `
                }

                renderPagination(res.data)
            })
        }

        ['search', 'transaction_type', 'status', 'direction'].forEach(function(id) {
            document.getElementById(id).addEventListener('change', function() {
                loadTransactions()
            })
            document.getElementById(id).addEventListener('keyup', function() {
                loadTransactions()
            })
        })

        loadTransactions()
    </script>
@endpush