@extends('backend.layouts.app')

@section('title', 'Create Speech')

@section('content')
    @php
        $pageTitle = 'Create Speech';
        $indexRoute = 'content-speech.index';
        $indexLabel = 'Speeches';
    @endphp
    @include('backend.layouts.partials._page_header')

    <form action="{{ route('content-speech.store') }}" method="POST" enctype="multipart/form-data" id="main-form">
        @csrf

        <div class="space-y-6">
            @include('backend.module.contentSpeech._form')

            <div class="flex justify-end gap-3">
                <a href="{{ route('content-speech.index') }}"
                    class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300">
                    Cancel
                </a>
                <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600">
                    Save
                </button>
            </div>
        </div>
    </form>
@endsection

@push('styles')
    <style>
        [x-cloak] { display: none !important; }
    </style>
    @include('backend.layouts.partials._directory-select2-styles')
@endpush

@push('scripts')
    <script src="{{ asset('vendor/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/dist/js/select2.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            $('.speech-select2').select2({
                width: '100%',
                placeholder: function () {
                    return $(this).data('placeholder');
                },
                allowClear: true
            });

            document.querySelectorAll('.filepond').forEach(function (el) {
                FilePond.create(el, {
                    credits: false,
                    allowImagePreview: true,
                    imagePreviewHeight: 170,
                    storeAsFile: true
                });
            });
        });
    </script>
@endpush