@extends('layouts.master')

@section('page_title', 'Create Accounting Period')

@section('content')
<div class="">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <h4>Create New Accounting Period</h4>
                </div>
                <div class="card-body">
                    <form action="{{ route('accounting-periods.store') }}" method="POST">
                        @csrf
                        
                        <div class="mb-3">
                            <label for="name" class="form-label">Period Name *</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                   id="name" name="name" value="{{ old('name') }}" 
                                   placeholder="e.g., FY 2024-2025, Q1 2024, January 2024" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="start_date" class="form-label">Start Date *</label>
                                    <input type="date" class="form-control @error('start_date') is-invalid @enderror" 
                                           id="start_date" name="start_date" value="{{ old('start_date') }}" required>
                                    @error('start_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="end_date" class="form-label">End Date *</label>
                                    <input type="date" class="form-control @error('end_date') is-invalid @enderror" 
                                           id="end_date" name="end_date" value="{{ old('end_date') }}" required>
                                    @error('end_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="type" class="form-label">Period Type *</label>
                            <select class="form-select @error('type') is-invalid @enderror" 
                                    id="type" name="type" required>
                                <option value="">Select Period Type</option>
                                <option value="financial_year" {{ old('type') == 'financial_year' ? 'selected' : '' }}>Financial Year</option>
                                <option value="quarter" {{ old('type') == 'quarter' ? 'selected' : '' }}>Quarter</option>
                                <option value="month" {{ old('type') == 'month' ? 'selected' : '' }}>Month</option>
                                <option value="custom" {{ old('type') == 'custom' ? 'selected' : '' }}>Custom Period</option>
                            </select>
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="3" 
                                      placeholder="Optional description for this accounting period">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="is_active" name="is_active" 
                                           value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        Active Period
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="is_current" name="is_current" 
                                           value="1" {{ old('is_current') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_current">
                                        Set as Current Period
                                    </label>
                                    <div class="form-text">Only one period can be current at a time</div>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-info">
                            <strong>Note:</strong> 
                            <ul class="mb-0">
                                <li>The end date must be after the start date</li>
                                <li>Periods should not overlap with existing active periods</li>
                                <li>Setting as current period will deactivate other current periods</li>
                                <li>Financial transactions can only be posted to active periods</li>
                            </ul>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('accounting-periods.index') }}" class="btn btn-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary">Create Accounting Period</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const startDateInput = document.getElementById('start_date');
    const endDateInput = document.getElementById('end_date');
    const typeSelect = document.getElementById('type');
    const nameInput = document.getElementById('name');
    
    // Auto-generate name based on type and dates
    function generatePeriodName() {
        const type = typeSelect.value;
        const startDate = new Date(startDateInput.value);
        const endDate = new Date(endDateInput.value);
        
        if (!startDate || !endDate || !type) return;
        
        let generatedName = '';
        
        switch(type) {
            case 'financial_year':
                generatedName = `FY ${startDate.getFullYear()}-${endDate.getFullYear()}`;
                break;
            case 'quarter':
                const quarter = Math.ceil((startDate.getMonth() + 1) / 3);
                generatedName = `Q${quarter} ${startDate.getFullYear()}`;
                break;
            case 'month':
                generatedName = startDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
                break;
            case 'custom':
                generatedName = `${startDate.toLocaleDateString()} to ${endDate.toLocaleDateString()}`;
                break;
        }
        
        if (generatedName && !nameInput.value) {
            nameInput.value = generatedName;
        }
    }
    
    // Validate end date is after start date
    function validateDates() {
        const startDate = new Date(startDateInput.value);
        const endDate = new Date(endDateInput.value);
        
        if (startDate && endDate && endDate <= startDate) {
            endDateInput.setCustomValidity('End date must be after start date');
        } else {
            endDateInput.setCustomValidity('');
        }
    }
    
    // Event listeners
    startDateInput.addEventListener('change', function() {
        validateDates();
        generatePeriodName();
    });
    
    endDateInput.addEventListener('change', function() {
        validateDates();
        generatePeriodName();
    });
    
    typeSelect.addEventListener('change', generatePeriodName);
});
</script>
@endsection