@extends('template.desktop.app')
@section('title', 'Laporan Harian 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 Harian 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">Periode Tanggal</label>
                    <input type="text" id="dateRange" class="form-control" placeholder="Pilih rentang tanggal">
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">Customer Service</label>
                    <select name="cs_id" 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> Filter
                    </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>Tanggal</th>
                            <th>Nama CS</th>
                            <th>Total Lead</th>
                            <th>Total Closing</th>
                            <th>Closing Rate (%)</th>
                            <th>Total Revenue (Rp)</th>
                            <th>Catatan</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <tr>
                            <td colspan="7" class="text-muted py-4">Silakan filter data terlebih dahulu.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

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

            // Inisialisasi Daterangepicker
            $('#dateRange').daterangepicker({
                opens: 'right',
                autoUpdateInput: false,
                locale: {
                    format: 'DD/MM/YYYY',
                    cancelLabel: 'Batal',
                    applyLabel: 'Terapkan'
                }
            });

            $('#dateRange').on('apply.daterangepicker', function(ev, picker) {
                startDate = picker.startDate.format('YYYY-MM-DD');
                endDate = picker.endDate.format('YYYY-MM-DD');
                $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format(
                    'DD/MM/YYYY'));
            });

            $('#dateRange').on('cancel.daterangepicker', function() {
                $(this).val('');
                startDate = endDate = null;
            });

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

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

                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-reports.data') }}", {
                        params: {
                            start_date: startDate,
                            end_date: endDate,
                            cs_id: cs_id
                        }
                    })
                    .then(res => {
                        const data = res.data;
                        if (!data.status || data.data.length === 0) {
                            showAlert('Tidak ada data ditemukan.', '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>${moment(item.date).format('DD/MM/YYYY')}</td>
                        <td>${item.customer_service?.name || '-'}</td>
                        <td>${item.total_lead}</td>
                        <td>${item.total_closing}</td>
                        <td>${item.closing_rate}%</td>
                        <td>Rp ${item.total_revenue.toLocaleString()}</td>
                        <td>${item.notes ?? '-'}</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>
@endpush