@section('page-title', 'Finanacial Report')

@extends('site.master')
@section('main-content')
    <section class="af-hdr ">
        <div class="container position-relative" style="z-index: 9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class=" text-uppercase text-white fnt-fam-ser fs-2 fwc-700">
                        @lang('language.finanicalreport')
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="list-inline-item"><a class="text-white" href="{{ URL::to('/') }}"
                                    class="text-decoration-none">@lang('language.home')</a>
                            </li>

                            <li class="list-inline-item current text-danger">
                                @lang('language.finanicalreport') </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>
    <section>
        {{-- @dd($fiscal_year) --}}
        <div class="container py-4">
            <div class="row mb-3">

            </div>
            <!-- Fiscal Year Dropdown -->

            <div class="row mb-4">
                <div class="col-lg-2">
                    <p class="text-uppercase mb-1 fwc-600 text-custom-blue-dark2">@lang('language.finanicalreport')</p>
                    <ul class="list-unstyled m-0 p-0 ms-2">
                        <li><a href="{{ route('financialreprots.reportscategory', ['type' => 'annualreports']) }}"
                                class="text-dark text-hover-danger fs-7 mb-2">
                                @lang('language.annualfinanicalreport') </a></li>
                        <li><a href="{{ route('financialreprots.list') }}" class="text-dark text-hover-danger fs-7">
                                @lang('language.quarterlyfinanicalreport') </a></li>

                    </ul>
                </div>
                <div class="col-lg-10">



                    <div class="row mb-4">
                        <div class="col-lg-4">
                            {{-- {{ dd($financialReprot) }} --}}
                            <select id="fiscalYearDropdown" onchange="filterItems()" class="form-control">

                                <option value="">
                                    {{ session('localeSession') == 'en' ? 'Select Fiscal Year' : 'आ.व. छानुहोस' }}</option>
                                @foreach ($fiscal_year as $fisitem)
                                    <option value="{{ $fisitem->id }}">
                                        {{ session('localeSession') == 'en' ? $fisitem->fiscalyear_en : $fisitem->fiscalyear_np }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                    </div>
                    <div class="accordion rounded-0" id="accordionExample">
                        @foreach ($financialReprot as $fiscalYear => $reports)
                            <div class="accordion-item mb-4 shadow rounded-0" data-tags="{{ $fiscalYear }}">
                                <h2 class="accordion-header border-bottom">
                                    <button class="accordion-button fwc-600 text-custom-blue-dark2 collapsed py-3 fs-6"
                                        type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapse{{ $fiscalYear }}" aria-expanded="true"
                                        aria-controls="collapse{{ $fiscalYear }}">
                                        @if (\App::getLocale() == 'np')
                                            आ.व. {{ $reports->first()->getfiscalyear->fiscalyear_np }}
                                        @else
                                            Fiscal Year {{ $reports->first()->getfiscalyear->fiscalyear_en }}
                                        @endif
                                    </button>
                                </h2>
                                <div id="collapse{{ $fiscalYear }}"
                                    class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}">
                                    <div class="accordion-body">
                                        <div class="row g-3">
                                            @for ($i = 4; $i >= 1; $i--)
                                            @php
                                                // Find reports for the current quarter
                                                $quarterReports = $reports->where('quarter', $i);
                                            @endphp
                                        
                                            @if ($quarterReports->isNotEmpty())
                                                {{-- Only render if there are reports for the quarter --}}
                                                <div class="col-lg-3">
                                                    <h3 class="fs-7 fw-bold text-custom-blue-dark2 mb-2 mb-3">
                                                        Q{{ $i }}</h3>
                                                    <ul class="list-unstyled d-flex gap-2 flex-column">
                                                        @foreach ($quarterReports as $quarterReport)
                                                            <li>
                                                                <a href="{{ route('financialreprots.details', ['slug' => $quarterReport->slug]) }}"
                                                                   class="text-dark text-hover-danger" target="_blank">
                                                                    <i class="bi-file-pdf"></i>
                                                                    {{ $quarterReport->title }}
                                                                </a>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                                        @endfor

                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>


                </div>
            </div>




        </div>
    </section>
@endsection
@push('scripts')
    <script>
        function filterItems() {
            // Get the selected values from the dropdown
            const selectedFiscalYear = document.getElementById('fiscalYearDropdown').value.toLowerCase();

            // Get all the accordion items
            const items = document.querySelectorAll('.accordion-item');

            // Loop through each item
            items.forEach(item => {
                // Get the 'data-tags' attribute and convert it to lowercase
                const dataTags = item.getAttribute('data-tags').toLowerCase();

                // Check if the item matches the selected fiscal year
                const matchesFiscalYear = selectedFiscalYear === "" || dataTags.includes(selectedFiscalYear);

                // Find the accordion header and body elements
                const accordionHeader = item.querySelector('.accordion-header');
                const accordionBody = item.querySelector('.accordion-collapse');

                // Show or hide the item based on the match
                if (matchesFiscalYear) {
                    item.classList.add('visible-div');
                    item.classList.remove('d-none'); // Show the item

                    // Expand the accordion by adding the 'show' class
                    accordionBody.classList.add('show');
                    accordionHeader.setAttribute('aria-expanded', 'true');
                } else {
                    item.classList.remove('visible-div');
                    item.classList.add('d-none'); // Hide the item

                    // Collapse the accordion by removing the 'show' class
                    accordionBody.classList.remove('show');
                    accordionHeader.setAttribute('aria-expanded', 'false');
                }
            });
        }
    </script>
@endpush