@extends('mobile_layouts.app')
@section('menu_bar')
    @include('mobile_layouts.partials.menu_bar')
@endsection
@section('header')
    <div class="header fixed-top">
        <div class="left">
            <a href="{{ route('customer_services.dashboard.index') }}" class="icon back-btn">
                <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.88986 12.2951L1.60986 7.00008L6.88986 1.70508" stroke="#121927" stroke-width="1.5"
                        stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
        <h3>Data Inputan Order</h3>
        <div class="right">
            <a href="#" data-bs-toggle="offcanvas" class="icon noti-box">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 6.43994V9.76994" stroke="#121927" stroke-width="1.5" stroke-miterlimit="10"
                        stroke-linecap="round"></path>
                    <path
                        d="M12.0199 2C8.3399 2 5.3599 4.98 5.3599 8.66V10.76C5.3599 11.44 5.0799 12.46 4.7299 13.04L3.4599 15.16C2.6799 16.47 3.2199 17.93 4.6599 18.41C9.4399 20 14.6099 20 19.3899 18.41C20.7399 17.96 21.3199 16.38 20.5899 15.16L19.3199 13.04C18.9699 12.46 18.6899 11.43 18.6899 10.76V8.66C18.6799 5 15.6799 2 12.0199 2Z"
                        stroke="#121927" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"></path>
                    <path
                        d="M15.3299 18.8198C15.3299 20.6498 13.8299 22.1498 11.9999 22.1498C11.0899 22.1498 10.2499 21.7698 9.64992 21.1698C9.04992 20.5698 8.66992 19.7298 8.66992 18.8198"
                        stroke="#121927" stroke-width="1.5" stroke-miterlimit="10"></path>
                </svg>
            </a>
        </div>
    </div>
@endsection

@section('content')
    @include('_cs.mobile.temp_orders.css')
    <!-- Search Box -->
    <div class="search-box flex items-center gap-2 mb-3">
        <a href="#" class="icon-left">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <g opacity="0.5">
                    <path
                        d="M9.58317 17.4998C13.9554 17.4998 17.4998 13.9554 17.4998 9.58317C17.4998 5.21092 13.9554 1.6665 9.58317 1.6665C5.21092 1.6665 1.6665 5.21092 1.6665 9.58317C1.6665 13.9554 5.21092 17.4998 9.58317 17.4998Z"
                        stroke="#121927" stroke-width="1.5" />
                    <path d="M18.3332 18.3332L16.6665 16.6665" stroke="#121927" stroke-width="1.5" />
                </g>
            </svg>
        </a>
        <input type="text" class="search-field form-control flex-grow" placeholder="Search..." id="searchInput">
        <span class="right-icon cursor-pointer" onclick="toggleFilterSidebar()" title="Filter">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M8.60851 13.8269H3.35791" stroke="#2869FE" stroke-width="1.5" />
                <path d="M10.9507 5.75072H16.2013" stroke="#2869FE" stroke-width="1.5" />
                <path
                    d="M7.27207 5.70521C7.27207 4.6255 6.39027 3.75 5.30278 3.75C4.2153 3.75 3.3335 4.6255 3.3335 5.70521C3.3335 6.78492 4.2153 7.66042 5.30278 7.66042C6.39027 7.66042 7.27207 6.78492 7.27207 5.70521Z"
                    stroke="#2869FE" stroke-width="1.5" />
                <path
                    d="M16.6666 13.7951C16.6666 12.7153 15.7855 11.8398 14.698 11.8398C13.6098 11.8398 12.728 12.7153 12.728 13.7951C12.728 14.8748 13.6098 15.7503 14.698 15.7503C15.7855 15.7503 16.6666 14.8748 16.6666 13.7951Z"
                    stroke="#2869FE" stroke-width="1.5" />
            </svg>
        </span>
    </div>

    <!-- Filter Sidebar -->
    <div id="filterSidebar"
        style="position: fixed; right: -300px; top: 0; width: 300px; height: 100%; background: #fff; box-shadow: -2px 0 10px rgba(0,0,0,0.1); padding: 20px; transition: right 0.3s; z-index: 1050;">
        <h5>Filter</h5>
        <label class="form-label">Status</label>
        <select id="statusFilter" class="form-select mb-3">
            <option value="">Semua</option>
            <option value="COMPLETED">Completed</option>
            <option value="ONGOING TO RECEIVER">Ongoing to Receiver</option>
            <option value="REJECTED">Rejected</option>
            <option value="ARRIVED AT DESTINATION CITY">Arrived at Destination City</option>
            <option value="IN PROCESS">In Process</option>
            <option value="WAITING FOR DROP OFF">Waiting for Drop Off</option>
            <option value="IN PROCESS RETURN">In Process Return</option>
            <option value="RETURN">Return</option>
            <option value="CANCELED">Canceled</option>
        </select>

        <label class="form-label">Rentang Tanggal</label>
        <input type="date" id="startDate" class="form-control mb-2">
        <input type="date" id="endDate" class="form-control mb-3">

        <button class="btn btn-primary w-100 mb-2" onclick="applyFilters()">Terapkan</button>
        <button class="btn btn-secondary w-100" onclick="resetFilters()">Reset</button>
    </div>

    <!-- List -->
    <div class="list-app mt-24" id="listApp"></div>

    <!-- Axios CDN -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        const listApp = document.getElementById('listApp');
        const searchInput = document.getElementById('searchInput');

        function toggleFilterSidebar() {
            const sidebar = document.getElementById('filterSidebar');
            sidebar.style.right = sidebar.style.right === '0px' ? '-300px' : '0px';
        }

        function formatTanggalIndo(tanggalString) {
            if (!tanggalString) return '-';
            const tanggal = new Date(tanggalString);
            const pad = num => String(num).padStart(2, '0');
            return `${pad(tanggal.getDate())}/${pad(tanggal.getMonth() + 1)}/${tanggal.getFullYear()} ${pad(tanggal.getHours())}:${pad(tanggal.getMinutes())}`;
        }

        function formatCurrency(value) {
            return value ? new Intl.NumberFormat('id-ID').format(value) : '0';
        }

        function sanitizePhone(phone) {
            const cleaned = phone.replace(/\D/g, '');
            return cleaned.startsWith('0') ? '62' + cleaned.substring(1) : cleaned;
        }

        function renderSkeleton(count = 3) {
            let skeletonHTML = '';
            for (let i = 0; i < count; i++) {
                skeletonHTML += `
            <div class="box-app mb-3">
                <div class="info-box d-flex align-items-center">
                    <div class="logo shimmer" style="width: 50px; height: 50px; border-radius: 50%; background: #eee;"></div>
                    <div class="content ms-3" style="flex: 1;">
                        <div class="shimmer mb-2" style="height: 16px; width: 60%; background: #eee;"></div>
                        <div class="shimmer" style="height: 14px; width: 40%; background: #eee;"></div>
                    </div>
                </div>
            </div>`;
            }
            listApp.innerHTML = skeletonHTML;
        }

        function renderOrders(data) {
    if (data.length === 0) {
        listApp.innerHTML = '<p class="text-center text-muted">Belum ada orderan.</p>';
        return;
    }

    let html = '';
    data.forEach(order => {
        const formattedDate = formatTanggalIndo(order.created_at);
        const awbInfo = order.awb_number ? `<small class="text-muted d-block">Resi: ${order.awb_number}</small>` : '';
        const phoneLink = order.receiver.phone 
            ? `<a href="https://wa.me/${sanitizePhone(order.receiver.phone)}" target="_blank" class="ms-2" title="Chat WhatsApp">
                    <img src="https://img.icons8.com/color/20/000000/whatsapp--v1.png" alt="WhatsApp Icon"/>
               </a>` 
            : '';

        html += `
        <div class="box-app mb-3 p-3 border rounded">
            <div class="d-flex justify-content-between align-items-start mb-1">
                <div class="text-start">
                    <div class="mb-1">
                        <span class="badge light-primary badge-md">${order.status}</span>
                        <span class="badge light-warning badge-md">${order.payment_method}</span>
                    </div>
                    ${awbInfo}
                </div>
                <div class="text-end">
                    <div class="fw-semibold text-dark">#${order.reference_number}</div>
                    <div class="small text-muted">${formattedDate}</div>
                </div>
            </div>

            <div class="mb-2">
                <div class="fw-bold text-dark d-flex align-items-center">
                    ${order.receiver.name}
                    ${phoneLink}
                </div>
                <div class="small text-muted">${order.sku ?? '-'}</div>
            </div>

            <div class="p-2 rounded bg-light border mb-2 small">
                <div class="row row-cols-2 g-2">
                    <div class="col">
                        <div class="text-dark-4">Total Pembayaran</div>
                        <div class="fw-bold text-dark">Rp ${formatCurrency(order.total_payment)}</div>
                    </div>
                    <div class="col">
                        <div class="text-dark-4">Ongkos Kirim</div>
                        <div class="fw-bold text-success">Rp ${formatCurrency(order.shipping_cost)}</div>
                    </div>
                    <div class="col">
                        <div class="text-dark-4">Ekspedisi</div>
                        <div class="fw-bold text-info">${order.logistic_name ?? '-'} (${order.rate_name ?? '-'})</div>
                    </div>
                    <div class="col">
                        <div class="text-dark-4">Cashback</div>
                        <div class="fw-bold text-warning">Rp ${formatCurrency(order.cashback)}</div>
                    </div>
                </div>
            </div>

            <div class="row row-cols-2 g-2 small">
                <div class="col">
                    <strong>Pengirim:</strong>
                    <div class="text-dark-4">
                        <b>${order.distributor.name ?? '-'}</b><br>
                        <div>${order.distributor.address ?? '-'}</div>
                    </div>
                </div>
                <div class="col">
                    <strong>Penerima:</strong>
                    <div class="text-dark-4">
                        <div>${order.receiver.address ?? '-'}</div>
                    </div>
                </div>
            </div>
        </div>`;
    });

    listApp.innerHTML = html;
}

        async function fetchOrders() {
            renderSkeleton();
            const status = document.getElementById('statusFilter').value;
            const start = document.getElementById('startDate').value;
            const end = document.getElementById('endDate').value;
            const keyword = searchInput.value;

            const params = new URLSearchParams();
            if (status) params.append('status', status);
            if (start) params.append('start_date', start);
            if (end) params.append('end_date', end);
            if (keyword) params.append('search', keyword);

            try {
                const res = await axios.get(`{{ url('/customer-services/temp/orders/data') }}?${params.toString()}`);
                renderOrders(res.data);
            } catch (err) {
                listApp.innerHTML = '<p class="text-danger text-center">Failed to load orders.</p>';
            }
        }

        function applyFilters() {
            toggleFilterSidebar();
            fetchOrders();
        }

        function resetFilters() {
            document.getElementById('statusFilter').value = '';
            document.getElementById('startDate').value = '';
            document.getElementById('endDate').value = '';
            fetchOrders();
        }

        searchInput.addEventListener('input', fetchOrders);
        document.addEventListener('DOMContentLoaded', fetchOrders);
    </script>
@endsection