@extends('layouts.app')
@section('title', 'New Fiscal Year')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.fiscal-years.index') }}">Period Closing</a></li>
    <li class="breadcrumb-item active">New Fiscal Year</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">New Fiscal Year</h1>
        <p class="page-subtitle">Create the next accounting period</p>
    </div>
    <a href="{{ route('admin.fiscal-years.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Back
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-12 col-md-7 col-lg-6">
        <div class="card">
            <div class="card-header"><i class="bi bi-calendar-plus me-2 text-primary"></i>Fiscal Year Details</div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.fiscal-years.store') }}" id="fyForm">
                @csrf
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Fiscal Year Name <span class="required">*</span></label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name', $startDate->format('Y').'-'.$endDate->format('Y')) }}"
                               placeholder="e.g. 2025-2026" required>
                        <div class="form-text">A descriptive name — usually the year range.</div>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label">Start Date <span class="required">*</span></label>
                        <input type="date" name="start_date"
                               class="form-control @error('start_date') is-invalid @enderror"
                               value="{{ old('start_date', $startDate->format('Y-m-d')) }}" required>
                        @error('start_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label">End Date <span class="required">*</span></label>
                        <input type="date" name="end_date"
                               class="form-control @error('end_date') is-invalid @enderror"
                               value="{{ old('end_date', $endDate->format('Y-m-d')) }}" required>
                        @error('end_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12">
                        <div class="alert alert-info py-2 mb-0" style="font-size:13px">
                            <i class="bi bi-info-circle me-1"></i>
                            The new fiscal year will be set as <strong>Open</strong>. You can set it as the
                            active year from the fiscal years list.
                        </div>
                    </div>

                    <div class="col-12 d-flex gap-3 justify-content-end">
                        <a href="{{ route('admin.fiscal-years.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary px-4" id="saveBtn">
                            <i class="bi bi-calendar-plus me-1"></i>Create Fiscal Year
                        </button>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('fyForm').addEventListener('submit', function() {
    const btn = document.getElementById('saveBtn');
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Creating...';
    btn.disabled = true;
});
</script>
@endpush