@extends('layouts.master')

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

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Create Billing Period</h1>
        <a href="{{ route('billing-periods.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Billing Periods
        </a>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Billing Period Information</h5>
            <small class="text-muted">Set up a new billing period for fee collection and tracking</small>
        </div>
        <div class="card-body">
            <form action="{{ route('billing-periods.store') }}" method="POST">
                @csrf
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="name" class="form-label">Period Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" 
                                   value="{{ old('name') }}" required
                                   placeholder="e.g., Term 1 2024/2025">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="term_id" class="form-label">Term <span class="text-danger">*</span></label>
                            <select class="form-select" id="term_id" name="term_id" required>
                                <option value="">Select Term</option>
                                @foreach($terms as $term)
                                    <option value="{{ $term->id }}" {{ old('term_id') == $term->id ? 'selected' : '' }}>
                                        {{ $term->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="sch_session" class="form-label">Academic Session <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="sch_session" name="sch_session" 
                                   value="{{ old('sch_session') }}" required
                                   placeholder="e.g., 2024/2025">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="start_date" class="form-label">Start Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="start_date" name="start_date" 
                                   value="{{ old('start_date') }}" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="end_date" class="form-label">End Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="end_date" name="end_date" 
                                   value="{{ old('end_date') }}" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="billing_due_date" class="form-label">Billing Due Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="billing_due_date" name="billing_due_date" 
                                   value="{{ old('billing_due_date') }}" required>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="late_fee_amount" class="form-label">Late Fee Amount</label>
                            <div class="input-group">
                                <span class="input-group-text">GHS</span>
                                <input type="number" class="form-control" id="late_fee_amount" name="late_fee_amount" 
                                       value="{{ old('late_fee_amount', 0) }}" min="0" step="0.01">
                            </div>
                            <small class="form-text text-muted">Fee charged after the grace period expires</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="late_fee_grace_days" class="form-label">Late Fee Grace Days</label>
                            <input type="number" class="form-control" id="late_fee_grace_days" name="late_fee_grace_days" 
                                   value="{{ old('late_fee_grace_days', 0) }}" min="0">
                            <small class="form-text text-muted">Days after due date before late fees apply</small>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="description" class="form-label">Description</label>
                    <textarea class="form-control" id="description" name="description" rows="3"
                              placeholder="Optional description for this billing period">{{ old('description') }}</textarea>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Fee Types (Optional)</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="fee_types[]" value="tuition" id="fee_tuition">
                                <label class="form-check-label" for="fee_tuition">Tuition Fees</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="fee_types[]" value="boarding" id="fee_boarding">
                                <label class="form-check-label" for="fee_boarding">Boarding Fees</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="fee_types[]" value="transport" id="fee_transport">
                                <label class="form-check-label" for="fee_transport">Transport Fees</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="fee_types[]" value="activities" id="fee_activities">
                                <label class="form-check-label" for="fee_activities">Activity Fees</label>
                            </div>
                            <small class="form-text text-muted">Select applicable fee types for this period</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Status Options</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_current" id="is_current" value="1">
                                <label class="form-check-label" for="is_current">
                                    <strong>Set as Current Period</strong>
                                </label>
                                <small class="form-text text-muted d-block">
                                    This will be the default period for new bills. Only one period can be current.
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="border-top pt-3">
                    <div class="d-flex justify-content-end gap-2">
                        <a href="{{ route('billing-periods.index') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Create Billing Period
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Help Card -->
    <div class="card mt-4">
        <div class="card-header">
            <h6 class="mb-0">
                <i class="fas fa-question-circle"></i> Setup Guidelines
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <h6><i class="fas fa-calendar-alt text-primary"></i> Dates</h6>
                    <ul class="small text-muted">
                        <li>Start/End dates define the billing period</li>
                        <li>Due date should be within or after the period</li>
                        <li>Late fees apply after grace period expires</li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h6><i class="fas fa-money-bill text-success"></i> Late Fees</h6>
                    <ul class="small text-muted">
                        <li>Set to 0 to disable late fees</li>
                        <li>Grace days provide flexibility</li>
                        <li>Applied automatically when overdue</li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h6><i class="fas fa-star text-warning"></i> Current Period</h6>
                    <ul class="small text-muted">
                        <li>Used as default for new bills</li>
                        <li>Only one can be current at a time</li>
                        <li>Can be changed later if needed</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-generate name based on term and session
    const termSelect = document.getElementById('term_id');
    const sessionInput = document.getElementById('sch_session');
    const nameInput = document.getElementById('name');
    
    function updateName() {
        const termText = termSelect.options[termSelect.selectedIndex]?.text;
        const session = sessionInput.value;
        
        if (termText && session && termText !== 'Select Term') {
            nameInput.value = `${termText} ${session}`;
        }
    }
    
    termSelect.addEventListener('change', updateName);
    sessionInput.addEventListener('input', updateName);
});
</script>
@endsection