@extends('layouts.contentNavbarLayoutBackend')

@section('title', 'Edit Conference')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('backend-assets/vendor/libs/filepond/css/filepond.css') }}"/>
    <link rel="stylesheet" href="{{ asset('backend-assets/vendor/libs/filepond/css/filepond-plugin-image-preview.css') }}"/>
    <link rel="stylesheet" href="{{ asset('backend-assets/vendor/libs/filepond/css/filepond-plugin-file-poster.css') }}"/>
    <link rel="stylesheet" href="{{ asset('backend-assets/vendor/libs/flatpickr/flatpickr.css') }}">
    <link rel="stylesheet" href="{{ asset('backend-assets/vendor/libs/@form-validation/form-validation.css') }}"/>
@endsection

@section('page-style')
    <style>
        .ck-editor__editable_inline {
            min-height: 300px;
        }

        #images .filepond--item {
            width: calc(33.3% - 0.5em);
        }

        @media (min-width: 30em) {
            #images .filepond--item {
                width: calc(50% - 0.5em);
            }
        }

        @media (min-width: 50em) {
            #images .filepond--item {
                width: calc(33.33% - 0.5em);
            }
        }
    </style>
@endsection

@section('vendor-script')
    <script src="{{ asset('backend-assets/vendor/libs/filepond/js/filepond.js') }}"></script>
    <script src="{{ asset('backend-assets/vendor/libs/filepond/js/filepond-plugin-image-preview.js') }}"></script>
    <script src="{{ asset('backend-assets/vendor/libs/filepond/js/filepond-plugin-file-poster.js') }}"></script>
    <script src="{{ asset('backend-assets/vendor/libs/filepond/js/filepond-plugin-file-validate-size.js') }}"></script>
    <script src="{{ asset('backend-assets/vendor/libs/filepond/js/filepond-plugin-file-validate-type.js') }}"></script>
    <script src="{{ asset('backend-assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
    <script src="{{ asset('backend-assets/vendor/libs/ckeditor5/ckeditor.min.js') }}"></script>
    <script src="{{ asset('backend-assets/vendor/libs/@form-validation/popular.js') }}"></script>
    <script src="{{ asset('backend-assets/vendor/libs/@form-validation/bootstrap5.js') }}"></script>
    <script src="{{ asset('backend-assets/vendor/libs/@form-validation/auto-focus.js') }}"></script>
@endsection

@section('page-script')
    <script type="text/javascript">
        $(document).ready(function () {
            // Register the plugins
            FilePond.registerPlugin(
                FilePondPluginImagePreview,
                FilePondPluginFilePoster,
                FilePondPluginFileValidateSize,
                FilePondPluginFileValidateType
            );

            // Turn all file input elements into ponds
            const inputElement = document.querySelector('input[name="image"]');
            FilePond.create(inputElement, {
                imagePreviewHeight: 250,
                filePosterHeight: 250,
                allowMultiple: false,
                server: {
                    process: {
                        url: '/upload-temp',
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    },
                    load: {
                        url: '{{ asset('uploads/conference/' . $conference->image) }}',
                        method: 'GET',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        withCredentials: false,
                    },
                },
                files: [
                    @if ($conference->image)
                    {
                        source: '{{ asset('uploads/conference/' . $conference->image) }}',
                        options: {
                            type: 'local',
                            file: {
                                name: '{{ $conference->image }}',
                                size: {{ filesize(public_path('uploads/conference/' . $conference->image)) }},
                                type: 'image/{{ pathinfo($conference->image, PATHINFO_EXTENSION) }}'
                            },
                            metadata: {
                                poster: '{{ asset('uploads/conference/' . $conference->image) }}'
                            }
                        }
                    }
                    @endif
                ]
            });

            // Turn multiple file input element into a pond
            FilePond.create(document.querySelector('input[name="images[]"]'), {
                imagePreviewHeight: 250,
                filePosterHeight: 250,
                allowMultiple: true,
                server: {
                    process: {
                        url: '{{ route('upload-multiple-temp') }}',
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                    },
                },
                onremovefile: async (error, file) => {
                    if (error) {
                        console.error('FilePond error:', error);
                        return;
                    }

                    if (!file || !file.file || !file.file.name) {
                        console.error('File object is null or does not have a valid filename:', file);
                        return;
                    }

                    const filename = file.file.name;
                    const requestOptions = {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ filename: filename }),
                    };

                    try {
                        let url = '';

                        // Determine the correct endpoint based on the file origin
                        if (file.origin === FilePond.FileOrigin.LOCAL) {
                            url = '{{ route('delete-conference-image') }}'; // Endpoint for files in the database
                        } else if (file.origin === FilePond.FileOrigin.INPUT || file.origin === FilePond.FileOrigin.LIMBO) {
                            url = '{{ route('delete-multiple-temp') }}'; // Endpoint for temp files
                        }

                        if (!url) {
                            console.error('No URL determined for file removal');
                            return;
                        }

                        const response = await fetch(url, requestOptions);

                        if (response.ok) {
                            console.log('File deleted successfully');
                        } else {
                            const responseData = await response.json();
                            console.error('Error deleting file:', responseData.message);
                        }
                    } catch (error) {
                        console.error('Error:', error);
                    }
                },
                files: [
                    @foreach ($conference->images as $image)
                    {
                        source: '{{ asset('uploads/conference/gallery/' . $image->image) }}',
                        options: {
                            type: 'local',
                            file: {
                                name: '{{ $image->image }}',
                                size: {{ filesize(public_path('uploads/conference/gallery/' . $image->image)) }},
                                type: 'image/{{ pathinfo($image->image, PATHINFO_EXTENSION) }}',
                            },
                            metadata: {
                                poster: '{{ asset('uploads/conference/gallery/' . $image->image) }}',
                            },
                        },
                    },
                    @endforeach
                ]
            });

            const startDate = $('#start_date').flatpickr({
                dateFormat: "d-M-Y",
                onChange: function (selectedDates) {
                    endDate.set("minDate", selectedDates[0]);
                }
            });
            const endDate = $('#end_date').flatpickr({
                dateFormat: "d-M-Y",
                minDate: startDate.selectedDates[0]
            });

            ClassicEditor
                .create( document.querySelector( '#description' ),{
                    ckfinder: {
                        uploadUrl: '{{route('ckeditor.upload').'?_token='.csrf_token()}}',
                    }
                }).catch( error => {} );

            const formValidation = document.getElementById('conferenceForm');

            const fv = FormValidation.formValidation(formValidation, {
                fields: {
                    title_en: {
                        validators: {
                            notEmpty: {
                                message: 'Please enter title in english'
                            }
                        }
                    },
                    title_kh: {
                        validators: {
                            notEmpty: {
                                message: 'Please enter title in khmer'
                            }
                        }
                    },
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap5: new FormValidation.plugins.Bootstrap5({
                        // Use this for enabling/changing valid/invalid class
                        // eleInvalidClass: '',
                        eleValidClass: '',
                        rowSelector: function(field, ele) {
                            // field is the field name & ele is the field element
                            switch (field) {
                                case 'title_en':
                                case 'title_kh':
                                default:
                                    return '.row';
                            }
                        }
                    }),
                    submitButton: new FormValidation.plugins.SubmitButton(),
                    // Submit the form when all fields are valid
                    defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                    autoFocus: new FormValidation.plugins.AutoFocus()
                },
                init: instance => {
                    instance.on('plugins.message.placed', function(e) {
                        //* Move the error message out of the `input-group` element
                        if (e.element.parentElement.classList.contains('input-group')) {
                            // `e.field`: The field name
                            // `e.messageElement`: The message element
                            // `e.element`: The field element
                            e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
                        }
                        //* Move the error message out of the `row` element for custom-options
                        if (e.element.parentElement.parentElement.classList.contains('custom-option')) {
                            e.element.closest('.row').insertAdjacentElement('afterend', e.messageElement);
                        }
                    });
                }
            });
        });
    </script>
@endsection

@section('content')
    <form id="conferenceForm" action="{{ route('research-innovation.conferences.update', $conference->id) }}" method="POST" autocomplete="off" enctype="multipart/form-data">
        @csrf
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
            <div class="d-flex flex-column justify-content-center">
                <h4 class="mb-1 mt-3">Edit Conference</h4>
                <p class="text-muted">Enter conference data</p>
            </div>
            <div class="d-flex align-content-center flex-wrap gap-3">
                <a href="{{ route('research-innovation.conferences') }}" class="btn btn-label-secondary">Back</a>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-lg-12">
                        <label class="form-label" for="image">Main Image</label>
                        <input type="file" class="filepond" id="image" name="image" data-max-file-size="3MB" data-max-files="1">
                    </div>
                    <div class="col-lg-12">
                        <label class="form-label" for="images">Gallery Image</label>
                        <input type="file" class="filepond" id="images" name="images[]" data-max-file-size="3MB" data-max-files="10" multiple>
                    </div>
                    <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
                        <label class="form-label" for="title_en">Title in English</label>
                        <input type="text" class="form-control" id="title_en" name="title_en" value="{{ $conference->title_en }}" placeholder="Enter Title in English">
                    </div>
                    <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
                        <label class="form-label" for="title_kh">Title in Khmer</label>
                        <input type="text" class="form-control" id="title_kh" name="title_kh" value="{{ $conference->title_kh }}" placeholder="Enter Title in Khmer">
                    </div>
                    <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
                        <label class="form-label" for="sub_title_en">Subtitle in English</label>
                        <input type="text" class="form-control" id="sub_title_en" name="sub_title_en" value="{{ $conference->sub_title_en }}" placeholder="Enter Subtitle in English">
                    </div>
                    <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
                        <label class="form-label" for="sub_title_kh">Subtitle in Khmer</label>
                        <input type="text" class="form-control" id="sub_title_kh" name="sub_title_kh" value="{{ $conference->sub_title_en }}" placeholder="Enter Subtitle in Khmer">
                    </div>
                    <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
                        <label class="form-label" for="start_date">Start Date</label>
                        <input type="text" class="form-control" id="start_date" name="start_date" value="{{ date('d-M-y', strtotime($conference->start_date)) }}" placeholder="DD-MM-YYYY">
                    </div>
                    <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
                        <label class="form-label" for="end_date">End Date</label>
                        <input type="text" class="form-control" id="end_date" name="end_date" value="{{ date('d-M-y', strtotime($conference->end_date)) }}" placeholder="DD-MM-YYYY">
                    </div>
                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
                        <label class="form-label" for="description">Description</label>
                        <textarea class="form-control" id="description" name="description" placeholder="Enter Description" cols="30" rows="14">{!! $conference->description !!}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection