@extends('mobile.template.app')

@section('content')
    <div class="p-5 space-y-6 bg-white min-h-screen">

        <div class="flex items-center justify-between">
            <button onclick="history.back()" class="text-red-500 text-xl">
                <i class="fa-solid fa-chevron-left"></i>
            </button>
            <h1 class="text-lg font-bold text-gray-800">Tambah Laporan CS</h1>
            <div class="w-6"></div>
        </div>

        <form id="report-form" class="space-y-6">

            <div x-data="datepicker()" x-init="initDate()" x-cloak>
                <label class="text-base text-gray-700 mb-1">Tanggal</label>

                <div class="relative">
                    <input type="hidden" name="date" x-ref="date" class="date-input">

                    <div @click="toggle()"
                        class="w-full pl-12 pr-4 py-4 text-base bg-white border border-gray-200 rounded-2xl shadow-sm cursor-pointer focus:ring-2 focus:ring-red-400">
                        <span x-text="displayValue" class="text-gray-800"></span>
                    </div>

                    <i class="fa-regular fa-calendar absolute left-4 top-4 text-gray-400 text-lg"></i>

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

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

                            <div class="flex gap-2">
                                <button type="button" @click="prevMonth()" class="p-2 rounded-full hover:bg-gray-100">
                                    <i class="fa-solid fa-chevron-left text-gray-500"></i>
                                </button>

                                <button type="button" @click="nextMonth()" class="p-2 rounded-full hover:bg-gray-100">
                                    <i class="fa-solid fa-chevron-right text-gray-500"></i>
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-7 text-center text-xs text-gray-500 mb-1">
                            <template x-for="d in DAYS">
                                <div x-text="d"></div>
                            </template>
                        </div>

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

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

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

            {{-- INPUT FIELDS --}}
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="text-base text-gray-700">Kode Produk</label>
                    <input name="product_code" class="form-input" placeholder="DOORASI" value="DOORASI" readonly>
                </div>

                <div>
                    <label class="text-base text-gray-700">Platform</label>
                    <input name="platform" class="form-input" placeholder="META / WA / MP" value="META" readonly>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="text-base text-gray-700">Total Lead</label>
                    <input name="total_lead" type="number" min="0" class="form-input">
                </div>

                <div>
                    <label class="text-base text-gray-700">Closing Hari Ini</label>
                    <input name="closing_today" type="number" min="0" class="form-input">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="text-base text-gray-700">Closing Follow Up</label>
                    <input name="closing_follow_up" type="number" min="0" class="form-input">
                </div>

                <div>
                    <label class="text-base text-gray-700">Closing Repeat Order</label>
                    <input name="closing_repeat_order" type="number" min="0" class="form-input">
                </div>
            </div>

            <div class="rounded-2xl p-4 bg-red-50 border border-red-100">
                <p class="text-sm font-semibold text-red-700 mb-3">Closing via WhatsApp</p>

                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label class="text-xs text-gray-700">Closing WA</label>
                        <input name="closing_wa" type="number" min="0" class="form-mini">
                    </div>

                    <div>
                        <label class="text-xs text-gray-700">Box</label>
                        <input name="wa_box" type="number" min="0" class="form-mini">
                    </div>

                    <div>
                        <label class="text-xs text-gray-700">Sachet</label>
                        <input name="wa_sachet" type="number" min="0" class="form-mini">
                    </div>
                </div>
            </div>

            <div class="rounded-2xl p-4 bg-red-50 border border-red-100">
                <p class="text-sm font-semibold text-red-700 mb-3">Closing via Marketplace</p>

                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label class="text-xs text-gray-700">Closing MP</label>
                        <input name="closing_mp" type="number" min="0" class="form-mini">
                    </div>

                    <div>
                        <label class="text-xs text-gray-700">Box</label>
                        <input name="mp_box" type="number" min="0" class="form-mini">
                    </div>

                    <div>
                        <label class="text-xs text-gray-700">Sachet</label>
                        <input name="mp_sachet" type="number" min="0" class="form-mini">
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="text-base text-gray-700">Blacklist Lead</label>
                    <input name="blacklist_leads" type="number" min="0" class="form-input">
                </div>

                <div>
                    <label class="text-base text-gray-700">Closing Gagal</label>
                    <input name="failed_closing" type="number" min="0" class="form-input">
                </div>
            </div>

            <div>
                <label class="text-base text-gray-700">Total Revenue</label>
                <input name="total_revenue" type="number" min="0" class="form-input" placeholder="1500000">
            </div>

            <div>
                <label class="text-base text-gray-700">Catatan</label>
                <textarea name="notes" rows="3" class="form-input"></textarea>
            </div>

            <button type="submit"
                class="submit-btn w-full bg-red-600 text-white py-4 rounded-2xl text-base font-semibold shadow-md hover:bg-red-700 transition">
                Simpan Laporan
            </button>

        </form>

        <div id="toast"
            class="hidden fixed bottom-6 left-1/2 -translate-x-1/2 px-5 py-3 rounded-xl text-white shadow-lg z-[3000] transition-all duration-300">
        </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/alpinejs@2.8.2" defer></script>

    <style>
        .form-input {
            width: 100%;
            border: 1px solid #e5e7eb;
            padding: 14px;
            border-radius: 16px;
            font-size: 15px;
            color: #374151;
        }

        .form-mini {
            width: 100%;
            border: 1px solid #e5e7eb;
            padding: 10px;
            border-radius: 12px;
            font-size: 13px;
            color: #374151;
        }

        .error {
            border-color: #dc2626 !important;
        }

        #toast.toast-success {
            background: #16a34a;
        }

        #toast.toast-error {
            background: #dc2626;
        }
    </style>

    <script>
        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,
                selectedDate: null,
                no_of_days: [],
                blankdays: [],
                displayValue: '',

                initDate() {
                    const today = new Date();
                    this.month = today.getMonth();
                    this.year = today.getFullYear();
                    this.setDate(today);
                    this.getNoOfDays();
                },

                toggle() {
                    this.open = !this.open;
                },
                close() {
                    this.open = false;
                },

                prevMonth() {
                    this.month === 0 ? (this.month = 11, this.year--) : this.month--;
                    this.getNoOfDays();
                },

                nextMonth() {
                    this.month === 11 ? (this.month = 0, this.year++) : this.month++;
                    this.getNoOfDays();
                },

                getNoOfDays() {
                    const daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
                    const dayOfWeek = new Date(this.year, this.month, 1).getDay();

                    this.blankdays = [...Array(dayOfWeek).keys()];
                    this.no_of_days = [...Array(daysInMonth).keys()].map(i => i + 1);
                },

                isToday(date) {
                    const today = new Date();
                    const d = new Date(this.year, this.month, date);
                    return today.toDateString() === d.toDateString();
                },

                isSelected(date) {
                    if (!this.selectedDate) return false;
                    const d = new Date(this.year, this.month, date);
                    return this.selectedDate.toDateString() === d.toDateString();
                },

                pickDate(day) {
                    const selected = new Date(this.year, this.month, day);
                    this.setDate(selected);
                    this.close();
                },

                setDate(date) {
                    this.selectedDate = date;
                    const yyyy = date.getFullYear();
                    const mm = String(date.getMonth() + 1).padStart(2, '0');
                    const dd = String(date.getDate()).padStart(2, '0');
                    this.displayValue = `${dd} ${MONTH_NAMES[date.getMonth()]} ${yyyy}`;
                    this.$refs.date.value = `${yyyy}-${mm}-${dd}`;
                }
            };
        }

        function showToast(msg, ok = true) {
            const t = document.getElementById("toast");
            t.textContent = msg;
            t.classList.remove("hidden", "toast-error", "toast-success");
            t.classList.add(ok ? "toast-success" : "toast-error");

            setTimeout(() => t.style.opacity = "1", 50);
            setTimeout(() => t.style.transform = "translateY(0)", 50);

            setTimeout(() => {
                t.style.opacity = "0";
                t.style.transform = "translateY(8px)";
                setTimeout(() => t.classList.add("hidden"), 300);
            }, 2200);
        }

        // ✅ FIXED VALIDATION FUNCTION
        function validateForm(form) {
            let valid = true;

            form.querySelectorAll("input.form-input, input.form-mini, textarea.form-input, input.date-input")
                .forEach(el => {
                    el.classList.remove("error");

                    if (!el.value || el.value.trim() === "") {
                        el.classList.add("error");
                        valid = false;
                    }
                });

            return valid;
        }

        document.getElementById("report-form").addEventListener("submit", async function(e) {
            e.preventDefault();

            if (!validateForm(this)) {
                showToast("Masih ada data kosong.", false);
                return;
            }

            const btn = this.querySelector(".submit-btn");
            btn.disabled = true;
            btn.innerHTML = `
                <div class="flex items-center justify-center gap-2">
                    <div class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                    Menyimpan...
                </div>
            `;

            try {
                let payload = Object.fromEntries(new FormData(this));
                const res = await axios.post("/cs-daily-reports", payload);

                if (res.data.success) {
                    showToast("Laporan berhasil disimpan!", true);
                    setTimeout(() => window.location.href = "/cs-daily-reports", 1000);
                } else {
                    showToast(res.data.message ?? "Gagal menyimpan laporan", false);
                }
            } catch (err) {
                showToast(err.response?.data?.message ?? "Terjadi kesalahan", false);
            }

            btn.disabled = false;
            btn.innerHTML = "Simpan Laporan";
        });
    </script>
@endpush