@extends('Backend.Layout.app')

@section('content')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                        {{translate('Edit Video')}}
                    </h1>
                </div>
            </div>
        </div>

        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container ">
                <form action="{{route('backend.video.update', ['video'=>$video->id])}}" method="post" id="videoForm"
                      class="repeater-default" enctype="multipart/form-data">
                    @csrf


                    <div class="row">
                        <div class="col-xl-9">
                            <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-bold mb-4"
                                role="tablist">
                                @foreach(languages() as $lang)
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link text-active-primary pb-4 @if($loop->first) active @endif text-capitalize"
                                           data-bs-toggle="tab"
                                           href="#kt_tab_pane_{{$lang}}">{{$lang}}</a>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="card card-flush">
                                <div class="card-body">
                                    <div class="tab-content" id="myTabContent">
                                        @foreach(languages() as $lang)

                                            <div class="tab-pane fade show @if($loop->first) active @endif"
                                                 id="kt_tab_pane_{{$lang}}" role="tabpanel">
                                                <div class="fv-row mb-7">
                                                    <label class="required fw-semibold fs-6 mb-2">{{translate('Name')}} {{$lang}}</label>
                                                    <input type="text" name="name_{{$lang}}"
                                                           value="{{ old('name_'.$lang, $video->getTranslation('name') ?? '') }}"
                                                           @if($loop->first) required @endif
                                                           class="form-control form-control-solid mb-3 mb-lg-0"
                                                           placeholder="{{translate('Name')}}"/>
                                                </div>

                                                <div class="fv-row mb-7">
                                                    <label class="required fw-semibold fs-6 mb-2">{{translate('Description')}} {{$lang}}</label>
                                                    <input name="des_{{$lang}}" type="hidden"
                                                           value="{{ old('des_'.$lang, $video->getTranslation('description') ?? '') }}">
                                                    <div id="kt_docs_ckeditor_document_toolbar_{{$lang}}"></div>
                                                    <div id="kt_docs_ckeditor_document_{{$lang}}">
                                                        {!! old('des_'.$lang, $video->getTranslation('description') ?? '') !!}
                                                    </div>
                                                </div>

                                                @include('Backend.variables.inputs', ['lang'=>$lang, 'data_value'=>$video->getTranslation('seo')])


                                                <div class="fv-row mb-7">
                                                    <label class="required fw-semibold fs-6 mb-2">{{translate('Slug')}} {{$lang}}</label>
                                                    <input type="text" name="slug_{{$lang}}"
                                                           value="{{ old('slug_'.$lang, $video->getTranslation('slug') ?? '') }}"
                                                           @if($loop->first) required @endif
                                                           class="form-control form-control-solid mb-3 mb-lg-0"
                                                           placeholder="{{translate('Slug')}}"/>
                                                </div>

                                            </div>


                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="card mt-5">
                                <div class="card-body">
                                    <h4>{{translate('More Info')}}</h4>

                                    <div class="row">
                                        <div class="col mb-7">
                                            <label class="form-label">{{translate('Report')}}</label>


                                            <div class="dropzone" id="kt_dropzonejs_example_2"></div>
                                            <input name="report" id="report" type="hidden"
                                                   value='@json(old("report", $video->report ?? []))'>

                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col">
                                            <label class="form-label">{{translate('Video Url')}}</label>
                                            <input type="text"
                                                   class="form-control"
                                                   name="videoUrls"
                                                   id="youtubeUrl"
                                                   value="{{ old('videoUrls', $video->link ?? '') }}"
                                                   placeholder="YouTube URL">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3">
                            <div class="card mt-2">
                                <div class="card-header">
                                    <div class="card-title"><h2>{{translate('More Data')}}</h2></div>
                                </div>

                                <div class="card-body">
                                    <div class="mt-5">
                                        <label class="form-label">{{translate('Category')}}</label>
                                        <select class="form-select form-select-solid fw-bold"
                                                name="category_id"
                                                data-kt-select2="true" data-placeholder="Select option"
                                                data-allow-clear="true" data-kt-user-table-filter="role"
                                                data-hide-search="true">
                                            <option></option>
                                            @foreach($categories as $category)
                                                <option value="{{$category->id}}"
                                                    {{ old('category_id', $video->category_id) == $category->id ? 'selected' : '' }}>
                                                    {{$category->getTranslation('name')}}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="my-3">
                                <button class="btn btn-primary w-100 btn-submit" type="submit">{{translate('Save')}}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="{{asset('assets/backend/plugins/custom/ckeditor/ckeditor-document.bundle.js')}}"></script>
    <script>
        @foreach(languages() as $lang)
        DecoupledEditor.create(document.querySelector('#kt_docs_ckeditor_document_{{$lang}}'))
            .then(editor_{{$lang}} => {
                const toolbarContainer = document.querySelector('#kt_docs_ckeditor_document_toolbar_{{$lang}}');
                toolbarContainer.appendChild(editor_{{$lang}}.ui.view.toolbar.element);
                editor_{{$lang}}.model.document.on('change:data', () => {
                    document.querySelector('input[name=des_{{$lang}}]').value = editor_{{$lang}}.getData();
                });
            }).catch(error => console.error('Error creating editor:', error));
        @endforeach

        var baseUrl = "{{ url('/') }}"; // Blade outputs as string
        var report = JSON.parse($('#report').val() || '[]');

        Dropzone.autoDiscover = false;
        var myDropzoneReport = new Dropzone("#kt_dropzonejs_example_2", {
            url: '{{ route('report') }}',
            paramName: "report",
            maxFiles: 10,
            addRemoveLinks: true,
            acceptedFiles: ".pdf, .xlsx, .docx, .csv",
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            init: function () {
                var dz = this;

                // Preload existing files
                report.forEach(function(filePath) {
                    var fileUrl = baseUrl + '/' + filePath; // safely concatenate
                    var mockFile = {
                        name: filePath.split('/').pop(),
                        size: 12345,
                        type: 'application/pdf',
                        accepted: true
                    };

                    dz.emit("addedfile", mockFile);
                    dz.emit("complete", mockFile);

                    // Optional: show a download link
                    var preview = mockFile.previewElement;
                    if(preview) {
                        var link = document.createElement('a');
                        link.href = fileUrl;
                        link.target = '_blank';
                        link.textContent = 'View';
                        link.style.display = 'block';
                        preview.appendChild(link);
                    }

                    mockFile.previewElement.classList.add('dz-success', 'dz-complete');
                });

                dz.on("removedfile", function(file) {
                    // Remove from the report array
                    report = report.filter(f => !file.name.endsWith(f.split('/').pop()));
                    $('#report').val(JSON.stringify(report));
                });
            }
        });

        // Handle newly uploaded files
        myDropzoneReport.on("success", function(file, response) {
            report.push(response); // backend should return file path
            $('#report').val(JSON.stringify(report));
        });
    </script>
@endsection