@extends('template.desktop.app')

@section('title', 'Revenue Mitra')

@section('content')
    <div class="row match-height">
        <div class="col-md-4 col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Edit Revenue Mitra</h4>
                </div>
                <div class="card-body">
                    <div id="alert-container"></div>
                    <form id="mitra-form">
                        @csrf
                        <input type="hidden" name="id" id="mitra-id-input">
                        <div class="mb-1">
                            <label class="form-label">Kode</label>
                            <input type="text" id="mitra-code-display" class="form-control" readonly
                                placeholder="Belum ada mitra dipilih">
                        </div>
                        <div class="mb-1">
                            <label class="form-label">Nama</label>
                            <input type="text" id="mitra-name-display" class="form-control" readonly
                                placeholder="Belum ada mitra dipilih">
                        </div>
                        <div class="mb-1">
                            <label class="form-label">Revenue Share (%)</label>
                            <input type="number" name="revenue_share" id="mitra-revenue" class="form-control"
                                step="0.01" required>
                        </div>
                        <div class="d-flex gap-2 mt-3">
                            <button type="submit" class="btn btn-sm btn-primary">Simpan Revenue</button>
                            <button type="button" id="mitra-cancel-btn" class="btn btn-sm btn-secondary">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-8 col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4>Data Mitra</h4>
                    <div class="d-flex align-items-center gap-1">
                        <input type="text" id="search-input" class="form-control" placeholder="Cari kode atau nama...">
                    </div>
                </div>
                <div class="table-responsive text-nowrap">
                    <table class="table" id="mitra-table">
                        <thead>
                            <tr>
                                <th data-sort="code">
                                    Kode <i class="sort-icon ti tabler-arrows-sort" style="font-size: inherit;"></i>
                                </th>
                                <th data-sort="name">
                                    Nama <i class="sort-icon ti tabler-arrows-sort" style="font-size: inherit;"></i>
                                </th>
                                <th data-sort="email">
                                    Email <i class="sort-icon ti tabler-arrows-sort" style="font-size: inherit;"></i>
                                </th>
                                <th data-sort="revenue_share">
                                    Revenue (%) <i class="sort-icon ti tabler-arrows-sort" style="font-size: inherit;"></i>
                                </th>
                            </tr>
                        </thead>

                        <tbody></tbody>
                    </table>
                    <div class="d-flex justify-content-between align-items-center mt-2 p-5">
                        <span id="pagination-info">Menampilkan 0-0 dari 0</span>
                        <ul class="pagination pagination-sm mb-0" id="pagination"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        let currentPage = 1;
        let searchQuery = '';
        let selectedMitraId = null;
        let sortBy = 'id';
        let sortDir = 'desc';
        let debounceTimeout = null;

        function showSkeleton() {
            const tbody = document.querySelector('#mitra-table tbody');
            tbody.innerHTML = '';
            for (let i = 0; i < 5; i++) {
                tbody.innerHTML += `
            <tr>
                <td colspan="4">
                    <div class="placeholder-glow">
                        <span class="placeholder col-12"></span>
                    </div>
                </td>
            </tr>`;
            }
        }

        function updateSaveButtonState(items) {
            const saveBtn = document.querySelector('#mitra-form button[type="submit"]');
            saveBtn.disabled = !items.length || !selectedMitraId;
        }

        function updateSortIndicators() {
            document.querySelectorAll('#mitra-table thead th[data-sort]').forEach(th => {
                const field = th.getAttribute('data-sort');
                const icon = th.querySelector('.sort-icon');
                icon.className = 'sort-icon ti tabler-arrows-sort';
                icon.style.fontSize = 'inherit';
                if (field === sortBy) {
                    icon.className = sortDir === 'asc' ? 'sort-icon ti tabler-arrow-narrow-up' :
                        'sort-icon ti tabler-arrow-narrow-down';
                }
            });
        }

        function fetchMitra(page = 1) {
            showSkeleton();
            axios.get("{{ route('admin.revenue.mitra.data') }}", {
                params: {
                    page,
                    search: searchQuery,
                    sort_by: sortBy,
                    sort_dir: sortDir
                }
            }).then(res => {
                const data = res.data;
                renderTable(data.data);
                renderPagination(data.current_page, data.last_page, data.total, data.from, data.to);
                updateSortIndicators();
            }).catch(() => {
                document.querySelector('#mitra-table tbody').innerHTML =
                    `<tr><td colspan="4" class="text-center text-danger">Gagal memuat data</td></tr>`;
                updateSaveButtonState([]);
            });
        }

        function renderTable(items) {
            const tbody = document.querySelector('#mitra-table tbody');
            tbody.innerHTML = '';
            if (!items.length) {
                tbody.innerHTML = `<tr><td colspan="4" class="text-center">Tidak ada data</td></tr>`;
                updateSaveButtonState(items);
                return;
            }
            items.forEach(mitra => {
                const row = document.createElement('tr');
                row.innerHTML = `
            <td>${mitra.code}</td>
            <td>${mitra.name}</td>
            <td>${mitra.email ?? '-'}</td>
            <td>${mitra.revenue_share ?? 0}</td>`;
                row.style.cursor = 'pointer';
                row.addEventListener('click', function() {
                    document.querySelectorAll('#mitra-table tbody tr').forEach(r => r.classList.remove(
                        'table-active'));
                    this.classList.add('table-active');
                    selectedMitraId = mitra.id;
                    document.getElementById('mitra-id-input').value = mitra.id;
                    document.getElementById('mitra-code-display').value = mitra.code;
                    document.getElementById('mitra-name-display').value = mitra.name;
                    document.getElementById('mitra-revenue').value = mitra.revenue_share ?? 0;
                    updateSaveButtonState(items);
                });
                tbody.appendChild(row);
            });
            updateSaveButtonState(items);
        }

        function renderPagination(current, totalPages, totalItems, fromItem, toItem) {
            const pagination = document.getElementById('pagination');
            const paginationInfo = document.getElementById('pagination-info');
            pagination.innerHTML = '';
            paginationInfo.textContent = `Menampilkan ${fromItem}-${toItem} dari ${totalItems}`;
            pagination.innerHTML += `
        <li class="page-item ${current === 1 ? 'disabled' : ''}">
            <a class="page-link" href="#" data-page="1">&laquo;</a>
        </li>
        <li class="page-item ${current === 1 ? 'disabled' : ''}">
            <a class="page-link" href="#" data-page="${current - 1}">&lt;</a>
        </li>`;
            if (totalPages <= 7) {
                for (let i = 1; i <= totalPages; i++) {
                    const active = i === current ? 'active' : '';
                    pagination.innerHTML += `
                <li class="page-item ${active}">
                    <a class="page-link" href="#" data-page="${i}">${i}</a>
                </li>`;
                }
            } else {
                pagination.innerHTML += `
            <li class="page-item ${current === 1 ? 'active' : ''}">
                <a class="page-link" href="#" data-page="1">1</a>
            </li>`;
                if (current > 3) {
                    pagination.innerHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                }
                let startPage = Math.max(2, current - 1);
                let endPage = Math.min(totalPages - 1, current + 1);
                for (let i = startPage; i <= endPage; i++) {
                    const active = i === current ? 'active' : '';
                    pagination.innerHTML += `
                <li class="page-item ${active}">
                    <a class="page-link" href="#" data-page="${i}">${i}</a>
                </li>`;
                }
                if (current < totalPages - 2) {
                    pagination.innerHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                }
                pagination.innerHTML += `
            <li class="page-item ${current === totalPages ? 'active' : ''}">
                <a class="page-link" href="#" data-page="${totalPages}">${totalPages}</a>
            </li>`;
            }
            pagination.innerHTML += `
                <li class="page-item ${current === totalPages ? 'disabled' : ''}">
                    <a class="page-link" href="#" data-page="${current + 1}">&gt;</a>
                </li>
                <li class="page-item ${current === totalPages ? 'disabled' : ''}">
                    <a class="page-link" href="#" data-page="${totalPages}">&raquo;</a>
                </li>`;
            pagination.querySelectorAll('a[data-page]').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetPage = parseInt(this.getAttribute('data-page'));
                    if (!isNaN(targetPage) && targetPage > 0 && targetPage <= totalPages) {
                        currentPage = targetPage;
                        fetchMitra(targetPage);
                    }
                });
            });
        }

        function showAlert(type, message) {
            const container = document.querySelector('#mitra-form');

            const existingAlerts = container.querySelectorAll('.alert');
            existingAlerts.forEach(a => a.remove());

            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show position-relative`;
            alertDiv.role = 'alert';
            alertDiv.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                <div class="progress position-absolute bottom-0 start-0 w-100" style="height: 3px;">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%"></div>
                </div>
            `;
            container.prepend(alertDiv);

            const progressBar = alertDiv.querySelector('.progress-bar');
            let width = 100;
            const interval = 50;
            const duration = 5000;
            const decrement = (interval / duration) * 100;

            const progressInterval = setInterval(() => {
                width -= decrement;
                if (width <= 0) {
                    clearInterval(progressInterval);
                    alertDiv.remove();
                } else {
                    progressBar.style.width = width + '%';
                }
            }, interval);
        }



        function submitMitra(e) {
            e.preventDefault();
            if (!selectedMitraId) return;

            const revenue = parseFloat(document.getElementById('mitra-revenue').value) || 0;

            axios.put(`/admin/revenue/mitra/update/${selectedMitraId}`, {
                    revenue_share: revenue
                })
                .then(res => {
                    showAlert('success', res.data.message ?? 'Revenue berhasil diperbarui');
                    fetchMitra(currentPage);
                    document.getElementById('mitra-form').reset();
                    selectedMitraId = null;
                    document.querySelectorAll('#mitra-table tbody tr').forEach(r => r.classList.remove('table-active'));
                    document.querySelector('#mitra-form button[type="submit"]').disabled = true;
                })
                .catch(err => {
                    showAlert('danger', err.response?.data?.message ?? 'Terjadi kesalahan server');
                });
        }



        document.getElementById('mitra-cancel-btn').addEventListener('click', function() {
            document.getElementById('mitra-form').reset();
            document.getElementById('mitra-id-input').value = '';
            document.getElementById('mitra-code-display').value = '';
            document.getElementById('mitra-name-display').value = '';
            document.getElementById('mitra-revenue').value = '';
            selectedMitraId = null;
            document.querySelectorAll('#mitra-table tbody tr').forEach(r => r.classList.remove('table-active'));
            updateSaveButtonState([]);
        });

        document.addEventListener('DOMContentLoaded', function() {
            fetchMitra();
            document.getElementById('mitra-form').addEventListener('submit', submitMitra);
            document.getElementById('search-input').addEventListener('keyup', function() {
                clearTimeout(debounceTimeout);
                debounceTimeout = setTimeout(() => {
                    searchQuery = this.value;
                    fetchMitra(1);
                }, 400);
            });
            document.querySelectorAll('#mitra-table thead th[data-sort]').forEach(th => {
                th.style.cursor = 'pointer';
                th.addEventListener('click', function() {
                    const field = this.getAttribute('data-sort');
                    if (sortBy === field) {
                        sortDir = sortDir === 'asc' ? 'desc' : 'asc';
                    } else {
                        sortBy = field;
                        sortDir = 'asc';
                    }
                    fetchMitra(1);
                });
            });
        });
    </script>
@endpush