@extends('layouts.admin.app')

@section('title','Edit Bidan')

@section('content')
<h4>Edit Data Bidan</h4>

<form method="POST"
      action="{{ route('midwives.update', $midwife->id) }}"
      enctype="multipart/form-data">
@csrf
@method('PUT')

<div class="mb-3">
    <label>Nama Bidan</label>
    <input name="name"
           value="{{ old('name', $midwife->name) }}"
           class="form-control"
           required>
</div>

<div class="mb-3">
    <label>No. HP</label>
    <input name="phone"
           value="{{ old('phone', $midwife->phone) }}"
           class="form-control">
</div>

<div class="mb-3">
    <label>Email</label>
    <input name="email"
           type="email"
           value="{{ old('email', $midwife->email) }}"
           class="form-control">
</div>

<div class="mb-3">
    <label>Pengalaman (Tahun)</label>
    <input name="experience_year"
           value="{{ old('experience_year', $midwife->experience_year) }}"
           type="number"
           class="form-control">
</div>

{{-- FOTO SAAT INI --}}
<div class="mb-3">
    <label>Foto Saat Ini</label><br>
    <img id="preview"
         src="{{ $midwife->photo
                ? asset($midwife->photo)
                : 'https://ui-avatars.com/api/?name='.urlencode($midwife->name).'&size=200' }}"
         class="img-thumbnail"
         width="150">
</div>

{{-- GANTI FOTO --}}
<div class="mb-3">
    <label>Ganti Foto</label>
    <input type="file"
           name="photo"
           class="form-control"
           accept="image/*"
           onchange="previewImage(event)">
    <small class="text-muted">
        Kosongkan jika tidak ingin mengganti foto
    </small>
</div>

<hr>
<h5>Akun Login (Opsional)</h5>

{{-- Jika sudah punya akun --}}
@if($midwife->user)
    <div class="alert alert-success">
        Akun login sudah dibuat <br>
        Email: <strong>{{ $midwife->user->email }}</strong>
    </div>

    <div class="mb-3">
        <label>Reset Password (Opsional)</label>
        <input type="password" name="new_password" class="form-control"
               placeholder="Isi jika ingin ganti password">
    </div>

@else
    {{-- Jika belum punya akun --}}
    <div class="mb-3">
        <label>Email Login</label>
        <input type="email" name="login_email" class="form-control">
    </div>

    <div class="mb-3">
        <label>Password Login</label>
        <input type="password" name="password" class="form-control">
    </div>
@endif


<button class="btn btn-primary">
    Simpan Perubahan
</button>

<a href="{{ route('midwives.index') }}"
   class="btn btn-secondary">
   Kembali
</a>

</form>

{{-- PREVIEW SCRIPT --}}
<script>
function previewImage(event){
    const reader = new FileReader();
    reader.onload = function(){
        document.getElementById('preview').src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
}
</script>

@endsection