@extends('layouts.admin')
@section('title', 'Pengaturan ' . ucfirst($group))
@push('breadcrumb')
<div class="breadcrumb-sep">/</div><div class="breadcrumb-item">Pengaturan</div><div class="breadcrumb-sep">/</div><div class="breadcrumb-item">{{ ucfirst($group) }}</div>
@endpush
@section('content')
<form method="POST" action="{{ route('admin.settings.update', $group) }}" enctype="multipart/form-data" class="max-w-3xl">
    @csrf @method('PUT')

    <div class="flex flex-wrap gap-2 mb-6">
        @foreach($groups as $g)
        <a href="{{ route('admin.settings.edit', $g) }}" class="btn btn--sm {{ $g == $group ? 'btn--primary' : 'btn--ghost' }}" style="border-radius:50px;text-transform:uppercase;font-size:10px;">{{ ucfirst($g) }}</a>
        @endforeach
    </div>

    <div class="admin-form-card">
        <div class="admin-form-header">
            <div class="admin-form-section">Pengaturan {{ ucfirst($group) }}</div>
        </div>
        <div class="admin-form-body">
            @if($settings->isEmpty())
                <p class="text-crius-grey-400 text-sm">Belum ada pengaturan untuk grup ini.</p>
            @else
                @foreach($settings as $setting)
                <div class="mb-5 pb-5 {{ !$loop->last ? 'border-b border-crius-grey-100' : '' }}">
                    <div class="flex flex-col gap-1.5">
                        <label class="form-label" style="color:var(--grey-500);">
                            {{ $setting->label ?? $setting->key }}
                            @if($setting->description)
                            <span class="font-mono text-[8px] text-crius-grey-400 ml-2">({{ $setting->description }})</span>
                            @endif
                        </label>

                        @if($setting->type == 'textarea')
                            <textarea name="{{ $setting->key }}" rows="4" class="form-input form-textarea" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);">{{ old($setting->key, $setting->value) }}</textarea>

                        @elseif($setting->type == 'boolean')
                            <label class="toggle-wrap">
                                <input type="checkbox" name="{{ $setting->key }}" value="1" {{ $setting->parsed_value ? 'checked' : '' }}>
                                <div class="toggle-track"><div class="toggle-thumb"></div></div>
                                <span style="font-size:12px;font-weight:600;color:var(--navy);">{{ $setting->parsed_value ? 'Ya' : 'Tidak' }}</span>
                            </label>

                        @elseif($setting->type == 'json' && $setting->key == 'contact_hours')
                            <div x-data="hoursEditor({{ $setting->value ?: '[]' }})" x-init="$watch('rows', val => jsonStr = JSON.stringify(val))">
                                <template x-for="(row, i) in rows" :key="i">
                                    <div class="flex gap-2 items-end mb-2">
                                        <div class="flex flex-col gap-0.5 flex-1">
                                            <span class="font-mono text-[8px] text-crius-grey-400">Hari (ID)</span>
                                            <input type="text" x-model="row.day_id" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="Senin-Jumat">
                                        </div>
                                        <div class="flex flex-col gap-0.5 flex-1">
                                            <span class="font-mono text-[8px] text-crius-grey-400">Day (EN)</span>
                                            <input type="text" x-model="row.day_en" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="Monday-Friday">
                                        </div>
                                        <div class="flex flex-col gap-0.5" style="max-width:140px;">
                                            <span class="font-mono text-[8px] text-crius-grey-400">Jam</span>
                                            <input type="text" x-model="row.hours" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="08:00-17:00">
                                        </div>
                                        <button @click="rows.splice(i,1)" type="button" class="btn btn--sm" style="background:var(--danger-pale);color:var(--danger);border:none;font-size:11px;padding:8px 12px;border-radius:8px;flex-shrink:0;">✕</button>
                                    </div>
                                </template>
                                <button @click="rows.push({day_id:'',day_en:'',hours:''})" type="button" class="btn btn--sm" style="border:1.5px dashed var(--grey-300);color:var(--grey-500);background:transparent;font-size:11px;padding:8px 16px;border-radius:8px;margin-top:4px;">+ Tambah Jam Operasional</button>
                                <textarea name="{{ $setting->key }}" x-model="jsonStr" class="hidden" x-cloak></textarea>
                            </div>

                        @elseif($setting->type == 'json' && $setting->key == 'hero_slides')
                            <div x-data="slidesEditor({{ $setting->value ?: '[]' }})" x-init="$watch('slides', val => jsonStr = JSON.stringify(val))">
                                <template x-for="(slide, i) in slides" :key="i">
                                    <div class="mb-4 p-4 rounded-xl" style="border:1px solid var(--grey-200);background:var(--grey-50);">
                                        <div class="flex items-center justify-between mb-3">
                                            <span class="font-display font-bold text-xs text-crius-navy" x-text="'Slide ' + (i+1)"></span>
                                            <button @click="slides.splice(i,1)" type="button" class="btn btn--sm" style="background:var(--danger-pale);color:var(--danger);border:none;font-size:10px;padding:4px 10px;border-radius:6px;">Hapus Slide</button>
                                        </div>
                                        <div class="flex flex-col gap-3">
                                            <div class="grid grid-cols-2 gap-3">
                                                <div class="flex flex-col gap-0.5">
                                                    <span class="font-mono text-[8px] text-crius-grey-400">Judul (ID)</span>
                                                    <input type="text" x-model="slide.title_id" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="Solusi Kompresor...">
                                                </div>
                                                <div class="flex flex-col gap-0.5">
                                                    <span class="font-mono text-[8px] text-crius-grey-400">Title (EN)</span>
                                                    <input type="text" x-model="slide.title_en" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="Best Compressor...">
                                                </div>
                                            </div>
                                            <div class="grid grid-cols-2 gap-3">
                                                <div class="flex flex-col gap-0.5">
                                                    <span class="font-mono text-[8px] text-crius-grey-400">Subtitle (ID)</span>
                                                    <input type="text" x-model="slide.subtitle_id" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="Teknologi Terdepan">
                                                </div>
                                                <div class="flex flex-col gap-0.5">
                                                    <span class="font-mono text-[8px] text-crius-grey-400">Subtitle (EN)</span>
                                                    <input type="text" x-model="slide.subtitle_en" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="Leading Technology">
                                                </div>
                                            </div>
                                            <div class="grid grid-cols-2 gap-3">
                                                <div class="flex flex-col gap-0.5">
                                                    <span class="font-mono text-[8px] text-crius-grey-400">Image URL</span>
                                                    <input type="text" x-model="slide.image" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="https://...jpg">
                                                </div>
                                                <div class="flex flex-col gap-0.5">
                                                    <span class="font-mono text-[8px] text-crius-grey-400">CTA 1 Label (ID)</span>
                                                    <input type="text" x-model="slide.cta1_label_id" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="Dapatkan Penawaran">
                                                </div>
                                            </div>
                                            <div class="grid grid-cols-3 gap-3">
                                                <div class="flex flex-col gap-0.5">
                                                    <span class="font-mono text-[8px] text-crius-grey-400">CTA 1 Label (EN)</span>
                                                    <input type="text" x-model="slide.cta1_label_en" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="Get a Quote">
                                                </div>
                                                <div class="flex flex-col gap-0.5">
                                                    <span class="font-mono text-[8px] text-crius-grey-400">CTA 1 URL</span>
                                                    <input type="text" x-model="slide.cta1_url" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="#contact">
                                                </div>
                                                <div class="flex flex-col gap-0.5">
                                                    <span class="font-mono text-[8px] text-crius-grey-400">CTA 2 Label (ID)</span>
                                                    <input type="text" x-model="slide.cta2_label_id" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="Lihat Produk">
                                                </div>
                                            </div>
                                            <div class="grid grid-cols-2 gap-3">
                                                <div class="flex flex-col gap-0.5">
                                                    <span class="font-mono text-[8px] text-crius-grey-400">CTA 2 Label (EN)</span>
                                                    <input type="text" x-model="slide.cta2_label_en" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="View Products">
                                                </div>
                                                <div class="flex flex-col gap-0.5">
                                                    <span class="font-mono text-[8px] text-crius-grey-400">CTA 2 URL</span>
                                                    <input type="text" x-model="slide.cta2_url" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px 10px;" placeholder="#products">
                                                </div>
                                            </div>
                                            <div class="flex flex-col gap-0.5">
                                                <span class="font-mono text-[8px] text-crius-grey-400">Deskripsi (ID)</span>
                                                <textarea x-model="slide.description_id" rows="2" class="form-input form-textarea" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:11px;">{{ old('description_id', '') }}</textarea>
                                            </div>
                                            <div class="flex flex-col gap-0.5">
                                                <span class="font-mono text-[8px] text-crius-grey-400">Description (EN)</span>
                                                <textarea x-model="slide.description_en" rows="2" class="form-input form-textarea" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:11px;">{{ old('description_en', '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <button @click="slides.push({title_id:'',title_en:'',subtitle_id:'',subtitle_en:'',image:'',description_id:'',description_en:'',cta1_label_id:'',cta1_label_en:'',cta1_url:'',cta2_label_id:'',cta2_label_en:'',cta2_url:''})" type="button" class="btn btn--sm" style="border:1.5px dashed var(--grey-300);color:var(--grey-500);background:transparent;font-size:11px;padding:8px 16px;border-radius:8px;margin-top:4px;">+ Tambah Slide</button>
                                <textarea name="{{ $setting->key }}" x-model="jsonStr" class="hidden" x-cloak></textarea>
                            </div>

                        @elseif($setting->type == 'json')
                            <textarea name="{{ $setting->key }}" rows="5" class="form-input form-textarea" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-family:monospace;font-size:11px;" placeholder="{{ $setting->value ? 'Edit JSON...' : 'Masukkan JSON...' }}">{{ old($setting->key, $setting->value) }}</textarea>

                        @elseif($setting->type == 'color')
                            <div class="flex items-center gap-3">
                                <input type="color" name="{{ $setting->key }}" value="{{ old($setting->key, $setting->value ?? '#000000') }}" class="w-10 h-10 rounded-lg border border-crius-grey-200 cursor-pointer">
                                <input type="text" name="{{ $setting->key }}" class="form-input flex-1" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-family:monospace;font-size:12px;" value="{{ old($setting->key, $setting->value) }}">
                            </div>

                        @elseif($setting->type == 'image')
                            <div class="flex flex-col gap-3">
                                @if($setting->value)
                                <div style="width:120px;height:80px;border:1px solid var(--grey-200);border-radius:var(--radius-md);overflow:hidden;background:var(--grey-50);display:flex;align-items:center;justify-content:center;">
                                    <img src="{{ image_url($setting->value) }}" alt="" style="max-width:100%;max-height:100%;object-fit:contain;">
                                </div>
                                @endif
                                <div class="flex items-center gap-3 flex-wrap">
                                    <input type="file" name="{{ $setting->key }}_file" accept="image/*" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-size:12px;padding:8px;flex:1;">
                                    <input type="text" name="{{ $setting->key }}" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);font-family:monospace;font-size:12px;width:200px;" value="{{ old($setting->key, $setting->value) }}" placeholder="path manual">
                                </div>
                            </div>

                        @else
                            <input type="text" name="{{ $setting->key }}" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);" value="{{ old($setting->key, $setting->value) }}">
                        @endif
                    </div>
                </div>
                @endforeach
            @endif
        </div>
        <div class="admin-form-footer">
            <button type="submit" class="btn btn--primary">Simpan Semua Pengaturan</button>
        </div>
    </div>
</form>

@push('scripts')
<script>
function hoursEditor(initial) {
    let parsed = [];
    try { parsed = JSON.parse(initial); } catch(e) { parsed = Array.isArray(initial) ? initial : []; }
    return {
        rows: parsed.length ? parsed : [{day_id:'', day_en:'', hours:''}],
        jsonStr: initial,
    };
}
function slidesEditor(initial) {
    let parsed = [];
    try { parsed = JSON.parse(initial); } catch(e) { parsed = Array.isArray(initial) ? initial : []; }
    return {
        slides: parsed.length ? parsed : [],
        jsonStr: initial,
    };
}
</script>
@endpush
@endsection