@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ' Edit Academic Year'])

    <div id="alert">
        @include('components.alert')
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ route('academicyear.update', $academicYear->academicyear_Id) }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT') <!-- This is necessary for sending a PUT request -->

                        <div class="card-header pb-0">
                            <div class="d-flex align-items-center justify-content-between">
                                <p class="mb-0">Edit Academic Year</p>
                                <div>
                                    <button type="submit" class="btn btn-primary btn-sm">Save</button>
                                    <a href="{{ route('academicyear.index') }}" class="btn btn-secondary btn-sm mb-3">Cancel</a>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <p class="text-uppercase text-sm">Academic Year Information</p>
                            <div class="row">
                                <!-- Academic Year -->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="year" class="form-control-label">Academic Year</label>
                                        <input class="form-control @error('year') is-invalid @enderror" name="year" type="text" id="year" name="datefilter" value="{{ old('datefilter', $academicYear->academicdetail) }}">
                                        @error('year')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                    </div>
                                </div>

                                <!-- Status -->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="oprtnl_flag">Status</label>
                                        <select class="form-select" name="oprtnl_flag" id="oprtnl_flag"  required>
                                            <option value="A" {{ old('oprtnl_flag', $academicYear->oprtnl_flag) == 'A' ? 'selected' : '' }}>Active</option>
                                            <option value="I" {{ old('oprtnl_flag', $academicYear->oprtnl_flag) == 'I' ? 'selected' : '' }}>Inactive</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>



                </div>
            </div>
        </div>
        @include('layouts.footers.auth.footer')
    </div>
@endsection

@push('scripts')
<!-- Include jQuery -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<script type="text/javascript">
    $(function() {

      // Set up the daterangepicker to pick only years
      $('input[name="datefilter"]').daterangepicker({
          autoUpdateInput: false,
          locale: {
              cancelLabel: 'Clear'
          },
          // Allow selection of two years (from and to year)
          startDate: moment().startOf('year'), // Set default to current year
          endDate: moment().endOf('year'), // Set default to current year
          minYear: 1900, // Minimum year limit (can adjust as per your needs)
          maxYear: 2100, // Maximum year limit (can adjust as per your needs)
          showDropdowns: true, // Enable dropdowns to select year range
          // Allow only year range selection
          singleDatePicker: false, // Allow selecting a range (from year to to year)
          format: 'YYYY', // Display only the year
          opens: 'center', // Open the calendar in the center
          // Ranges for quick selection
          ranges: {
              'This Year': [moment().startOf('year'), moment().endOf('year')],
              'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
              'Next Year': [moment().add(1, 'year').startOf('year'), moment().add(1, 'year').endOf('year')]
          }
      });

      // When the user applies a selection, update the input field
      $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
          $(this).val(picker.startDate.format('YYYY') + ' - ' + picker.endDate.format('YYYY')); // Show the selected years in the input
      });

      // When the user cancels the selection, clear the input field
      $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
          $(this).val(''); // Clear the input
      });

    });
</script>
@endpush