@extends('templates.desktop.app')

@section('title', 'Riwayat Transaksi')

@section('content')
    <div class="p-6 bg-[#F8F7FA] min-h-screen font-sans antialiased text-[#6f6b7d]">
        <div class="max-w-full mx-auto space-y-6">

            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <h4 class="text-xl font-semibold text-[#5d596c]">Riwayat Transaksi</h4>
                    <nav class="text-sm flex items-center gap-2 text-[#a5a3ae]">
                        <span class="text-[#800000] font-medium">Dashboard</span>
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                        <span>Transaksi</span>
                    </nav>
                </div>
                <button id="btnFilter"
                    class="flex items-center gap-2 bg-[#800000] hover:bg-[#600000] text-white px-5 py-2.5 rounded-lg font-semibold text-sm transition-all shadow-[0_2px_4px_0_rgba(128,0,0,0.4)] active:scale-95">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    Refresh Data
                </button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
                <div
                    class="bg-white rounded-xl shadow-[0_2px_6px_0_rgba(67,89,113,0.12)] p-5 transition-all duration-300 hover:shadow-[0_4px_12px_0_rgba(128,0,0,0.15)] border-b-2 border-transparent hover:border-[#800000]">
                    <div class="flex items-center gap-4">
                        <div class="p-3 rounded-lg bg-[#8000001a] text-[#800000]">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M9 12h6m-6 4h6m2 4H7a2 2 0 01-2-2V6a2 2 0 012-2h5l5 5v11a2 2 0 01-2 2z" />
                            </svg>
                        </div>
                        <div>
                            <h5 class="text-lg font-bold text-[#5d596c]" id="statTotalTrx">-</h5>
                            <p class="text-[11px] font-bold text-[#a5a3ae] uppercase tracking-wider">Aktivitas</p>
                        </div>
                    </div>
                </div>

                <div
                    class="bg-white rounded-xl shadow-[0_2px_6px_0_rgba(67,89,113,0.12)] p-5 border-b-2 border-transparent hover:border-[#28c76f]">
                    <div class="flex items-center gap-4">
                        <div class="p-3 rounded-lg bg-[#28c76f1a] text-[#28c76f]">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 11l7-7 7 7M5 19l7-7 7 7" />
                            </svg>
                        </div>
                        <div>
                            <h5 class="text-lg font-bold text-[#28c76f]" id="statCredit">-</h5>
                            <p class="text-[11px] font-bold text-[#a5a3ae] uppercase tracking-wider">Credit</p>
                        </div>
                    </div>
                </div>

                <div
                    class="bg-white rounded-xl shadow-[0_2px_6px_0_rgba(67,89,113,0.12)] p-5 border-b-2 border-transparent hover:border-[#ea5455]">
                    <div class="flex items-center gap-4">
                        <div class="p-3 rounded-lg bg-[#ea54551a] text-[#ea5455]">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 13l-7 7-7-7M19 5l-7 7-7-7" />
                            </svg>
                        </div>
                        <div>
                            <h5 class="text-lg font-bold text-[#ea5455]" id="statDebit">-</h5>
                            <p class="text-[11px] font-bold text-[#a5a3ae] uppercase tracking-wider">Debit</p>
                        </div>
                    </div>
                </div>

                <div
                    class="bg-white rounded-xl shadow-[0_2px_6px_0_rgba(67,89,113,0.12)] p-5 border-b-2 border-transparent hover:border-[#ff9f43]">
                    <div class="flex items-center gap-4">
                        <div class="p-3 rounded-lg bg-[#ff9f431a] text-[#ff9f43]">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2" />
                            </svg>
                        </div>
                        <div>
                            <h5 class="text-lg font-bold text-[#5d596c]" id="statNet">-</h5>
                            <p class="text-[11px] font-bold text-[#a5a3ae] uppercase tracking-wider">Net Amount</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-[0_4px_24px_0_rgba(34,41,47,0.1)] border-t-4 border-[#800000]">
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-end">

                        <div class="md:col-span-4">
                            <label
                                class="text-[11px] font-bold text-[#a5a3ae] uppercase tracking-widest mb-2 block ml-1">Kategori
                                Transaksi</label>
                            <div class="relative group">
                                <select id="filterType"
                                    class="appearance-none w-full h-[40px] px-4 rounded-lg border border-[#dbdade] text-sm text-[#6f6b7d] focus:border-[#800000] focus:ring-0 transition-all outline-none bg-white cursor-pointer group-hover:border-[#b4b2bb]">
                                    <option value="">Semua Riwayat</option>
                                    <option value="order">📦 Order / Penjualan</option>
                                    <option value="return">🔄 Return / Pengembalian</option>
                                </select>
                                <div class="absolute right-3 top-3.5 text-[#a5a3ae] pointer-events-none">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
                                            d="M19 9l-7 7-7-7" />
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <div class="md:col-span-5">
                            <label
                                class="text-[11px] font-bold text-[#a5a3ae] uppercase tracking-widest mb-2 block ml-1">Rentang
                                Tanggal</label>
                            <div class="relative group">
                                <input id="dateRange"
                                    class="w-full h-[40px] px-4 rounded-lg border border-[#dbdade] text-sm text-[#6f6b7d] focus:border-[#800000] focus:ring-0 transition-all outline-none bg-white group-hover:border-[#b4b2bb]"
                                    placeholder="Pilih Tanggal">
                                <div class="absolute right-3 top-2.5 text-[#a5a3ae]">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <div class="md:col-span-3">
                            <button id="btnReset"
                                class="w-full h-[40px] rounded-lg bg-[#f8f7fa] border border-[#dbdade] text-[#6f6b7d] font-bold text-xs uppercase tracking-widest hover:bg-[#800000] hover:text-white hover:border-[#800000] transition-all active:scale-95 flex items-center justify-center gap-2">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
                                        d="M6 18L18 6M6 6l12 12" />
                                </svg>
                                Reset Filter
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div
                class="bg-white rounded-xl shadow-[0_2px_6px_0_rgba(67,89,113,0.12)] border border-[#dbdade66] overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full whitespace-nowrap">
                        <thead>
                            <tr class="bg-[#f8f7fa] border-b border-[#dbdade]">
                                <th class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-[#5d596c]">
                                    No</th>
                                <th class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-[#5d596c]">
                                    Ref No</th>
                                <th class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-[#5d596c]">
                                    Status</th>
                                <th class="px-6 py-4 text-right text-xs font-bold uppercase tracking-wider text-[#5d596c]">
                                    Nominal</th>
                                <th class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-[#5d596c]">
                                    Waktu</th>
                                <th class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-[#5d596c]">
                                    Catatan</th>
                            </tr>
                        </thead>
                        <tbody id="transactionBody" class="divide-y divide-[#dbdade66] text-sm text-[#6f6b7d]">
                        </tbody>
                    </table>
                </div>

                <div
                    class="px-6 py-5 bg-[#f8f7fa]/50 flex flex-col md:flex-row justify-between items-center gap-4 border-t border-[#dbdade]">
                    <span id="paginationMeta" class="text-xs font-medium text-[#a5a3ae]"></span>
                    <nav id="pagination" class="flex items-center gap-1.5"></nav>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        /* Smooth Maroon Pagination */
        .page-btn {
            min-width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.2s ease-in-out;
            background-color: #fff;
            color: #6f6b7d;
            border: 1px solid #dbdade;
        }

        .page-btn:hover:not(.page-btn-active):not(:disabled) {
            border-color: #800000;
            color: #800000;
            transform: translateY(-1px);
            background-color: #8000000d;
        }

        .page-btn-active {
            background-color: #800000 !important;
            color: #fff !important;
            border-color: #800000 !important;
            box-shadow: 0 2px 6px 0 rgba(128, 0, 0, 0.3);
        }

        .page-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        /* Custom Input Highlight */
        input:focus,
        select:focus {
            box-shadow: 0 0 0 2px rgba(128, 0, 0, 0.1) !important;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        ::-webkit-scrollbar-thumb {
            background: #8000004d;
            border-radius: 10px;
        }

        /* Flatpickr Maroon */
        .flatpickr-day.selected {
            background: #800000 !important;
            border-color: #800000 !important;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        const formatIDR = (v) => new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            maximumFractionDigits: 0
        }).format(v);
        let currentPage = 1,
            startDate = '',
            endDate = '';

        const fp = flatpickr('#dateRange', {
            mode: 'range',
            dateFormat: 'Y-m-d',
            altInput: true,
            altFormat: 'd M Y',
            onChange: (d) => {
                if (d.length === 2) {
                    startDate = d[0].toISOString().split('T')[0];
                    endDate = d[1].toISOString().split('T')[0];
                }
            }
        });

        function fetchData(page = 1) {
            currentPage = page;
            const tbody = document.getElementById('transactionBody');
            tbody.innerHTML =
                `<tr><td colspan="6" class="py-16 text-center"><div class="inline-block w-8 h-8 border-4 border-[#800000] border-t-transparent rounded-full animate-spin"></div></td></tr>`;

            axios.get('{{ route('transactions.order.list') }}', {
                params: {
                    page,
                    type: document.getElementById('filterType').value,
                    start_date: startDate,
                    end_date: endDate
                }
            }).then(res => {
                const {
                    analytics,
                    data,
                    meta
                } = res.data;

                document.getElementById('statTotalTrx').innerText = analytics.total_transactions;
                document.getElementById('statCredit').innerText = formatIDR(analytics.total_credit);
                document.getElementById('statDebit').innerText = formatIDR(analytics.total_debit);
                document.getElementById('statNet').innerText = formatIDR(Math.abs(analytics.net_amount));

                tbody.innerHTML = data.length ? data.map((item, i) => `
                <tr class="hover:bg-[#80000005] transition-colors duration-150">
                    <td class="px-6 py-4 text-xs font-semibold text-[#a5a3ae]">${(meta.current_page - 1) * meta.per_page + i + 1}</td>
                    <td class="px-6 py-4 font-bold text-[#800000]">${item.trx_no || '-'}</td>
                    <td class="px-6 py-4">
                        <span class="px-2.5 py-1 rounded-md text-[11px] font-bold uppercase tracking-wider ${item.transaction_type === 'order' ? 'bg-[#28c76f1a] text-[#28c76f]' : 'bg-[#ea54551a] text-[#ea5455]'}">${item.transaction_type}</span>
                    </td>
                    <td class="px-6 py-4 text-right font-bold ${item.direction === 'credit' ? 'text-[#28c76f]' : 'text-[#5d596c]'}">${item.direction === 'credit' ? '+' : '-'} ${formatIDR(item.amount)}</td>
                    <td class="px-6 py-4 text-[#a5a3ae] text-xs">${item.transaction_date}</td>
                    <td class="px-6 py-4 text-[#a5a3ae] italic max-w-[200px] truncate">${item.notes || '-'}</td>
                </tr>
            `).join('') :
                `<tr><td colspan="6" class="py-16 text-center text-[#a5a3ae]">Data tidak ditemukan</td></tr>`;

                renderPagination(meta);
            });
        }

        function renderPagination(meta) {
            const nav = document.getElementById('pagination');
            nav.innerHTML = '';
            document.getElementById('paginationMeta').innerText =
                `Menampilkan ${meta.from || 0} - ${meta.to || 0} dari ${meta.total}`;

            const createBtn = (p, label, active = false, disabled = false) => {
                const btn = document.createElement('button');
                btn.className = `page-btn ${active ? 'page-btn-active' : ''}`;
                btn.disabled = disabled;
                btn.innerHTML = label;
                btn.onclick = () => fetchData(p);
                return btn;
            };

            nav.appendChild(createBtn(meta.current_page - 1, '‹', false, meta.current_page === 1));
            for (let i = 1; i <= meta.last_page; i++) {
                if (i === 1 || i === meta.last_page || (i >= meta.current_page - 1 && i <= meta.current_page + 1)) {
                    nav.appendChild(createBtn(i, i, i === meta.current_page));
                } else if (i === meta.current_page - 2 || i === meta.current_page + 2) {
                    const dot = document.createElement('span');
                    dot.className = 'px-1 text-[#dbdade]';
                    dot.innerText = '...';
                    nav.appendChild(dot);
                }
            }
            nav.appendChild(createBtn(meta.current_page + 1, '›', false, meta.current_page === meta.last_page));
        }

        document.getElementById('btnFilter').onclick = () => fetchData(1);
        document.getElementById('btnReset').onclick = () => {
            document.getElementById('filterType').value = '';
            fp.clear();
            startDate = endDate = '';
            fetchData(1);
        };

        fetchData();
    </script>
@endpush