<?php
$formKey = rand(-10000000, -100000);
?>
<!-- </?= $this->Form->create($content, ['class' => 'form-horizontal row-fluid','id'=>'myFormId']) ?> -->
<?php echo $this->Form->create($content, ['id' => 'myFormId']); ?>

<div class="row form-area">
    <?= $this->Form->hidden('form_key', ['value' => $formKey]) ?>

    <p class="m-0">&nbsp;</p>
    <div class="container">
        <?= $this->Form->hidden('pmenu_id', ['value' => $menuitemid]); ?>
        <div class="row form-group" id="sbmenu">
            <div class="col-sm-2 col-xs-12 field-label">
                Menu
            </div>
            <div class="col-sm-10 col-xs-12 text-input mb-3">
                <?= $this->Form->control('mainenu', ['class' => 'form-control', 'label' => false, 'readonly' => true, 'default' => $menuitemname]); ?>
            </div>
        </div>

        <div class="row form-group" id="sbmenu">
            <div class="col-sm-2 col-xs-12 field-label">
                Sub Menu
            </div>
            <div class="col-sm-10 col-xs-12 select-input mb-3">
                <?= $this->Form->control('sbmenu_id', ['class' => 'form-control', 'value' => isset($content_sub_menu_id) ? $content_sub_menu_id : null, 'options' => $parentMenus, 'label' => false, 'empty' => '-- Select --', 'id' => 'sbmenu-id']); ?>
            </div>
        </div>

        <div class="row form-group" id="sbsbmenu" style="display: ">
            <div class="col-sm-2 col-xs-12 field-label">
                Sub Sub Menu
            </div>
            <div class="col-sm-10 col-xs-12 select-input mb-3">
                <?= $this->Form->control('sbsbmenu_id', ['class' => 'form-control', 'value' => isset($content_sub_sub_menu_id) ? $content_sub_sub_menu_id : null, 'options' => isset($subMenus) ? $subMenus : [], 'label' => false, 'empty' => '-- Select --', 'id' => 'sbsbmenu-id']); ?>
            </div>
        </div>

        <div class="row form-group" id="sbsbsbmenu" style="display: none">
            <div class="col-sm-2 col-xs-12 field-label">
                Sub Sub Sub Menu
            </div>
            <div class="col-sm-10 col-xs-12 select-input mb-3">
                <?= $this->Form->control('sbsbsbmenu_id', ['class' => 'form-control', 'options' => '', 'label' => false, 'empty' => '-- Select --', 'id' => 'sbsbsbmenu-id']); ?>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-2 col-xs-12 field-label">
                Title
            </div>
            <div class="col-sm-10 col-xs-12 text-input mb-3">
                <?= $this->Form->control('name', ['class' => 'form-control', 'label' => false]); ?>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-2 col-xs-12 field-label">
                Content
            </div>
            <div class="col-sm-10 col-xs-12 text-input mb-3">
            <?= $this->Form->textarea('content', ['id'=>'content','class' => 'form-control ckeditor', 'label' => false,'rows'=>"30"]);?>

                <!-- </?= $this->Form->textarea('content', ['class' => 'form-control ckeditor', 'label' => false, 'rows' => "30"]); ?> -->
            </div>
        </div>

        <?php if ($this->request->getParam('section') == 'products') { ?>
            <div class="row form-group">
                <div class="col-sm-2 col-xs-12 field-label">
                    Price
                </div>
                <div class="col-sm-10 col-xs-12 text-input mb-3">
                    <?= $this->Form->control('price', ['class' => 'form-control', 'text' => 'Number', 'label' => false]); ?>
                </div>
            </div>

            <div class="row form-group">
                <div class="col-sm-2 col-xs-12 field-label">
                    Code
                </div>
                <div class="col-sm-10 col-xs-12 text-input mb-3">
                    <?= $this->Form->control('code', ['class' => 'form-control', 'label' => false]); ?>
                </div>
            </div>

            <div class="row form-group">
                <div class="col-sm-2 col-xs-12 field-label">
                    Manufacturer
                </div>
                <div class="col-sm-10 col-xs-12 text-input mb-3">
                    <?= $this->Form->control('manufacturer', ['class' => 'form-control', 'text' => 'Number', 'label' => false]); ?>
                </div>
            </div>
        <?php } ?>

        <div class="row form-group">
            <div class="col-sm-2 col-xs-12 field-label">
                Price
            </div>
            <div class="col-sm-10 col-xs-12 text-input mb-3">
                <?= $this->Form->control('price', ['class' => 'form-control', 'text' => 'Number', 'label' => false]); ?>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-2 col-xs-12 field-label">
                Icon Class
            </div>
            <div class="col-sm-10 col-xs-12 text-input mb-3">
                <?= $this->Form->control('fa_icon', ['class' => 'form-control', 'label' => false, 'placeholder' => 'fa-money']); ?>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-2 col-xs-12 field-label">
                Show on Homepage
            </div>
            <div class="col-sm-10 col-xs-12 text-inputmb-3">
                <?= $this->Form->control('show_on_home', ['class' => 'form-control', 'options' => [1 => 'Yes', 0 => 'No'], 'label' => false]); ?>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-2 col-xs-12 field-label">
                Add Order Value
            </div>
            <div class="col-sm-10 col-xs-12 text-input mb-3">
                <?= $this->Form->control('order_value', ['class' => 'form-control', 'text' => 'Number', 'label' => false]); ?>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-2 col-xs-12 field-label">
                Google Map Address
            </div>
            <div class="col-sm-10 col-xs-12 text-input mb-3">
                <?= $this->Form->control('map_address', ['class' => 'form-control', 'placeholder' => 'Enter the address on Google Map', 'label' => false]); ?>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-2 col-xs-12 field-label">
                File Link
            </div>
            <div class="col-sm-10 col-xs-12 text-input mb-3">
                <?= $this->Form->control('file_path', ['class' => 'form-control', 'placeholder' => 'Enter the link for attached file', 'label' => false]); ?>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-2 col-xs-12 field-label">
                Video Link
            </div>
            <div class="col-sm-10 col-xs-12 text-input mb-3">
                <?= $this->Form->control('video_link', ['class' => 'form-control', 'placeholder' => 'Enter the link for attached file', 'label' => false]); ?>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-2 col-xs-12 field-label">
                Link
            </div>
            <div class="col-sm-10 col-xs-12 text-input mb-3">
                <?= $this->Form->control('urls', ['class' => 'form-control', 'placeholder' => 'Enter the link for attached file', 'label' => false]); ?>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-2 col-xs-12 field-label">
                Add Images
            </div>
            <div class="col-sm-10 col-xs-12 text-input mb-3">
                <div class="dropzone" id="image-upload">
                    <!-- Old Images -->
                    <?php if (!empty($images)): ?>
                        <?php foreach ($images as $image): ?>
                            <div class="dz-preview dz-file-preview" id="image-<?= $image->id ?>">
                                <div class="dz-image">
                                    <?= $this->Html->image(
                                        Cake\Core\Configure::read('IMAGE_PREPATH') . $image->image_path,
                                        ['class' => 'dz-img-fill']
                                    ) ?>
                                </div>
                                <div class="dz-details">
                                    <div class="dz-size"><span data-dz-size></span></div>
                                    <div class="dz-filename"><span data-dz-name><?= h($image->image_path) ?></span></div>
                                </div>
                                <!-- Remove Button -->
                                <button type="button" class="btn btn-danger btn-sm dz-remove" data-id="<?= $image->id ?>">Remove</button>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>



        <div class="row form-group">
            <div class="col-sm-2 col-xs-12 field-label">
                Caption
            </div>
            <div class="col-sm-10 col-xs-12 text-input">
                <?= $this->Form->control('caption', ['class' => 'form-control', 'label' => false]); ?>
            </div>
        </div>

        <script type="text/javascript" nonce="<?= $scriptNonce ?>">
            $('#editable-select').editableSelect();
        </script>

        <div class="row">
            <div class="col-md-12 col-sm-12 d-flex justify-content-end align-items-end my-4">
                <?= $this->Form->button(__('Submit'), ['class' => 'btn btn-primary pull-right']) ?>
            </div>
        </div>

    </div>
</div>
<?= $this->Form->end() ?>




<script nonce="<?= $scriptNonce ?>">

    Dropzone.autoDiscover = false; // Disable automatic Dropzone discovery

    const csrfToken = "<?= $this->request->getAttribute('csrfToken') ?>"; // Get CSRF token

    // Initialize Dropzone on the specific element
    const myDropzone = new Dropzone("#image-upload", {
        url: '<?= $this->Url->build(['controller' => 'Contents', 'action' => 'addImage', $formKey]); ?>', // Replace with your upload action
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 5, // MB
        acceptedFiles: ".jpeg,.jpg,.png,.gif",
        addRemoveLinks: true,
        dictDefaultMessage: "Drag files here or click to upload",

        // Include CSRF token in headers
        headers: {
            "X-CSRF-Token": csrfToken
        },

        init: function () {
            this.on("success", function (file, response) {
                console.log("File uploaded successfully:", response);
            });
            this.on("error", function (file, response) {
                console.log("File upload error:", response);
            });
        }
    });

    $(document).ready(function () {
        $("#sbmenu-id").change(function () {
            var subMenu = $(this).val();
            var subSubMenu = $("#sbsbmenu-id");

            $.ajax({
                type: 'POST',
                url: "<?php echo $this->Url->build(["controller" => "menus", "action" => "updateSubMenu",]); ?>" + "/" + subMenu,
                data: subMenu,
                headers: {
                    'X-CSRF-Token': $('[name="_csrfToken"]').val()
                },
                success: function (response) {
                    console.log(response);

                    subSubMenu.empty();

                    subSubMenu.append('<option value="">-- Select Sub Sub menu --</option>');

                    $.each(response, function (id, name) {
                        subSubMenu.append('<option value="' + id + '">' + name + '</option>');
                    });

                }
            });

        });

        $("#sbsbmenu-id").change(function () {
            var subSubMenu = $(this).val();
            var subSubMenu = $("#sbsbsbmenu_id");

            $.ajax({
                type: 'POST',
                url: "<?php echo $this->Url->build(["controller" => "menus", "action" => "updateSubMenu",]); ?>" + "/" + subSubMenu,
                data: subSubMenu,
                headers: {
                    'X-CSRF-Token': $('[name="_csrfToken"]').val()
                },
                success: function (response) {
                    console.log(response);

                    subSubMenu.empty();

                    subSubMenu.append('<option value="">-- Select Sub Sub menu --</option>');

                    $.each(response, function (id, name) {
                        subSubMenu.append('<option value="' + id + '">' + name + '</option>');
                    });

                }
            });

        });

        $(document).ready(function () {
            // Event delegation for the Remove button click
            $('#image-upload').on('click', '.dz-remove', function () {
                const imageId = $(this).data('id');
                removeImage(imageId);
            });
        });

        // The removeImage function with AJAX request
        function removeImage(imageId) {
            $.ajax({
                url: "<?= $this->Url->build(['controller' => 'Contents', 'action' => 'removeImage']) ?>/" + imageId,
                type: 'GET',
                success: function (response) {
                    alert('Image deleted successfully.');
                    // Remove the image preview from the DOM
                    $('#image_div' + imageId).remove();
                },
                error: function (xhr, status, error) {
                    console.error('Error deleting image:', error);
                    alert('Failed to delete the image. Please try again.');
                }
            });
        }

        CKEDITOR.replace('content');

    });
</script>