@extends('layouts.admin')
@section('content')
    <div class="container-fluid">
	    <div class="content">
		    <!-- Start Content-->
		    <div class="container-fluid">
			    <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ env('APP_NAME') }}</a></li>
                                    <li class="breadcrumb-item"><a href="{{ route('products.index') }}">{{__('labels.product.title')}}</a></li>
                                    <li class="breadcrumb-item active">{{__('labels.product.edit')}}</li>
                                </ol>
                            </div>
                            <h4 class="page-title"></h4>
                        </div>
                    </div>
                </div>     
                <!-- end page title --> 
				
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

		        <div id="ShowDropifyMessage"></div>
                <div class="masonry-item">
                    <div class="bgc-white p-20 bd">
                        <div class="">
                            {{ Form::open(array('method'=>'PUT','route' => array('products.update', $data['product']->id),'class' => 'form-horizontal submitProductForm', 'files'=>true)) }}
                                <input type="hidden" name="images" id="images">
                                {{ Form::hidden('id', $data['product']->id, ['class' => 'form-control']) }}

                                <!-- Top Update Button -->
                                <div class="row mb-3">
                                    <div class="col-md-12 text-end">
                                        {{Form::submit(__('Save Changes'),['class'=>'btn btn-primary btn-color','id'=>'submitProductFormButtonTop'])}}
                                    </div>
                                </div>

                                @include('admin.products.form')

                                <div class="row">
                                    <div class="col-md-12">
                                        {{Form::submit(__('labels.product.edit'),['class'=>'btn btn-primary btn-color','id'=>'submitProductFormButton'])}}
                                        
                                        <a href="{{ route('products.index') }}" class="btn btn-secondary btn-color">{{__('labels.product.cancel')}}</a>
                                    </div>
                                </div>
                            {{ Form::close() }}
                        </div>
                    </div>
                </div>
		    </div>
	    </div>
    </div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
    <script src="https://cdn.ckeditor.com/4.20.0/standard-all/ckeditor.js"></script> 

    <script>
        $("#submitProductFormButton, #submitProductFormButtonTop").on('click', function(e){
            e.preventDefault();
            $("#submitProductFormButton, #submitProductFormButtonTop").prop('disabled', true);
            $("#submitProductFormButton, #submitProductFormButtonTop").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span> Submitting...');
            $("form.submitProductForm").submit();
        });

        // var baseURL = "{!! env('APP_URL') !!}";
        // var prefix = "{{ url('') }}";
        CKEDITOR.editorConfig = function( config ) {
            //config.filebrowserBrowseUrl = prefix + '/plugins/ckfinder/ckfinder.html';
            //config.filebrowserImageBrowseUrl = prefix + '/plugins/ckfinder/ckfinder.html?type=Images';
            //config.filebrowserFlashBrowseUrl = prefix + '/plugins/ckfinder/ckfinder.html?type=Flash';
            //config.filebrowserUploadUrl = prefix + '/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
            //config.filebrowserImageUploadUrl = prefix + '/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
            //config.filebrowserFlashUploadUrl = prefix + '/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
            //config.copyFormatting_allowedContexts = true;
            config.colorButton_backStyle = {
                element: 'span',
                styles: { 'background-color': '#(color)' }
            };
            config.colorButton_foreStyle = {
                element: 'span',
                styles: { color: '#(color)' }
            };
            config.colorButton_historyRowLimit = 8;
        };

        var editors = ['short_description', 'description', 'product_description', 'dosage', 'side_effects', 'ingredients', 'pil'];
        for (i = 0; i < editors.length; i++) {
            var editor = CKEDITOR.replace(editors[i], {
                removePlugins: 'wsc',
                scayt_autoStartup: true,
                //extraPlugins: 'copyformatting,colorbutton,colordialog',
                scayt_maxSuggestions: 3,
                allowedContent: true,
	            versionCheck:false
            });
            //CKFinder.setupCKEditor( editor, prefix + '/plugins/ckfinder/') ;
        }
        // CKEDITOR.on('dialogDefinition', function(ev) {
        //     var dialogName = ev.data.name,
        //     dialogDefinition = ev.data.definition;
        //     if (dialogName === 'image') {
        //         dialogDefinition.removeContents('Upload');
        //         dialogDefinition.removeContents('Link');
        //     }
        // });   

        // bullets list table
        $(document).ready(function() {
            // Add new row
            $('#add-bullet-row').click(function() {
                $('#bullets-table tbody').append(`
                    <tr>
                        <td><input type="text" name="bullets[]" class="form-control" required></td>
                        <td><button type="button" class="btn btn-danger remove-row">{{__('labels.product.form.remove')}}</button></td>
                    </tr>
                `);
            });

            // Remove row
            $('#bullets-table').on('click', '.remove-row', function() {
                $(this).closest('tr').remove();
            });
        });

        // for variants
        $(document).ready(function () {
            let variantIndex = "{{ isset($data['product']) ? count($data['product']->variants) : 1 }}";
            $('#add-row').on('click', function () {
                let tableBody = $('#product-table tbody');
                let newRow = `
                    <tr>
                        <td>
                            <input type="text" name="variants[${variantIndex}][pcode]" class="form-control" required>
                        </td>
                        <td>
                            <input type="text" name="variants[${variantIndex}][quantity]" class="form-control" required>
                        </td>
                        <td>
                            <input type="text" name="variants[${variantIndex}][strength]" class="form-control" required>
                        </td>
                        <td>
                            <input type="number" name="variants[${variantIndex}][amount]" class="form-control" step="0.01" required>
                        </td>
                        <td>
                            <input type="number" name="variants[${variantIndex}][purchase_price]" class="form-control" step="0.01" required>
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger remove-row">{{ __('labels.product.form.remove') }}</button>
                        </td>
                    </tr>
                `;
                tableBody.append(newRow);
                variantIndex++;
            });

            // Remove a variant row
            $('#product-table').on('click', '.remove-row', function () {
                $(this).closest('tr').remove();
            });
        });

        //for uploading product images files using dropzone
        Dropzone.autoDiscover = false;
        let imagesUniqueIds = [];
        let images          = [];
            
        new Dropzone('#file-dropzone', {
            url: "{{ route('upload-temporary-product-images') }}",
            acceptedFiles: ".jpeg,.jpg,.png, .webp, .svg",
            addRemoveLinks: true,
            maxFilesize: 5, // MB
            maxFiles: "{{$data['product_images_count'] }}", // Number of images
            maxfilesexceeded: function(file) {
                this.removeAllFiles();
                //this.addFile(file);
            },
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },

            init: function() {
                myDropzone = this;
                var productId = $('input[name="id"]').val();
                $.ajax({
                    url: "{{ route('get-product-images') }}",
                    type: 'post',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        productId : productId
                    },
                    dataType: 'json',
                    success: function(response) {
                        $.each(response, function(key, value) {
                            images.push(value.fileName);
                            $('#images').val(images.join(','));
                            var mockFile = {
                                name: value.fileName,
                                size: value.size,
                                accepted: true
                            };
                            
                            // Call the events in the correct order
                            myDropzone.emit("addedfile", mockFile);
                            
                            // Set the thumbnail after the file is added
                            if (mockFile.previewElement) {
                                var thumbnail = mockFile.previewElement.querySelector("[data-dz-thumbnail]");
                                if (thumbnail) {
                                    thumbnail.src = value.path;
                                    thumbnail.style.width = "120px";
                                    thumbnail.style.height = "120px";
                                    thumbnail.style.objectFit = "cover";
                                }
                            }
                            
                            myDropzone.emit("complete", mockFile);
                            
                            // Set custom properties for removal
                            mockFile.previewElement.filePath = value.fileName;
                            mockFile.previewElement.name = value.fileName;
                        });
                    }
                });


                myDropzone.on('removedfile', function (file) {
                    var fileName = file.previewElement && file.previewElement.name ? file.previewElement.name : file.name;
                    var filePath = file.previewElement && file.previewElement.filePath ? file.previewElement.filePath : file.name;
                    if (fileName && filePath) {
                        $.ajax({
                            type: 'POST',
                            url: "{{ route('remove-product-image') }}",
                            data: {
                                _token: "{{ csrf_token() }}",
                                fileName: fileName,
                                filePath: filePath 
                            },
                            success: function (response) {
                                var index = images.indexOf(filePath);
                                if (index > -1) {
                                    images.splice(index, 1);
                                }
                                $('#images').val(images.join(','));
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                console.error('Error removing file:', textStatus, errorThrown);
                            }
                        });
                    }
                    // Note: Don't manually remove the preview element here - Dropzone handles it
                });
            },

            
            success: function(file, response) {
                imagesUniqueIds.push(response.fileId);
                images.push(response.filePath);
                $('#images').val(images.join(','));
                file.previewElement.id = response.fileId;
                file.previewElement.filePath = response.filePath;
                file.previewElement.name = response.fileName;
            }
        })
    </script>
@endsection