@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')

    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-wrap text-center">
                <h2 class="page-title">{{ __('Annual Reports') }}</h2>
                <ul class="breadcrumb-pages">
                    <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
                    <li class="page-item">{{ __('Annual Reports') }}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Work Area -->
    <div class="about-us-area section">
        <div class="container">
            <div class="emzReportDescription">
                {{ __('The RSCN Annual Reports highlights the organizations important and advanced role in the field of nature conservation, regionally and internationally. Download the report to learn more about RSCNs achievements and plans.') }}
            </div>
            <div class="emzReportBox">
                <form method="get" action="{{ route('annual.report.index') }}">
                    <div class="emzReportFilter">
                        <div class="emzDateInputField updatedDateInputField">
                            <input type="number" min="1990" max="{{ date('Y')}}" name="year" value="{{  app()->request->year ?  app()->request->year : request()->input('year') }}" placeholder="Year"  class="form-control yearpicker">
                        </div>
                        <button type="submit" class="btn emzSearchBtn">{{ __('Search') }}</button>
                    </div>
                </form>
                <label class="mb-4 d-none">{{__('The following reports are for the year of')}} <span>{{ request()->input('year') }}</span></label>
                <div class="row">
                    @foreach ($reports as $report)
                        <div class="col-md-4 col-sm-6 d-flex">
                            @if (app()->getLocale() == 'en')
                                <div class="card border-0 emzReportCard w-100">
                                    <a target="_blank" href="{{ asset(IMG_REPORT.$report->file) }}" class="btn emzReportDownload d-flex align-items-center">
                                        <img src="{{ asset('frontend/assets/images/pdf.svg') }}" class="emzReportPdf">
                                        <div class="emzReportYear">{{ $report->original_name }}</div>
                                    </a>
                                </div>
                            @else
                                <div class="card border-0 emzReportCard w-100">
                                    <a target="_blank" href="{{ asset(IMG_REPORT.$report->file_ar) }}" class="btn emzReportDownload d-flex align-items-center">
                                        <img src="{{ asset('frontend/assets/images/pdf.svg') }}" class="emzReportPdf">
                                        <div class="emzReportYear">{{ $report->original_name_ar }}</div>
                                    </a>
                                </div>
                            @endif

                        </div>
                    @endforeach
                </div>
                <div class="empty-box-msg text-center mx-auto py-4 px-3 mt-5 d-none">
                    <div class="msg">There is no report for this year</div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('post_script')
  <script src="{{ asset('frontend/assets/js/yearpicker.js') }}"></script>
    <script>
      $(document).ready(function() {
        $(".yearpicker").yearpicker({
          year: {{app()->request->year ?  app()->request->year : date('Y')}},
          startYear: 1990,
          endYear: {{date('Y')}}
        });
      });
    </script>
@endpush