@extends('layouts.app')

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

@section('page_header')
<div class="d-flex justify-content-between align-items-center">
    <div>
        <h5 class="mb-0 fw-bold text-dark"><i class="fa-solid fa-id-card text-primary me-2"></i> Profil Petugas Transmisi</h5>
        <small class="text-muted">Informasi identitas akun dan hak akses teknisi</small>
    </div>
</div>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card card-engineering">
            <div class="card-header">
                <span><i class="fa-solid fa-user-pen me-2 text-primary"></i> Data Identitas Diri</span>
                <span class="badge bg-primary text-uppercase font-mono">{{ $user->role }}</span>
            </div>
            <div class="card-body p-4">
                <form action="{{ route('profile.update') }}" method="POST">
                    @csrf

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-secondary">NAMA LENGKAP</label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $user->name) }}" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-secondary">EMAIL (LOGIN)</label>
                            <input type="email" class="form-control" value="{{ $user->email }}" disabled readonly>
                            <small class="text-muted">Email tidak dapat diubah sendiri.</small>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-secondary">NIP / NIK</label>
                            <input type="text" name="nip" class="form-control font-mono @error('nip') is-invalid @enderror" value="{{ old('nip', $user->nip) }}" placeholder="Nomor Induk Pegawai">
                            @error('nip')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-secondary">NOMOR TELEPON / WHATSAPP</label>
                            <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone', $user->phone) }}" placeholder="08xxxxxxxxxx">
                            @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <hr class="my-4">
                    <h6 class="fw-bold text-dark mb-3"><i class="fa-solid fa-key me-2 text-warning"></i> Ganti Kata Sandi (Opsional)</h6>

                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-secondary">KATA SANDI BARU</label>
                            <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Kosongkan jika tidak diganti">
                            @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-secondary">KONFIRMASI KATA SANDI BARU</label>
                            <input type="password" name="password_confirmation" class="form-control" placeholder="Ulangi kata sandi baru">
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2">
                        <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary">Batal</a>
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="fa-solid fa-floppy-disk me-1"></i> Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection