@extends('layouts.admin.app')

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

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

<form method="POST"
      action="{{ route('midwives.store') }}"
      enctype="multipart/form-data">
@csrf

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

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

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

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

{{-- FOTO --}}
<div class="mb-3">
    <label>Foto Bidan</label>
    <input type="file"
           name="photo"
           class="form-control"
           accept="image/*"
           onchange="previewImage(event)">
</div>

{{-- PREVIEW FOTO --}}
<div class="mb-3">
    <img id="preview"
         src="https://ui-avatars.com/api/?name=Bidan&size=200"
         class="img-thumbnail"
         width="150">
</div>

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

<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>


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

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

</form>

{{-- SCRIPT PREVIEW --}}
<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