@extends('components.layouts.manager.index')
@section('content')
    <div class="inline-flex gap-4 mt-2" role="group">
        <x-link.link-group
            path="{{route('manager.audio-books')}}"
            target=""
            text="بازگشت"
            class="">
            <x-icon.home class="size-6 me-2"/>
        </x-link.link-group>
    </div>
    <form
        class="space-y-4"
        action="{{route('manager.audio-books.update' , $audioBook)}}"
        method="post">
        @csrf
        @method('put')
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <x-inputs.input
                placeholder="نام کتاب"
                class=""
                type="text"
                name="name"
                value="{{$audioBook->name}}"
                label="نام کتاب">
                <x-icon.phone class="size-6 text-gray-500"/>
            </x-inputs.input>
            <x-inputs.input
                placeholder="آدرس اینترنتی"
                class=""
                type="text"
                name="slug"
                value="{{$audioBook->slug}}"
                label="آدرس اینترنتی">
                <x-icon.phone class="size-6 text-gray-500"/>
            </x-inputs.input>
            <x-inputs.textarea
                placeholder="توضیحات کوتاه"
                class=""
                name="short_description"
                value="{{$audioBook->short_description}}"
                label="توضیحات کوتاه">
                <x-icon.phone class="size-6 text-gray-500"/>
            </x-inputs.textarea>
        </div>
        @error('description') <span class="text-red-500">{{$message}}</span>@enderror
        <textarea id="description" name="description">{{ $audioBook->description  }}</textarea>
        <x-buttons.button text="ذخیره "/>
    </form>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
        <div action="{{route('manager.audio-books.avatar' , ['_token' => csrf_token() ] )}}" class="dropzone"
             id="myDropzone">
            <div class="dz-message">فایل‌های خود را اینجا بکشید یا کلیک کنید تا آپلود شود.</div>
        </div>
        <div>
            <img
                id="showAvatar"
                src="{{$audioBook->avatar}}" alt="">
        </div>
    </div>

    <livewire:manager.add-episode-to-audio-book audio_book_id="{{$audioBook->id}}"/>

    <div class="border-2 border-gray-300 border-dashed rounded-lg p-2  space-y-4">
        @foreach($audioBook->audios as $audio)
            <audio
                class="w-full border-2 border-dashed border-orange-500 rounded-full "
                src="{{route('manager.audio-books.play',$audio)}}" controls></audio>
        @endforeach
    </div>

@endsection
@section('scripts')
    <script src="{{asset('asset/plugin/ckeditor/ckeditor.js')}}"></script>
    <script src="{{asset('asset/plugin/ckeditor/lang/fa.js')}}"></script>
    <script src="{{asset('asset/plugin/dropzone/dropzone.min.js')}}"></script>
    <link rel="stylesheet" href="{{asset('asset/plugin/dropzone/dropzone.min.css')}}" type="text/css"/>
    <script>
        const editor = CKEDITOR.replace('description', {
            filebrowserUploadUrl: `{{route('article.imageUploader' , ['_token' => csrf_token()])}}`,
            customConfig: 'editorConfig',
            requires: 'widget',
        });
        CKEDITOR.editorConfig = function (config) {
            config.language = 'fa';
            config.uiColor = '#AADC6E';
            config.allowedContent = true;
            config.extraPlugins = 'language';
            config.height = 500;
            config.extraPlugins = 'uploadimage';
            config.uploadUrl = `{{route('article.imageUploader' , ['_token' => csrf_token()])}}`;
            config.toolbarCanCollapse = true;
            config.extraPlugins = 'font';
            config.font_names =
                'yekan;' +
                'vazir;'
        };

        Dropzone.options.myDropzone = {
            paramName: "file",
            maxFilesize: 2,
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            params: {
                audioBook: `{{$audioBook->id}}`
            },
            init: function () {
                thisDropzone = this;
                this.on("success", function (file, responseText) {
                    document.getElementById('showAvatar').src = responseText
                    console.log(responseText)
                });
            }
        };
    </script>
@endsection