@php
    $inputClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30';
    $selectClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90';
    $labelClass = 'mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400';
    $errorClass = 'border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700';
    $normalClass = 'border-gray-300 dark:border-gray-700';
    $dateClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30';
    $timeClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border bg-transparent bg-none px-4 py-2.5 pr-16 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30';
    $groupLabel = 'mb-3 text-theme-xs font-semibold tracking-wider text-gray-400 uppercase dark:text-gray-500';
@endphp

{{-- ================= Speech information ================= --}}
<div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="px-5 py-4 sm:px-6 sm:py-5">
        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Speech Information</h3>
    </div>

    <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
        {{-- Baris 1: Title (penuh) --}}
        <div class="grid grid-cols-1 gap-4">
            <div>
                <label class="{{ $labelClass }}" for="speech_title">Title <span class="text-error-500">*</span></label>
                <input type="text" id="speech_title" name="speech_title"
                    value="{{ old('speech_title', $speech->speech_title ?? '') }}" placeholder="e.g. Teks Ucapan YAB Menteri"
                    class="{{ $inputClass }} @error('speech_title') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('speech_title')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>
        </div>

        {{-- Baris 2: Language · Speaker Category · Speaker Name · Position --}}
        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div>
                @include('backend.module.contentSpeech.partials._select', [
                    'name' => 'speech_language',
                    'label' => 'Language',
                    'options' => $languages,
                    'selected' => old('speech_language', $speech->speech_language ?? ''),
                    'placeholder' => '-- Select Language --',
                    'firstWhenEmpty' => true,
                ])
            </div>
            <div>
                @include('backend.module.contentSpeech.partials._select', [
                    'name' => 'speech_speaker_category',
                    'label' => 'Speaker Category',
                    'options' => $speakers,
                    'selected' => old('speech_speaker_category', $speech->speech_speaker_category ?? ''),
                    'placeholder' => '-- Select Speaker --',
                    'required' => true,
                ])
            </div>
            <div>
                <label class="{{ $labelClass }}" for="speech_speaker">Speaker Name</label>
                <input type="text" id="speech_speaker" name="speech_speaker"
                    value="{{ old('speech_speaker', $speech->speech_speaker ?? '') }}" placeholder="e.g. YB Nik Nazmi"
                    class="{{ $inputClass }} {{ $normalClass }}">
            </div>
            <div>
                <label class="{{ $labelClass }}" for="speech_position">Position</label>
                <select id="speech_position" name="speech_position" class="speech-select2"
                    data-placeholder="-- Select Position --">
                    <option value=""></option>
                    @foreach ($positions as $code => $descr)
                        <option value="{{ $code }}"
                            {{ old('speech_position', $speech->speech_position ?? '') === $code ? 'selected' : '' }}>
                            {{ $descr }}</option>
                    @endforeach
                </select>
                @error('speech_position')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>
        </div>

        {{-- Baris 3: Speech Date · Category · Status · Sort Order --}}
        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div>
                <label class="{{ $labelClass }}">Speech Date</label>
                @include('backend.module.contentSpeech.partials._date-input', [
                    'name' => 'speech_date',
                    'value' => old('speech_date', isset($speech) && $speech->speech_date ? $speech->speech_date->format('Y-m-d') : ''),
                ])
                @error('speech_date')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>
            <div>
                @include('backend.module.contentSpeech.partials._select', [
                    'name' => 'speech_category',
                    'label' => 'Category',
                    'options' => $categories,
                    'selected' => old('speech_category', $speech->speech_category ?? ''),
                    'placeholder' => '-- Select Category --',
                    'required' => true,
                ])
            </div>
            <div>
                @include('backend.module.contentSpeech.partials._select', [
                    'name' => 'speech_status',
                    'label' => 'Status',
                    'options' => $statuses,
                    'selected' => old('speech_status', $speech->speech_status ?? ''),
                    'placeholder' => '-- Select Status --',
                    'required' => true,
                    'firstWhenEmpty' => true,
                ])
            </div>
            <div>
                <label class="{{ $labelClass }}" for="speech_sorting">Sort Order</label>
                <input type="number" id="speech_sorting" name="speech_sorting" min="0"
                    value="{{ old('speech_sorting', $speech->speech_sorting ?? 0) }}"
                    class="{{ $inputClass }} @error('speech_sorting') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('speech_sorting')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>
        </div>

        {{-- Baris 4: Event · Location --}}
        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <label class="{{ $labelClass }}" for="speech_event">Event</label>
                <input type="text" id="speech_event" name="speech_event"
                    value="{{ old('speech_event', $speech->speech_event ?? '') }}" placeholder="e.g. Launch Ceremony"
                    class="{{ $inputClass }} {{ $normalClass }}">
            </div>
            <div>
                <label class="{{ $labelClass }}" for="speech_location">Location</label>
                <input type="text" id="speech_location" name="speech_location"
                    value="{{ old('speech_location', $speech->speech_location ?? '') }}" placeholder="e.g. Putrajaya"
                    class="{{ $inputClass }} {{ $normalClass }}">
            </div>
        </div>

        {{-- Baris 5: Tetingkap publish (Publish Start Date/Time · Publish End Date/Time) --}}
        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div>
                <label class="{{ $labelClass }}">Publish Start Date</label>
                @include('backend.module.contentSpeech.partials._date-input', [
                    'name' => 'speech_start_date',
                    'value' => old('speech_start_date', $speech->speech_start_date ?? ''),
                ])
            </div>
            <div>
                <label class="{{ $labelClass }}">Publish Start Time</label>
                @include('backend.module.contentSpeech.partials._time-input', [
                    'name' => 'speech_start_time',
                    'value' => old('speech_start_time', $speech->speech_start_time ?? ''),
                ])
            </div>
            <div>
                <label class="{{ $labelClass }}">Publish End Date</label>
                @include('backend.module.contentSpeech.partials._date-input', [
                    'name' => 'speech_end_date',
                    'value' => old('speech_end_date', $speech->speech_end_date ?? ''),
                ])
                @error('speech_end_date')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label class="{{ $labelClass }}">Publish End Time</label>
                @include('backend.module.contentSpeech.partials._time-input', [
                    'name' => 'speech_end_time',
                    'value' => old('speech_end_time', $speech->speech_end_time ?? ''),
                ])
            </div>
        </div>

        {{-- Baris 6: Cover Image (penuh) — pratonton + crop 1240 × 1754 px (peta cropSizes dalam resources/js/filepond-image-cropper.js) --}}
        <div class="mt-4">
            <div class="rounded-xl border border-gray-200 bg-gray-50/60 p-4 dark:border-gray-800 dark:bg-white/[0.02]">
                <div class="mb-3 flex items-center justify-between gap-2">
                    <span class="text-sm font-medium text-gray-800 dark:text-white/90">Cover Image</span>
                    <span class="rounded-full bg-white px-2.5 py-0.5 text-theme-xs font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">Optional</span>
                </div>

                @if (! empty($speech->speech_img))
                    <div class="mb-3 flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs dark:border-gray-700 dark:bg-gray-900">
                        <img src="{{ url('storage/'.$speech->speech_img) }}" alt="" class="h-7 w-7 rounded-md object-cover">
                        <a href="{{ url('storage/'.$speech->speech_img) }}" target="_blank" rel="noopener"
                            class="min-w-0 flex-1 truncate font-medium text-brand-600 hover:underline dark:text-brand-400">
                            {{ basename($speech->speech_img) }}
                        </a>
                    </div>
                @endif

                <div class="mx-auto w-full max-w-[200px] rounded-xl @error('speech_img') ring-1 ring-error-300 dark:ring-error-700 @enderror">
                    <input type="file" name="speech_img" class="filepond w-full" accept="image/png, image/jpeg, image/jpg, image/webp">
                </div>
                @error('speech_img')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
                <p class="mt-2 text-center text-theme-xs text-gray-500 dark:text-gray-400">Cover · 1240 × 1754 px recommended · JPG, PNG or WebP · max 15MB</p>
            </div>
        </div>

        {{-- Baris 7: Speech Document (penuh) --}}
        <div class="mt-4">
            <div class="rounded-xl border border-gray-200 bg-gray-50/60 p-4 dark:border-gray-800 dark:bg-white/[0.02]">
                <div class="mb-3 flex items-center justify-between gap-2">
                    <span class="text-sm font-medium text-gray-800 dark:text-white/90">Speech Document</span>
                    <span class="rounded-full bg-white px-2.5 py-0.5 text-theme-xs font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">Required to publish</span>
                </div>

                @if (! empty($speech->speech_file))
                    <div class="mb-3 flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs dark:border-gray-700 dark:bg-gray-900">
                        <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-brand-50 text-brand-500 dark:bg-brand-500/10 dark:text-brand-400">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" /><path d="M14 3v5h5" /></svg>
                        </span>
                        <a href="{{ url('storage/'.$speech->speech_file) }}" target="_blank" rel="noopener"
                            class="min-w-0 flex-1 truncate font-medium text-brand-600 hover:underline dark:text-brand-400">
                            {{ basename($speech->speech_file) }}
                        </a>
                    </div>
                @endif

                <div class="rounded-xl @error('speech_file') ring-1 ring-error-300 dark:ring-error-700 @enderror">
                    <input type="file" name="speech_file" class="filepond w-full" accept=".pdf,.doc,.docx,.pptx">
                </div>
                @error('speech_file')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
                <p class="mt-2 text-theme-xs text-gray-500 dark:text-gray-400">PDF, Word or PowerPoint · max 150MB</p>
            </div>
        </div>
    </div>
</div>