@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-start">
        @include('layouts.left-menu')
        <div class="col-xs-11 col-sm-11 col-md-11 col-lg-10 col-xl-10 col-xxl-10">
            <div class="row pt-2">
                <div class="col ps-4">
                    <h1 class="display-6 mb-3">
                        <i class="bi bi-person-lines-fill"></i> Promote Students
                    </h1>
                    @include('session-messages')
                    
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle-fill"></i>
                        <strong>Important:</strong> Students must be promoted only once to a new Session. Set payment details for each student below.
                    </div>

                    <div class="mb-4 mt-4">
                        <form action="{{route('promotions.store')}}" method="POST" id="promotionForm">
                            @csrf
                            
                            @isset($students)
                                @foreach ($students as $index => $student)
                                <div class="card shadow-sm mb-4 border-primary">
                                    <div class="card-header bg-primary text-white">
                                        <h5 class="mb-0">
                                            <i class="bi bi-person-circle"></i> 
                                            {{$student->student->first_name}} {{$student->student->last_name}}
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <!-- Student Info Column -->
                                            <div class="col-md-4">
                                                <h6 class="text-muted mb-3">Student Information</h6>
                                                <p class="mb-2"><strong>ID Card:</strong></p>
                                                <input type="text" class="form-control mb-3" name="id_card_number[{{$student->student->id}}]" value="{{$student->id_card_number}}">
                                                
                                                <p class="mb-2"><strong>Previous Class:</strong> {{$schoolClass->class_name}}</p>
                                                <p class="mb-2"><strong>Previous Section:</strong> {{$section->section_name}}</p>
                                            </div>

                                            <!-- Promotion Column -->
                                            <div class="col-md-4 border-start border-end">
                                                <h6 class="text-muted mb-3">Promote To</h6>
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Class</label>
                                                    <select onchange="getSections(this, {{$index}});" class="form-select" id="inputAssignToClass{{$index}}" name="class_id[{{$index}}]" required>
                                                        @isset($school_classes)
                                                            <option selected disabled>Please select a class</option>
                                                            @foreach ($school_classes as $school_class)
                                                                <option value="{{$school_class->id}}">{{$school_class->class_name}}</option>
                                                            @endforeach
                                                        @endisset
                                                    </select>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Section</label>
                                                    <select class="form-select" id="inputAssignToSection{{$index}}" name="section_id[{{$index}}]" required>
                                                        <option selected disabled>Select class first</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <!-- Payment Settings Column -->
                                            <div class="col-md-4">
                                                <h6 class="text-muted mb-3">💰 Payment Settings</h6>
                                                
                                                <!-- Payment Type - Simple Radio Buttons -->
                                                <label class="form-label fw-bold">Payment Type</label>
                                                <div class="mb-3">
                                                    <div class="btn-group d-flex" role="group">
                                                        <input type="radio" class="btn-check" name="payment_type[{{$index}}]" id="payment_type_free_{{$index}}" value="0" onchange="updatePaymentFields({{$index}}, 0)">
                                                        <label class="btn btn-outline-info" for="payment_type_free_{{$index}}">
                                                            <i class="bi bi-gift"></i> Free
                                                        </label>

                                                        <input type="radio" class="btn-check" name="payment_type[{{$index}}]" id="payment_type_monthly_{{$index}}" value="1" onchange="updatePaymentFields({{$index}}, 1)" checked>
                                                        <label class="btn btn-outline-primary" for="payment_type_monthly_{{$index}}">
                                                            <i class="bi bi-calendar-month"></i> Monthly
                                                        </label>

                                                        <input type="radio" class="btn-check" name="payment_type[{{$index}}]" id="payment_type_annual_{{$index}}" value="2" onchange="updatePaymentFields({{$index}}, 2)">
                                                        <label class="btn btn-outline-warning" for="payment_type_annual_{{$index}}">
                                                            <i class="bi bi-calendar-year"></i> Annual
                                                        </label>
                                                    </div>
                                                </div>

                                                <!-- Admission Fee -->
                                                <div class="mb-2">
                                                    <label class="form-label fw-bold">Admission Fee (PKR)</label>
                                                    <input 
                                                        type="number" 
                                                        step="0.01" 
                                                        class="form-control" 
                                                        name="admission_fee[{{$index}}]" 
                                                        id="admission_fee_{{$index}}"
                                                        value="{{old('admission_fee.' . $index, $defaultAdmissionFee)}}"
                                                        required
                                                        min="0"
                                                    >
                                                </div>

                                                <!-- Recurring Fee -->
                                                <div class="mb-2" id="recurring_fee_container_{{$index}}">
                                                    <label class="form-label fw-bold">
                                                        <span id="recurring_fee_label_{{$index}}">Monthly</span> Fee (PKR)
                                                    </label>
                                                    <input 
                                                        type="number" 
                                                        step="0.01" 
                                                        class="form-control" 
                                                        name="recurring_fee[{{$index}}]" 
                                                        id="recurring_fee_{{$index}}"
                                                        value="0"
                                                        min="0"
                                                    >
                                                </div>

                                                <!-- Total Display -->
                                                <div class="alert alert-light border mt-2 mb-0">
                                                    <small class="text-muted">Total Amount:</small>
                                                    <div class="fs-5 fw-bold text-primary" id="total_amount_{{$index}}">
                                                        {{number_format($defaultAdmissionFee, 2)}} PKR
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            @endisset

                            <div class="card shadow">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <div>
                                        <h5 class="mb-0">Ready to Promote?</h5>
                                        <small class="text-muted">This will create promotions and payment profiles for all students above</small>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-lg px-5">
                                        <i class="bi bi-check-circle-fill"></i> Promote All Students
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            @include('layouts.footer')
        </div>
    </div>
</div>

<script>
// Get sections by class ID
function getSections(obj, index) {
    var class_id = obj.options[obj.selectedIndex].value;
    var url = "{{route('get.sections.courses.by.classId')}}?class_id=" + class_id 

    fetch(url)
    .then((resp) => resp.json())
    .then(function(data) {
        var sectionSelect = document.getElementById('inputAssignToSection'+index);
        sectionSelect.options.length = 0;
        data.sections.unshift({'id': 0,'section_name': 'Please select a section'})
        data.sections.forEach(function(section, key) {
            sectionSelect[key] = new Option(section.section_name, section.id);
        });
    })
    .catch(function(error) {
        console.log(error);
    });
}

// Update payment fields based on payment type
function updatePaymentFields(index, paymentType) {
    const recurringFeeContainer = document.getElementById('recurring_fee_container_' + index);
    const recurringFeeInput = document.getElementById('recurring_fee_' + index);
    const recurringFeeLabel = document.getElementById('recurring_fee_label_' + index);
    const admissionFeeInput = document.getElementById('admission_fee_' + index);

    if (paymentType === 0) {
        // Free student
        recurringFeeContainer.style.display = 'none';
        recurringFeeInput.value = '0';
        recurringFeeInput.required = false;
    } else if (paymentType === 1) {
        // Monthly student
        recurringFeeContainer.style.display = 'block';
        recurringFeeLabel.textContent = 'Monthly';
        recurringFeeInput.required = false;
    } else {
        // Annual student
        recurringFeeContainer.style.display = 'block';
        recurringFeeLabel.textContent = 'Annual';
        recurringFeeInput.required = false;
    }

    // Update total
    updateTotal(index);
}

// Calculate and display total amount
function updateTotal(index) {
    const admissionFee = parseFloat(document.getElementById('admission_fee_' + index).value) || 0;
    const recurringFee = parseFloat(document.getElementById('recurring_fee_' + index).value) || 0;
    const total = admissionFee + recurringFee;
    
    document.getElementById('total_amount_' + index).textContent = total.toFixed(2) + ' PKR';
}

// Initialize all forms
document.addEventListener('DOMContentLoaded', function() {
    // Get total number of students
    const forms = document.querySelectorAll('[id^="admission_fee_"]');
    forms.forEach((input, index) => {
        // Add event listeners for real-time calculation
        const admissionFeeInput = document.getElementById('admission_fee_' + index);
        const recurringFeeInput = document.getElementById('recurring_fee_' + index);
        
        if (admissionFeeInput) {
            admissionFeeInput.addEventListener('input', function() {
                updateTotal(index);
            });
        }
        
        if (recurringFeeInput) {
            recurringFeeInput.addEventListener('input', function() {
                updateTotal(index);
            });
        }

        // Initialize payment type (default is monthly)
        updatePaymentFields(index, 1);
    });
});

// Form validation before submit
document.getElementById('promotionForm')?.addEventListener('submit', function(e) {
    const admissionFees = document.querySelectorAll('[id^="admission_fee_"]');
    let allValid = true;
    
    admissionFees.forEach((input) => {
        if (!input.value || parseFloat(input.value) < 0) {
            allValid = false;
        }
    });
    
    if (!allValid) {
        e.preventDefault();
        alert('⚠️ Please fill in all admission fees with valid amounts');
        return false;
    }
    
    // Confirm before submitting
    const studentCount = admissionFees.length;
    if (!confirm('✅ Promote ' + studentCount + ' student(s) and create payment profiles?')) {
        e.preventDefault();
        return false;
    }
});
</script>

<style>
.btn-check:checked + .btn-outline-info {
    background-color: #0dcaf0;
    color: white;
    border-color: #0dcaf0;
}

.btn-check:checked + .btn-outline-primary {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

.btn-check:checked + .btn-outline-warning {
    background-color: #ffc107;
    color: black;
    border-color: #ffc107;
}

.card {
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-2px);
}
</style>

@endsection