@extends('template.desktop.app')

@section('content')
    <div class="min-h-screen font-sans text-[#5d596c] antialiased">
        <div class="w-full px-6 py-8">

            <!-- Header -->
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
                <div>
                    <h4 class="text-2xl font-bold text-[#5d596c] flex items-center gap-2">
                        <span class="text-[#a5a3ae] font-normal text-xl">Manajemen /</span> Penarikan Detail
                    </h4>
                    <div class="flex items-center gap-2 mt-1">
                        <span class="inline-flex w-2 h-2 rounded-full bg-[#7367f0] animate-pulse"></span>
                        <p class="text-[13px] font-semibold text-[#a5a3ae] uppercase tracking-widest">Monitoring Transaksi
                            Real-time</p>
                    </div>
                </div>
                <button onclick="loadTable(1)"
                    class="btn-vuexy bg-white text-[#7367f0] border border-[#7367f0] hover:shadow-md transition-all">
                    <i class="fas fa-sync-alt mr-2 text-sm"></i> Perbarui Data
                </button>
            </div>

            <!-- Dashboard Stats -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="vuexy-card p-6 border-b-4 border-b-[#ff9f43]">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-xs font-bold text-[#a5a3ae] uppercase mb-1">Menunggu</p>
                            <h3 class="text-2xl font-bold text-[#5d596c]" id="pendingAmount">Rp 0</h3>
                        </div>
                        <div class="p-2.5 bg-[#fff1e3] text-[#ff9f43] rounded-lg text-lg"><i class="fas fa-clock"></i></div>
                    </div>
                </div>
                <div class="vuexy-card p-6 border-b-4 border-b-[#28c76f]">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-xs font-bold text-[#a5a3ae] uppercase mb-1">Berhasil</p>
                            <h3 class="text-2xl font-bold text-[#5d596c]" id="approvedAmount">Rp 0</h3>
                        </div>
                        <div class="p-2.5 bg-[#e8f9ee] text-[#28c76f] rounded-lg text-lg"><i
                                class="fas fa-check-double"></i></div>
                    </div>
                </div>
                <div class="vuexy-card p-6 border-b-4 border-b-[#ea5455]">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-xs font-bold text-[#a5a3ae] uppercase mb-1">Ditolak</p>
                            <h3 class="text-2xl font-bold text-[#5d596c]" id="rejectedAmount">Rp 0</h3>
                        </div>
                        <div class="p-2.5 bg-[#fce5e6] text-[#ea5455] rounded-lg text-lg"><i class="fas fa-ban"></i></div>
                    </div>
                </div>
                <div class="vuexy-card p-6 border-b-4 border-b-[#7367f0]">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-xs font-bold text-[#a5a3ae] uppercase mb-1">Total Dana</p>
                            <h3 class="text-2xl font-bold text-[#5d596c]" id="totalAmount">Rp 0</h3>
                        </div>
                        <div class="p-2.5 bg-[#eeedfd] text-[#7367f0] rounded-lg text-lg"><i class="fas fa-wallet"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Table Container -->
            <div class="vuexy-card overflow-hidden">
                <div class="p-5 border-b border-[#dbdade] flex flex-col lg:flex-row gap-4 items-center bg-white">
                    <div class="relative w-full lg:max-w-xs">
                        <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-[#a5a3ae] text-sm"></i>
                        <input type="text" id="keyword" class="vuexy-input w-full pl-10 text-[14px]"
                            placeholder="Cari trx atau user...">
                    </div>
                    <div class="flex gap-2 w-full lg:w-auto">
                        <input type="text" id="dateRange" class="vuexy-input w-full lg:w-56 text-[13px] cursor-pointer"
                            placeholder="Pilih Rentang Tanggal" readonly>
                        <select id="statusFilter" class="vuexy-input text-[13px] w-full lg:w-40 cursor-pointer">
                            <option value="">Semua Status</option>
                            <option value="pending">Pending</option>
                            <option value="approved">Approved</option>
                            <option value="rejected">Rejected</option>
                        </select>
                    </div>
                </div>

                <div class="overflow-x-auto relative min-h-[400px]">
                    <div id="tableLoader"
                        class="hidden absolute inset-0 bg-white/80 backdrop-blur-[2px] z-20 flex items-center justify-center">
                        <div class="w-10 h-10 border-4 border-[#7367f0] border-t-transparent rounded-full animate-spin">
                        </div>
                    </div>
                    <table class="w-full text-left whitespace-nowrap">
                        <thead class="bg-[#F8F7FA] border-b border-[#dbdade]">
                            <tr class="text-[12px] font-bold text-[#5d596c] uppercase tracking-widest">
                                <th class="px-6 py-5">Nomor Transaksi</th>
                                <th class="px-6 py-5">Informasi Mitra</th>
                                <th class="px-6 py-5">Detail Rekening</th>
                                <th class="px-6 py-5">Nominal</th>
                                <th class="px-6 py-5">Status & Waktu</th>
                                <th class="px-6 py-5">Bukti / Alasan</th>
                                <th class="px-6 py-5 text-right">Tindakan</th>
                            </tr>
                        </thead>
                        <tbody id="withdrawTable" class="divide-y divide-[#dbdade] text-[14.5px]">
                            <!-- Data injected via JS -->
                        </tbody>
                    </table>
                </div>
                <div id="pagination" class="px-6 py-5 bg-white border-t border-[#dbdade] flex justify-between items-center">
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Wrapper -->
    <div id="modalWrapper"
        class="hidden fixed inset-0 bg-[#2f3349]/60 backdrop-blur-sm z-[9999] flex items-center justify-center p-4">
        <!-- Approve Modal -->
        <div id="approveModal"
            class="hidden bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
            <div class="p-8">
                <h5 class="text-lg font-bold text-[#5d596c] mb-1">Konfirmasi Transfer</h5>
                <p class="text-[14px] text-[#a5a3ae] mb-6">Unggah bukti transfer untuk menyelesaikan pencairan dana.</p>
                <div class="mb-6"><input type="file" id="filePondInput" name="transfer_proof"></div>
                <div class="grid grid-cols-2 gap-4">
                    <button onclick="closeModal()"
                        class="py-3 text-[13px] font-bold text-[#a5a3ae] bg-[#f8f7fa] rounded-lg hover:bg-slate-100 transition-colors">Batal</button>
                    <button id="btnConfirmApprove"
                        class="py-3 text-[13px] font-bold bg-[#7367f0] text-white rounded-lg shadow-lg shadow-[#7367f0]/30 hover:opacity-90 transition-opacity">Cairkan
                        Sekarang</button>
                </div>
            </div>
        </div>

        <!-- Reject Modal -->
        <div id="rejectModal"
            class="hidden bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
            <div class="p-8">
                <h5 class="text-lg font-bold text-[#ea5455] mb-1 text-center">Tolak Permintaan</h5>
                <p class="text-[14px] text-[#a5a3ae] mb-5 text-center">Harap tuliskan alasan pembatalan dana secara detail.
                </p>
                <textarea id="rejectReason" class="vuexy-input w-full min-h-[120px] resize-none text-[14px] mb-6"
                    placeholder="Contoh: Nama pemilik rekening tidak valid atau nomor rekening tidak ditemukan..."></textarea>
                <div class="grid grid-cols-2 gap-4">
                    <button onclick="closeModal()"
                        class="py-3 text-[13px] font-bold text-[#a5a3ae] bg-[#f8f7fa] rounded-lg hover:bg-slate-100 transition-colors">Batal</button>
                    <button id="btnConfirmReject"
                        class="py-3 text-[13px] font-bold bg-[#ea5455] text-white rounded-lg shadow-lg shadow-[#ea5455]/30 hover:opacity-90 transition-opacity">Tolak
                        Dana</button>
                </div>
            </div>
        </div>
    </div>

    @push('styles')
        <script src="https://cdn.tailwindcss.com"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
        <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
        <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap');

            body {
                font-family: 'Public Sans', sans-serif;
            }

            .vuexy-card {
                background: #fff;
                border-radius: 0.75rem;
                box-shadow: 0 0.125rem 0.625rem rgba(165, 163, 174, 0.25);
            }

            .vuexy-input {
                border: 1px solid #dbdade;
                border-radius: 0.5rem;
                padding: 0.6rem 1rem;
                outline: none;
                transition: 0.2s;
            }

            .vuexy-input:focus {
                border-color: #7367f0;
                box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.1);
            }

            .btn-vuexy {
                padding: 0.6rem 1.25rem;
                font-size: 0.85rem;
                font-weight: 700;
                border-radius: 0.5rem;
                text-transform: uppercase;
            }

            .filepond--panel-root {
                background-color: #f8f7fa;
                border: 2px dashed #dbdade;
            }

            .filepond--credits {
                display: none;
            }
        </style>
    @endpush

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
        <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
        <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

        <script>
            let current_page = 1;
            let pond;
            let activeTrxId = null;

            // Initialize FilePond
            FilePond.registerPlugin(FilePondPluginImagePreview);
            pond = FilePond.create(document.querySelector('#filePondInput'), {
                labelIdle: 'Klik/Tarik Bukti Transfer ke sini',
                imagePreviewHeight: 140,
            });

            const formatIDR = (v) => new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                minimumFractionDigits: 0
            }).format(v);

            // Initialize DateRangePicker
            $(function() {
                $('#dateRange').daterangepicker({
                    autoUpdateInput: false,
                    locale: {
                        format: 'DD/MM/YYYY',
                        cancelLabel: 'Bersihkan',
                        applyLabel: 'Terapkan'
                    }
                });

                $('#dateRange').on('apply.daterangepicker', function(ev, picker) {
                    $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format(
                        'DD/MM/YYYY'));
                    loadTable(1); // Reload data on date selection
                });

                $('#dateRange').on('cancel.daterangepicker', function(ev, picker) {
                    $(this).val('');
                    loadTable(1);
                });
            });

            function toggleLoader(show) {
                document.getElementById('tableLoader').classList.toggle('hidden', !show);
            }

            function loadStats() {
                axios.get('/withdraws/summary').then(res => {
                    const d = res.data.data;
                    document.getElementById('pendingAmount').innerText = formatIDR(d.pending.amount);
                    document.getElementById('approvedAmount').innerText = formatIDR(d.approved.amount);
                    document.getElementById('rejectedAmount').innerText = formatIDR(d.rejected.amount);
                    document.getElementById('totalAmount').innerText = formatIDR(d.total.amount);
                });
            }

            function loadTable(page = 1) {
                current_page = page;
                toggleLoader(true);
                const body = document.getElementById('withdrawTable');

                // Parse date range
                let startDate = '',
                    endDate = '';
                const rangeVal = document.getElementById('dateRange').value;
                if (rangeVal) {
                    const parts = rangeVal.split(' - ');
                    startDate = parts[0];
                    endDate = parts[1];
                }

                axios.get('/withdraws/data', {
                    params: {
                        page,
                        keyword: document.getElementById('keyword').value,
                        status: document.getElementById('statusFilter').value,
                        start_date: startDate,
                        end_date: endDate
                    }
                }).then(res => {
                    const response = res.data.data;
                    body.innerHTML = '';

                    response.data.forEach(row => {
                        const u = row.user || {};
                        const b = row.bank_user || {};
                        const s = row.status;

                        let proofContent = '<span class="text-[#a5a3ae] italic">Belum ada bukti</span>';
                        if (s === 'approved' && row.transfer_proof) {
                            proofContent = `
                        <a href="${row.transfer_proof}" target="_blank" class="flex items-center gap-2 text-[#7367f0] font-bold hover:underline">
                            <i class="fas fa-image text-sm"></i> Lihat Struk
                        </a>
                    `;
                        } else if (s === 'rejected' && row.rejection_reason) {
                            proofContent = `
                        <div class="flex items-start gap-1 max-w-[200px]">
                            <i class="fas fa-info-circle text-[#ea5455] mt-1 text-[12px]"></i>
                            <span class="text-[12px] text-[#ea5455] font-medium leading-tight break-words">${row.rejection_reason}</span>
                        </div>
                    `;
                        }

                        body.innerHTML += `
                    <tr class="hover:bg-[#f8f7fa] transition-colors">
                         <td class="px-6 py-5">
                            <span class="font-extrabold text-[#5d596c] text-[15px]">${row.trx_no}</span>
                        </td>
                        <td class="px-6 py-5">
                            <div class="flex flex-col">
                                <span class="font-bold text-[#5d596c] text-[15px]">${u.actor.name}</span>
                                <span class="text-[11px] font-bold text-[#a5a3ae] uppercase tracking-wider">${u.actor?.code || 'REGULAR'}</span>
                            </div>
                        </td>
                        <td class="px-6 py-5">
                            <div class="flex flex-col">
                                <span class="font-bold text-[#5d596c] text-[14px]">${b.bank?.bank_short_name} - ${b.account_number}</span>
                                <span class="text-[12px] text-[#a5a3ae]">a/n ${b.account_name}</span>
                            </div>
                        </td>
                        <td class="px-6 py-5">
                            <span class="font-extrabold text-[#5d596c] text-[15px]">${formatIDR(row.amount)}</span>
                        </td>
                        <td class="px-6 py-5">
                            <div class="flex flex-col gap-1.5">
                                <span class="w-fit px-3 py-1 rounded-md text-[10px] font-extrabold uppercase ${
                                    s === 'pending' ? 'bg-[#fff1e3] text-[#ff9f43]' : 
                                    s === 'approved' ? 'bg-[#e8f9ee] text-[#28c76f]' : 'bg-[#fce5e6] text-[#ea5455]'
                                } border border-current opacity-90 tracking-wider">${s}</span>
                                <div class="text-[11px] text-[#a5a3ae] flex flex-col leading-tight gap-1 font-medium">
                                    <span><i class="far fa-calendar-plus mr-1"></i> ${dayjs(row.created_at).format('DD/MM/YY HH:mm')}</span>
                                    <span><i class="far fa-clock mr-1"></i> ${dayjs(row.updated_at).format('DD/MM/YY HH:mm')}</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-5">${proofContent}</td>
                        <td class="px-6 py-5 text-right">
                            ${s === 'pending' ? `
                                        <div class="flex gap-2 justify-end">
                                            <button onclick="openApproveModal(${row.id})" class="h-9 px-4 bg-[#7367f0] text-white rounded-lg font-bold text-[12px] hover:shadow-lg transition-all">PROSES</button>
                                            <button onclick="openRejectModal(${row.id})" class="h-9 w-9 text-[#ea5455] bg-[#fce5e6]/50 hover:bg-[#fce5e6] rounded-lg transition-all flex items-center justify-center"><i class="fas fa-times"></i></button>
                                        </div>
                                    ` : `<i class="fas fa-check-circle text-[#28c76f] text-lg opacity-30"></i>`}
                        </td>
                    </tr>
                `;
                    });
                    renderPagination(response);
                }).finally(() => toggleLoader(false));
            }

            function renderPagination(data) {
                const el = document.getElementById('pagination');
                let html =
                    `<p class="text-[13px] text-[#a5a3ae] font-medium">Menampilkan <b>${data.from || 0}</b> - <b>${data.to || 0}</b> dari <b>${data.total}</b> baris</p><div class="flex gap-1.5">`;
                data.links.forEach(l => {
                    if (!l.url && !l.active) return;
                    html +=
                        `<button onclick="${l.url ? `loadTable(${new URL(l.url).searchParams.get('page')})` : ''}" 
                class="w-8 h-8 flex items-center justify-center rounded-lg text-[12px] font-bold transition-all
                ${l.active ? 'bg-[#7367f0] text-white shadow-md' : 'text-[#5d596c] hover:bg-[#f1f0f2]'}
                ${!l.url ? 'opacity-30 cursor-not-allowed' : ''}" ${!l.url ? 'disabled' : ''}>${l.label.includes('Prev') ? '«' : l.label.includes('Next') ? '»' : l.label}</button>`;
                });
                el.innerHTML = html + `</div>`;
            }

            function openModal(id) {
                document.getElementById('modalWrapper').classList.remove('hidden');
                document.getElementById(id).classList.remove('hidden');
            }

            function closeModal() {
                document.getElementById('modalWrapper').classList.add('hidden');
                document.getElementById('rejectModal').classList.add('hidden');
                document.getElementById('approveModal').classList.add('hidden');
                pond.removeFiles();
                document.getElementById('rejectReason').value = '';
            }

            function openRejectModal(id) {
                activeTrxId = id;
                openModal('rejectModal');
            }

            function openApproveModal(id) {
                activeTrxId = id;
                openModal('approveModal');
            }

            document.getElementById('btnConfirmReject').onclick = () => {
                const reason = document.getElementById('rejectReason').value;
                if (!reason) return Swal.fire({
                    icon: 'warning',
                    title: 'Alasan Wajib',
                    text: 'Tuliskan alasan penolakan agar mitra mengetahui kendalanya.',
                    customClass: {
                        popup: 'rounded-xl'
                    }
                });
                toggleLoader(true);
                closeModal();
                axios.post(`/withdraws/${activeTrxId}/reject`, {
                    reason
                }).then(() => {
                    loadTable(current_page);
                    loadStats();
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: 'Permintaan penarikan telah ditolak.',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }).finally(() => toggleLoader(false));
            };

            document.getElementById('btnConfirmApprove').onclick = () => {
                const file = pond.getFile();
                if (!file) return Swal.fire({
                    icon: 'warning',
                    title: 'File Bukti',
                    text: 'Harap unggah bukti transfer yang valid!',
                    customClass: {
                        popup: 'rounded-xl'
                    }
                });
                const fd = new FormData();
                fd.append('transfer_proof', file.file);
                toggleLoader(true);
                closeModal();
                axios.post(`/withdraws/${activeTrxId}/approve`, fd).then(() => {
                    loadTable(current_page);
                    loadStats();
                    Swal.fire({
                        icon: 'success',
                        title: 'Sukses',
                        text: 'Dana telah berhasil dikonfirmasi cair.',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }).catch(e => {
                    toggleLoader(false);
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: e.response?.data?.message || 'Terjadi kesalahan sistem.'
                    });
                });
            };

            // Filter Listeners
            document.getElementById('keyword').oninput = () => {
                clearTimeout(window.t);
                window.t = setTimeout(() => loadTable(1), 500);
            };
            document.getElementById('statusFilter').onchange = () => loadTable(1);

            loadStats();
            loadTable();
        </script>
    @endpush
@endsection