@extends('guru.layouts.app')

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

@section('content')

<style>
    .page-title {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 20px;
        margin-top: -20px;
    }

    .custom-card {
        background: white;
        border-radius: 20px;
        border: 2px solid #e0f2fe;
        padding: 30px;
        max-width: 600px;
        margin: 0 auto;
    }
</style>

<h3 class="page-title">PROFIL SAYA</h3>

<div class="custom-card">

    {{-- Alert Success --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form action="{{ route('guru.profil.update') }}" method="POST">
        @csrf
        @method('PUT')

        <div class="mb-3">
            <label class="form-label fw-bold">NIP</label>
            <input type="text" class="form-control bg-light" value="{{ $guru->nip }}" disabled>
            <small class="text-muted">NIP tidak dapat diubah</small>
        </div>

        <div class="mb-3">
            <label class="form-label fw-bold">Nama Lengkap <span class="text-danger">*</span></label>
            <input type="text" name="nama" class="form-control @error('nama') is-invalid @enderror"
                   value="{{ old('nama', $guru->nama) }}" required>
            @error('nama')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <div class="mb-3">
            <label class="form-label fw-bold">Password Baru</label>
            <input type="password" name="password" class="form-control @error('password') is-invalid @enderror"
                   placeholder="Kosongkan jika tidak ingin mengubah">
            @error('password')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <div class="mb-3">
            <label class="form-label fw-bold">Konfirmasi Password Baru</label>
            <input type="password" name="password_confirmation" class="form-control"
                   placeholder="Ulangi password baru">
            <small class="text-muted">Isi hanya jika ingin mengubah password</small>
        </div>

        <div class="d-flex justify-content-end mt-4">
            <button type="submit" class="btn btn-primary px-4 d-flex align-items-center gap-2">
                <img src="{{ asset('images/icon/gurud/save.png') }}" class="icon-inline" alt="Simpan">
                Simpan Perubahan
            </button>
        </div>

    </form>

</div>

@endsection