@extends('template.desktop.app')

@section('content')
    <div class="alert alert-warning alert-dismissible d-flex" role="alert">
        <span class="alert-icon rounded">
            <i class="icon-base ti tabler-alert-hexagon icon-md w-px-30"></i>
        </span>
        <div class="d-flex flex-column ps-1">
            <h5 class="alert-heading mb-2 text-black">Perhatian</h5>
            <p class="mb-0 text-black">
                Ketika orderan dicentang dan dikirim ke <strong>Everpro</strong>, statusnya akan <strong>otomatis
                    disetujui</strong> (approved). Pastikan Anda telah memeriksa data sebelum melanjutkan.
            </p>
        </div>
        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <div class="card">
        <div class="card-datatable table-responsive">
            <div class="dt-container dt-bootstrap5 dt-empty-footer">
                <div class="row mx-3 my-0 justify-content-between">
                    <div class="d-md-flex justify-content-between align-items-center dt-layout-start col-md-auto me-auto">
                        <div class="dt-search">
                            <input type="search" class="form-control ms-0" id="orderSearch" placeholder="Search Order">
                        </div>
                    </div>
                    <div
                        class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto ms-auto gap-md-2 gap-0">
                        <div class="dt-buttons btn-group flex-wrap">
                            <div class="btn-group">
                                <button id="inputEverproBtn"
                                    class="btn buttons-collection btn-label-primary btn-label-primary" type="button">
                                    <span class="d-flex align-items-center gap-1">
                                        <i class="icon-base ti tabler-transfer-in icon-xs"></i>
                                        <span class="d-none d-sm-inline-block">Input Everpro</span>
                                    </span>
                                </button>

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

                <ul class="nav nav-tabs mt-3 mb-3" id="paymentTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" data-method="" type="button">Semua</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-method="COD" type="button">COD</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-method="BANK TRANSFER" type="button">Bank Transfer</button>
                    </li>
                </ul>

                <div class="justify-content-between dt-layout-table">
                    <div class="d-md-flex justify-content-between align-items-center dt-layout-full table-responsive">
                        <table class="datatables-order table border-top dataTable" id="ordersTable" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th><input class="form-check-input" type="checkbox"></th>
                                    <th>Order</th>
                                    <th>Date</th>
                                    <th>Customer</th>
                                    <th>Payment</th>
                                    <th>Status</th>
                                    <th>Method</th>
                                    <th>Bukti Transfer</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="ordersBody">
                                <tr>
                                    <td colspan="9" class="text-center">Loading...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row mx-3 justify-content-between mt-3">
                    <div class="col-auto" id="paginationInfo"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@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>
        let selectedMethod = '';

        function renderTable(orders) {
            const tbody = document.getElementById("ordersBody");
            const thead = document.querySelector("#ordersTable thead tr");
            tbody.innerHTML = '';

            const showBuktiTransfer = (selectedMethod !== 'COD');

            const headers = `
            <th><input type="checkbox" class="form-check-input" id="selectAllCheckbox"></th>
            <th>Order ID / Tanggal</th>
            <th>Deal Maker (CS)</th>
            <th>Customer</th>
            <th>Jumlah Pembayaran</th>
            <th>Jumlah Pembayaran EVP</th>
            <th>Warehouse</th>
            ${showBuktiTransfer ? '<th>Bukti Transfer</th>' : ''}
            <th>Actions</th>
        `;
            thead.innerHTML = headers;

            if (orders.length === 0) {
                tbody.innerHTML =
                    `<tr><td colspan="${showBuktiTransfer ? 9 : 8}" class="text-center">Tidak ada data</td></tr>`;
                return;
            }

            orders.forEach(order => {
                const modalId = `modalBuktiTransfer-${order.id}`;
                const imageUrl = order.transfer_proof ? `${order.transfer_proof}` : null;

                const buktiTransferButton = imageUrl ?
                    `<button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#${modalId}">Lihat Bukti</button>` :
                    `<span class="text-muted">-</span>`;

                const modal = imageUrl && showBuktiTransfer ? `
                <div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}Label" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="${modalId}Label">Bukti Transfer - #${order.order_code}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                            </div>
                            <div class="modal-body text-center">
                                <img src="${imageUrl}" alt="Bukti Transfer" class="img-fluid rounded">
                            </div>
                            <div class="modal-footer">
                                <a href="${imageUrl}" class="btn btn-secondary" target="_blank">Buka di Tab Baru</a>
                                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Tutup</button>
                            </div>
                        </div>
                    </div>
                </div>
            ` : '';

                const originalTotal = parseInt(order.original_total.replace(/\./g, '')) || 0;
                const generatedTotal = parseInt(order.generated_total.replace(/\./g, '')) || 0;
                const difference = originalTotal - generatedTotal;
                const isPositive = difference > 0;

                const diffBadge = `
                <span class="badge bg-${isPositive ? 'success' : 'danger'}">
                    ${isPositive ? '+' : '-'} Rp ${Math.abs(difference).toLocaleString('id-ID')}
                </span>
            `;

                const warehouseType = order.distributor?.is_mitra ?
                    'Mitra' : (order.distributor?.is_cod ? 'Agen' : 'Pusat');

                const row = `
                <tr>
                    <td><input type="checkbox" class="form-check-input rowCheckbox" value="${order.id}"></td>
                    <td>
                        <strong>#${order.order_code}</strong><br>
                        <small>${order.created_at}</small>
                    </td>
                    <td>${order.customer_service?.customer_service?.full_name ?? '-'}</td>
                    <td>${order.receiver_name}</td>
                    <td>
                        Rp ${order.original_total}<br>
                        <small>${order.payment_method}</small>
                    </td>
                    <td>
                        Rp ${order.generated_total}<br>
                        ${diffBadge}
                    </td>
                    <td>${warehouseType}</td>
                    ${showBuktiTransfer ? `<td>${buktiTransferButton}</td>` : ''}
                    <td>
                        <div class="d-flex gap-2">
                            <a href="/admin/temp/orders/${order.id}/detail" class="btn btn-sm btn-primary">Detail</a>
                            <button class="btn btn-sm btn-danger" onclick="rejectOrder(${order.id})">Tolak</button>
                        </div>
                    </td>
                </tr>
                ${modal}
            `;
                tbody.insertAdjacentHTML('beforeend', row);
            });

            // Checkbox select all
            document.getElementById('selectAllCheckbox').addEventListener('change', function() {
                document.querySelectorAll('.rowCheckbox').forEach(cb => cb.checked = this.checked);
            });
        }

        function fetchOrdersFromAPI() {
            const searchValue = document.getElementById('orderSearch').value;

            axios.get('/admin/temp/orders/fetch', {
                params: {
                    search: searchValue,
                    method: selectedMethod
                }
            }).then(response => {
                renderTable(response.data.orders);
            }).catch(error => {
                console.error(error);
            });
        }

        function rejectOrder(orderId) {
            Swal.fire({
                title: 'Yakin?',
                text: "Pesanan akan ditolak!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, tolak!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    axios.post(`/admin/temp/orders/${orderId}/reject`, {}, {
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                    'content')
                            }
                        })
                        .then(() => {
                            Swal.fire('Ditolak!', 'Pesanan berhasil ditolak.', 'success');
                            fetchOrdersFromAPI();
                        })
                        .catch(() => {
                            Swal.fire('Gagal!', 'Terjadi kesalahan saat menolak pesanan.', 'error');
                        });
                }
            });
        }


        document.addEventListener('DOMContentLoaded', () => {
            fetchOrdersFromAPI();

            // Tab switch
            document.querySelectorAll('#paymentTab .nav-link').forEach(tab => {
                tab.addEventListener('click', function() {
                    document.querySelectorAll('#paymentTab .nav-link').forEach(t => t.classList
                        .remove('active'));
                    this.classList.add('active');
                    selectedMethod = this.getAttribute('data-method');
                    fetchOrdersFromAPI();
                });
            });
            document.getElementById('inputEverproBtn').addEventListener('click', async function() {
                const selectedIds = Array.from(document.querySelectorAll('.rowCheckbox:checked')).map(
                    cb => cb.value);

                if (selectedIds.length === 0) {
                    return Swal.fire('Peringatan', 'Silakan pilih minimal 1 order.', 'warning');
                }

                Swal.fire({
                    title: 'Memproses Order...',
                    html: 'Sedang mengirim ke Everpro. <br><b>Mohon tunggu tanpa menutup halaman ini.</b>',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => Swal.showLoading()
                });

                let success = [];
                let failed = [];

                for (let i = 0; i < selectedIds.length; i++) {
                    const orderId = selectedIds[i];
                    try {
                        const response = await axios.post('/admin/temp/orders/store/everpro', {
                            order_id: orderId
                        });

                        if (response.data.status == 'success') {
                            success.push(`#${orderId}`);
                        } else {
                            failed.push(`#${orderId}: ${response.data.message || 'Gagal tanpa pesan'}`);
                        }
                    } catch (err) {
                        failed.push(`#${orderId}: ${err.message || 'Request error'}`);
                    }
                }

                Swal.close();

                let html = `<p><strong>Berhasil:</strong> ${success.length}</p>`;
                if (failed.length > 0) {
                    html +=
                        `<p class="text-danger"><strong>Gagal:</strong> ${failed.length}</p><ul class="text-start">`;
                    failed.forEach(msg => html += `<li>${msg}</li>`);
                    html += '</ul>';
                }

                Swal.fire({
                    icon: failed.length ? 'warning' : 'success',
                    title: 'Selesai',
                    html: html,
                    width: 600
                });

                fetchOrdersFromAPI();
            });
        });

        // Debounce pencarian
        let searchTimeout;
        document.getElementById('orderSearch').addEventListener('input', () => {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(fetchOrdersFromAPI, 300);
        });
    </script>
@endpush