@extends('layouts.admin')

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

@section('content')
<div class="max-w-2xl">
    <div class="flex items-center gap-4 mb-6">
        <a href="{{ route('admin.services.index') }}" class="w-10 h-10 flex items-center justify-center bg-white rounded-full shadow-sm hover:bg-gray-50 text-gray-600">
            <i class="fa-solid fa-arrow-left"></i>
        </a>
        <h1 class="text-2xl font-bold text-gray-800">Edit Layanan</h1>
    </div>

    <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
        <form action="{{ route('admin.services.update', $service->id) }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">Nama Layanan</label>
                <input type="text" name="role_name" value="{{ $service->role_name }}" class="w-full border-gray-300 rounded-lg p-3 focus:ring-[#76153C] focus:border-[#76153C]">
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">
                    Icon (FontAwesome) 
                    <a href="https://fontawesome.com/search?o=r&m=free" target="_blank" class="text-[#76153C] text-xs font-normal hover:underline ml-1">Cari Icon Disini</a>
                </label>
                <div class="flex gap-4">
                    <div class="w-12 h-12 bg-gray-50 rounded-lg flex items-center justify-center text-xl border border-gray-200">
                        <i class="fa-solid {{ $service->icon }}" id="icon-preview"></i>
                    </div>
                    <input type="text" name="icon" id="icon-input" value="{{ $service->icon }}" class="flex-1 border-gray-300 rounded-lg p-3 focus:ring-[#76153C] focus:border-[#76153C]" oninput="updateIcon(this.value)">
                </div>
                <p class="text-xs text-gray-400 mt-2">Contoh: fa-bullhorn, fa-pen-nib, fa-users</p>
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">Deskripsi</label>
                <textarea name="description" rows="5" class="w-full border-gray-300 rounded-lg p-3 focus:ring-[#76153C] focus:border-[#76153C]">{{ $service->description }}</textarea>
            </div>

            <div class="pt-6 border-t border-gray-100 flex justify-end">
                <button type="submit" class="bg-[#76153C] text-white px-8 py-3 rounded-lg font-bold hover:bg-[#5a102d] transition shadow-lg flex items-center gap-2">
                    <i class="fa-solid fa-save"></i> Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function updateIcon(val) {
        // Hapus fa-solid jika user mengetiknya, biar ga dobel
        val = val.replace('fa-solid ', '').replace('fa-brands ', '');
        document.getElementById('icon-preview').className = 'fa-solid ' + val;
    }
</script>
@endsection