@section('page-title', __('language.annualfinanicalreport'))


@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.annualfinanicalreport')
                    </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.annualfinanicalreport') </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>
    <section>
        {{-- @dd($fiscal_year) --}}
        <div class="container py-4">


            <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">
                            <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="row">
                        @if ($financialReprot && $financialReprot->isNotEmpty())

                            <div class="fiscal-year-section">
                                <div class="row">
                                    @foreach ($financialReprot as $report)
                                        <div class="col-lg-3 position-relative" data-tags="{{ $report->fiscal_year }}">
                                            <span class="text-white position-absolute" style="top: 30.7%;font-size: 16px;text-align: center;padding: 15px 0;width: 100%;margin-left: -12px;font-weight: bold;">{{ session('localeSession') == 'en' ? $report->getfiscalyear->fiscalyear_en : $report->getfiscalyear->fiscalyear_np }}</span>
                                            <img src="{{ asset($report->image ? $report->image : 'site/img/Prepared by Nepal Micro Insurance (1).png') }}"
                                                alt="Report Image" style="width: 100%; height: auto;">
                                            <h4 class="fs-6 p-3 text-custom-blue-dark2">{{ $report->title }} </h4>
                                            <a href="{{ route('financialreprots.details', ['slug' => $report->slug]) }}"
                                                class="btn btn-primary btn-sm">
                                                View Report
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @else
                            <p>No records available</p>
                        @endif



                    </div>





                </div>
            </div>






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

            // Get all the elements with the class 'f-items'
            const items = document.querySelectorAll('.f-items');

            // 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 both fiscal year and type
                const matchesFiscalYear = selectedFiscalYear === "" || dataTags.includes(selectedFiscalYear);
                const matchesType = selectedType === "" || dataTags.includes(selectedType);

                // Show or hide the item based on the match
                if (matchesFiscalYear && matchesType) {
                    item.classList.add('visible-div'); // Show the item by adding visible-div
                    item.classList.remove('d-none'); // Ensure d-none is removed in case it was hidden
                } else {
                    item.classList.remove('visible-div'); // Remove d-flex to hide
                    item.classList.add('d-none'); // Hide the item by adding d-none
                }
            });
        }
    </script>
@endpush