@extends('template.desktop.app')
@section('title', 'Laporan Bulanan Customer Service')

@section('content')
    <div class="card">
        <div class="card-header border-0 pt-4 pb-0 d-flex justify-content-between align-items-center">
            <h4 class="card-title text-dark fw-bold mb-0">Laporan Bulanan Customer Service</h4>
        </div>

        <div class="card-body pt-3">
            {{-- Filter --}}
            <form id="filterForm" class="row g-3 align-items-end mb-4">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Pilih Bulan</label>
                    <input type="text" id="monthPicker" class="form-control" placeholder="Pilih Bulan & Tahun" readonly>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">Customer Service</label>
                    <select id="cs_id" class="form-select">
                        <option value="">Semua CS</option>
                        @foreach ($customer_services as $cs)
                            <option value="{{ $cs->id }}">{{ $cs->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4 d-flex">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="ti tabler-filter me-1"></i> Tampilkan Laporan
                    </button>
                </div>
            </form>

            <div id="alert-container"></div>

            {{-- Tabel --}}
            <div class="table-responsive">
                <table class="table table-bordered align-middle text-center" id="reportTable">
                    <thead class="table-light">
                        <tr>
                            <th>Bulan</th>
                            <th>Nama CS</th>
                            <th>Total Lead</th>
                            <th>Total Closing</th>
                            <th>Closing Rate (%)</th>
                            <th>Total Sachet Terjual</th>
                            <th>Total Box Terjual</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <tr>
                            <td colspan="7" class="text-muted py-4">Silakan pilih bulan dan filter data terlebih dahulu.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Dependencies --}}
    <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const monthPicker = document.getElementById('monthPicker');
            const form = document.getElementById('filterForm');
            const tableBody = document.getElementById('tableBody');
            const alertContainer = document.getElementById('alert-container');

            // === INIT Modern Flatpickr Month Picker ===
            flatpickr(monthPicker, {
                dateFormat: "Y-m",
                altInput: true,
                altFormat: "F Y", // tampil seperti "Oktober 2025"
                plugins: [
                    new monthSelectPlugin({
                        shorthand: true,
                        dateFormat: "Y-m",
                        altFormat: "F Y",
                        theme: "light"
                    })
                ]
            });

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                fetchReports();
            });

            function fetchReports() {
                const month = monthPicker.value;
                const cs_id = document.getElementById('cs_id').value;

                if (!month) {
                    showAlert('Silakan pilih bulan terlebih dahulu.', 'warning');
                    return;
                }

                tableBody.innerHTML = `
                    <tr>
                        <td colspan="7" class="py-4 text-center">
                            <div class="spinner-border text-primary" role="status"></div><br>Memuat data...
                        </td>
                    </tr>`;

                axios.get("{{ route('customer-service-monthly-reports.data') }}", {
                        params: {
                            month: month,
                            cs_id: cs_id
                        }
                    })
                    .then(res => {
                        const data = res.data;
                        if (!data.status || data.data.length === 0) {
                            showAlert('Tidak ada data ditemukan untuk periode ini.', 'warning');
                            tableBody.innerHTML =
                                `<tr><td colspan="7" class="text-muted py-4">Tidak ada data ditemukan.</td></tr>`;
                            return;
                        }

                        let rows = '';
                        data.data.forEach(item => {
                            rows += `
                                <tr>
                                    <td>${item.month}</td>
                                    <td>${item.customer_service?.name || '-'}</td>
                                    <td>${item.total_lead}</td>
                                    <td>${item.total_closing}</td>
                                    <td>${item.closing_rate}%</td>
                                    <td>${item.total_sachet_sold}</td>
                                    <td>${item.total_box_sold}</td>
                                </tr>`;
                        });
                        tableBody.innerHTML = rows;
                    })
                    .catch(err => {
                        console.error(err);
                        showAlert('Terjadi kesalahan server.', 'danger');
                        tableBody.innerHTML =
                            `<tr><td colspan="7" class="text-danger py-4">Gagal memuat data.</td></tr>`;
                    });
            }

            function showAlert(msg, type) {
                alertContainer.innerHTML = `
                    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                        ${msg}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>`;
            }
        });
    </script>

    {{-- Flatpickr MonthSelect Plugin --}}
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css">
@endsection