@extends('layouts.admin')
@section('title', $service ? 'Edit Layanan' : 'Tambah Layanan')
@push('breadcrumb')
<div class="breadcrumb-sep">/</div><div class="breadcrumb-item"><a href="{{ route('admin.services.index') }}">Layanan</a></div><div class="breadcrumb-sep">/</div><div class="breadcrumb-item">{{ $service ? 'Edit' : 'Tambah' }}</div>
@endpush
@section('content')
<form method="POST" action="{{ $service ? route('admin.services.update', $service) : route('admin.services.store') }}" class="max-w-3xl">
    @csrf @if($service) @method('PUT') @endif
    <div class="admin-form-card mb-6">
        <div class="admin-form-header"><div class="admin-form-section">Informasi Layanan</div></div>
        <div class="admin-form-body">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div class="flex flex-col gap-1.5">
                    <label class="form-label" style="color:var(--grey-500)">Slug <span class="req">*</span></label>
                    <input type="text" name="slug" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);" value="{{ old('slug', $service->slug ?? '') }}" required>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="form-label" style="color:var(--grey-500)">Ikon</label>
                    <input type="text" name="icon" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);" value="{{ old('icon', $service->icon ?? '') }}">
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="form-label" style="color:var(--grey-500)">Judul (ID) <span class="req">*</span></label>
                    <input type="text" name="title_id" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);" value="{{ old('title_id', $service->title_id ?? '') }}" required>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="form-label" style="color:var(--grey-500)">Judul (EN) <span class="req">*</span></label>
                    <input type="text" name="title_en" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);" value="{{ old('title_en', $service->title_en ?? '') }}" required>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5">
                <div class="flex flex-col gap-1.5">
                    <label class="form-label" style="color:var(--grey-500)">Deskripsi (ID)</label>
                    <textarea name="description_id" rows="3" class="form-input form-textarea" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);">{{ old('description_id', $service->description_id ?? '') }}</textarea>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="form-label" style="color:var(--grey-500)">Deskripsi (EN)</label>
                    <textarea name="description_en" rows="3" class="form-input form-textarea" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);">{{ old('description_en', $service->description_en ?? '') }}</textarea>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5">
                <div class="flex flex-col gap-1.5">
                    <label class="form-label" style="color:var(--grey-500)">Konten (ID)</label>
                    <textarea name="content_id" rows="6" class="form-input form-textarea" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-family:monospace;font-size:12px;">{{ old('content_id', $service->content_id ?? '') }}</textarea>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="form-label" style="color:var(--grey-500)">Konten (EN)</label>
                    <textarea name="content_en" rows="6" class="form-input form-textarea" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-family:monospace;font-size:12px;">{{ old('content_en', $service->content_en ?? '') }}</textarea>
                </div>
            </div>
            <div class="flex flex-wrap gap-6 mt-5">
                <label class="toggle-wrap">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $service->is_active ?? true) ? 'checked' : '' }}>
                    <div class="toggle-track"><div class="toggle-thumb"></div></div>
                    <span style="font-size:12px;font-weight:600;color:var(--navy);text-transform:uppercase;letter-spacing:0.05em;">Aktif</span>
                </label>
            </div>
        </div>
        <div class="admin-form-footer">
            <a href="{{ route('admin.services.index') }}" class="btn btn--ghost">Batal</a>
            <button type="submit" class="btn btn--primary">{{ $service ? 'Simpan' : 'Tambah' }}</button>
        </div>
    </div>
</form>
@endsection