@extends('template.desktop.app')

@section('content')
<div class="row gy-4">
    <!-- Kiri: User & Detail Withdraw -->
    <div class="col-lg-4">
        <!-- User Info -->
        <div class="card">
            <div class="card-body text-center p-4">
                <img src="https://cdn-icons-png.flaticon.com/128/847/847969.png" alt="Avatar" class="rounded-circle mb-3" width="80">
                <h5 class="mb-0">{{ $user->distributor->full_name }}</h5>
                <small class="text-muted d-block mb-2">{{ '@' . $user->username }}</small>
                <div class="mb-3">
                    <span class="badge bg-label-info me-1">{{ ucfirst($user->role) }}</span>
                    <span class="badge bg-label-{{ $user->is_active ? 'success' : 'secondary' }}">
                        {{ $user->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Withdraw Detail -->
        <div class="card mt-4">
            <div class="card-header text-center bg-white">
                <h6 class="mb-0">Detail Withdraw</h6>
                <small class="text-muted">#{{ $withdraw->trx_no }}</small>
            </div>
            <div class="card-body text-center">
                <h6 class="text-muted mb-1">Nominal</h6>
                <h4 class="text-success fw-semibold mb-3">Rp {{ number_format($withdraw->amount, 0, ',', '.') }}</h4>

                <span class="badge px-3 py-2 bg-label-{{ [
                    'approved' => 'success',
                    'pending' => 'warning',
                    'rejected' => 'danger',
                    'process' => 'info',
                ][$withdraw->status] ?? 'secondary' }}">
                    {{ ucfirst($withdraw->status) }}
                </span>

                @if ($withdraw->status === 'rejected' && $withdraw->notes)
                    <div class="alert alert-danger mt-3 small text-start">
                        <strong>Alasan Penolakan:</strong><br>
                        {{ $withdraw->notes }}
                    </div>
                @endif

                @if ($withdraw->status === 'approved' && $withdraw->transfer_proof)
                    <div class="mt-3">
                        <a href="{{ asset('storage/' . $withdraw->transfer_proof) }}" target="_blank" class="btn btn-outline-primary btn-sm">
                            Lihat Bukti Transfer
                        </a>
                    </div>
                @endif

                @if (in_array($withdraw->status, ['pending', 'process']))
                    <div class="d-grid gap-2 mt-4">
                        <button type="button" class="btn btn-success" id="approveBtn">
                            <i class="menu-icon icon-base ti tabler-circle-check"></i> Setujui Penarikan
                        </button>
                        <button type="button" class="btn btn-outline-danger" id="rejectBtn">
                            <i class="menu-icon icon-base ti tabler-x"></i> Tolak Penarikan
                        </button>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Kanan: Riwayat Withdraw -->
    <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 ($distributorTransactions 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>
</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>

<!-- Modal Upload Bukti Transfer -->
<div class="modal fade" id="modalApproveUpload" tabindex="-1" aria-labelledby="modalApproveUploadLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('admin.transactions.withdraw.approve', $withdraw->id) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Upload Bukti Transfer</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="proof" class="form-label">Pilih File Bukti Transfer</label>
                        <input type="file" name="proof" id="proof" class="form-control" accept="image/*,.pdf" required>
                        <div class="form-text">Format gambar atau PDF, maksimal 2MB.</div>
                    </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-success">Approve Withdraw</button>
                </div>
            </div>
        </form>
    </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