@csrf
@if ($errors->any())
    <div class="mb-4 rounded-lg border border-rose-300 bg-rose-50 px-3 py-2 text-sm text-rose-700">
        {{ $errors->first() }}
    </div>
@endif
<div class="grid gap-4 sm:grid-cols-2">
    <div>
        <label for="title" class="block text-sm font-medium">Title</label>
        <input id="title" name="title" value="{{ old('title', $content->title ?? '') }}" required maxlength="255" data-auto-slug-source="true" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">
    </div>
    <div>
        <label for="slug" class="block text-sm font-medium">Slug (optional)</label>
        <input id="slug" name="slug" value="{{ old('slug', $content->slug ?? '') }}" maxlength="255" pattern="^[a-z0-9]+(?:-[a-z0-9]+)*$" data-pattern-message="Slug may contain lowercase letters, numbers and hyphens only." data-auto-slug-target="true" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">
    </div>
    <div>
        <label for="content_type" class="block text-sm font-medium">Content Type</label>
        <select id="content_type" name="content_type" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">
            @foreach ($contentTypes as $value => $label)
                <option value="{{ $value }}" @selected(old('content_type', $content->content_type ?? 'ringtone') === $value)>{{ $label }}</option>
            @endforeach
        </select>
    </div>
    <div>
        <label class="block text-sm font-medium">Category</label>
        <input type="hidden" name="category_id" value="{{ $userCategory->id }}">
        <div class="mt-1 rounded-lg border border-slate-300 bg-slate-50 px-3 py-2 text-sm text-slate-700">
            {{ $userCategory->slug_path }}
        </div>
        <p class="mt-1 text-xs text-slate-500">Uploads are automatically stored in your personal category folder.</p>
    </div>
    <div class="sm:col-span-2">
        <label for="content_file" class="block text-sm font-medium">File {{ isset($content) ? '(optional for update)' : '(optional if URL provided)' }}</label>
        <input
            id="content_file"
            name="content_file"
            type="file"
            data-content-file
            data-content-url-source="content_url"
            data-content-type-source="content_type"
            data-max-size-mb="100"
            class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2"
        >
        <p class="mt-1 text-xs text-slate-500">Upload a file directly, or leave this empty and use the URL field below. Max file size: 100 MB.</p>
        @if (!empty($content?->file_path))
            <p class="mt-1 text-xs text-slate-500">Current file: {{ $content->file_path }}</p>
        @endif
    </div>
    <div class="sm:col-span-2">
        <label for="content_url" class="block text-sm font-medium">File URL (optional)</label>
        <input
            id="content_url"
            name="content_url"
            type="url"
            value="{{ old('content_url') }}"
            data-content-url
            data-content-file-source="content_file"
            placeholder="https://example.com/file.mp3"
            class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2"
        >
        <p class="mt-1 text-xs text-slate-500">If provided, the server will fetch and store the file from this URL.</p>
    </div>
    <div class="sm:col-span-2">
        <label for="tags" class="block text-sm font-medium">Tags (comma separated)</label>
        <input id="tags" name="tags" value="{{ old('tags', isset($content) ? $content->tags->pluck('name')->implode(', ') : '') }}" maxlength="1000" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">
    </div>
    <div class="sm:col-span-2">
        <label for="description" class="block text-sm font-medium">Description</label>
        <textarea id="description" name="description" rows="4" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">{{ old('description', $content->description ?? '') }}</textarea>
    </div>
</div>

<div class="mt-6">
    <button class="btn-primary rounded-lg px-4 py-2 text-sm font-semibold">Submit for Approval</button>
</div>