@extends('layouts.admin.app')

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

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

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

<div class="mb-3">
    <label>Nama Layanan</label>
    <input name="name"
           value="{{ $service->name }}"
           class="form-control"
           required>
</div>

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

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

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

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

<button class="btn btn-primary">Update</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