@extends('template.desktop.app')

@push('styles')
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        /* Modern Corporate Red Theme */
        :root {
            --primary-color: #8E1823;
            --primary-light: #fdf2f3;
            --primary-hover: #72131c;

            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-500: #6b7280;
            --gray-800: #1f2937;
            --gray-900: #111827;
        }

        body {
            background-color: var(--gray-50);
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--gray-800);
        }

        /* Utility Cleanups */
        .text-primary-theme {
            color: var(--primary-color) !important;
        }

        .bg-primary-theme {
            background-color: var(--primary-color) !important;
            color: white;
        }

        .bg-primary-light {
            background-color: var(--primary-light) !important;
            color: var(--primary-color);
        }

        /* Card System */
        .stat-card {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: 12px;
            padding: 1.5rem;
            height: 100%;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }

        /* Subtle top border for branding */
        .stat-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary-color);
            opacity: 0;
            transition: opacity 0.2s;
        }

        .stat-card:hover {
            border-color: #d1d5db;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .stat-card:hover::after {
            opacity: 1;
        }

        /* Account Switcher - Segmented Control */
        .segment-control {
            background: var(--gray-100);
            padding: 4px;
            border-radius: 10px;
            display: inline-flex;
            border: 1px solid var(--gray-200);
        }

        .segment-btn {
            padding: 8px 24px;
            border-radius: 8px;
            border: none;
            background: transparent;
            color: var(--gray-500);
            font-weight: 500;
            font-size: 0.875rem;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .segment-btn.active {
            background: white;
            color: var(--primary-color);
            font-weight: 600;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* Inputs */
        .form-control-clean {
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            padding: 10px 16px;
            font-size: 0.875rem;
            transition: border-color 0.15s;
        }

        .form-control-clean:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

        /* Primary Button */
        .btn-theme {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.875rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.2s;
        }

        .btn-theme:hover {
            background-color: var(--primary-hover);
            color: white;
        }

        /* Table Design */
        .clean-table thead th {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--gray-500);
            font-weight: 600;
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
            padding: 12px 24px;
        }

        .clean-table tbody td {
            padding: 16px 24px;
            border-bottom: 1px solid var(--gray-200);
            color: var(--gray-800);
            font-size: 0.875rem;
            vertical-align: middle;
        }

        .clean-table tbody tr:last-child td {
            border-bottom: none;
        }

        .clean-table tbody tr:hover {
            background-color: #fffbfc;
            /* Very subtle red tint */
        }

        /* Typography Helpers */
        .stat-value {
            font-size: 1.85rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--gray-900);
            line-height: 1.2;
        }

        .stat-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 600;
            color: var(--gray-500);
            margin-bottom: 8px;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid py-5 px-4 px-md-5">

        <!-- Top Header & Balance Card -->
        <div class="row align-items-end mb-5 g-4">
            <div class="col-lg-6">
                <h3 class="fw-bold text-gray-900 mb-1">Everpro Wallet</h3>
                <p class="text-muted mb-4 small">Dashboard Keuangan & Laporan Mutasi</p>

                <!-- Balance Card -->
                <div class="stat-card bg-primary-theme text-white border-0 py-4 px-4"
                    style="max-width: 400px; background: linear-gradient(135deg, #8E1823 0%, #5e0d15 100%);">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="bg-white bg-opacity-25 rounded-circle p-2">
                            <i data-lucide="wallet" class="text-white" style="width: 20px;"></i>
                        </div>
                        <span class="small text-white text-opacity-75 text-uppercase fw-bold letter-spacing-1">Total Saldo
                            Aktif</span>
                    </div>
                    <!-- Placeholder for actual balance if api provides it, else sum or just static presentation for now -->
                    <div class="fs-1 fw-bold font-monospace" id="stat-main-balance">Rp -</div>
                    <div class="mt-3 d-flex gap-2">
                        <span class="badge bg-white bg-opacity-20 text-white border-0 fw-normal">Mitra / Distributor</span>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 text-lg-end">
                <!-- Google Design Toggle -->
                <div class="d-inline-flex bg-white border rounded-pill p-1 shadow-sm">
                    <button onclick="setAccount('mitra')" id="btn-mitra" class="segment-btn active rounded-pill px-4">
                        Mitra / Pusat
                    </button>
                    <button onclick="setAccount('distributor')" id="btn-distributor" class="segment-btn rounded-pill px-4">
                        Distributor
                    </button>
                </div>
            </div>
        </div>

        <!-- Google Design Filter Bar -->
        <div class="d-flex align-items-center justify-content-between bg-white border rounded-4 p-2 mb-4 shadow-sm"
            style="max-width: 100%;">
            <div class="d-flex align-items-center flex-grow-1 ps-3">
                <i data-lucide="calendar-range" class="text-muted me-3" style="width: 20px;"></i>
                <div class="d-flex flex-column justify-content-center w-100 me-3">
                    <span class="text-xs text-muted fw-bold text-uppercase" style="font-size: 0.65rem;">Periode
                        Laporan</span>
                    <input type="text" id="date-range"
                        class="form-control border-0 p-0 shadow-none fw-bold text-gray-900 bg-transparent"
                        style="cursor: pointer; font-size: 0.9rem; height: auto;" placeholder="Pilih Tanggal">
                </div>
            </div>
            <div>
                <button onclick="state.skip = 0; refreshData()"
                    class="btn btn-dark rounded-pill px-4 py-2 fw-bold d-flex align-items-center gap-2">
                    <i data-lucide="filter" style="width: 16px;"></i>
                    <span>Terapkan</span>
                </button>
            </div>
        </div>

        <!-- Stats Grid -->
        <div class="row g-4 mb-5">
            <!-- COD Nett -->
            <div class="col-xl-3 col-md-6">
                <div class="stat-card">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="stat-label">Total COD Nett</div>
                        <div class="bg-primary-light p-2 rounded-3">
                            <i data-lucide="wallet" class="text-primary-theme" style="width: 20px;"></i>
                        </div>
                    </div>
                    <div class="stat-value" id="stat-cod-nett">Rp 0</div>
                    <div class="mt-2 text-muted small d-flex align-items-center gap-1">
                        <i data-lucide="check-circle" class="text-success" style="width: 12px;"></i>
                        <span>Net Income</span>
                    </div>
                </div>
            </div>

            <!-- Cashback -->
            <div class="col-xl-3 col-md-6">
                <div class="stat-card">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="stat-label">Total Cashback</div>
                        <div class="bg-primary-light p-2 rounded-3">
                            <i data-lucide="trending-up" class="text-primary-theme" style="width: 20px;"></i>
                        </div>
                    </div>
                    <div class="stat-value text-success" id="stat-cashback">Rp 0</div>
                    <div class="mt-2 text-muted small">Profit dari pengiriman</div>
                </div>
            </div>

            <!-- Ongoing -->
            <div class="col-xl-3 col-md-6">
                <div class="stat-card">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="stat-label">COD Ongoing</div>
                        <div class="bg-primary-light p-2 rounded-3">
                            <i data-lucide="clock" class="text-primary-theme" style="width: 20px;"></i>
                        </div>
                    </div>
                    <div class="stat-value text-warning" id="stat-ongoing">Rp 0</div>
                    <div class="mt-2 text-muted small">Dana dalam proses</div>
                </div>
            </div>

            <!-- Refund -->
            <div class="col-xl-3 col-md-6">
                <div class="stat-card">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="stat-label">Total Refund</div>
                        <div class="bg-primary-light p-2 rounded-3">
                            <i data-lucide="corner-up-left" class="text-primary-theme" style="width: 20px;"></i>
                        </div>
                    </div>
                    <div class="stat-value text-danger" id="stat-refund">Rp 0</div>
                    <div class="mt-2 text-muted small">Pengembalian dana</div>
                </div>
            </div>
        </div>

        <!-- Secondary Metrics Strip -->
        <div class="row g-4 mb-5">
            <div class="col-12">
                <div class="stat-card py-4 d-flex flex-wrap align-items-center justify-content-around text-center gap-4">
                    <div>
                        <div class="text-muted small text-uppercase fw-bold mb-1">COD Shipment</div>
                        <div class="fs-5 fw-bold text-gray-900" id="stat-shipment-price">Rp 0</div>
                    </div>
                    <div class="vr opacity-25 d-none d-md-block"></div>
                    <div>
                        <div class="text-muted small text-uppercase fw-bold mb-1">COD Fee</div>
                        <div class="fs-5 fw-bold text-gray-900" id="stat-cod-fee">Rp 0</div>
                    </div>
                    <div class="vr opacity-25 d-none d-md-block"></div>
                    <div>
                        <div class="text-muted small text-uppercase fw-bold mb-1">Non-COD Cashback</div>
                        <div class="fs-5 fw-bold text-gray-900" id="stat-noncod-cashback">Rp 0</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-5">
        <div class="d-flex justify-content-between align-items-center p-4 bg-white border-bottom">
            <h5 class="fw-bold mb-0 text-gray-900">Riwayat Mutasi</h5>

            <div class="d-flex align-items-center gap-2">
                <button class="btn btn-sm btn-light border px-2" onclick="prevPage()" id="btn-prev" disabled>
                    <i data-lucide="chevron-left" style="width: 16px;"></i>
                </button>
                <span class="small fw-bold text-muted px-2" id="pagination-info">Page 1</span>
                <button class="btn btn-sm btn-light border px-2" onclick="nextPage()" id="btn-next">
                    <i data-lucide="chevron-right" style="width: 16px;"></i>
                </button>
            </div>
        </div>

        <div class="table-responsive bg-white">
            <table class="table clean-table mb-0 w-100">
                <thead>
                    <tr>
                        <th class="ps-4">Waktu</th>
                        <th>Tipe Transaksi</th>
                        <th>Nominal</th>
                        <th>Saldo Akhir</th>
                        <th>Status</th>
                        <th class="pe-4">Keterangan</th>
                    </tr>
                </thead>
                <tbody id="mutation-tbody">
                    <!-- Populated via JS -->
                </tbody>
            </table>

            <!-- Loading State -->
            <div id="loading-state" class="text-center py-5 d-none">
                <div class="spinner-border text-primary-theme" role="status"></div>
                <p class="text-muted small mt-2">Memuat data...</p>
            </div>

            <!-- Empty State -->
            <div id="empty-state" class="text-center py-5 d-none">
                <div class="bg-gray-100 rounded-circle d-inline-flex p-3 mb-3">
                    <i data-lucide="search-x" class="text-muted" style="width: 24px;"></i>
                </div>
                <h6 class="text-gray-900 fw-bold">Tidak ada data ditemukan</h6>
                <p class="text-muted small mb-0">Coba ubah filter tanggal atau akun.</p>
            </div>
        </div>
    </div>

    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        let state = {
            account: 'mitra',
            startDate: null,
            endDate: null,
            skip: 0,
            limit: 50,
            picker: null
        };
        // Initialize Icons
        function initIcons() {
            if (window.lucide) lucide.createIcons();
        }

        // Set CSRF Token for Axios to fix 403 Forbidden
        const csrfToken = document.querySelector('meta[name="csrf-token"]');
        if (csrfToken) {
            axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken.getAttribute('content');
        } else {
            console.warn('CSRF token not found in meta tags.');
        }

        // Initialize Easepick
        document.addEventListener('DOMContentLoaded', () => {
            setAccount('mitra');

            // Wait for easepick to load
            setTimeout(() => {
                if (typeof easepick === 'undefined') {
                    console.error('Easepick library failed to load.');
                    return;
                }

                state.picker = new easepick.create({
                    element: document.getElementById('date-range'),
                    zIndex: 99999,
                    css: [
                        'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
                        `
                    :host {
                        z-index: 99999 !important;
                        --color-fg-primary: #8E1823;
                        --color-fg-primary-hover: #5e0d15;
                        --color-btn-primary-bg: #8E1823;
                        --color-btn-primary-fg: #fff;
                        --color-bg-inrange: #fce8ea;
                        --color-bg-secondary: #f3f4f6;
                        --day-width: 42px;
                        --day-height: 42px;
                    }
                    .container.range-plugin .calendar>.days-grid>.day.start,
                    .container.range-plugin .calendar>.days-grid>.day.end {
                        border-radius: 50%;
                    }
                    `
                    ],
                    plugins: ['RangePlugin', 'PresetPlugin'],
                    RangePlugin: {
                        tooltipNumber(num) {
                            return num - 1;
                        },
                        locale: {
                            one: 'hari',
                            other: 'hari'
                        }
                    },
                    PresetPlugin: {
                        position: 'left',
                        customLabels: ['Minggu Ini', 'Bulan Ini', '30 Hari Terakhir', 'Bulan Lalu']
                    },
                    setup(picker) {
                        picker.on('select', (e) => {
                            const {
                                start,
                                end
                            } = e.detail;

                            // Set Precision Time
                            start.setHours(0, 0, 0, 0);
                            end.setHours(23, 59, 59, 999);

                            state.startDate = start.getTime() * 1000000;
                            state.endDate = end.getTime() * 1000000;

                            state.skip = 0;
                            refreshData();
                        });
                    }
                });

                // Set Default 30 Days
                const end = new Date();
                const start = new Date();
                start.setDate(start.getDate() - 30);
                state.picker.setDateRange(start, end);

            }, 100);
        });

        function setAccount(type) {
            state.account = type;
            state.skip = 0;
            document.querySelectorAll('.segment-btn').forEach(b => b.classList.remove('active'));
            document.getElementById('btn-' + type).classList.add('active');
            refreshData();
        }

        function formatRupiah(val) {
            return new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                minimumFractionDigits: 0
            }).format(val);
        }

        function formatDate(val) {
            if (!val) return '-';
            let d = isNaN(val) ? new Date(val) : new Date(val / 1000000);
            return d.toLocaleDateString('id-ID', {
                day: '2-digit',
                month: 'short',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        async function refreshData() {
            showLoading(true);

            // Initial load check
            if (!state.startDate && state.picker) {
                const start = state.picker.getStartDate();
                const end = state.picker.getEndDate();
                if (start && end) {
                    state.startDate = start.getTime() * 1000000;
                    state.endDate = end.getTime() * 1000000;
                }
            } else if (!state.startDate) {
                const end = new Date();
                end.setHours(23, 59, 59, 999);
                const start = new Date();
                start.setDate(start.getDate() - 30);
                start.setHours(0, 0, 0, 0);
                state.startDate = start.getTime() * 1000000;
                state.endDate = end.getTime() * 1000000;
            }

            try {
                const [summaryRes, mutationRes] = await Promise.all([
                    axios.get('/finance/everpro-wallet/report', {
                        params: {
                            account_type: state.account,
                            start_date: state.startDate,
                            end_date: state.endDate
                        }
                    }),
                    axios.get('/finance/everpro-wallet/mutations', {
                        params: {
                            account_type: state.account,
                            start_date: state.startDate,
                            end_date: state.endDate,
                            skip: state.skip,
                            limit: state.limit
                        }
                    })
                ]);

                renderSummary(summaryRes.data.data.data);
                renderMutations(mutationRes.data.data.data);

                const page = Math.floor(state.skip / state.limit) + 1;
                document.getElementById('pagination-info').innerText = `Page ${page}`;

            } catch (e) {
                console.error(e);
                // Handle 403 or other errors
                if (e.response && e.response.status === 403) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Memuat Data',
                        text: 'Anda tidak memiliki izin untuk mengakses data ini.',
                        confirmButtonText: 'Tutup',
                        confirmButtonColor: '#6b7280', // Gray for distinct "dismiss" action
                        background: '#fff',
                        customClass: {
                            popup: 'rounded-4 shadow-sm'
                        }
                    });
                }
            } finally {
                showLoading(false);
                initIcons();
            }
        }

        function renderSummary(data) {
            if (!data) return;
            document.getElementById('stat-cod-nett').innerText = formatRupiah(data.total_cod_nett ?? 0);
            document.getElementById('stat-cashback').innerText = formatRupiah(data.total_cashback ?? 0);
            document.getElementById('stat-ongoing').innerText = formatRupiah(data.total_cod_on_going ?? 0);
            document.getElementById('stat-refund').innerText = formatRupiah(data.total_refund ?? 0);

            document.getElementById('stat-shipment-price').innerText = formatRupiah(data.total_cod_shipment_price ?? 0);
            document.getElementById('stat-cod-fee').innerText = formatRupiah(data.total_cod_fee ?? 0);
            document.getElementById('stat-noncod-cashback').innerText = formatRupiah(data.total_non_cod_cashback ?? 0);
        }

        function renderMutations(data) {
            const tbody = document.getElementById('mutation-tbody');
            tbody.innerHTML = '';
            const empty = document.getElementById('empty-state');

            if (!data || data.length === 0) {
                empty.classList.remove('d-none');
                document.getElementById('btn-next').disabled = true;
            } else {
                empty.classList.add('d-none');
                document.getElementById('btn-next').disabled = data.length < state.limit;

                data.forEach(item => {
                    const isNeg = item.amount < 0;
                    const colorClass = isNeg ? 'text-danger' : 'text-success';
                    const prefix = isNeg ? '' : '+';

                    let badgeClass = 'bg-gray-100 text-gray-500';
                    if (item.status_name === 'Sukses') badgeClass =
                        'bg-primary-light text-primary-theme fw-bold rounded-pill px-3 py-1 small';
                    else if (item.status_name === 'Gagal') badgeClass =
                        'bg-red-50 text-danger fw-bold rounded-pill px-3 py-1 small';
                    else if (item.status_name === 'Proses') badgeClass =
                        'bg-orange-50 text-warning fw-bold rounded-pill px-3 py-1 small';
                    else badgeClass = 'bg-gray-100 text-gray-500 rounded-pill px-3 py-1 small fw-bold';

                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                    <td class="ps-4 fw-medium">${formatDate(item.created_at)}</td>
                    <td><span class="badge bg-light text-dark border fw-normal text-uppercase">${item.transaction_type_name || 'Transaksi'}</span></td>
                    <td class="${colorClass} fw-bold" style="font-family: 'JetBrains Mono', monospace;">${prefix} ${formatRupiah(item.nominal)}</td>
                    <td class="text-gray-900 fw-medium" style="font-family: 'JetBrains Mono', monospace;">${formatRupiah(item.balance)}</td>
                    <td><span class="${badgeClass}">${item.status_name}</span></td>
                    <td class="pe-4 text-muted small text-truncate" style="max-width: 200px;">${item.note || '-'}</td>
                `;
                    tbody.appendChild(tr);
                });
            }
            document.getElementById('btn-prev').disabled = state.skip === 0;
        }

        function showLoading(show) {
            const loading = document.getElementById('loading-state');
            const empty = document.getElementById('empty-state');
            const tbody = document.getElementById('mutation-tbody');

            if (show) {
                loading.classList.remove('d-none');
                empty.classList.add('d-none');
                tbody.classList.add('opacity-25');
            } else {
                loading.classList.add('d-none');
                tbody.classList.remove('opacity-25');
            }
        }

        function nextPage() {
            state.skip += state.limit;
            refreshData();
        }

        function prevPage() {
            state.skip = Math.max(0, state.skip - state.limit);
            refreshData();
        }
    </script>
@endpush