@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-arrow-up-circle-fill"></i> Promote Student
                        </h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route('home')}}">Home</a></li>
                                <li class="breadcrumb-item"><a href="{{route('student.list.show')}}">Student List</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Promote Student</li>
                            </ol>
                        </nav>
                        
                        @include('session-messages')

                        <!-- Student Info Card -->
                        @if($current_promotion)
                        <div class="card shadow-sm mb-4 border-info">
                            <div class="card-header bg-info text-white">
                                <h5 class="mb-0"><i class="bi bi-person-badge"></i> Current Student Information</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <p class="mb-1"><strong>Student Name:</strong></p>
                                        <p class="text-muted">{{$student->first_name}} {{$student->last_name}}</p>
                                    </div>
                                    <div class="col-md-3">
                                        <p class="mb-1"><strong>Current Class:</strong></p>
                                        <p class="text-muted">{{$current_promotion->schoolClass->class_name ?? 'N/A'}}</p>
                                    </div>
                                    <div class="col-md-3">
                                        <p class="mb-1"><strong>Current Section:</strong></p>
                                        <p class="text-muted">{{$current_promotion->section->section_name ?? 'N/A'}}</p>
                                    </div>
                                    <div class="col-md-3">
                                        <p class="mb-1"><strong>Current Session:</strong></p>
                                        <p class="text-muted">{{$current_promotion->schoolSession->session_name ?? 'N/A'}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif

                        <div class="mb-4">
                            <form class="row g-3" action="{{route('student.promote.store')}}" method="POST">
                                @csrf
                                <input type="hidden" name="student_id" value="{{ $student->id }}">
                                <input type="hidden" name="session_id" value="{{$current_school_session_id}}">
                                
                                <!-- Academic Information Card -->
                                <div class="card shadow-sm mb-3">
                                    <div class="card-header bg-primary text-white">
                                        <h5 class="mb-0"><i class="bi bi-mortarboard"></i> New Class Assignment</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label for="inputAssignToClass" class="form-label fw-bold">
                                                    <i class="bi bi-book"></i> Assign to Class
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <select onchange="getSections(this);" class="form-select form-select-lg"
                                                        id="inputAssignToClass" name="class_id" required>
                                                    @isset($school_classes)
                                                        <option selected disabled value="">Please select a class</option>
                                                        @foreach ($school_classes as $school_class)
                                                            <option value="{{$school_class->id}}" {{old('class_id') == $school_class->id ? 'selected' : ''}}>
                                                                {{$school_class->class_name}}
                                                            </option>
                                                        @endforeach
                                                    @endisset
                                                </select>
                                            </div>
                                            
                                            <div class="col-md-6">
                                                <label for="inputAssignToSection" class="form-label fw-bold">
                                                    <i class="bi bi-diagram-3"></i> Assign to Section
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <select class="form-select form-select-lg" id="inputAssignToSection" name="section_id" required>
                                                    <option value="">Select class first</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Payment Information Card -->
                                <div class="card shadow-sm border-primary mb-3">
                                    <div class="card-header bg-primary text-white">
                                        <h6 class="mb-0"><i class="bi bi-cash-coin"></i> 💰 Payment Settings</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row g-3">
                                            <!-- Payment Type Buttons -->
                                            <div class="col-md-12">
                                                <label class="form-label fw-bold">
                                                    Payment Type <sup><i class="bi bi-asterisk text-primary"></i></sup>
                                                </label>
                                                <div class="btn-group d-flex" role="group">
                                                    @if(auth()->user()->role == 'admin')
                                                    <input type="radio" class="btn-check" name="payment_type" id="payment_type_free" value="0" onchange="updatePaymentFields(0)" {{old('payment_type', '1') == '0' ? 'checked' : ''}}>
                                                    <label class="btn btn-outline-info btn-lg" for="payment_type_free">
                                                        <i class="bi bi-gift fs-4"></i><br>
                                                        <span class="fw-bold">Free</span><br>
                                                        <small>Admission Only</small>
                                                    </label>
                                                    @endif

                                                    <input type="radio" class="btn-check" name="payment_type" id="payment_type_monthly" value="1" onchange="updatePaymentFields(1)" {{old('payment_type', '1') == '1' ? 'checked' : ''}}>
                                                    <label class="btn btn-outline-primary btn-lg" for="payment_type_monthly">
                                                        <i class="bi bi-calendar-month fs-4"></i><br>
                                                        <span class="fw-bold">Monthly</span><br>
                                                        <small>Pay each month</small>
                                                    </label>

                                                    <input type="radio" class="btn-check" name="payment_type" id="payment_type_annual" value="2" onchange="updatePaymentFields(2)" {{old('payment_type') == '2' ? 'checked' : ''}}>
                                                    <label class="btn btn-outline-warning btn-lg" for="payment_type_annual">
                                                        <i class="bi bi-calendar-year fs-4"></i><br>
                                                        <span class="fw-bold">Annual</span><br>
                                                        <small>Pay once yearly</small>
                                                    </label>
                                                </div>
                                            </div>

                                            <!-- Admission Fee -->
                                            <div class="col-md-6">
                                                <label for="inputAdmissionFee" class="form-label fw-bold">
                                                    <i class="bi bi-cash"></i> Admission Fee (PKR)
                                                    <sup><i class="bi bi-asterisk text-primary"></i></sup>
                                                </label>
                                                <input 
                                                    type="number" 
                                                    step="0.01" 
                                                    class="form-control form-control-lg" 
                                                    id="inputAdmissionFee"
                                                    name="admission_fee_amount" 
                                                    placeholder="Admission Fee" 
                                                    required
                                                    min="0"
                                                    value="{{old('admission_fee_amount', $defaultAdmissionFee)}}"
                                                    onchange="calculateTotal()"
                                                >
                                                <small class="text-muted">One-time fee for enrollment</small>
                                            </div>

                                            <!-- Recurring Fee -->
                                            <div class="col-md-6" id="recurring_fee_container">
                                                <label for="inputRecurringFee" class="form-label fw-bold">
                                                    <i class="bi bi-arrow-repeat"></i> 
                                                    <span id="recurring_fee_label">Monthly</span> Fee (PKR)
                                                </label>
                                                <input 
                                                    type="number" 
                                                    step="0.01" 
                                                    class="form-control form-control-lg" 
                                                    id="inputRecurringFee"
                                                    name="recurring_fee_amount" 
                                                    placeholder="0.00" 
                                                    min="0"
                                                    value="{{old('recurring_fee_amount', '0')}}"
                                                    onchange="calculateTotal()"
                                                >
                                                <small class="text-muted" id="recurring_fee_hint">Amount to pay each month</small>
                                            </div>

                                            <!-- Total Display -->
                                            <div class="col-12">
                                                <div class="alert alert-light border shadow-sm">
                                                    <div class="row align-items-center">
                                                        <div class="col">
                                                            <small class="text-muted">Total Amount to be Paid:</small>
                                                            <div class="fs-3 fw-bold text-primary" id="total_amount">
                                                                {{number_format($defaultAdmissionFee, 2)}} PKR
                                                            </div>
                                                        </div>
                                                        <div class="col-auto">
                                                            <i class="bi bi-calculator fs-1 text-primary"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="alert alert-info mt-3 mb-0">
                                            <i class="bi bi-info-circle-fill"></i> 
                                            <strong>Note:</strong> A new payment profile will be created for this promotion. 
                                            The student's previous session payment history will be preserved.
                                        </div>
                                    </div>
                                </div>

                                <!-- Action Buttons -->
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <div class="d-flex justify-content-between">
                                            <a href="{{route('student.list.show')}}" class="btn btn-secondary btn-lg">
                                                <i class="bi bi-x-circle"></i> Cancel
                                            </a>
                                            <button type="submit" class="btn btn-success btn-lg px-5">
                                                <i class="bi bi-arrow-up-circle-fill"></i> Promote Student
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @include('layouts.footer')
            </div>
        </div>
    </div>
    
    <script>
        function getSections(obj) {
            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');
                    sectionSelect.options.length = 0;
                    data.sections.unshift({'id': '', '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);
                });
        }

        function updatePaymentFields(paymentType) {
            const recurringFeeContainer = document.getElementById('recurring_fee_container');
            const recurringFeeInput = document.getElementById('inputRecurringFee');
            const recurringFeeLabel = document.getElementById('recurring_fee_label');
            const recurringFeeHint = document.getElementById('recurring_fee_hint');

            if (paymentType == 0) {
                // Free - hide recurring fee
                recurringFeeContainer.style.display = 'none';
                recurringFeeInput.value = '0';
                recurringFeeInput.required = false;
            } else if (paymentType == 1) {
                // Monthly
                recurringFeeContainer.style.display = 'block';
                recurringFeeLabel.textContent = 'Monthly';
                recurringFeeHint.textContent = 'Amount to pay each month';
                recurringFeeInput.required = false;
            } else if (paymentType == 2) {
                // Annual
                recurringFeeContainer.style.display = 'block';
                recurringFeeLabel.textContent = 'Annual';
                recurringFeeHint.textContent = 'Amount to pay once yearly';
                recurringFeeInput.required = false;
            }
            
            calculateTotal();
        }

        function calculateTotal() {
            const admissionFee = parseFloat(document.getElementById('inputAdmissionFee').value) || 0;
            const recurringFee = parseFloat(document.getElementById('inputRecurringFee').value) || 0;
            const total = admissionFee + recurringFee;
            
            document.getElementById('total_amount').textContent = total.toLocaleString('en-PK', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }) + ' PKR';
        }

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            // Get selected payment type
            const selectedType = document.querySelector('input[name="payment_type"]:checked');
            if (selectedType) {
                updatePaymentFields(parseInt(selectedType.value));
            }
            
            // Restore section if there's an old value
            @if(old('class_id'))
                var classSelect = document.getElementById('inputAssignToClass');
                if (classSelect.value) {
                    getSections(classSelect);
                    setTimeout(function() {
                        var sectionSelect = document.getElementById('inputAssignToSection');
                        sectionSelect.value = '{{old('section_id')}}';
                    }, 500);
                }
            @endif
        });
    </script>
@endsection