@extends('template.desktop.app')
@section('title', 'Detail Customer Service')

@section('content')

    <div class="row">
        <div class="col-xl-4 col-lg-5 order-1 order-md-0">
            <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">
                            <img class="img-fluid rounded mb-4"
                                src="https://demos.pixinvent.com/vuexy-html-laravel-admin-template/demo/assets/img/avatars/1.png"
                                height="120" width="120">
                            <div class="user-info text-center">
                                <h5 id="cs-name">-</h5>
                                <span class="badge bg-label-secondary" id="cs-role">-</span>
                            </div>
                            <div class="user-info text-center">
                                <h5 class="mb-2">
                                    Saldo Rp {{ number_format($customerService->user->balance->balance ?? 0, 0, ',', '.') }}
                                </h5>

                                <button type="button" class="btn btn-sm btn-outline-danger waves-effect"
                                    data-bs-toggle="modal" data-bs-target="#withdrawModal">
                                    <i class="ti tabler-cash-banknote me-1"></i>
                                    Withdraw
                                </button>
                            </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="ti tabler-package icon-lg"></i>
                                </div>
                            </div>
                            <div>
                                <h5 class="mb-0" id="total-box">0</h5>
                                <span>Total Box</span>
                            </div>
                        </div>

                        <div class="d-flex align-items-center gap-4">
                            <div class="avatar">
                                <div class="avatar-initial bg-label-primary rounded">
                                    <i class="ti tabler-box icon-lg"></i>
                                </div>
                            </div>
                            <div>
                                <h5 class="mb-0" id="total-sachet">0</h5>
                                <span>Total Sachet</span>
                            </div>
                        </div>
                    </div>

                    <h5 class="pb-4 border-bottom mb-4">Detail CS</h5>

                    <ul class="list-unstyled mb-0">
                        <li class="mb-2"><span class="h6">Username:</span> <span id="cs-username">-</span></li>
                        <li class="mb-2"><span class="h6">Email:</span> <span id="cs-email">-</span></li>
                        <li class="mb-2"><span class="h6">Phone:</span> <span id="cs-phone">-</span></li>
                        <li class="mb-2"><span class="h6">Salary:</span> <span id="cs-salary">-</span></li>
                        <li class="mb-2"><span class="h6">Target Box:</span> <span id="cs-target">-</span></li>
                        <li class="mb-2"><span class="h6">Periode:</span> <span id="cs-period">-</span></li>
                        <li class="mb-2"><span class="h6">Order Source:</span> <span id="cs-source">-</span></li>
                    </ul>

                </div>
            </div>

        </div>
        <div class="col-xl-8 col-lg-7 order-0 order-md-1">

            <div class="card mb-6">
                <h5 class="card-header">Riwayat Saldo CS</h5>
                <div class="card-body pt-1">

                    <div class="table-responsive">
                        <div class="table-responsive">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th class="py-3 px-4" style="min-width:180px;">Tanggal</th>
                                            <th class="py-3 px-4" style="min-width:120px;">Tipe</th>
                                            <th class="py-3 px-4" style="min-width:100px;">Arah</th>
                                            <th class="py-3 px-4 text-end" style="min-width:160px;">Nominal</th>
                                            <th class="py-3 px-4" style="min-width:120px;">Status</th>
                                            <th class="py-3 px-4" style="min-width:220px;">Catatan</th>
                                        </tr>
                                    </thead>
                                    <tbody id="transaction-history">
                                        <tr>
                                            <td colspan="6" class="text-center text-muted py-5">
                                                Memuat data...
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>

                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <small id="pagination-info" class="text-muted"></small>
                            <div>
                                <button class="btn btn-sm btn-outline-secondary" id="prev-page">Prev</button>
                                <button class="btn btn-sm btn-outline-secondary" id="next-page">Next</button>
                            </div>
                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>

    <div class="modal fade" id="withdrawModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Withdraw Saldo CS</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="mb-3">
                        <label class="form-label">Jumlah Withdraw</label>
                        <input type="number" class="form-control" id="withdraw-amount" placeholder="Masukkan nominal">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Catatan</label>
                        <textarea class="form-control" id="withdraw-notes" rows="3" placeholder="Opsional"></textarea>
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button class="btn btn-danger" id="btn-submit-withdraw">
                        <span id="withdraw-btn-text">
                            <i class="ti tabler-cash-banknote me-1"></i>
                            Proses Withdraw
                        </span>
                        <span id="withdraw-btn-loading" class="d-none">
                            <span class="spinner-border spinner-border-sm me-1"></span>
                            Memproses...
                        </span>
                    </button>

                </div>

            </div>
        </div>
    </div>

    <div class="modal fade" id="infoModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="infoModalTitle">Informasi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <p id="infoModalMessage" class="mb-0"></p>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-primary" data-bs-dismiss="modal">
                        OK
                    </button>
                </div>

            </div>
        </div>
    </div>
    <style>
        .modal-backdrop.show {
            opacity: 0.85;
            background-color: rgba(0, 0, 0, 0.9);
        }

        .modal-backdrop {
            backdrop-filter: blur(3px);
        }
    </style>

    <style>
        .modal.fade .modal-dialog {
            transform: scale(0.96);
            transition: transform .15s ease-out;
        }

        .modal.show .modal-dialog {
            transform: scale(1);
        }
    </style>

@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            function fillText(id, value) {
                const el = document.getElementById(id)
                if (el) el.innerText = value ?? '-'
            }

            function fillHTML(id, html) {
                const el = document.getElementById(id)
                if (el) el.innerHTML = html ?? '-'
            }

            const csId = {{ $id }}

            axios.get(`/customer-services/${csId}`)
                .then(res => {
                    const data = res.data.data
                    const cs = data.cs
                    const user = cs.user
                    const summary = data.summary
                    const period = data.period
                    const source = data.order_sources

                    fillText('cs-name', cs.name)
                    fillText('cs-role', user.role.replace('_', ' ').toUpperCase())

                    fillText('total-box', summary.total_box)
                    fillText('total-sachet', summary.total_sachet)

                    fillText('cs-username', user.username)
                    fillText('cs-email', user.email)
                    fillText('cs-phone', cs.phone)

                    fillText('cs-salary', 'Rp ' + new Intl.NumberFormat('id-ID').format(cs.salary))
                    fillText('cs-target', cs.target_boxes + ' Box')

                    fillText('cs-period', period.start + ' - ' + period.end)
                    fillText('cs-source', `Everpro: ${source.everpro}, Marketplace: ${source.marketplace}`)
                })
                .catch(err => {
                    console.error(err)
                    fillText('cs-name', 'Gagal memuat data')
                })
        })
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const csId = {{ $id }}
            let currentPage = 1

            function loadTransactions(page = 1) {
                axios.get(`/customer-services/${csId}/transactions?page=${page}`)
                    .then(res => {
                        const tbody = document.getElementById('transaction-history')
                        const rows = res.data.data.transactions
                        const pagination = res.data.data.pagination

                        if (!rows.length) {
                            tbody.innerHTML = `
                        <tr>
                            <td colspan="6" class="text-center text-muted">
                                Tidak ada riwayat transaksi
                            </td>
                        </tr>`
                            return
                        }

                        tbody.innerHTML = rows.map(trx => {
                            const badgeStatus = {
                                pending: 'warning',
                                process: 'info',
                                approved: 'success',
                                rejected: 'danger'
                            } [trx.status]

                            const badgeDirection = trx.direction === 'credit' ?
                                '<span class="badge bg-label-success">Credit</span>' :
                                '<span class="badge bg-label-danger">Debit</span>'

                            return `
                        <tr>
                            <td>${trx.transaction_date}</td>
                            <td>${trx.type}</td>
                            <td>${badgeDirection}</td>
                            <td>Rp ${new Intl.NumberFormat('id-ID').format(trx.amount)}</td>
                            <td><span class="badge bg-label-${badgeStatus}">${trx.status}</span></td>
                            <td>${trx.notes ?? '-'}</td>
                        </tr>
                    `
                        }).join('')

                        document.getElementById('pagination-info').innerText =
                            `Page ${pagination.current_page} of ${pagination.last_page}`

                        document.getElementById('prev-page').disabled = pagination.current_page === 1
                        document.getElementById('next-page').disabled =
                            pagination.current_page === pagination.last_page

                        currentPage = pagination.current_page
                    })
            }

            document.getElementById('prev-page').onclick = () => loadTransactions(currentPage - 1)
            document.getElementById('next-page').onclick = () => loadTransactions(currentPage + 1)

            loadTransactions()
        })
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {

            const btnSubmit = document.getElementById('btn-submit-withdraw')
            const btnText = document.getElementById('withdraw-btn-text')
            const btnLoading = document.getElementById('withdraw-btn-loading')

            const withdrawModalEl = document.getElementById('withdrawModal')
            const infoModalEl = document.getElementById('infoModal')

            function setLoading(state) {
                btnSubmit.disabled = state
                btnText.classList.toggle('d-none', state)
                btnLoading.classList.toggle('d-none', !state)
            }

            function showInfoModal(title, message) {
                document.getElementById('infoModalTitle').innerText = title
                document.getElementById('infoModalMessage').innerText = message
                new bootstrap.Modal(infoModalEl).show()
            }

            btnSubmit.addEventListener('click', () => {
                const amount = document.getElementById('withdraw-amount').value
                const notes = document.getElementById('withdraw-notes').value

                if (!amount || amount <= 0) {
                    showInfoModal('Validasi Gagal', 'Nominal withdraw tidak valid')
                    return
                }

                setLoading(true)

                axios.post(`/customer-services/{{ $id }}/withdraw`, {
                        amount,
                        notes
                    })
                    .then(() => {
                        const withdrawModal = bootstrap.Modal.getInstance(withdrawModalEl)
                        if (withdrawModal) withdrawModal.hide()

                        setTimeout(() => {
                            showInfoModal(
                                'Withdraw Berhasil',
                                'Saldo berhasil ditarik dan langsung disetujui.'
                            )
                        }, 200)

                        setTimeout(() => location.reload(), 1300)
                    })
                    .catch(err => {
                        const message =
                            err.response?.data?.message ??
                            'Terjadi kesalahan saat melakukan withdraw'

                        const withdrawModal = bootstrap.Modal.getInstance(withdrawModalEl)
                        if (withdrawModal) withdrawModal.hide()

                        setTimeout(() => {
                            showInfoModal('Withdraw Gagal', message)
                        }, 200)
                    })
                    .finally(() => {
                        setLoading(false)
                    })
            })

        })
    </script>
@endpush