@extends('layouts.mobile')

@section('content')
    <!-- ACTIVITY -->
    <section class="p-3" id="view-activity">
        <!-- Filter per minggu -->
        <div class="card mb-2 p-3" id="activityFilter">
            <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap">
                <label for="weekPicker" style="font-weight:700;color:var(--primary-700)">Filter :</label>
                <input id="weekpicker" placeholder="Pilih minggu" readonly
                    style="padding:.5rem;border:1px solid var(--border);border-radius:10px;width:80%;">
            </div>
        </div>
        <div id="data-container">
            @forelse ($data_pemeriksaan as $pemeriksaan)
            @empty
                <div class="card bg-gradient-default mb-2">
                    <div class="card-body text-center">
                        <h5 class="card-title text-success text-gradient">Belum Ada Pemeriksaan</h5>
                        <p class="text-muted">Segera melakukan pemeriksaan ke klinik terlebih dulu</p>
                    </div>
                </div>
            @endforelse
        </div>
        <code class="text-sm">
            <em>*) setiap kelipatan diatas 2,5km dapat 1 bintang</em>
        </code>
    </section>
@endsection
@push('js')
    @if (Session::has('message'))
        <script>
            Swal.fire({
                position: "top-end",
                icon: "{{ Session::get('class') }}",
                title: "{{ Session::get('message') }}",
                showConfirmButton: false,
                timer: 3500
            });
        </script>
    @endif
    <script>
        //function delete
        function deleteData(event, name, msg) {
            event.preventDefault(); // Prevent default form submission
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#f5365c'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Find the closest form element and submit it manually
                    event.target.closest('form').submit();
                }
            });
        }
    </script>
    <!-- Flatpickr JS -->
    <script src="{{ asset('/') }}assets/js/flatpickr.js"></script>
    <script src="{{ asset('/') }}assets/js/weekSelect.js"></script>

    <script>
        function updateWeekInfo(pickedDate) {
            document.getElementById('data-container').innerHTML =
                `<div class="card bg-gradient-default mb-2">
                    <div class="card-body text-center">
                        <h5 class="card-title text-success text-gradient">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            </h5>
                        <p class="text-muted">Sedang Memuat Data. Harap Tunggu...</p>
                    </div>
                </div>`
            const start = new Date(pickedDate);
            const day = start.getDay();
            const diffToSunday = -day;
            start.setDate(start.getDate() + diffToSunday);

            const end = new Date(start);
            end.setDate(start.getDate() + 6);

            const formatDate = d => {
                const year = d.getFullYear();
                const month = String(d.getMonth() + 1).padStart(2, '0');
                const day = String(d.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            };

            const fromText = formatDate(start);
            const toText = formatDate(end);

            const getWeekNumber = date => {
                const firstJan = new Date(date.getFullYear(), 0, 1);
                const days = Math.floor((date - firstJan) / (24 * 60 * 60 * 1000));
                return Math.ceil((days + firstJan.getDay() + 1) / 7);
            };
            const weekNum = getWeekNumber(start);
            const yearWeek = `${start.getFullYear()}W${weekNum.toString().padStart(2, '0')}`;

            document.getElementById('weekpicker').value = `Minggu ${weekNum} (${fromText} - ${toText})`;

            console.log(`Tanggal dari (Sunday): ${fromText}`);
            console.log(`Tanggal sampai (Saturday): ${toText}`);
            console.log(`YearWeek: ${yearWeek}`);

            // Simulasi AJAX (gunakan fetch/axios untuk real backend)
            fetch(`{{ url($url_menu) }}/api/getdata?from=${fromText}&to=${toText}`)
                .then(response => response.json())
                .then(data => {
                    var pemeriksaan = eval(data['data_pemeriksaan']);
                    //looping data pemeriksaan
                    if (pemeriksaan.length > 0) {
                        var table_detail = eval(data['table_detail']);
                        var primary = '';
                        if (table_detail.length > 0) {
                            var vlist = '';
                            document.getElementById('data-container').innerHTML = '';
                            for (var detail in table_detail) {
                                vlist =
                                    `
                                    <div class="card card-background move-on-hover pb-2">
                                        <div class="full-background" style="background-image: url('{{ asset('/storage/') }}` +
                                    '/' +
                                    table_detail[detail].foto + `tumb.png')"></div>
                                        <div class="card-body pt-4 pb-1 w-100"
                                    onclick="window.location='{{ url($url_menu . '/edit/') }}` + '/' + data[
                                        'encrypt_primary'][detail] + `'">
                                            <h4 class="badge bg-gradient-primary rounded-2 text-lg">` + table_detail[
                                        detail].deskripsi +
                                    `</h4>
                                            <blockquote class="blockquote text-white mb-0" style="font-size: initial;">`;
                                var table_header = eval(data['table_header']);
                                for (var header in table_header) {
                                    var vtex = table_detail[detail][table_header[header].field];
                                    if (table_header[header].field != 'deskripsi') {
                                        vlist += `
                                                    <div class="ms-3"><strong>` + table_header[header]
                                            .field + ` : </strong>
                                                        ` + vtex + ' ' + table_header[header].sub + `
                                                    </div>
                                                `;
                                    }
                                }
                                vlist += `<div class="" style="position: absolute;bottom: 5px;right: 60px;font-size: smaller;width: 75px;">
                                        ` + table_detail[detail].created_at + ` </div>
                                        <div class="badge rounded-3" style="position: absolute;bottom: 50px;right: 60px;font-size: smaller;width: 90px;">
                                        ` + data['firstname'][detail] + ` </div>
                                            </blockquote>
                                        </div>
                                    </div>
                                `;
                                if (table_detail[detail].star >= 1) {
                                    vlist += `<span class="badge" style="position: absolute;top: 10px;right: 10px;">
                                                <button id="" class="theme-toggle" aria-label="" title="Star">
                                                    <span class="icon-wrap" aria-hidden="true" style="font-size: small;">
                                                        ⭐<span class="badge">` + table_detail[detail].star + `</span>
                                                    </span>
                                                </button>
                                            </span>`;
                                }
                                vlist += `
                                {{-- check authorize delete and data primary key not "msjit" --}}
                                @if ($authorize->delete == '1')
                                    <form action="{{ url($url_menu . '/') }}` + '/' + data['encrypt_primary'][detail] + `" method="POST"
                                        style="display: inline">
                                        @csrf
                                        @method('DELETE')
                                        {{-- button delete --}}
                                        <button type="submit" class="badge btn-sm btn-danger mb-0" title="Hapus Data"
                                            onclick="return deleteData(event, '` + table_detail[detail].deskripsi + `','Hapus')"
                                            style="background-color: #fff;position: absolute;right: 15px;bottom: 10px;border: 1px #FFF;">
                                            <h6 class="fas fa-trash text-danger pt-2 px-2"></h6>
                                        </button>
                                    </form>
                                @endif
                                `;
                                $('#data-container').append('<div class="card bg-gradient-default p-0 me-2">' + vlist +
                                    '</div>');
                            }
                        } else {
                            document.getElementById('data-container').innerHTML =
                                `<div class="card bg-gradient-default mb-2">
                                    <div class="card-body text-center">
                                        <h5 class="card-title text-success text-gradient">Belum Ada Aktifitas</h5>
                                        <p class="text-muted">Mulai Tambah Aktifitas Anda</p>
                                    </div>
                                </div>
                            `;
                        }
                        $('#data-container').append(`<!-- FAB add -->
                        @if ($authorize->add == '1')
                            <button class="fab" id="btnAdd" aria-label="Tambah" onclick="window.location='{{ URL::to($url_menu . '/add') }}'">+</button>
                        @endif`);
                    } else {
                        document.getElementById('data-container').innerHTML =
                            `<div class="card bg-gradient-default mb-2">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-success text-gradient">Belum Ada Pemeriksaan</h5>
                                    <p class="text-muted">Segera melakukan pemeriksaan ke klinik terlebih dulu</p>
                                </div>
                            </div>`;
                    }

                })
                .catch(err => {
                    document.getElementById('data-container').innerHTML =
                        `<span style='color:red;'>Gagal memuat data: ${err}</span>`;
                });
        }

        const fp = flatpickr("#weekpicker", {
            plugins: [new weekSelect({})],
            weekNumbers: true,
            dateFormat: "Y-\\Ww",
            locale: "id",
            defaultDate: new Date(), // set default hari ini
            onReady: function(selectedDates, dateStr, instance) {
                const calendar = instance.calendarContainer;
                if (calendar) {
                    const label = document.createElement('div');
                    label.classList.add('week-label');
                    label.style.textAlign = 'center';
                    label.style.fontWeight = 'bold';
                    label.style.padding = '5px';
                    // label.textContent = 'Klik tanggal atau nomor minggu untuk memilih periode';
                    calendar.prepend(label);
                }
                // Set default data saat load pertama kali
                updateWeekInfo(new Date());
            },
            onChange: function(selectedDates, dateStr, instance) {
                if (selectedDates.length) {
                    updateWeekInfo(selectedDates[0]);
                }
            }
        });
    </script>
@endpush