@extends('layouts.main')
@section('title', 'File Course NalarKita')
@section('pageContent')
    <main>
        <section class="container mx-auto px-8 my-10 space-y-8">
            <!-- Filters -->
            <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                <!-- Filter Group -->
                <div class="flex flex-col gap-4 lg:flex-row">
                    <!-- Search -->
                    <div class="w-full lg:w-60">
                        <label for="laporan" class="block mb-2 text-sm font-medium text-neutral-40">Cari Course</label>
                        <div class="relative">
                            <input type="text" id="laporan" class="border border-neutral-20 text-neutral-40 text-sm rounded-lg focus:outline-primary-30 focus:border-primary-30 block w-full pl-8 p-2.5" placeholder="Masukkan Nama Course">
                            <!-- Optional: Add search icon -->
                            <!-- <div class="absolute left-2 top-2.5">
                                <svg class="w-4 h-4 text-neutral-40" ...></svg>
                            </div> -->
                        </div>
                    </div>

                    <!-- Month -->
                    <div class="w-full lg:w-60">
                        <label class="block mb-2 text-sm font-medium text-neutral-40">Bulan</label>
                        <select id="bulan" class="border border-neutral-20 text-neutral-40 text-sm rounded-lg focus:outline-primary-30 focus:border-primary-30 block w-full p-2.5">
                            <option value="">Pilih Bulan</option>
                            @foreach (range(1, 12) as $m)
                                <option value="{{ DateTime::createFromFormat('!m', $m)->format('F') }}">{{ DateTime::createFromFormat('!m', $m)->format('F') }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Year -->
                    <div class="w-full lg:w-60">
                        <label class="block mb-2 text-sm font-medium text-neutral-40">Tahun</label>
                        <select id="tahun" class="border border-neutral-20 text-neutral-40 text-sm rounded-lg focus:outline-primary-30 focus:border-primary-30 block w-full p-2.5">
                            <option value="">Pilih Tahun</option>
                            @for ($y = date('Y'); $y >= 2010; $y--)
                                <option value="{{ $y }}">{{ $y }}</option>
                            @endfor
                        </select>
                    </div>
                </div>

                <!-- Download Button -->
{{--                <div class="flex justify-end lg:justify-start">--}}
{{--                    <button class="inline-flex items-center text-primary-30 border border-primary-30 rounded-full p-3 lg:px-4 lg:py-2 text-sm lg:text-lg font-semibold hover:bg-primary-30 hover:text-neutral-10 transition group w-full lg:w-auto justify-center">--}}
{{--                        --}}{{-- <svg class="stroke-primary-30 group-hover:stroke-neutral-10 transition" width="24" height="25"><path d="M21 15V19..." /></svg> --}}
{{--                        <p class="ml-2">Unduh Laporan</p>--}}
{{--                    </button>--}}
{{--                </div>--}}
            </div>


            <!-- Table -->
            <div class="relative overflow-x-auto sm:rounded-lg">
                <table class="w-full text-sm text-left text-neutral-40">
                    <thead class="text-neutral-20 bg-[#FCFCFD]">
                    <tr class="border-b border-gray-200">
                        <th class="px-6 py-3">Nama Course</th>
                        <th class="px-6 py-3">Bulan</th>
                        <th class="px-6 py-3">Tahun</th>
                        <th class="px-6 py-3"></th>
                    </tr>
                    </thead>
                    <tbody id="report-body">
                    <!-- Dynamic Rows -->
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <nav class="flex justify-end">
                <ul id="pagination" class="flex items-center space-x-2 h-10 text-base"></ul>
            </nav>
        </section>
    </main>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            fetchData();

            document.getElementById('laporan').addEventListener('input', () => {
                fetchData(1);
            });
            document.getElementById('bulan').addEventListener('change', () => {
                fetchData(1);
            });
            document.getElementById('tahun').addEventListener('change', () => {
                fetchData(1);
            });
        });

        function fetchData(page = 1) {
            const search = document.getElementById('laporan').value;
            const month = document.getElementById('bulan').value;
            const year = document.getElementById('tahun').value;

            let url = `/financial-statement?page=${page}`;
            if (search) url += `&search=${search}`;
            if (month) url += `&month=${month}`;
            if (year) url += `&year=${year}`;

            fetch(url)
                .then(res => res.json())
                .then(({ data }) => {
                    renderTable(data.data);
                    renderPagination(data);
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        }


        function renderTable(rows) {
            const tbody = document.getElementById('report-body');
            const downloadUrl = "download-course/download";
            tbody.innerHTML = rows.map(item => `
            <tr class="bg-white border-b border-gray-200 hover:bg-gray-50">
                <td class="px-6 py-4 font-medium">${item.name}</td>
                <td class="px-6 py-4">${item.month}</td>
                <td class="px-6 py-4">${item.year}</td>
                <td class="px-6 py-4">
                    <a href="${downloadUrl}/${item.id}"> <svg class="w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15M7 10L12 15M12 15L17 10M12 15V3" stroke="#203E96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>   </a>
                </td>
            </tr>
        `).join('');
        }

        function renderPagination({ current_page, last_page, prev_page_url, next_page_url }) {
            const pagination = document.getElementById('pagination');

            const prevButton = prev_page_url
                ? `<a onclick="fetchData(${current_page - 1})"
              class="flex items-center px-4 h-10 text-neutral-40 border border-neutral-20 rounded-lg hover:bg-primary-10 transition hover:text-gray-700 cursor-pointer">
                <svg class="w-3 h-3 mr-2" fill="none" stroke="currentColor" viewBox="0 0 6 10">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
                </svg>
                Sebelumnya
           </a>`
                : `<span class="flex items-center px-4 h-10 text-neutral-40 border border-neutral-20 rounded-lg cursor-not-allowed opacity-50">
                <svg class="w-3 h-3 mr-2" fill="none" stroke="currentColor" viewBox="0 0 6 10">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
                </svg>
                Sebelumnya
           </span>`;

            const nextButton = next_page_url
                ? `<a onclick="fetchData(${current_page + 1})"
              class="flex items-center px-4 h-10 text-neutral-40 border border-neutral-20 rounded-lg hover:bg-primary-10 transition hover:text-gray-700 cursor-pointer">
                Selanjutnya
                <svg class="w-3 h-3 ml-2" fill="none" stroke="currentColor" viewBox="0 0 6 10">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                </svg>
           </a>`
                : `<span class="flex items-center px-4 h-10 text-neutral-40 border border-neutral-20 rounded-lg cursor-not-allowed opacity-50">
                Selanjutnya
                <svg class="w-3 h-3 ml-2" fill="none" stroke="currentColor" viewBox="0 0 6 10">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                </svg>
           </span>`;

            pagination.innerHTML = `
        <nav class="inline-flex space-x-2 mt-8" aria-label="Pagination Navigation">
            ${prevButton}
            ${nextButton}
        </nav>
    `;
        }

    </script>
@endsection