@extends('layouts.app')

@section('title', 'Configure Fee Structure | Institution Axis')

@section('sidebar-menu')
    @include('schooladmin.partials.sidebar')
@endsection

@section('sidebar-footer')
    <p>{{ auth()->user()->school?->name ?? 'Institution Axis' }}</p>
@endsection

@section('breadcrumb')
    <span><a href="{{ route('schooladmin.dashboard') }}">Home</a></span> / <span>Finance</span> / <span><a href="{{ route('schooladmin.finance.fee-structures.index') }}">Fee Structures</a></span> / <span class="active-page">Configure</span>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card shadow border-0 rounded-4">
                <div class="card-header bg-white py-3">
                    <h5 class="fw-bold mb-0">Configure New Fee Structure</h5>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('schooladmin.finance.fee-structures.store') }}" method="POST" id="feeStructureForm">
                        @csrf
                        <div class="row g-3 mb-4">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Target Class</label>
                                <select name="school_class_id" class="form-select rounded-pill @error('school_class_id') is-invalid @enderror" required>
                                    <option value="">Select Class...</option>
                                    @foreach($classes as $class)
                                        <option value="{{ $class->id }}">{{ $class->name }} ({{ $class->stream }})</option>
                                    @endforeach
                                </select>
                                @error('school_class_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Term</label>
                                <select name="term" class="form-select rounded-pill @error('term') is-invalid @enderror" required>
                                    <option value="1">Term 1</option>
                                    <option value="2">Term 2</option>
                                    <option value="3">Term 3</option>
                                </select>
                                @error('term') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Academic Year</label>
                                <input type="number" name="academic_year" class="form-control rounded-pill @error('academic_year') is-invalid @enderror" value="{{ date('Y') }}" required>
                                @error('academic_year') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <hr class="my-4">

                        <h6 class="fw-bold mb-3">Fee Breakdown Components</h6>
                        <div id="feeItemsContainer">
                            <div class="row g-3 mb-3 fee-item-row">
                                <div class="col-md-7">
                                    <label class="form-label small text-muted">Item Name (e.g., Tuition Fee)</label>
                                    <input type="text" name="items[0][name]" class="form-control" placeholder="Description" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small text-muted">Amount (KES)</label>
                                    <input type="number" name="items[0][amount]" class="form-control item-amount" placeholder="0.00" step="0.01" required>
                                </div>
                                <div class="col-md-1 d-flex align-items-end">
                                    <button type="button" class="btn btn-outline-danger btn-sm rounded-circle remove-item" style="display:none;">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill mt-2" id="addItem">
                            <i class="fas fa-plus me-1"></i> Add Component
                        </button>

                        <div class="mt-4 p-3 bg-light rounded-4 d-flex justify-content-between align-items-center">
                            <span class="h5 mb-0 fw-bold">Total Fee Amount:</span>
                            <span class="h4 mb-0 fw-bold text-primary">KES <span id="totalDisplay">0.00</span></span>
                        </div>

                        <div class="mt-5 text-end">
                            <a href="{{ route('schooladmin.finance.fee-structures.index') }}" class="btn btn-light px-4 me-2">Cancel</a>
                            <button type="submit" class="btn btn-primary px-5 rounded-pill shadow-sm">Save Fee Structure</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let itemIndex = 1;
    const container = document.getElementById('feeItemsContainer');
    const totalDisplay = document.getElementById('totalDisplay');

    function calculateTotal() {
        let total = 0;
        document.querySelectorAll('.item-amount').forEach(input => {
            total += parseFloat(input.value) || 0;
        });
        totalDisplay.innerText = total.toLocaleString('en-US', {minimumFractionDigits: 2});
    }

    document.getElementById('addItem').addEventListener('click', function() {
        const row = document.createElement('div');
        row.className = 'row g-3 mb-3 fee-item-row';
        row.innerHTML = `
            <div class="col-md-7">
                <input type="text" name="items[${itemIndex}][name]" class="form-control" placeholder="Description" required>
            </div>
            <div class="col-md-4">
                <input type="number" name="items[${itemIndex}][amount]" class="form-control item-amount" placeholder="0.00" step="0.01" required>
            </div>
            <div class="col-md-1 d-flex align-items-end">
                <button type="button" class="btn btn-outline-danger btn-sm rounded-circle remove-item">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `;
        container.appendChild(row);
        itemIndex++;
        
        row.querySelector('.item-amount').addEventListener('input', calculateTotal);
        row.querySelector('.remove-item').addEventListener('click', function() {
            row.remove();
            calculateTotal();
        });
    });

    container.addEventListener('input', function(e) {
        if(e.target.classList.contains('item-amount')) {
            calculateTotal();
        }
    });
</script>
@endpush