@extends('template.desktop.app')

@section('content')
    <div class="row gy-4">
        <!-- Kiri: User & Detail Withdraw -->
        <div class="col-xl-4 col-lg-5 order-1 order-md-0">
            <!-- User Card -->
            <div class="card mb-6">
                <div class="card-body pt-12">
                    <div class="user-avatar-section">
                        <div class=" d-flex align-items-center flex-column">
                            <div class="user-info text-center">
                                <h5>{{ $user->actor->name }}</h5>
                                <span class="badge bg-label-secondary">
                                    {{ $user->actor->code }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-around flex-wrap my-6 gap-0 gap-md-3 gap-lg-4">
                        <div class="d-flex align-items-center me-5 gap-4">
                            <div class="avatar">
                                <div class="avatar-initial bg-label-primary rounded">
                                    <i class="icon-base ti tabler-credit-card-pay icon-lg"></i>
                                </div>
                            </div>
                            <div>
                                <h5 class="mb-0">Rp{{ number_format($withdraw->amount, 0) }}</h5>
                                <span>Jumlah Penarikan</span>
                            </div>
                        </div>
                    </div>
                    <h5 class="pb-4 border-bottom mb-4">Data Rekening</h5>
                    <div class="info-container">
                        <ul class="list-unstyled mb-6">
                            <li class="mb-2">
                                <span class="h6">Nama Penerima:</span>
                                <span> {{ $user->bankAccounts->account_name }}</span>
                            </li>
                            <li class="mb-2">
                                <span class="h6">Nomor Rekening:</span>
                                <span> {{ $user->bankAccounts->account_number }}</span>
                            </li>
                            <li class="mb-2">
                                <span class="h6">Bank:</span>
                                <span> {{ $user->bankAccounts->bank->bank_name }}</span>
                            </li>
                            @if ($withdraw->status === 'rejected' && $withdraw->notes)
                                <li class="mb-2">
                                    <span class="h6">Alasan Penolakan:</span>
                                    <span>{{ $withdraw->notes }}</span>
                                </li>
                            @endif
                            @if ($withdraw->status === 'approved' && $withdraw->transfer_proof)
                                <div class="mt-3">

                                </div>
                                <li class="mb-2">
                                    <span class="h6">Bukti Transfer:</span>
                                    <span>
                                        <a href="{{ asset($withdraw->transfer_proof) }}" target="_blank"
                                            class="btn btn-outline-primary btn-sm">
                                            Lihat Bukti Transfer
                                        </a>
                                    </span>
                                </li>
                            @endif
                        </ul>
                        @if ($withdraw->status === 'pending')
                            <div class="d-flex justify-content-center">
                                <a href="javascript:;" class="btn btn-success me-4 waves-effect waves-light"
                                    id="approveBtn">Setujui</a>
                                <a href="javascript:;" class="btn btn-label-danger suspend-user waves-effect"
                                    id="rejectBtn">Tolak</a>
                            </div>
                        @elseif($withdraw->status === 'approved')
                            @if ($user->actor->type == 'mitra')
                                <div class="d-flex justify-content-center">
                                    <span class="badge bg-label-success">Pencairan Komisi Disetujui</span>
                                </div>
                            @else
                                <div class="d-flex justify-content-center">
                                    <span class="badge bg-label-success">Pencairan Disetujui</span>
                                </div>
                            @endif
                        @elseif($withdraw->status === 'rejected')
                            @if ($user->actor->type == 'mitra')
                                <div class="d-flex justify-content-center">
                                    <span class="badge bg-label-success">Pencairan Komisi Ditolak</span>
                                </div>
                            @else
                                <div class="d-flex justify-content-center">
                                    <span class="badge bg-label-danger">Pencairan Ditolak</span>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Riwayat Withdraw</h6>
                    <small class="text-muted">10 transaksi terakhir</small>
                </div>
                <div class="table-responsive">
                    <table class="table table-borderless table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>No TRX</th>
                                <th>Nominal</th>
                                <th>Status</th>
                                <th>Tanggal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($withdrawTransactions as $trx)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $trx->trx_no }}</td>
                                    <td>Rp {{ number_format($trx->amount, 0, ',', '.') }}</td>
                                    <td>
                                        <span
                                            class="badge bg-label-{{ [
                                                'approved' => 'success',
                                                'pending' => 'warning',
                                                'rejected' => 'danger',
                                                'process' => 'info',
                                            ][$trx->status] ?? 'secondary' }}">
                                            {{ ucfirst($trx->status) }}
                                        </span>
                                    </td>
                                    <td>{{ \Carbon\Carbon::parse($trx->transaction_date)->format('d M Y') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">Tidak ada transaksi.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card mt-5">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Riwayat Order</h6>
                    <small class="text-muted">10 Orderan terakhir</small>
                </div>
                <div class="table-responsive">
                    <table class="table table-borderless table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>No TRX</th>
                                <th>Nomor Resi</th>
                                <th>Nominal</th>
                                <th>Status Order</th>
                                <th>Tanggal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($orderTransactions as $orderTrx)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $orderTrx->trx_no }}</td>
                                    <td>{{ $orderTrx->orderEverpro->awb_number }}</td>
                                    <td>Rp {{ number_format($orderTrx->amount, 0, ',', '.') }}</td>
                                    @php
                                        $statusMap = [
                                            'COMPLETED' => ['label' => 'Selesai', 'color' => 'success'],
                                            'RETURN' => ['label' => 'Dikembalikan', 'color' => 'danger'],
                                        ];

                                        $status = $orderTrx->orderEverpro->status;
                                        $badge = $statusMap[$status] ?? [
                                            'label' => ucfirst($status),
                                            'color' => 'secondary',
                                        ];
                                    @endphp

                                    <td>
                                        <span class="badge bg-label-{{ $badge['color'] }}">
                                            {{ $badge['label'] }}
                                        </span>
                                    </td>

                                    <td>{{ \Carbon\Carbon::parse($orderTrx->transaction_date)->format('d M Y H:i') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">Tidak ada transaksi.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Alasan Reject -->
    <div class="modal fade" id="modalRejectReason" tabindex="-1" aria-labelledby="modalRejectReasonLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('admin.transactions.withdraw.reject', $withdraw->id) }}">
                @csrf
                @method('PUT')
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Alasan Penolakan Withdraw</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="rejectReason" class="form-label">Alasan</label>
                            <textarea name="reason" id="rejectReason" class="form-control" rows="4" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-danger">Tolak Withdraw</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modalApproveUpload" tabindex="-1" aria-labelledby="modalApproveUploadLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-simple">
            <div class="modal-content">
                <div class="modal-body p-4">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="text-center mb-5">
                        <h2 class="mb-1">Konfirmasi Withdraw</h2>
                        <p class="text-body-secondary">Pastikan detail penarikan berikut sudah sesuai sebelum transfer.</p>
                    </div>

                    <div class="row g-4 text-center mb-4">
                        <div class="col-12">
                            <h2 class="fw-bold text-success mb-1">
                                Rp {{ number_format($withdraw->amount, 0, ',', '.') }}
                            </h2>
                            <span class="badge bg-label-info">Jumlah Penarikan</span>
                        </div>
                    </div>

                    <div class="row g-3 mb-4">
                        <div class="col-sm-6">
                            <div class="border rounded p-3 h-100">
                                <small class="text-muted d-block mb-1">Nama Penerima</small>
                                <h6 class="mb-0">{{ $user->bankAccounts->account_name }}</h6>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="border rounded p-3 h-100">
                                <small class="text-muted d-block mb-1">Nomor Rekening</small>
                                <h6 class="mb-0">{{ $user->bankAccounts->account_number }}</h6>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="border rounded p-3 h-100">
                                <small class="text-muted d-block mb-1">Bank</small>
                                <h6 class="mb-0">{{ $user->bankAccounts->bank->bank_name }}</h6>
                            </div>
                        </div>
                    </div>

                    <form method="POST" action="{{ route('admin.transactions.withdraw.approve', $withdraw->id) }}"
                        enctype="multipart/form-data" class="row g-3">
                        @csrf
                        @method('PUT')

                        <div class="col-12">
                            <label for="proof" class="form-label fw-semibold">Upload Bukti Transfer</label>
                            <input type="file" name="proof" id="proof" class="form-control"
                                accept="image/*,.pdf" required>
                            <div class="form-text">Format: JPG, PNG, atau PDF. Maks 2MB.</div>
                        </div>

                        <div class="col-12 text-center mt-5">
                            <button type="button" class="btn btn-label-secondary me-2" data-bs-dismiss="modal">
                                Batal
                            </button>
                            <button type="submit" class="btn btn-success">
                                <i class="icon-base ti tabler-check me-1"></i> Approve Withdraw
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Divider -->
                <hr class="mx-md-n5 mx-n3">

                <!-- Bagian bawah modal (opsional tambahan info) -->
                <div class="modal-body text-center">
                    <h6 class="mb-2">Transaksi #{{ $withdraw->trx_no }}</h6>
                    <small class="text-muted">Tanggal:
                        {{ \Carbon\Carbon::parse($withdraw->created_at)->format('d M Y H:i') }}</small>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('approveBtn')?.addEventListener('click', function() {
                Swal.fire({
                    title: 'Setujui withdraw ini?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Setujui',
                    cancelButtonText: 'Batal',
                    customClass: {
                        confirmButton: 'btn btn-success me-2',
                        cancelButton: 'btn btn-label-secondary'
                    },
                    buttonsStyling: false
                }).then(result => {
                    if (result.isConfirmed) {
                        new bootstrap.Modal(document.getElementById('modalApproveUpload')).show();
                    }
                });
            });

            document.getElementById('rejectBtn')?.addEventListener('click', function() {
                Swal.fire({
                    title: 'Tolak withdraw ini?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Tolak',
                    cancelButtonText: 'Batal',
                    customClass: {
                        confirmButton: 'btn btn-danger me-2',
                        cancelButton: 'btn btn-label-secondary'
                    },
                    buttonsStyling: false
                }).then(result => {
                    if (result.isConfirmed) {
                        new bootstrap.Modal(document.getElementById('modalRejectReason')).show();
                    }
                });
            });
        });
    </script>
@endpush