@extends('mobile.template.app')

@section('content')
    <style>
        .hidden-panel {
            max-height: 0;
            opacity: 0;
            transform: scaleY(0.95);
            overflow: hidden;
            transition: all .35s ease-in-out;
            margin: 0 !important;
            padding: 0 !important;
        }

        .show-panel {
            max-height: 500px;
            opacity: 1;
            transform: scaleY(1);
            margin-top: .5rem;
            padding: .75rem !important;
        }

        [x-cloak] {
            display: none !important;
        }

        .datepicker-panel {
            z-index: 9999;
        }

        #detail-modal.show {
            opacity: 1;
        }

        #detail-modal.hide {
            opacity: 0;
        }

        #modal-panel.show {
            transform: translateY(0);
            opacity: 1;
        }

        #modal-panel.hide {
            transform: translateY(100%);
            opacity: 0;
        }

        .section-title {
            font-size: .75rem;
            font-weight: 700;
            color: #666;
            text-transform: uppercase;
        }

        .section-box p {
            display: flex;
            justify-content: space-between;
            font-size: .9rem;
            padding: 2px 0;
        }
    </style>
    <div class="p-4 space-y-4">

        <div class="flex justify-between items-center mb-3">
            <h2 class="text-lg font-bold text-gray-800">Daily Reports</h2>
            <a href="/cs-daily-reports/create" class="px-4 py-2 bg-red-600 text-white rounded-xl shadow active:scale-95">
                + Tambah
            </a>
        </div>

        <button id="toggle-summary"
            class="flex items-center justify-center w-full bg-red-50 text-red-700 py-3 rounded-xl text-sm font-semibold shadow-sm active:scale-95">
            <i class="fa-solid fa-chevron-down mr-2 transition-transform duration-300 rotate-180"
                id="summary-icon"></i>Ringkasan
        </button>

        <div id="summary-section"
            class="grid grid-cols-2 gap-3 overflow-hidden transition-all duration-500 ease-in-out max-h-0 opacity-0">
            <div class="bg-white rounded-xl shadow-sm border border-red-100 p-4 text-center">
                <p class="text-gray-500 text-xs">Total Lead</p>
                <p id="sum-lead" class="text-lg font-bold text-red-600">0</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-red-100 p-4 text-center">
                <p class="text-gray-500 text-xs">Total Closing</p>
                <p id="sum-closing" class="text-lg font-bold text-red-700">0</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-red-100 p-4 text-center">
                <p class="text-gray-500 text-xs">Closing Rate</p>
                <p id="avg-rate" class="text-lg font-bold text-yellow-600">0%</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-red-100 p-4 text-center">
                <p class="text-gray-500 text-xs">Total Revenue</p>
                <p id="sum-revenue" class="text-lg font-bold text-green-600">Rp 0</p>
            </div>
        </div>

        <div class="flex gap-2">
            <div class="flex items-center border border-red-200 rounded-xl px-3 bg-white flex-1 shadow-sm">
                <i class="fa-solid fa-magnifying-glass text-red-400 text-base"></i>
                <input id="search-input" type="text"
                    class="flex-1 p-3 text-sm text-gray-700 focus:outline-none border-0 focus:ring-0"
                    placeholder="Cari tanggal, produk, platform...">
            </div>
            <button id="toggle-filter" class="p-3 bg-white border border-red-200 rounded-xl shadow-sm active:scale-95">
                <i class="fa-solid fa-filter text-red-600 text-lg"></i>
            </button>
        </div>

        <div id="filter-panel"
            class="relative z-50 hidden-panel bg-white border border-red-200 rounded-xl p-3 shadow-sm space-y-4 transition-all duration-300 ease-in-out">

            <div x-data="datepicker()" x-init="initDate()" x-cloak>
                <label class="text-sm text-gray-700 mb-1 block">Dari Tanggal</label>
                <div class="relative">
                    <input type="hidden" name="from" x-ref="date">
                    <input type="text" readonly x-model="displayValue" @click="toggle()"
                        class="w-full pl-10 pr-4 py-3 text-sm text-gray-700 bg-white border border-red-200 rounded-xl cursor-pointer"
                        placeholder="Pilih tanggal awal">
                    <i class="fa-regular fa-calendar absolute left-3 top-3.5 text-red-400 text-base"></i>

                    <div class="datepicker-panel bg-white mt-2 rounded-2xl shadow-xl p-4 absolute top-full left-0 w-72 border border-red-100"
                        x-show="open" x-transition.opacity.scale.origin-top @click.away="close()">

                        <div class="flex justify-between items-center mb-3">
                            <div class="font-semibold text-gray-800 text-base" x-text="MONTH_NAMES[month] + ' ' + year">
                            </div>
                            <div class="space-x-1">
                                <button type="button" class="p-1 rounded-full hover:bg-red-100" @click="prevMonth()">
                                    <i class="fa-solid fa-chevron-left text-red-500 text-xs"></i>
                                </button>
                                <button type="button" class="p-1 rounded-full hover:bg-red-100" @click="nextMonth()">
                                    <i class="fa-solid fa-chevron-right text-red-500 text-xs"></i>
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-7 text-center text-xs font-semibold text-red-500 mb-2">
                            <template x-for="(day,index) in DAYS" :key="index">
                                <div x-text="day"></div>
                            </template>
                        </div>

                        <div class="grid grid-cols-7 gap-1 text-sm">
                            <template x-for="blank in blankdays" :key="'b' + blank">
                                <div></div>
                            </template>

                            <template x-for="dateNumber in no_of_days" :key="dateNumber">
                                <div @click="pickDate(dateNumber)"
                                    class="cursor-pointer rounded-full py-1.5 text-center transition select-none"
                                    x-text="dateNumber"
                                    :class="isSelected(dateNumber) ?
                                        'bg-red-600 text-white shadow-sm' :
                                        isToday(dateNumber) ?
                                        'bg-red-100 text-red-700' :
                                        'text-gray-600 hover:bg-red-50'">
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <div x-data="datepicker()" x-init="initDate()" x-cloak>
                <label class="text-sm text-gray-700 mb-1 block">Sampai Tanggal</label>
                <div class="relative">
                    <input type="hidden" name="to" x-ref="date">
                    <input type="text" readonly x-model="displayValue" @click="toggle()"
                        class="w-full pl-10 pr-4 py-3 text-sm text-gray-700 bg-white border border-red-200 rounded-xl cursor-pointer"
                        placeholder="Pilih tanggal akhir">
                    <i class="fa-regular fa-calendar absolute left-3 top-3.5 text-red-400 text-base"></i>

                    <div class="datepicker-panel bg-white mt-2 rounded-2xl shadow-xl p-4 absolute top-full left-0 w-72 border border-red-100"
                        x-show="open" x-transition.opacity.scale.origin-top @click.away="close()">

                        <div class="flex justify-between items-center mb-3">
                            <div class="font-semibold text-gray-800 text-base" x-text="MONTH_NAMES[month] + ' ' + year">
                            </div>

                            <div class="space-x-1">
                                <button type="button" class="p-1 rounded-full hover:bg-red-100" @click="prevMonth()">
                                    <i class="fa-solid fa-chevron-left text-red-500 text-xs"></i>
                                </button>
                                <button type="button" class="p-1 rounded-full hover:bg-red-100" @click="nextMonth()">
                                    <i class="fa-solid fa-chevron-right text-red-500 text-xs"></i>
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-7 text-center text-xs font-semibold text-red-500 mb-2">
                            <template x-for="(day,index) in DAYS" :key="index">
                                <div x-text="day"></div>
                            </template>
                        </div>

                        <div class="grid grid-cols-7 gap-1 text-sm">
                            <template x-for="blank in blankdays" :key="'b' + blank">
                                <div></div>
                            </template>

                            <template x-for="dateNumber in no_of_days" :key="dateNumber">
                                <div @click="pickDate(dateNumber)"
                                    class="cursor-pointer rounded-full py-1.5 text-center transition select-none"
                                    x-text="dateNumber"
                                    :class="isSelected(dateNumber) ?
                                        'bg-red-600 text-white shadow-sm' :
                                        isToday(dateNumber) ?
                                        'bg-red-100 text-red-700' :
                                        'text-gray-600 hover:bg-red-50'">
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <button id="apply-filter"
                class="w-full bg-red-600 text-white py-3 rounded-xl font-semibold shadow active:scale-95">
                Terapkan Filter
            </button>
        </div>

        <div id="reports-container" class="space-y-3"></div>

        <div id="empty-state" class="hidden text-center py-12">
            <i class="fa-regular fa-folder-open text-6xl text-red-200 mb-3"></i>
            <p class="text-gray-500 text-lg font-semibold">Data tidak ditemukan</p>
        </div>

        <div id="loading-more" class="hidden text-center py-4 text-gray-500">
            <i class="fa-solid fa-spinner fa-spin mr-2"></i> Memuat lebih banyak...
        </div>
    </div>

    <div id="detail-modal"
        class="fixed inset-0 bg-black/40 backdrop-blur-sm hidden z-[9999] transition-opacity duration-300">

        <div id="modal-panel"
            class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl shadow-xl
               max-h-[70vh] overflow-y-auto
               translate-y-full opacity-0 transition-all duration-300 ease-out">

            <div class="w-12 h-1.5 bg-gray-300 rounded-full mx-auto mt-3 mb-4"></div>

            <div id="modal-content" class="px-6 pb-10 space-y-6"></div>

        </div>
    </div>

    <div id="toast"
        class="hidden fixed top-6 right-6 text-white text-base px-5 py-3 rounded-xl shadow-lg z-[999999] transition-all duration-300 transform opacity-0 translate-y-[-10px]">
    </div>

    <div id="delete-modal"
        class="fixed inset-0 bg-black/40 backdrop-blur-sm hidden z-[99999] transition-opacity duration-300">

        <div id="delete-panel"
            class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl shadow-xl
               translate-y-full opacity-0 transition-all duration-300 p-6">

            <h2 class="text-lg font-semibold text-gray-800 text-center mb-4">
                Hapus Laporan?
            </h2>

            <p class="text-gray-600 text-sm text-center mb-6">
                Laporan yang sudah dihapus tidak bisa dikembalikan.
            </p>

            <div class="flex gap-3">
                <button onclick="closeDeleteModal()"
                    class="flex-1 py-3 bg-gray-200 text-gray-700 rounded-xl font-semibold">
                    Batal
                </button>

                <button id="confirm-delete-btn" class="flex-1 py-3 bg-red-600 text-white rounded-xl font-semibold">
                    Hapus
                </button>
            </div>
        </div>
    </div>
@endsection

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

    <script>
        /* ============================================================
        DATE PICKER
    ============================================================ */
        const MONTH_NAMES = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
        const DAYS = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];

        function datepicker() {
            return {
                open: false,
                month: null,
                year: null,
                no_of_days: [],
                blankdays: [],
                selectedDate: null,
                displayValue: '',
                initDate() {
                    const t = new Date();
                    this.month = t.getMonth();
                    this.year = t.getFullYear();
                    this.setDate(t);
                    this.getNoOfDays();
                },
                toggle() {
                    this.open = !this.open
                },
                close() {
                    this.open = false
                },
                prevMonth() {
                    if (this.month === 0) {
                        this.month = 11;
                        this.year--
                    } else this.month--;
                    this.getNoOfDays();
                },
                nextMonth() {
                    if (this.month === 11) {
                        this.month = 0;
                        this.year++
                    } else this.month++;
                    this.getNoOfDays();
                },
                getNoOfDays() {
                    const d = new Date(this.year, this.month + 1, 0).getDate();
                    const w = new Date(this.year, this.month, 1).getDay();
                    this.blankdays = [...Array(w).keys()];
                    this.no_of_days = [...Array(d).keys()].map(i => i + 1);
                },
                isToday(x) {
                    const t = new Date();
                    const d = new Date(this.year, this.month, x);
                    return t.toDateString() === d.toDateString();
                },
                isSelected(x) {
                    if (!this.selectedDate) return false;
                    const d = new Date(this.year, this.month, x);
                    return this.selectedDate.toDateString() === d.toDateString();
                },
                pickDate(x) {
                    const d = new Date(this.year, this.month, x);
                    this.setDate(d);
                    this.close();
                },
                setDate(d) {
                    this.selectedDate = d;
                    const y = d.getFullYear();
                    const m = ('0' + (d.getMonth() + 1)).slice(-2);
                    const dd = ('0' + d.getDate()).slice(-2);
                    this.displayValue = `${dd} ${MONTH_NAMES[d.getMonth()]} ${y}`;
                    if (this.$refs.date) this.$refs.date.value = `${y}-${m}-${dd}`;
                }
            }
        }

        /* ============================================================
            UI HANDLING / FILTERS
        ============================================================ */
        const summaryBtn = document.getElementById('toggle-summary');
        const summarySec = document.getElementById('summary-section');
        const summaryIcon = document.getElementById('summary-icon');
        let summaryOpen = false;

        summaryBtn.addEventListener('click', () => {
            summaryOpen = !summaryOpen;
            summarySec.style.maxHeight = summaryOpen ? '600px' : '0';
            summarySec.style.opacity = summaryOpen ? '1' : '0';
            summaryIcon.style.transform = summaryOpen ? 'rotate(0)' : 'rotate(180deg)';
        });

        const filterPanel = document.getElementById('filter-panel');
        document.getElementById('toggle-filter')
            .addEventListener('click', () => {
                filterPanel.classList.toggle('show-panel');
                filterPanel.classList.toggle('hidden-panel');
            });

        function showToast(msg, ok = true) {
            const t = document.getElementById('toast');
            t.textContent = msg;
            t.style.background = ok ? '#16a34a' : '#dc2626';
            t.classList.remove('hidden');
            setTimeout(() => {
                t.style.opacity = '1';
                t.style.transform = 'translateY(0)'
            }, 20);
            setTimeout(() => {
                t.style.opacity = '0';
                t.style.transform = 'translateY(-10px)';
                setTimeout(() => t.classList.add('hidden'), 300);
            }, 2000);
        }

        /* ============================================================
            LOAD REPORTS (PAGINATION)
        ============================================================ */
        let page = 1,
            isLoading = false,
            hasMore = true;
        const reports = document.getElementById('reports-container');
        const empty = document.getElementById('empty-state');
        const loadingMore = document.getElementById('loading-more');

        let filters = {
            from: '',
            to: '',
            search: ''
        };

        function skeleton() {
            return `
        <div class="bg-white rounded-xl p-4 shadow-sm border border-red-100 animate-pulse">
            <div class="h-4 bg-red-100 rounded w-24 mb-2"></div>
            <div class="h-3 bg-red-100 rounded w-40"></div>
        </div>`;
        }

        async function loadReports(append = false) {
            if (isLoading || !hasMore) return;
            isLoading = true;

            if (!append) {
                reports.innerHTML = skeleton().repeat(4);
                page = 1;
                hasMore = true;
            }

            const params = new URLSearchParams({
                page,
                search: filters.search
            });
            if (filters.from) params.append('from', filters.from);
            if (filters.to) params.append('to', filters.to);

            const res = await axios.get(`/cs-daily-reports?${params}`);
            const summary = res.data.summary;
            const data = res.data.data;

            document.getElementById('sum-lead').textContent = summary.total_lead;
            document.getElementById('sum-closing').textContent = summary.total_closing;
            document.getElementById('avg-rate').textContent = summary.avg_closing_rate + '%';
            document.getElementById('sum-revenue').textContent =
                new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR'
                }).format(summary.total_revenue);

            if (!append) reports.innerHTML = "";

            if (data.length === 0 && page === 1) {
                reports.innerHTML = "";
                empty.classList.remove("hidden");
                return;
            }

            empty.classList.add("hidden");

            reports.insertAdjacentHTML("beforeend", data.map(r => `
                <div class="bg-white rounded-xl p-4 shadow-sm border border-red-100">

                    <div class="flex justify-between items-center">
                        <div>
                            <p class="font-semibold text-gray-800 text-sm">${r.date}</p>
                            <p class="text-xs text-gray-500">${r.product_code ?? '-'}</p>
                        </div>

                        <div class="flex items-center gap-3">
                            <button class="detail-btn text-red-600 text-xs font-semibold underline" data-id="${r.id}">
                                Detail
                            </button>

                            <a href="/cs-daily-reports/${r.id}/edit"
                                class="text-blue-600 text-xs font-semibold underline">
                                Edit
                            </a>

                            <button onclick="openDeleteModal(${r.id})"
                                class="text-red-700 text-xs font-semibold underline">
                                Hapus
                            </button>
                        </div>
                    </div>

                    <div class="flex justify-between mt-2 text-xs text-gray-600">
                        <p>Lead: <b>${r.total_lead}</b></p>
                        <p>Closing: <b>${r.total_closing}</b></p>
                        <p>Revenue: <b>${r.total_revenue}</b></p>
                    </div>

                </div>
            `).join(""));

            if (data.length < 10) hasMore = false;
            else page++;

            isLoading = false;
            loadingMore.classList.add('hidden');
        }

        document.getElementById('search-input').addEventListener('input', e => {
            filters.search = e.target.value;
            page = 1;
            loadReports();
        });

        document.getElementById('apply-filter').addEventListener('click', () => {
            filters.from = document.querySelector('input[name="from"]').value || '';
            filters.to = document.querySelector('input[name="to"]').value || '';
            filterPanel.classList.add('hidden-panel');
            filterPanel.classList.remove('show-panel');
            page = 1;
            loadReports();
        });

        window.addEventListener('scroll', () => {
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) {
                if (!isLoading && hasMore) {
                    loadingMore.classList.remove('hidden');
                    loadReports(true);
                }
            }
        });

        loadReports();

        /* ============================================================
            DETAIL MODAL
        ============================================================ */
        function openModal() {
            const m = document.getElementById('detail-modal');
            const p = document.getElementById('modal-panel');
            m.classList.remove("hidden");
            setTimeout(() => m.classList.add("show"), 10);
            setTimeout(() => p.classList.add("show"), 30);
        }

        function closeModal() {
            const m = document.getElementById('detail-modal');
            const p = document.getElementById('modal-panel');
            p.classList.remove("show");
            p.classList.add("hide");
            setTimeout(() => {
                m.classList.remove("show");
                m.classList.add("hide");
            }, 150);
            setTimeout(() => {
                m.classList.add("hidden");
                m.classList.remove("hide");
                p.classList.remove("hide");
            }, 300);
        }

        document.getElementById('detail-modal').addEventListener('click', e => {
            if (e.target.id === "detail-modal") closeModal();
        });

        /* ============================================================
            DELETE MODAL
        ============================================================ */
        let deleteId = null;

        function openDeleteModal(id) {
            deleteId = id;

            const m = document.getElementById("delete-modal");
            const p = document.getElementById("delete-panel");

            m.classList.remove("hidden");
            setTimeout(() => {
                m.classList.add("show");
                p.style.transform = "translateY(0)";
                p.style.opacity = "1";
            }, 20);
        }

        function closeDeleteModal() {
            const m = document.getElementById("delete-modal");
            const p = document.getElementById("delete-panel");

            p.style.transform = "translateY(100%)";
            p.style.opacity = "0";

            setTimeout(() => {
                m.classList.remove("show");
                m.classList.add("hidden");
            }, 250);
        }

        document.getElementById("confirm-delete-btn").addEventListener("click", async () => {
            if (!deleteId) return;

            try {
                const res = await axios.delete(`/cs-daily-reports/${deleteId}`);

                if (res.data.success) {
                    showToast("Laporan berhasil dihapus", true);
                    closeDeleteModal();
                    closeModal();
                    page = 1;
                    loadReports();
                } else {
                    showToast(res.data.message ?? "Gagal menghapus", false);
                }
            } catch (err) {
                showToast(err.response?.data?.message ?? "Terjadi kesalahan", false);
            }
        });

        /* ============================================================
            HANDLE DETAIL → SHOW MODAL CONTENT
        ============================================================ */
        document.addEventListener("click", async e => {
            if (e.target.classList.contains("detail-btn")) {
                const id = e.target.dataset.id;
                const res = await axios.get(`/cs-daily-reports/show/${id}`);
                const r = res.data.data;

                document.getElementById("modal-content").innerHTML = `
            <div class="text-center mb-4">
                <p class="text-xs text-gray-500">Tanggal</p>
                <p class="text-xl font-semibold text-gray-900">${r.date}</p>
            </div>

            <div>
                <p class="section-title">Informasi</p>
                <div class="space-y-1 text-sm text-gray-800">
                    <p class="flex justify-between"><span>Produk</span><span>${r.product_code ?? '-'}</span></p>
                    <p class="flex justify-between"><span>Platform</span><span>${r.platform ?? '-'}</span></p>
                </div>
            </div>

            <div>
                <p class="section-title">Lead & Closing</p>
                <div class="space-y-1 text-sm text-gray-800">
                    <p class="flex justify-between"><span>Total Lead</span><span>${r.total_lead}</span></p>
                    <p class="flex justify-between"><span>Hari Ini</span><span>${r.closing_today}</span></p>
                    <p class="flex justify-between"><span>Follow Up</span><span>${r.closing_follow_up}</span></p>
                    <p class="flex justify-between"><span>Repeat Order</span><span>${r.closing_repeat_order}</span></p>
                    <p class="flex justify-between"><span>Total Closing</span><span>${r.total_closing}</span></p>
                    <p class="flex justify-between"><span>Closing Rate</span><span>${r.closing_rate}</span></p>
                </div>
            </div>

            <div>
                <p class="section-title">Produk</p>
                <div class="space-y-1 text-sm text-gray-800">
                    <p class="flex justify-between"><span>Total Box</span><span>${r.total_box}</span></p>
                    <p class="flex justify-between"><span>Total Sachet</span><span>${r.total_sachet}</span></p>
                </div>
            </div>

            <div>
                <p class="section-title">WhatsApp</p>
                <div class="space-y-1 text-sm text-gray-800">
                    <p class="flex justify-between"><span>Closing WA</span><span>${r.closing_wa}</span></p>
                    <p class="flex justify-between"><span>Box</span><span>${r.wa_box}</span></p>
                    <p class="flex justify-between"><span>Sachet</span><span>${r.wa_sachet}</span></p>
                </div>
            </div>

            <div>
                <p class="section-title">Marketplace</p>
                <div class="space-y-1 text-sm text-gray-800">
                    <p class="flex justify-between"><span>Closing MP</span><span>${r.closing_mp}</span></p>
                    <p class="flex justify-between"><span>Box</span><span>${r.mp_box}</span></p>
                    <p class="flex justify-between"><span>Sachet</span><span>${r.mp_sachet}</span></p>
                </div>
            </div>

            <div>
                <p class="section-title">Lainnya</p>
                <div class="space-y-1 text-sm text-gray-800">
                    <p class="flex justify-between"><span>Blacklist</span><span>${r.blacklist_leads}</span></p>
                    <p class="flex justify-between"><span>Failed Closing</span><span>${r.failed_closing}</span></p>
                </div>
            </div>

            <div>
                <p class="section-title">Revenue</p>
                <p class="text-xl font-bold text-green-700">${r.total_revenue}</p>
            </div>

            <div>
                <p class="section-title">Catatan</p>
                <p class="text-sm text-gray-800">${r.notes ?? '-'}</p>
            </div>
        `;

                openModal();
            }
        });
    </script>
@endpush