@extends('layouts.app')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h4><i class="fas fa-user-edit"></i> Edit Data Mahasiswa</h4>
                    <a href="{{ route('mahasiswa.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Kembali
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('mahasiswa.update', $mahasiswa->id) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <div class="row">
                        <div class="col-md-6">
                            <!-- NIM -->
                            <div class="mb-3">
                                <label for="nim" class="form-label">
                                    NIM <span class="text-danger">*</span>
                                </label>
                                <input type="text" 
                                       class="form-control @error('nim') is-invalid @enderror" 
                                       id="nim" 
                                       name="nim" 
                                       value="{{ old('nim', $mahasiswa->nim) }}" 
                                       placeholder="Masukkan NIM">
                                @error('nim')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Nama -->
                            <div class="mb-3">
                                <label for="nama" class="form-label">
                                    Nama Lengkap <span class="text-danger">*</span>
                                </label>
                                <input type="text" 
                                       class="form-control @error('nama') is-invalid @enderror" 
                                       id="nama" 
                                       name="nama" 
                                       value="{{ old('nama', $mahasiswa->nama) }}" 
                                       placeholder="Masukkan nama lengkap">
                                @error('nama')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Email -->
                            <div class="mb-3">
                                <label for="email" class="form-label">
                                    Email <span class="text-danger">*</span>
                                </label>
                                <input type="email" 
                                       class="form-control @error('email') is-invalid @enderror" 
                                       id="email" 
                                       name="email" 
                                       value="{{ old('email', $mahasiswa->email) }}" 
                                       placeholder="Masukkan email">
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <!-- Jurusan -->
                            <div class="mb-3">
                                <label for="jurusan" class="form-label">
                                    Jurusan <span class="text-danger">*</span>
                                </label>
                                <select class="form-select @error('jurusan') is-invalid @enderror" 
                                        id="jurusan" 
                                        name="jurusan">
                                    <option value="">Pilih Jurusan</option>
                                    <option value="Teknik Informatika" 
                                            {{ old('jurusan', $mahasiswa->jurusan) == 'Teknik Informatika' ? 'selected' : '' }}>
                                        Teknik Informatika
                                    </option>
                                    <option value="Sistem Informasi" 
                                            {{ old('jurusan', $mahasiswa->jurusan) == 'Sistem Informasi' ? 'selected' : '' }}>
                                        Sistem Informasi
                                    </option>
                                    <option value="Teknik Komputer" 
                                            {{ old('jurusan', $mahasiswa->jurusan) == 'Teknik Komputer' ? 'selected' : '' }}>
                                        Teknik Komputer
                                    </option>
                                    <option value="Manajemen Informatika" 
                                            {{ old('jurusan', $mahasiswa->jurusan) == 'Manajemen Informatika' ? 'selected' : '' }}>
                                        Manajemen Informatika
                                    </option>
                                    <option value="Teknik Elektro" 
                                            {{ old('jurusan', $mahasiswa->jurusan) == 'Teknik Elektro' ? 'selected' : '' }}>
                                        Teknik Elektro
                                    </option>
                                    <option value="Teknik Mesin" 
                                            {{ old('jurusan', $mahasiswa->jurusan) == 'Teknik Mesin' ? 'selected' : '' }}>
                                        Teknik Mesin
                                    </option>
                                </select>
                                @error('jurusan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Semester -->
                            <div class="mb-3">
                                <label for="semester" class="form-label">
                                    Semester <span class="text-danger">*</span>
                                </label>
                                <select class="form-select @error('semester') is-invalid @enderror" 
                                        id="semester" 
                                        name="semester">
                                    <option value="">Pilih Semester</option>
                                    @for($i = 1; $i <= 8; $i++)
                                        <option value="{{ $i }}" 
                                                {{ old('semester', $mahasiswa->semester) == $i ? 'selected' : '' }}>
                                            Semester {{ $i }}
                                        </option>
                                    @endfor
                                </select>
                                @error('semester')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Foto -->
                            <div class="mb-3">
                                <label for="foto" class="form-label">
                                    Foto Mahasiswa
                                </label>
                                <input type="file" 
                                       class="form-control @error('foto') is-invalid @enderror" 
                                       id="foto" 
                                       name="foto" 
                                       accept="image/*">
                                <div class="form-text">
                                    <small>Format: JPG, JPEG, PNG. Maksimal 2MB. Kosongkan jika tidak ingin mengubah foto.</small>
                                </div>
                                @error('foto')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Foto Saat Ini -->
                    @if($mahasiswa->foto)
                        <div class="row">
                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label">Foto Saat Ini:</label>
                                    <br>
                                    <img src="{{ asset('storage/mahasiswa/' . $mahasiswa->foto) }}" 
                                         alt="Foto {{ $mahasiswa->nama }}" 
                                         class="img-thumbnail" 
                                         style="max-width: 200px; max-height: 200px;">
                                    <div class="mt-2">
                                        <div class="form-check">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   id="hapus_foto" 
                                                   name="hapus_foto" 
                                                   value="1">
                                            <label class="form-check-label text-danger" for="hapus_foto">
                                                <i class="fas fa-trash"></i> Hapus foto yang ada
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Preview Foto Baru -->
                    <div class="row">
                        <div class="col-12">
                            <div id="preview-container" class="mb-3" style="display: none;">
                                <label class="form-label">Preview Foto Baru:</label>
                                <br>
                                <img id="preview-image" 
                                     src="" 
                                     alt="Preview" 
                                     class="img-thumbnail" 
                                     style="max-width: 200px; max-height: 200px;">
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="row">
                        <div class="col-12">
                            <hr>
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('mahasiswa.show', $mahasiswa->id) }}" class="btn btn-info">
                                    <i class="fas fa-eye"></i> Detail
                                </a>
                                <a href="{{ route('mahasiswa.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Batal
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Update
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript untuk Preview Foto -->
<script>
document.getElementById('foto').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const previewContainer = document.getElementById('preview-container');
    const previewImage = document.getElementById('preview-image');
    
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            previewImage.src = e.target.result;
            previewContainer.style.display = 'block';
        };
        reader.readAsDataURL(file);
    } else {
        previewContainer.style.display = 'none';
    }
});

// Handle checkbox hapus foto
document.getElementById('hapus_foto')?.addEventListener('change', function(e) {
    if (e.target.checked) {
        // Clear file input jika user memilih hapus foto
        document.getElementById('foto').value = '';
        document.getElementById('preview-container').style.display = 'none';
    }
});
</script>
@endsection