@extends('layouts.app')

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

@section('content')
<div class="container mx-auto py-8">
    <div class="max-w-2xl mx-auto bg-white shadow-md rounded-xl p-8 border border-blue-100">
        <h2 class="text-2xl font-semibold text-black mb-6">Edit Template</h2>

        {{-- Alert sukses / error --}}
        @if(session('success'))
            <div class="bg-green-100 text-green-700 px-4 py-2 rounded-lg mb-4 border border-green-200">
                {{ session('success') }}
            </div>
        @endif
        @if($errors->any())
            <div class="bg-red-100 text-red-700 px-4 py-2 rounded-lg mb-4 border border-red-200">
                <ul class="list-disc pl-5 mb-0">
                    @foreach($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.template.update', $template->id) }}" method="POST" enctype="multipart/form-data" class="space-y-5">
            @csrf
            @method('PUT')

            {{-- Nama Template --}}
            <div>
                <label for="nama_template" class="block text-sm font-medium text-gray-700 mb-2">Nama Template</label>
                <input type="text" id="nama_template" name="nama_template"
                       value="{{ old('nama_template', $template->nama_template) }}"
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none @error('nama_template') border-red-500 @enderror"
                       required>
                @error('nama_template')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- Harga --}}
            <div>
                <label for="harga" class="block text-sm font-medium text-gray-700 mb-2">Harga</label>
                <input type="number" id="harga" name="harga"
                       value="{{ old('harga', $template->harga) }}"
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none @error('harga') border-red-500 @enderror"
                       required>
                @error('harga')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- Paket --}}
            <div class="mb-3">
                <label for="paket" class="form-label">Paket</label>
                <input type="text" name="paket" id="paket"
                       value="{{ $template->paket }}"
                       class="form-control"
                       readonly>
            </div>

            {{-- Foto / Gambar --}}
            <div>
                <label for="foto" class="block text-sm font-medium text-gray-700 mb-2">Gambar Template</label>
                <div class="mb-3">
                    @if($template->foto)
                        <img src="{{ asset('storage/' . $template->foto) }}"
                             alt="{{ $template->nama_template }}"
                             class="w-32 h-32 object-cover rounded-lg border border-gray-200">
                    @else
                        <p class="text-gray-500 text-sm">Belum ada gambar</p>
                    @endif
                </div>
                <input type="file" id="foto" name="foto"
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 bg-gray-50 cursor-pointer focus:ring-2 focus:ring-blue-400 @error('foto') border-red-500 @enderror">
                <p class="text-gray-500 text-sm mt-1">Kosongkan jika tidak ingin mengganti gambar.</p>
                @error('foto')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- Tombol --}}
            <div class="flex justify-end gap-3 pt-4">
                <a href="{{ route('admin.template.index') }}"
                   class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-5 py-2 rounded-lg transition duration-200">
                    Batal
                </a>
                <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-2 rounded-lg shadow transition duration-200">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection