{{-- resources/views/yayasan/manajemen/periode/create.blade.php --}}

@extends('layouts.app')

@section('title', 'Tambah Periode Baru')

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-xl">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">Tambah Periode Baru</h3>
                            <div class="nk-block-des text-soft">
                                <p>Form untuk menambahkan periode yayasan baru.</p>
                            </div>
                        </div>
                        <div class="nk-block-head-content">
                            <a href="{{ route('yayasan.master.periode.index') }}" class="btn btn-outline-light bg-white d-sm-inline-flex">
                                <em class="icon ni ni-arrow-left"></em>
                                <span>Kembali ke Daftar Periode</span>
                            </a>
                            <a href="{{ route('yayasan.master.periode.index') }}" class="btn btn-icon btn-outline-light bg-white d-inline-flex d-sm-none">
                                <em class="icon ni ni-arrow-left"></em>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="nk-block">
                    <div class="card card-bordered">
                        <div class="card-inner">
                            {{-- Form untuk Menambah Periode --}}
                            <form action="{{ route('yayasan.master.periode.store') }}" method="POST">
                                @csrf

                                <div class="row g-gs">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="form-label" for="tahun">Tahun <span class="text-danger">*</span></label>
                                            <div class="form-control-wrap">
                                                <select 
                                                class="form-control @error('tahun') is-invalid @enderror" 
                                                id="tahun" 
                                                name="tahun" 
                                                required
                                                >
                                                <option value="">-- Pilih Tahun --</option>
                                                @php
                                                $currentYear = date('Y');
                                                $startYear = $currentYear - 5;
                                                $endYear = $currentYear + 7;
                                                @endphp
                                                @for ($year = $startYear; $year <= $endYear; $year++)
                                                <option value="{{ $year }}" {{ old('tahun') == $year ? 'selected' : '' }}>{{ $year }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                        @error('tahun')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="form-label" for="semester">Semester</label>
                                        <div class="form-control-wrap">
                                            <select class="form-control @error('semester') is-invalid @enderror" id="semester" name="semester">
                                                <option value="">-- Pilih Semester --</option>
                                                <option value="1" {{ old('semester') == '1' ? 'selected' : '' }}>Gasal</option>
                                                <option value="2" {{ old('semester') == '2' ? 'selected' : '' }}>Genap</option>
                                            </select>
                                        </div>
                                        @error('semester')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                                    <!-- <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="form-label" for="status">Status</label>
                                            <div class="form-control-wrap">
                                                <select class="form-control @error('status') is-invalid @enderror" id="status" name="status">
                                                    <option value="">-- Pilih Status --</option>
                                                    <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>Aktif</option>
                                                    <option value="2" {{ old('status') == '0' ? 'selected' : '' }}>Nonaktif</option>
                                                </select>
                                            </div>
                                            @error('status')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                    </div> -->
                                </div>
                                <hr>
                                <div class="col-12">
                                    <div class="form-group float-end">
                                        <button type="submit" class="btn btn-lg btn-primary">
                                            <em class="icon ni ni-save"></em><span>Simpan</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection

@push('styles')
<!-- flatpickr core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<!-- flatpickr monthSelect plugin CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css">
@endpush

@push('scripts')
<!-- flatpickr core JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- flatpickr monthSelect plugin JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js"></script>

<script>
    flatpickr("#tahun", {
        plugins: [
        new monthSelectPlugin({
                dateFormat: "Y",     // the format you want in the input
                altFormat: "Y",      // the format shown in the calendar
                theme: "light"       // optional theme
            })
        ],
        // disable manual input typing
        allowInput: false,
        // Make it required by default as you have required attribute
    });x
</script>
@endpush