@extends('layouts.admin')
@section('title', 'Edit Student')
@section('page-title', 'Edit Student')
@section('page-subtitle', 'Update student information')

@section('content')
<div class="card-royal p-6">
    <form action="{{ route('admin.sunday-school.students.update', $student->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf
        @method('PUT')
        
        <h4 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] border-b border-[var(--border-color)] pb-2">Student Information</h4>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="md:col-span-3">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">First Name *</label>
                        <input type="text" name="first_name" value="{{ old('first_name', $student->first_name) }}" required
                            class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Last Name *</label>
                        <input type="text" name="last_name" value="{{ old('last_name', $student->last_name) }}" required
                            class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Date of Birth *</label>
                        <input type="date" name="date_of_birth" value="{{ old('date_of_birth', $student->date_of_birth?->format('Y-m-d')) }}" required
                            class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    </div>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Photo</label>
                <div class="relative">
                    <input type="file" name="profile_photo" id="profilePhotoInput" accept="image/*" class="hidden" onchange="previewImage(this)">
                    <label for="profilePhotoInput" class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-[var(--border-color)] rounded-lg cursor-pointer hover:bg-[var(--bg-secondary)] transition-colors">
                        <div id="photoPreview" class="flex flex-col items-center justify-center text-[var(--text-secondary)]">
                            @if($student->profile_photo)
                                <img src="{{ asset('storage/' . $student->profile_photo) }}?v={{ $student->updated_at->timestamp }}" alt="Photo" class="w-full h-full object-cover rounded-lg">
                            @else
                                <i class="fas fa-camera text-2xl mb-1"></i>
                                <span class="text-xs">Upload</span>
                            @endif
                        </div>
                    </label>
                </div>
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Gender *</label>
                <select name="gender" required class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="male" {{ $student->gender == 'male' ? 'selected' : '' }}>Male</option>
                    <option value="female" {{ $student->gender == 'female' ? 'selected' : '' }}>Female</option>
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Class</label>
                <select name="sunday_school_class_id" class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="">No Class</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}" {{ $student->sunday_school_class_id == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Status</label>
            <select name="status" class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                <option value="active" {{ $student->status == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ $student->status == 'inactive' ? 'selected' : '' }}>Inactive</option>
                <option value="graduated" {{ $student->status == 'graduated' ? 'selected' : '' }}>Graduated</option>
                <option value="transferred" {{ $student->status == 'transferred' ? 'selected' : '' }}>Transferred</option>
            </select>
        </div>
        
        <h4 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] border-b border-[var(--border-color)] pb-2">Parent/Guardian</h4>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Parent/Guardian Name *</label>
                <input type="text" name="parent_name" value="{{ old('parent_name', $student->parent_name) }}" required
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Parent/Guardian Phone *</label>
                <input type="text" name="parent_phone" value="{{ old('parent_phone', $student->parent_phone) }}" required
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Parent/Guardian Email</label>
                <input type="email" name="parent_email" value="{{ old('parent_email', $student->parent_email) }}"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Link to Church Member</label>
                <select name="parent_id" class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="">-- Select Member --</option>
                    @foreach($parents as $parent)
                        <option value="{{ $parent->id }}" {{ $student->parent_id == $parent->id ? 'selected' : '' }}>{{ $parent->full_name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Notes</label>
            <textarea name="notes" rows="3"
                class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">{{ old('notes', $student->notes) }}</textarea>
        </div>
        
        <div class="flex justify-end gap-4">
            <a href="{{ route('admin.sunday-school.students.show', $student->id) }}" class="px-6 py-3 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                Cancel
            </a>
            <button type="submit" class="btn-royal px-8 py-3 rounded-lg text-white font-semibold">
                <i class="fas fa-save mr-2"></i> Update Student
            </button>
        </div>
    </form>
</div>

<script>
function previewImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('photoPreview').innerHTML = 
                '<img src="' + e.target.result + '" class="w-full h-full object-cover rounded-lg">';
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection