@extends('admin.layouts.app')

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

<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Montserrat:wght@200;400;600&display=swap" rel="stylesheet"> 

<!-- Icon Font Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">


@section('content')
<div class="container py-4">
    <h1 class="mb-4 text-primary">Edit Foto Galeri</h1>

    <div class="card shadow-sm">
        <div class="card-body">
            <form action="{{ route('admin.galeri.update', $galeri->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <!-- Input Judul -->
                <div class="mb-3">
                    <label for="judul" class="form-label fw-bold">Judul</label>
                    <input type="text" name="judul" id="judul" class="form-control" value="{{ $galeri->judul }}" required>
                </div>

                <!-- Input Foto -->
                <div class="mb-3">
                    <label for="foto" class="form-label fw-bold">Ganti Foto</label>
                    <input type="file" name="foto" id="foto" class="form-control">
                    <small class="text-muted">Foto saat ini:</small><br>
                    <img src="{{ asset('img/' . $galeri->foto) }}" class="img-thumbnail mt-2" width="150" alt="{{ $galeri->judul }}">
                </div>

                <!-- Tombol Simpan -->
                <button type="submit" class="btn btn-success">
                    <i class="fas fa-save"></i> Simpan
                </button>
                <a href="{{ route('admin.galeri.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Kembali
                </a>
            </form>
        </div>
    </div>
</div>
@endsection