@extends('form.app')

@section('styles')
    <link href="{{ asset('assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" />

    <!-- FilePond CSS and JS -->
    <link href="{{ asset('assets/libs/filepond/css/filepond.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/libs/filepond/css/filepond-plugin-image-preview.css') }}" rel="stylesheet" />
    <script src="{{ asset('assets/libs/filepond/js/filepond.js') }}"></script>
    <script src="{{ asset('assets/libs/filepond/js/filepond-plugin-image-preview.js') }}"></script>
    <script src="{{ asset('assets/libs/filepond/js/filepond-plugin-file-validate-type.js') }}"></script>
@endsection

@section('content')
    {{-- navbar --}}
    @include('product::list.form.navbar')

    <br />
<b>Warning</b>:  Undefined variable $config in <b>/newdata/stgnew/public_html/trisak.mwz/Modules/Product/resources/views/list/form.blade.php</b> on line <b>18</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on null in <b>/newdata/stgnew/public_html/trisak.mwz/Modules/Product/resources/views/list/form.blade.php</b> on line <b>18</b><br />

    <form class="row" id="list_frm" method="POST" enctype="multipart/form-data">
        @csrf
        <input id="id" name="id" type="hidden" value="{{ $data->id ?? '0' }}">
        <div class="col-lg-9">
            <div class="tab-content">
                <div class="tab-pane active" id="info">
                    @include('product::list.form.translates')
                </div>
                <div class="tab-pane" id="other">
                    @include('product::list.form.other')
                </div>
                @if (!empty($config['upload']['status']))
                    <div class="tab-pane" id="upload">
                        @include('product::list.form.upload')
                    </div>
                @endif
                @if (!empty($config['seo']))
                    <div class="tab-pane" id="meta">
                        @include('mwz::seo.form')
                    </div>
                @endif
            </div>
        </div>
        <div class="col-lg-3">
            <x-form.lang />
            @include('product::list.form.setting')
            @include('product::list.form.status')
        </div>
    </form>
@endsection

@section('scripts')
    <!-- File uploads multiple js -->
    <script src="{{ asset('assets/libs/dropzone/dropzone.min.js') }}"></script>
    <script type="text/javascript">
        Dropzone.autoDiscover = false;
    </script>

    <!-- Jquery UI-->
    <script src="{{ asset('assets/libs/jquery-ui/jquery-ui.min.js') }}"></script>

    <script>
        var $_module = '<br />
<b>Warning</b>:  Undefined variable $module in <b>/newdata/stgnew/public_html/trisak.mwz/Modules/Product/resources/views/list/form.blade.php</b> on line <b>62</b><br />
';
        var $_method = '<br />
<b>Warning</b>:  Undefined variable $method in <b>/newdata/stgnew/public_html/trisak.mwz/Modules/Product/resources/views/list/form.blade.php</b> on line <b>63</b><br />
';
        var $_config = $.parseJSON('<br />
<b>Warning</b>:  Undefined variable $config in <b>/newdata/stgnew/public_html/trisak.mwz/Modules/Product/resources/views/list/form.blade.php</b> on line <b>64</b><br />
null');


        // Register the image preview plugin
        FilePond.registerPlugin(
            FilePondPluginImagePreview,
            FilePondPluginFileValidateType
        );

        // Initialize FilePond
        let initFile = [];
        if ($('#temp_images').val() != '') {
            let images = JSON.parse($('#temp_images').val());
            $.each(images, function(key, value) {
                initFile.push({
                    source: value.image,
                    options: {
                        type: 'local',
                    }
                });
            })
        }
        const pond = FilePond.create(document.querySelector('.filepond'), {
            files: initFile,
            server: {
                url: '/mwz',
                process: {
                    url: '/upload_filepond',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'X-Input': 'images'
                    }
                },
                revert: null,
                load: (source, load, error) => {
                    fetch(source)
                        .then(response => {
                            if (!response.ok) {
                                console.error(`Failed to load file: ${response.statusText}`);
                                error(new Error(`Could not load file: ${response.statusText}`));
                            }
                            return response.blob();
                        })
                        .then(blob => load(blob)) // Load blob into FilePond
                        .catch(err => {
                            console.error("File fetch failed:", err);
                            error(err); // Trigger error for any other fetch issues
                        });
                }
            },
            allowMultiple: true,
            allowImagePreview: true,
            //imagePreviewMaxHeight: 200,
            imagePreviewHeight: 200,
            allowReorder: true,
            itemInsertLocation: 'after',
            maxFiles: 5,
            acceptedFileTypes: ['image/jpeg', 'image/png', 'image/gif'], // Allow only images
            fileValidateTypeLabelExpectedTypesMap: {
                'image/jpeg': '.jpg',
                'image/png': '.png',
                'image/gif': '.gif'
            },
            onaddfile: (error, file) => {
                if (error) {
                    console.error("Error adding file:", error);
                    pond.removeFile(file.id); // Remove file preview if error occurs
                }
            },
            onerror: (error, file) => {
                console.error("File validation error:", error);
                pond.removeFile(file.id); // Remove the file preview if an error occurs during validation
            }
        });
    </script>
    {{ module_vite('build-product', 'resources/assets/js/list.js') }}
@endsection