@extends('layouts.admin.app')

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

@section('content')
<h4>Tambah Layanan</h4>

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

<div class="mb-3">
    <label>Nama Layanan</label>
    <input name="name"
           class="form-control"
           required>
</div>

<div class="mb-3">
    <label>Deskripsi</label>
    <textarea name="description"
              class="form-control"
              rows="3"
              required></textarea>
</div>

<div class="mb-3">
    <label>Harga Layanan</label>
    <input name="price"
           type="number"
           class="form-control"
           min="0"
           required>
</div>

{{-- IMAGE UPLOAD --}}
<div class="mb-3">
    <label>Gambar Layanan</label>
    <input type="file"
           name="image"
           class="form-control"
           accept="image/*"
           onchange="previewImage(event)">
</div>

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

<button class="btn btn-primary">Simpan</button>
<a href="{{ route('services.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