@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">
                    <!-- Header -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h1 class="display-6 mb-0">
                                <i class="bi bi-pencil-square"></i> Edit 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">Edit Student</li>
                                </ol>
                            </nav>
                        </div>
                        <div>
                            <a href="{{route('student.profile.show', $student->id)}}" class="btn btn-outline-info">
                                <i class="bi bi-person"></i> View Profile
                            </a>
                        </div>
                    </div>

                    @include('session-messages')

                    <form action="{{route('school.student.update')}}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="student_id" value="{{$student->id}}">
                        
                        {{-- Personal Information Card --}}
                        <div class="card shadow-sm border-primary mb-4">
                            <div class="card-header bg-primary text-white">
                                <h6 class="mb-0"><i class="bi bi-person-fill"></i> Personal Information</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <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="First Name" required 
                                               value="{{old('first_name', $student->first_name)}}">
                                    </div>
                                    <div class="col-md-3">
                                        <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="Last Name" required 
                                               value="{{old('last_name', $student->last_name)}}">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="inputEmail" 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="inputEmail" name="email" 
                                               placeholder="student@example.com" required 
                                               value="{{old('email', $student->email)}}">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="inputBirthday" class="form-label fw-bold">
                                            <i class="bi bi-cake"></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', $student->birthday)}}">
                                    </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', $student->phone)}}">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="inputGender" 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="inputGender" class="form-select form-select-lg" name="gender" required>
                                            <option value="Male" {{old('gender', $student->gender) == 'Male' ? 'selected' : ''}}>Male</option>
                                            <option value="Female" {{old('gender', $student->gender) == 'Female' ? 'selected' : ''}}>Female</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="inputBloodType" class="form-label fw-bold">
                                            <i class="bi bi-droplet"></i> Blood Type 
                                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                        </label>
                                        <select id="inputBloodType" class="form-select form-select-lg" name="blood_type" required>
                                            <option value="A+" {{old('blood_type', $student->blood_type) == 'A+' ? 'selected' : ''}}>A+</option>
                                            <option value="A-" {{old('blood_type', $student->blood_type) == 'A-' ? 'selected' : ''}}>A-</option>
                                            <option value="B+" {{old('blood_type', $student->blood_type) == 'B+' ? 'selected' : ''}}>B+</option>
                                            <option value="B-" {{old('blood_type', $student->blood_type) == 'B-' ? 'selected' : ''}}>B-</option>
                                            <option value="O+" {{old('blood_type', $student->blood_type) == 'O+' ? 'selected' : ''}}>O+</option>
                                            <option value="O-" {{old('blood_type', $student->blood_type) == 'O-' ? 'selected' : ''}}>O-</option>
                                            <option value="AB+" {{old('blood_type', $student->blood_type) == 'AB+' ? 'selected' : ''}}>AB+</option>
                                            <option value="AB-" {{old('blood_type', $student->blood_type) == 'AB-' ? 'selected' : ''}}>AB-</option>
                                            <option value="Other" {{old('blood_type', $student->blood_type) == 'Other' ? 'selected' : ''}}>Other</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="inputReligion" class="form-label fw-bold">
                                            <i class="bi bi-star"></i> Religion 
                                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                        </label>
                                        <select id="inputReligion" class="form-select form-select-lg" name="religion" required>
                                            <option value="Islam" {{old('religion', $student->religion) == 'Islam' ? 'selected' : ''}}>Islam</option>
                                            <option value="Hinduism" {{old('religion', $student->religion) == 'Hinduism' ? 'selected' : ''}}>Hinduism</option>
                                            <option value="Christianity" {{old('religion', $student->religion) == 'Christianity' ? 'selected' : ''}}>Christianity</option>
                                            <option value="Buddhism" {{old('religion', $student->religion) == 'Buddhism' ? 'selected' : ''}}>Buddhism</option>
                                            <option value="Judaism" {{old('religion', $student->religion) == 'Judaism' ? 'selected' : ''}}>Judaism</option>
                                            <option value="Other" {{old('religion', $student->religion) == 'Other' ? 'selected' : ''}}>Other</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="inputNationality" class="form-label fw-bold">
                                            <i class="bi bi-flag"></i> Nationality 
                                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                        </label>
                                        <input type="text" class="form-control form-control-lg" 
                                               id="inputNationality" name="nationality" 
                                               placeholder="Pakistani" required 
                                               value="{{old('nationality', $student->nationality)}}">
                                    </div>
                                    <div class="col-md-4">
                                        <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="House No, Street" required 
                                               value="{{old('address', $student->address)}}">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="inputAddress2" class="form-label fw-bold">
                                            <i class="bi bi-geo"></i> Address 2
                                        </label>
                                        <input type="text" class="form-control form-control-lg" 
                                               id="inputAddress2" name="address2" 
                                               placeholder="Area, Landmark (optional)" 
                                               value="{{old('address2', $student->address2)}}">
                                    </div>
                                    <div class="col-md-3">
                                        <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', $student->city)}}">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="inputZip" class="form-label fw-bold">
                                            <i class="bi bi-mailbox"></i> Postal Code 
                                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                        </label>
                                        <input type="text" class="form-control form-control-lg" 
                                               id="inputZip" name="zip" 
                                               placeholder="75500" required 
                                               value="{{old('zip', $student->zip)}}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Parents' 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-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"></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="Father's Full Name" required 
                                               value="{{old('father_name', $parent_info->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" required 
                                               value="{{old('father_phone', $parent_info->father_phone)}}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputMotherName" class="form-label fw-bold">
                                            <i class="bi bi-person"></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="Mother's Full Name" required 
                                               value="{{old('mother_name', $parent_info->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" required 
                                               value="{{old('mother_phone', $parent_info->mother_phone)}}">
                                    </div>
                                    <div class="col-md-12">
                                        <label for="inputParentAddress" class="form-label fw-bold">
                                            <i class="bi bi-geo-alt"></i> Parents' Address 
                                            <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                        </label>
                                        <input type="text" class="form-control form-control-lg" 
                                               id="inputParentAddress" name="parent_address" 
                                               placeholder="Complete Address" required 
                                               value="{{old('parent_address', $parent_info->parent_address)}}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Payment Settings (Read-Only or Editable) --}}
                        @if($payment_profile)
                        <div class="card shadow-sm border-{{ $payment_profile->total_amount_paid > 0 ? 'warning' : 'primary' }} mb-4">
                            <div class="card-header bg-{{ $payment_profile->total_amount_paid > 0 ? 'warning' : 'primary' }} text-white">
                                <h6 class="mb-0">
                                    <i class="bi bi-cash-coin"></i> 💰 Payment Settings
                                    @if($payment_profile->total_amount_paid > 0)
                                        <span class="badge bg-light text-dark ms-2">
                                            <i class="bi bi-lock"></i> Read Only
                                        </span>
                                    @endif
                                </h6>
                            </div>
                            <div class="card-body">
                                @if($payment_profile->total_amount_paid > 0)
                                    {{-- Read-Only View --}}
                                    <div class="alert alert-warning">
                                        <i class="bi bi-exclamation-triangle"></i> 
                                        <strong>Payment settings cannot be changed</strong> because this student has already made payments 
                                        (Rs. {{number_format($payment_profile->total_amount_paid, 2)}} paid).
                                        To record more payments, use the <a href="{{route('payments.edit', $student->id)}}" class="alert-link">Payment Recording</a> page.
                                    </div>
                                    
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label fw-bold">Payment Type</label>
                                            <div class="form-control form-control-lg bg-light">
                                                {{$payment_profile->getPaymentTypeName()}}
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-bold">Admission Fee</label>
                                            <div class="form-control form-control-lg bg-light">
                                                Rs. {{number_format($payment_profile->admission_fee_amount, 2)}}
                                            </div>
                                        </div>
                                        @if($payment_profile->payment_type != 0)
                                        <div class="col-md-4">
                                            <label class="form-label fw-bold">Recurring Fee</label>
                                            <div class="form-control form-control-lg bg-light">
                                                Rs. {{number_format($payment_profile->recurring_fee_amount, 2)}}
                                            </div>
                                        </div>
                                        @endif
                                        <div class="col-md-12">
                                            <div class="alert alert-info mb-0">
                                                <div class="row text-center">
                                                    <div class="col-md-4">
                                                        <small>Total Owed</small>
                                                        <div class="fs-5 fw-bold">Rs. {{number_format($payment_profile->total_amount_owed, 2)}}</div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <small>Total Paid</small>
                                                        <div class="fs-5 fw-bold text-success">Rs. {{number_format($payment_profile->total_amount_paid, 2)}}</div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <small>Balance Remaining</small>
                                                        <div class="fs-5 fw-bold text-danger">Rs. {{number_format($payment_profile->balance_remaining, 2)}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    {{-- Editable View --}}
                                    <input type="hidden" name="update_payment_settings" value="1">
                                    <input type="hidden" name="payment_profile_id" value="{{$payment_profile->id}}">
                                    
                                    <div class="alert alert-success">
                                        <i class="bi bi-check-circle"></i> 
                                        <strong>No payments made yet.</strong> You can update payment settings for this student.
                                    </div>
                                    
                                    <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)" {{$payment_profile->payment_type == 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)" {{$payment_profile->payment_type == 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)" {{$payment_profile->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', $payment_profile->admission_fee_amount)}}"
                                                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">Recurring</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', $payment_profile->recurring_fee_amount)}}"
                                                onchange="calculateTotal()"
                                            >
                                            <small class="text-muted" id="recurring_fee_hint">Amount to pay each month/year</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($payment_profile->total_amount_owed, 2)}} PKR
                                                        </div>
                                                    </div>
                                                    <div class="col-auto">
                                                        <i class="bi bi-calculator fs-1 text-primary"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                        @endif

                        {{-- Submit Button --}}
                        <div class="card shadow-sm mb-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 Update?
                                    </h5>
                                    <small class="text-muted">
                                        Please review all information before submitting
                                    </small>
                                </div>
                                <div>
                                    <a href="{{route('student.list.show')}}" class="btn btn-secondary btn-lg me-2">
                                        <i class="bi bi-x-circle"></i> Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary btn-lg px-5 shadow">
                                        <i class="bi bi-check-circle-fill"></i> Update Student
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            @include('layouts.footer')
        </div>
    </div>
</div>

<script>
    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() {
        @if($payment_profile && $payment_profile->total_amount_paid == 0)
            // Get selected payment type
            const selectedType = document.querySelector('input[name="payment_type"]:checked');
            if (selectedType) {
                updatePaymentFields(parseInt(selectedType.value));
            }
        @endif
    });
</script>

@include('components.photos.photo-input')
@endsection