@extends('backend.layouts.app')

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

@section('content')
    @php
        $pageTitle = 'Create Media';
        $indexRoute = 'content-media.index';
        $indexLabel = 'Media Library';
    @endphp
    @include('backend.layouts.partials._page_header')

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

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

            <div class="flex justify-end gap-3">
                <a href="{{ route('content-media.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>
@endpush

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