@extends('layouts.admin')

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

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>Tambah Testimonial</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('testimonials.index') }}">Testimonial</a></li>
                <li class="breadcrumb-item active">Tambah</li>
            </ol>
        </div>
    </div>
@stop

@section('content')
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Form Tambah Testimonial</h3>
                </div>
                <form method="POST" action="{{ route('testimonials.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label for="name">Nama <span class="text-danger">*</span></label>
                            <input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                            @error('name')<span class="invalid-feedback">{{ $message }}</span>@enderror
                        </div>
                        <div class="form-group">
                            <label for="institution">Institusi</label>
                            <input type="text" id="institution" name="institution" class="form-control @error('institution') is-invalid @enderror" value="{{ old('institution') }}">
                            @error('institution')<span class="invalid-feedback">{{ $message }}</span>@enderror
                        </div>
                        <div class="form-group">
                            <label for="photo">Foto</label>
                            <div class="custom-file">
                                <input type="file" id="photo" name="photo" class="custom-file-input @error('photo') is-invalid @enderror" accept="image/*">
                                <label class="custom-file-label" for="photo">Pilih foto...</label>
                            </div>
                            @error('photo')<span class="invalid-feedback" style="display:block;">{{ $message }}</span>@enderror
                            <div id="photoPreview" class="mt-2"></div>
                        </div>
                        <div class="form-group">
                            <label for="review">Review</label>
                            <textarea id="review" name="review" rows="4" class="form-control @error('review') is-invalid @enderror">{{ old('review') }}</textarea>
                            @error('review')<span class="invalid-feedback">{{ $message }}</span>@enderror
                        </div>
                        <div class="form-group">
                            <label for="rating">Rating (0-5)</label>
                            <input type="number" id="rating" name="rating" class="form-control @error('rating') is-invalid @enderror" value="{{ old('rating') }}" min="0" max="5">
                            @error('rating')<span class="invalid-feedback">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Simpan</button>
                        <a href="{{ route('testimonials.index') }}" class="btn btn-secondary"><i class="fas fa-times"></i> Batal</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@section('js')
<script>
    document.getElementById('photo').addEventListener('change', function(e) {
        const file = e.target.files[0];
        const preview = document.getElementById('photoPreview');
        if (file) {
            const reader = new FileReader();
            reader.onload = function(evt) {
                preview.innerHTML = `<img src="${evt.target.result}" style="max-height:150px; object-fit:contain;">`;
            };
            reader.readAsDataURL(file);
            document.querySelector('.custom-file-label[for="photo"]').textContent = file.name;
        }
    });
</script>
@stop

@section('css')
<style>
@media (max-width:768px){
    .col-md-8.offset-md-2{padding:.5rem;}
    .form-group{margin-bottom:1rem;}
}
</style>
@stop