@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> Add Student
                        </h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route('home')}}">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Add Student</li>
                            </ol>
                        </nav>

                        @include('session-messages')

                        {{-- Validation Errors --}}
                        @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <h5 class="alert-heading"><i class="bi bi-exclamation-triangle-fill"></i> Validation Errors</h5>
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif

                        <div class="alert alert-info alert-dismissible fade show" role="alert">
                            <i class="bi bi-info-circle-fill me-2"></i>
                            <strong>Important:</strong> Make sure to create the "Class" and "Section" before adding a student.
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>

                        <div class="mb-4">
                            <form action="{{route('school.student.create')}}" method="POST">
                                @csrf

                                {{-- Student Information Card --}}
                                <div class="card shadow-sm border-success mb-4">
                                    <div class="card-header bg-success text-white">
                                        <h6 class="mb-0"><i class="bi bi-person-fill"></i> Student Information</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row g-3">
                                            <div class="col-md-4">
                                                <label for="inputFirstName" class="form-label fw-bold">
                                                    <i class="bi bi-person"></i> First Name 
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <input type="text" class="form-control form-control-lg" id="inputFirstName" 
                                                       name="first_name" placeholder="Enter first name" required 
                                                       value="{{old('first_name')}}">
                                            </div>
                                            <div class="col-md-4">
                                                <label for="inputLastName" class="form-label fw-bold">
                                                    <i class="bi bi-person"></i> Last Name 
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <input type="text" class="form-control form-control-lg" id="inputLastName" 
                                                       name="last_name" placeholder="Enter last name" required 
                                                       value="{{old('last_name')}}">
                                            </div>
                                            <div class="col-md-4">
                                                <label for="inputEmail4" class="form-label fw-bold">
                                                    <i class="bi bi-envelope"></i> Email 
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <input type="email" class="form-control form-control-lg" id="inputEmail4" 
                                                       name="email" placeholder="student@example.com" required 
                                                       value="{{old('email')}}">
                                            </div>
                                            
                                            <div class="col-md-3">
                                                <label for="inputBirthday" class="form-label fw-bold">
                                                    <i class="bi bi-calendar-event"></i> Birthday 
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <input type="date" class="form-control form-control-lg" id="inputBirthday" 
                                                       name="birthday" required value="{{old('birthday')}}">
                                            </div>
                                            <div class="col-md-3">
                                                <label for="inputState" class="form-label fw-bold">
                                                    <i class="bi bi-gender-ambiguous"></i> Gender 
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <select id="inputState" class="form-select form-select-lg" name="gender" required>
                                                    <option value="Male" {{old('gender', 'Male') == 'Male' ? 'selected' : ''}}>
                                                        Male
                                                    </option>
                                                    <option value="Female" {{old('gender') == 'Female' ? 'selected' : ''}}>
                                                        Female
                                                    </option>
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="inputPhone" class="form-label fw-bold">
                                                    <i class="bi bi-telephone"></i> Phone 
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <input type="text" class="form-control form-control-lg" id="inputPhone" 
                                                       name="phone" placeholder="+92 312 3456789" required 
                                                       value="{{old('phone')}}">
                                            </div>
                                            <div class="col-md-3">
                                                <label for="formFile" class="form-label fw-bold">
                                                    <i class="bi bi-image"></i> Photo
                                                </label>
                                                <input class="form-control form-control-lg" type="file" id="formFile" 
                                                       onchange="previewFile()">
                                                <div id="previewPhoto" class="mt-2"></div>
                                                <input type="hidden" id="photoHiddenInput" name="photo" value="">
                                            </div>
                                            
                                            <div class="col-md-6">
                                                <label for="inputAddress" class="form-label fw-bold">
                                                    <i class="bi bi-geo-alt"></i> Address 
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <input type="text" class="form-control form-control-lg" id="inputAddress" 
                                                       name="address" placeholder="Street address" required 
                                                       value="{{old('address')}}">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="inputCity" class="form-label fw-bold">
                                                    <i class="bi bi-building"></i> City 
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <input type="text" class="form-control form-control-lg" id="inputCity" 
                                                       name="city" placeholder="Karachi" required 
                                                       value="{{old('city', 'Karachi')}}">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Parents' Information Card --}}
                                <div class="card shadow-sm border-info mb-4">
                                    <div class="card-header bg-info text-white">
                                        <h6 class="mb-0"><i class="bi bi-people-fill"></i> Parents' Information</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label for="inputFatherName" class="form-label fw-bold">
                                                    <i class="bi bi-person-badge"></i> Father's Name 
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <input type="text" class="form-control form-control-lg" 
                                                       id="inputFatherName" name="father_name" 
                                                       placeholder="Enter father's name" 
                                                       value="{{old('father_name')}}">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="inputFatherPhone" class="form-label fw-bold">
                                                    <i class="bi bi-telephone"></i> Father's Phone 
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <input type="text" class="form-control form-control-lg" 
                                                       id="inputFatherPhone" name="father_phone" 
                                                       placeholder="+92 312 3456789" 
                                                       value="{{old('father_phone')}}">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="inputMotherName" class="form-label fw-bold">
                                                    <i class="bi bi-person-badge"></i> Mother's Name 
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <input type="text" class="form-control form-control-lg" 
                                                       id="inputMotherName" name="mother_name" 
                                                       placeholder="Enter mother's name" 
                                                       value="{{old('mother_name')}}">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="inputMotherPhone" class="form-label fw-bold">
                                                    <i class="bi bi-telephone"></i> Mother's Phone 
                                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                                </label>
                                                <input type="text" class="form-control form-control-lg" 
                                                       id="inputMotherPhone" name="mother_phone" 
                                                       placeholder="+92 312 3456789" 
                                                       value="{{old('mother_phone')}}">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Academic Information Card --}}
                                <div class="card shadow-sm border-warning mb-4">
                                    <div class="card-header bg-warning text-dark">
                                        <h6 class="mb-0"><i class="bi bi-book-fill"></i> Academic Information</h6>
                                    </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-door-open"></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>
                                                    <option disabled value="" {{old('class_id') ? '' : 'selected'}}>Please select a class</option>
                                                    @isset($school_classes)
                                                        @if(count($school_classes) > 0)
                                                            @foreach ($school_classes as $school_class)
                                                                <option value="{{$school_class->id}}" {{old('class_id') == $school_class->id ? 'selected' : ''}}>
                                                                    {{$school_class->class_name}}
                                                                </option>
                                                            @endforeach
                                                        @else
                                                            <option disabled>No classes found - Please create classes first</option>
                                                        @endif
                                                    @else
                                                        <option disabled>No classes available</option>
                                                    @endisset
                                                </select>
                                                @isset($school_classes)
                                                    @if(count($school_classes) == 0)
                                                        <small class="text-danger">
                                                            <i class="bi bi-exclamation-triangle"></i> 
                                                            Please create classes in the Academic section first.
                                                        </small>
                                                    @endif
                                                @endisset
                                            </div>
                                            <div class="col-md-6">
                                                <label for="inputAssignToSection" class="form-label fw-bold">
                                                    <i class="bi bi-collection"></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 disabled {{old('section_id') ? '' : 'selected'}}>Select class first</option>
                                                </select>
                                            </div>
                                            <div class="col-md-12">
                                                <label for="inputBoardRegistrationNumber" class="form-label fw-bold">
                                                    <i class="bi bi-card-text"></i> Board Registration Number
                                                </label>
                                                <input type="text" class="form-control form-control-lg" 
                                                       id="inputBoardRegistrationNumber" name="board_reg_no" 
                                                       placeholder="Enter registration number (optional)" 
                                                       value="{{old('board_reg_no')}}">
                                                <small class="text-muted">Optional field - leave blank if not applicable</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <input type="hidden" name="session_id" value="{{$current_school_session_id}}">


                                {{-- Payment Settings Section --}}
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <div class="card shadow-sm border-primary">
                                            <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" 
                                                            placeholder="Admission Fee" 
                                                            required
                                                            min="0"
                                                            value="{{old('admission_fee', $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" 
                                                            placeholder="0.00" 
                                                            min="0"
                                                            value="{{old('recurring_fee', '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>
                                        </div>
                                    </div>
                                </div>

                                {{-- Submit Button --}}
                                <div class="card shadow-sm mt-4">
                                    <div class="card-body d-flex justify-content-between align-items-center">
                                        <div>
                                            <h5 class="mb-0">
                                                <i class="bi bi-check-circle"></i> Ready to Add Student?
                                            </h5>
                                            <small class="text-muted">
                                                Please review all information before submitting
                                            </small>
                                        </div>
                                        <button type="submit" class="btn btn-success btn-lg px-5 shadow">
                                            <i class="bi bi-person-plus-fill"></i> Add Student
                                        </button>
                                    </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': 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(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 student - hide recurring fee
                recurringFeeContainer.style.display = 'none';
                recurringFeeInput.value = '0';
                recurringFeeInput.required = false;
            } else if (paymentType === 1) {
                // Monthly student
                recurringFeeContainer.style.display = 'block';
                recurringFeeLabel.textContent = 'Monthly';
                recurringFeeHint.textContent = 'Amount to pay each month';
                recurringFeeInput.required = false;
            } else {
                // Annual student
                recurringFeeContainer.style.display = 'block';
                recurringFeeLabel.textContent = 'Annual';
                recurringFeeHint.textContent = 'Amount to pay once per year';
                recurringFeeInput.required = false;
            }

            calculateTotal();
        }

        // Calculate total amount
        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').innerHTML = total.toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }) + ' PKR';
        }

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            // Restore payment type selection (for validation errors)
            @if(old('payment_type'))
                updatePaymentFields({{old('payment_type', '1')}});
            @else
                updatePaymentFields(1); // Default to monthly
            @endif
            
            calculateTotal();
            
            // Restore section dropdown if class was previously selected (for validation errors)
            @if(old('class_id'))
                var classSelect = document.getElementById('inputAssignToClass');
                if (classSelect && classSelect.value) {
                    getSections(classSelect);
                    
                    // Wait for sections to load, then set the old value
                    setTimeout(function() {
                        @if(old('section_id'))
                            document.getElementById('inputAssignToSection').value = '{{old('section_id')}}';
                        @endif
                    }, 500);
                }
            @endif
        });
    </script>
    @include('components.photos.photo-input')
@endsection