@extends('layouts.app')

@section('title', 'Edit Pengguna')
@section('topbar', 'Edit Data Pengguna')

@section('css')
<style>
    :root {
        --primary-color: #007a99;
        --primary-dark: #005c73;
        --secondary-color: #6c757d;
    }
    
    .registration-wrapper {
        display: flex;
        min-height: 100vh;
        align-items: center;
        background-color: #f8f9fa;
        padding: 2rem 0;
    }
    
    .registration-card {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        border: none;
        border-radius: 12px;
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
    }
    
    .card-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        padding: 1.75rem 2.5rem;
        border-radius: 12px 12px 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .card-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
    }
    
    .card-title i {
        margin-right: 12px;
    }
    
    .btn-back {
        background-color: rgba(255,255,255,0.15);
        border: none;
        border-radius: 6px;
        padding: 10px 20px;
        color: white;
        font-weight: 500;
        transition: all 0.3s;
        display: flex;
        align-items: center;
    }
    
    .btn-back:hover {
        background-color: rgba(255,255,255,0.25);
        text-decoration: none;
    }
    
    .btn-back i {
        margin-right: 8px;
    }
    
    .card-body {
        padding: 2.5rem;
    }
    
    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 2rem;
    }
    
    .form-group {
        margin-bottom: 0;
    }
    
    .form-group.full-width {
        grid-column: span 2;
    }
    
    .form-label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.75rem;
        display: block;
    }
    
    .form-control {
        border-radius: 8px;
        padding: 12px 16px;
        border: 1px solid #ced4da;
        width: 100%;
        transition: all 0.3s;
        background-color: #fff;
    }
    
    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(0, 122, 153, 0.25);
    }
    
    .form-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 2.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e9ecef;
        gap: 1rem;
    }
    
    .btn {
        border-radius: 8px;
        padding: 12px 28px;
        font-weight: 500;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-submit {
        background-color: var(--primary-color);
        border: none;
        color: white;
    }
    
    .btn-submit:hover {
        background-color: var(--primary-dark);
        transform: translateY(-2px);
    }
    
    .btn-cancel {
        background-color: white;
        border: 1px solid var(--secondary-color);
        color: var(--secondary-color);
    }
    
    .btn-cancel:hover {
        background-color: #f8f9fa;
    }
    
    .invalid-feedback {
        display: block;
        margin-top: 8px;
        color: #dc3545;
        font-size: 0.875rem;
    }
    
    /* Responsive adjustments */
    @media (max-width: 992px) {
        .registration-card {
            max-width: 95%;
        }
        
        .card-body {
            padding: 2rem;
        }
    }
    
    @media (max-width: 768px) {
        .form-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        
        .form-group.full-width {
            grid-column: span 1;
        }
        
        .card-header {
            flex-direction: column;
            align-items: flex-start;
            padding: 1.5rem;
        }
        
        .btn-back {
            margin-top: 1rem;
            width: 100%;
            justify-content: center;
        }
        
        .form-footer {
            flex-direction: column;
        }
        
        .btn {
            width: 100%;
        }
    }
    
    @media (max-width: 576px) {
        .card-body {
            padding: 1.5rem;
        }
        
        .registration-wrapper {
            padding: 1rem 0;
        }
    }
</style>
@endsection

@section('content')
<div class="registration-wrapper">
    <div class="container">
        <div class="registration-card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-user-edit"></i> Edit Pengguna - {{ $user->name }}
                </h3>
                <a href="{{ route('user.index') }}" class="btn-back">
                    <i class="fas fa-arrow-left"></i>Kembali ke Daftar
                </a>
            </div>

            <div class="card-body">
                <form action="{{ route('user.update', $user->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="form-grid">
                        <!-- Input User -->
                        <div class="form-group">
                            <label for="name">Nama Lengkap</label>
                            <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" 
                                    name="name" value="{{ old('name', $user->name) }}" required>
                            @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="email">Email</label>
                            <input id="email" type="email" class="form-control" 
                                   name="email" value="{{ old('email', $user->email) }}" required>
                        </div>

                        <div class="form-group">
                            <label>Role</label>
                            <select name="role" class="form-control @error('role') is-invalid @enderror" id="roleSelect" required>
                                <option value="">Pilih Role</option>
                                <option value="admin" {{ old('role', $user->role) == 'admin' ? 'selected' : '' }}>Admin</option>
                                <option value="mahasiswa" {{ old('role', $user->role) == 'mahasiswa' ? 'selected' : '' }}>Mahasiswa</option>
                                <option value="karyawan" {{ old('role', $user->role) == 'karyawan' ? 'selected' : '' }}>Karyawan</option>
                            </select>
                            @error('role')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div id="mahasiswaFields" style="{{ old('role', $user->role) == 'mahasiswa' ? 'block' : 'none' }}">
                            <div class="form-group">
                                <label>NIM</label>
                                <input type="text" name="nim" class="form-control @error('nim') is-invalid @enderror" 
                                        value="{{ old('nim', $user->mahasiswa->nim ?? '') }}" 
                                        {{ old('role', $user->role) == 'mahasiswa' ? 'required' : '' }}>
                                @error('nim')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                        </div>
                             
                            <div class="form-group">
                                <label>Program Studi</label>
                                <input type="text" name="program_studi" class="form-control @error('program_studi') is-invalid @enderror"
                                        value="{{ old('program_studi', $user->mahasiswa->program_studi ?? '') }}" 
                                        {{ old('role', $user->role) == 'mahasiswa' ? 'required' : '' }}>
                                @error('program_studi')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>Jurusan</label>
                                <input type="text" name="jurusan" class="form-control @error('jurusan') is-invalid @enderror"
                                        value="{{ old('jurusan', $user->mahasiswa->jurusan ?? '') }}" 
                                        {{ old('role', $user->role) == 'mahasiswa' ? 'required' : '' }}>
                                        @error('jurusan')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Input Umum -->
                        <div class="form-group">
                            <label for="alamat">Alamat</label>
                            <input type="text" class="form-control" 
                                   name="alamat" value="{{ old('alamat', $user->alamat) }}" required>
                        </div>

                        <div class="form-group">
                            <label for="telepon">Telepon</label>
                            <input type="text" class="form-control" 
                                   name="telepon" value="{{ old('telepon', $user->telepon) }}" required>
                        </div>

                        <div class="form-group">
                            <label for="keterangan">Keterangan</label>
                            <input type="text" class="form-control" 
                                   name="keterangan" value="{{ old('keterangan', $user->keterangan) }}" required>
                        </div>
                    </div>

                    <div class="form-footer">
                        <button type="submit" class="btn btn-submit">
                            <i class="fas fa-save mr-2"></i>Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const roleSelect = document.getElementById('roleSelect');
    const mahasiswaFields = document.getElementById('mahasiswaFields');
    
    function toggleMahasiswaFields() {
        if (roleSelect.value === 'mahasiswa') {
            mahasiswaFields.style.display = 'block';
            mahasiswaFields.querySelectorAll('input').forEach(input => {
                input.required = true;
            });
        } else {
            mahasiswaFields.style.display = 'none';
            mahasiswaFields.querySelectorAll('input').forEach(input => {
                input.required = false;
            });
        }
    }
    
    toggleMahasiswaFields();
    
    roleSelect.addEventListener('change', toggleMahasiswaFields);
});

</script>
@endsection