@extends('admin.layouts.app')
@section('title', 'Edit Content Type')
@section('page-title', 'Edit Content Type')

@section('content')
<div class="max-w-2xl" x-data="contentTypeBuilder({{ json_encode($contentType->fields ?? []) }})">
    <form method="POST" action="{{ route('admin.content-types.update', $contentType->id) }}"
          x-data="postForm()" @submit.prevent="submit($event)" class="space-y-6">
        @csrf
        <input type="hidden" name="_method" value="PUT">

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 space-y-4">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
                    <input type="text" name="name" value="{{ $contentType->name }}" required
                           class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <p x-show="hasError('name')" x-text="getError('name')" class="text-xs text-red-500 mt-1"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Slug</label>
                    <input type="text" value="{{ $contentType->slug }}" disabled
                           class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 font-mono">
                </div>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">URL Prefix</label>
                    <input type="text" name="rewrite_slug" value="{{ $contentType->rewrite_slug }}" placeholder="e.g. events"
                           class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-mono">
                </div>
                <div class="flex items-center gap-4">
                    <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                        <input type="checkbox" name="has_archive" value="1" @checked($contentType->has_archive) class="rounded border-gray-300">
                        Has Archive Page
                    </label>
                    <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" @checked($contentType->is_active) class="rounded border-gray-300">
                        Active
                    </label>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-900 dark:text-white">Custom Fields</h3>
                <button type="button" @click="addField"
                        class="flex items-center gap-1 text-sm text-indigo-600 dark:text-indigo-400 hover:underline">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    Add Field
                </button>
            </div>
            <div class="space-y-3">
                <template x-for="(field, i) in fields" :key="i">
                    <div class="flex gap-3 items-start p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <div class="flex-1 grid grid-cols-1 sm:grid-cols-3 gap-3">
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">Key</label>
                                <input type="text" :name="`fields[${i}][key]`" x-model="field.key" placeholder="field_key"
                                       class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-2 py-1.5 text-xs bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-mono">
                            </div>
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">Label</label>
                                <input type="text" :name="`fields[${i}][label]`" x-model="field.label" placeholder="Field Label"
                                       class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-2 py-1.5 text-xs bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                            </div>
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">Type</label>
                                <select :name="`fields[${i}][type]`" x-model="field.type"
                                        class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-2 py-1.5 text-xs bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                    <option value="text">Text</option>
                                    <option value="textarea">Textarea</option>
                                    <option value="number">Number</option>
                                    <option value="date">Date</option>
                                    <option value="url">URL</option>
                                    <option value="email">Email</option>
                                    <option value="select">Select</option>
                                </select>
                            </div>
                        </div>
                        <button type="button" @click="fields.splice(i, 1)" class="mt-5 text-red-400 hover:text-red-600">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        </button>
                    </div>
                </template>
                <p x-show="fields.length === 0" class="text-sm text-gray-400 text-center py-4">No fields added yet.</p>
            </div>
        </div>

        <div x-show="message" x-text="message"
             :class="saved ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300' : 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-300'"
             class="text-xs p-2 rounded border" style="display:none"></div>

        <div class="flex gap-3">
            <button type="submit" :disabled="saving"
                    class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white rounded-lg text-sm font-medium flex items-center gap-2">
                <svg x-show="saving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                </svg>
                <span x-text="saving ? 'Saving...' : 'Update'"></span>
            </button>
            <a href="{{ route('admin.content-types.index') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium">Cancel</a>
        </div>
    </form>
</div>
@endsection
