@extends('layouts.student')

@section('title', 'Profil Saya')
@section('page-title', 'Profil Saya')

@section('content')
<div class="grid grid-cols-2" style="gap: 1.5rem;">
    <!-- Profile Form -->
    <div class="card">
        <div class="card-header">
            <h2>Informasi Profil</h2>
        </div>
        <div class="card-body">
            <form action="{{ route('student.profile.update') }}" method="POST">
                @csrf
                @method('PUT')
                
                <div class="form-group">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-control" value="{{ $user->email }}" disabled style="background: var(--gray-100); cursor: not-allowed;">
                    <small class="text-muted">Email tidak dapat diubah</small>
                </div>
                
                <div class="form-group">
                    <label class="form-label">NIS</label>
                    <input type="text" class="form-control" value="{{ $student->nis }}" disabled style="background: var(--gray-100); cursor: not-allowed;">
                    <small class="text-muted">NIS tidak dapat diubah</small>
                </div>
                
                <div class="form-group">
                    <label for="name" class="form-label">Nama Lengkap</label>
                    <input 
                        type="text" 
                        id="name" 
                        name="name" 
                        class="form-control @error('name') error @enderror"
                        value="{{ old('name', $user->name) }}"
                        required
                    >
                    @error('name')
                        <span class="form-error">{{ $message }}</span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="class" class="form-label">Kelas</label>
                    <select 
                        id="class" 
                        name="class" 
                        class="form-control @error('class') error @enderror"
                        required
                    >
                        @foreach(['X', 'XI', 'XII'] as $classOption)
                            <option value="{{ $classOption }}" {{ old('class', $student->class) === $classOption ? 'selected' : '' }}>
                                {{ $classOption }}
                            </option>
                        @endforeach
                    </select>
                    @error('class')
                        <span class="form-error">{{ $message }}</span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="address" class="form-label">Alamat</label>
                    <textarea 
                        id="address" 
                        name="address" 
                        class="form-control @error('address') error @enderror"
                        rows="3"
                    >{{ old('address', $student->address) }}</textarea>
                    @error('address')
                        <span class="form-error">{{ $message }}</span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="phone" class="form-label">No. Telepon</label>
                    <input 
                        type="text" 
                        id="phone" 
                        name="phone" 
                        class="form-control @error('phone') error @enderror"
                        value="{{ old('phone', $student->phone) }}"
                    >
                    @error('phone')
                        <span class="form-error">{{ $message }}</span>
                    @enderror
                </div>
                
                <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
            </form>
        </div>
    </div>
    
    <!-- Password Form -->
    <div class="card">
        <div class="card-header">
            <h2>Ubah Password</h2>
        </div>
        <div class="card-body">
            <form action="{{ route('student.profile.password') }}" method="POST">
                @csrf
                @method('PUT')
                
                <div class="form-group">
                    <label for="current_password" class="form-label">Password Saat Ini</label>
                    <input 
                        type="password" 
                        id="current_password" 
                        name="current_password" 
                        class="form-control @error('current_password') error @enderror"
                        required
                    >
                    @error('current_password')
                        <span class="form-error">{{ $message }}</span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="password" class="form-label">Password Baru</label>
                    <input 
                        type="password" 
                        id="password" 
                        name="password" 
                        class="form-control @error('password') error @enderror"
                        placeholder="Minimal 8 karakter"
                        required
                    >
                    @error('password')
                        <span class="form-error">{{ $message }}</span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="password_confirmation" class="form-label">Konfirmasi Password Baru</label>
                    <input 
                        type="password" 
                        id="password_confirmation" 
                        name="password_confirmation" 
                        class="form-control"
                        required
                    >
                </div>
                
                <button type="submit" class="btn btn-secondary">Ubah Password</button>
            </form>
        </div>
    </div>
</div>

@push('styles')
<style>
    .text-muted {
        font-size: 0.75rem;
        color: var(--gray-500);
        display: block;
        margin-top: 0.25rem;
    }
</style>
@endpush
@endsection