<div class=" p-6 bg-white shadow-lg rounded-lg">
    <style>
        .ql-container {
            height: 15rem;
        }
    </style>
    <form wire:submit.prevent="submitForm" x-data x-init="const quill = new Quill($refs.editor, {
        modules: {
            toolbar: {
                container: [
                    ['bold', 'italic', 'underline', 'strike'],
                    ['blockquote', 'code-block'],
                    [{ header: 1 }, { header: 2 }],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    [{ script: 'sub' }, { script: 'super' }],
                    [{ indent: '-1' }, { indent: '+1' }],
                    [{ direction: 'rtl' }],
                    [{ size: ['small', false, 'large', 'huge'] }],
                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
                    [{ color: [] }, { background: [] }],
                    [{ font: [] }],
                    [{ align: [] }],
                    ['clean'],
                    ['image'],
                ],
                handlers: {
                    image: function() {
                        const input = document.createElement('input');
                        input.setAttribute('type', 'file');
                        input.setAttribute('accept', 'image/*');
                        input.click();
    
                        input.onchange = () => {
                            const file = input.files[0];
                            if (file) {
                                const reader = new FileReader();
                                reader.onload = (e) => {
                                    const img = new Image();
                                    img.src = e.target.result;
                                    img.onload = () => {
                                        const canvas = document.createElement('canvas');
                                        const ctx = canvas.getContext('2d');
                                        const MAX_WIDTH = 800;
                                        const MAX_HEIGHT = 600;
                                        let width = img.width;
                                        let height = img.height;
    
                                        if (width > MAX_WIDTH) {
                                            height *= MAX_WIDTH / width;
                                            width = MAX_WIDTH;
                                        }
    
                                        if (height > MAX_HEIGHT) {
                                            width *= MAX_HEIGHT / height;
                                            height = MAX_HEIGHT;
                                        }
    
                                        canvas.width = width;
                                        canvas.height = height;
                                        ctx.drawImage(img, 0, 0, width, height);
                                        const resizedImage = canvas.toDataURL('image/jpeg', 0.7);
                                        const range = quill.getSelection();
                                        quill.insertEmbed(range.index, 'image', resizedImage);
                                    };
                                };
                                reader.readAsDataURL(file);
                            }
                        };
                    }
                }
            }
        },
        placeholder: 'Enter your content...',
        theme: 'snow',
    });
    
    $refs.submitButton.addEventListener('click', function() {
        @this.set('content', quill.root.innerHTML);
    });">
        @csrf
        <div class="mb-6">
            <h2
                class="font-medium flex items-center tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                <i aria-hidden="true" class="fa-solid fa-edit text-primary"></i> Create Update Form
            </h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="mb-2">
                <label for="topic" class="block text-sm font-medium text-gray-700">Topic:</label>
                <input type="text" wire:model.defer="topic" id="topic"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter Topic">
                @error('topic')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>

            <div class="mb-2">
                <label for="topicColor" class="block text-sm font-medium text-gray-700">Topic Color:</label>
                <input type="color" wire:model.defer="topicColor" id="topicColor"
                    class="mt-1 block w-full px-4 py-2 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
                @error('topicColor')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>

            <div class="mb-2">
                <label for="category" class="block text-sm font-medium text-gray-700">Category:</label>
                <select id="category" wire:model.defer="category" class="w-full p-2 border border-gray-300 rounded-md">
                    @foreach ($categories as $key => $cate)
                        <option value="{{ $key }}">
                            {{ $cate }}</option>
                    @endforeach
                </select>
                @error('category')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>
            <div class="mb-2">
                <label for="type" class="block text-sm font-medium text-gray-700">Type:</label>
                <select id="type" wire:model.defer="type" class="w-full p-2 border border-gray-300 rounded-md">
                    @foreach ($types as $key2 => $type)
                        <option value="{{ $key2 }}">
                            {{ $type }}</option>
                    @endforeach
                </select>
                @error('type')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>

            <div class="md:col-span-2 mb-2">
                <label for="description" class="block text-sm font-medium text-gray-700">Description:</label>
                <textarea wire:model.defer="description" id="description" rows="3"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter Description"></textarea>
                @error('description')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>
            <div class="md:col-span-2 mb-2" wire:ignore>
                <label for="content" class="block text-sm font-medium text-gray-700">Content:</label>
                <div x-ref="editor" class="h-60 max-h-60 overflow-y-auto"></div>
                @error('content')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>

            <div class="mb-2">
                <label for="issueDate" class="block text-sm font-medium text-gray-700">Issue Date:</label>
                <input type="datetime-local" wire:model.defer="issueDate" id="issueDate"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
                @error('issueDate')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>

            <div class="mb-2">
                <label for="expireDate" class="block text-sm font-medium text-gray-700">Expire Date:</label>
                <input type="datetime-local" wire:model.defer="expireDate" id="expireDate"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
                @error('expireDate')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>

            <div class="mb-2">
                @if ($uploadFilePathName1)
                    <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4 flex items-center">
                        Uploaded File 1: {{ $uploadFilePathName1->getClientOriginalName() }}
                        <button wire:click.prevent="removeFile('uploadFilePathName1')"
                            class="ml-1 text-red-600 hover:text-red-800">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                @else
                    <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4">
                        Uploaded File 1
                    </div>
                @endif

                <span wire:loading wire:target="uploadFilePathName1">
                    <svg class="animate-spin h-5 w-5 text-primary m-3" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                            stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                        </path>
                    </svg>
                </span>
                <label for="file-upload-1"
                    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
                    aria-label="Upload File 1">
                    <input tabindex="-1" id="file-upload-1" type="file" wire:model="uploadFilePathName1"
                        class="pointer-events-none absolute inset-0 h-full w-full opacity-0" />
                    <div class="flex items-center space-x-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                        </svg>
                        <span>Choose File</span>
                    </div>
                    @error('uploadFilePathName1')
                        <span class="error">{{ $message }}</span>
                    @enderror
                </label>
            </div>
            <div class="mb-2">
                @if ($uploadFilePathName2)
                    <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4 flex items-center">
                        Uploaded File 2: {{ $uploadFilePathName2->getClientOriginalName() }}
                        <button wire:click.prevent="removeFile('uploadFilePathName2')"
                            class="ml-1 text-red-600 hover:text-red-800">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                @else
                    <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4">
                        Uploaded File 2
                    </div>
                @endif

                <span wire:loading wire:target="uploadFilePathName2">
                    <svg class="animate-spin h-5 w-5 text-primary m-3" xmlns="http://www.w3.org/2000/svg"
                        fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                            stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                        </path>
                    </svg>
                </span>
                <label for="file-upload-2"
                    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
                    aria-label="Upload File 1">
                    <input tabindex="-1" id="file-upload-2" type="file" wire:model="uploadFilePathName2"
                        class="pointer-events-none absolute inset-0 h-full w-full opacity-0" />
                    <div class="flex items-center space-x-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                        </svg>
                        <span>Choose File</span>
                    </div>
                    @error('uploadFilePathName2')
                        <span class="error">{{ $message }}</span>
                    @enderror
                </label>

            </div>
        </div>

        <div class="flex justify-end space-x-4 mt-4">
            <a href="/news" type="button"
                class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Cancel</a>
            <button type="submit" x-ref="submitButton"
                class="px-4 py-2 bg-primary text-white rounded-md shadow-sm hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">Save</button>
        </div>
    </form>
</div>
