@extends('layouts.app.master')
@section('title', 'Dashboard')

@section('content')

<style>

@import url('https://fonts.googleapis.com/css?family=Poppins');

html, button, input, select, textarea {
    color: #333;
}


body {
  margin: 2rem;
  padding: 0;
  font-family: 'Poppins';
  background: #f7f7f7;
}

button, input {
    line-height: normal;
    text-transform: none;
}

svg {
    vertical-align: middle;
}

.blue--btn {
    background: #0079d2;
    border: 1px solid #0079d2;
    color: #fff;
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
}

.form__field {
    margin: 24px 0;
    position: relative;
}

.form__title {
    font-size: 1.125rem;
    font-weight: 700;
}

.form__load-img li {
    margin-bottom: 4px;
}

.form__load-img ul {
    list-style: none;
}

.load__img-wrap {
    background-color:white;
    margin-top: 8px;
    width: 100%;
    position: relative;
}

.load__img-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28px;
    border: 1px dashed #c5c5c5;
    border-radius: 8px;
}

.content__wrapper {
    min-width: 310px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.upload__TipIcon {
    position: relative;
}

.upload__Tooltip {
    display: none;
    position: absolute;
    top: 27px;
    right: -152px;
    padding: 16px;
    color: #767676;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    text-align: left;
    white-space: normal;
    z-index: 999999;
    background: #fff;
    box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
    border-radius: 8px;
    width: 275px;
}

.upload__TipIcon:hover .upload__Tooltip {
    display: block;
}

.margin--top-16 {
    margin-top: 16px;
}

.error__msg {
    visibility: visible;
    color: #ed0101 !important;
    font-size: 13px;
    font-weight: 550;
    margin: 15px 0;
    line-height: 15px;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.upload__thumbnails {
    margin: 24px 0 32px;
}

.imgs__wrapper, .item__imgs {
    display: flex;
}

.item__wrapper:nth-of-type(1) {
    margin-left: 0;
}

.item__wrapper {
    position: relative;
    margin-left: 1.5rem;
}

.remove__img {
    position: absolute;
    z-index: 999;
    left: 180px;
    top: -8px;
}

.remove__icon {
    background: #fff;
    box-shadow: 0 1px 5px rgb(0 0 0 / 30%);
    border-radius: 50% 50%;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border: none;
}

.content__wrapper.disable {
  color: #BABABA;
}

.content__wrapper.disable path {
  fill:  #BABABA;
}

.content__wrapper.disable button {
  background: #BABABA;
  border: 1px solid #BABABA;
  cursor: inherit;
}

    </style>

<h2 class="customer-listing">Manage Banners</h2>

<div class="card card-p-0 card-flush card-customer-table">

    <div class="card-body">
    <div data-image-uploader data-image-uploader-file-type-regex="(\.jpg|\.jpeg|\.png)$" data-image-uploader-max-file-size="8" class="form__field form__load-img">
  <p class="form__title">Upload your images (Maximum 3 images)</p>
  <div class="load__img-wrap">
    <div class="load__img-content" data-image-uploader-drop-area>
      <div class="content__wrapper" data-image-uploader-content>
        <button type="button" class="blue--btn">Upload File</button>
        <span>/</span>
        <svg viewBox="0 0 17 17" width="17" height="17" fill="none">
          <path d="M14.917 7.611H11.25v5.333h-5.5V7.611H2.083L8.5.5l6.417 7.111Zm-13.75 7.111h14.666V16.5H1.167v-1.778Z" fill="#767676" />
        </svg>
        <p>Drag your files here</p>
        <div class="upload__TipIcon">
          <span>
            <svg viewBox="0 0 17 17" width="17" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#a)">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 1.955a6.545 6.545 0 1 0 0 13.09 6.545 6.545 0 0 0 0-13.09ZM.5 8.5a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-3.636c.402 0 .727.325.727.727V8.5a.727.727 0 0 1-1.454 0V5.59c0-.4.325-.726.727-.726Zm0 5.818a.727.727 0 0 0 0 1.454h.007a.727.727 0 0 0 0-1.454H8.5Z" fill="#767676" />
              </g>
              <defs>
                <clipPath id="a">
                  <path fill="#fff" transform="translate(.5 .5)" d="M0 0h16v16H0z" />
                </clipPath>
              </defs>
            </svg>
          </span>
          <div class="upload__Tooltip">
            <ul>
              <li>- Images must be in JPG, JPEG and PNG format.</li>
              <li>- File size must be 10 MB or less.</li>
              <li>- Maximum 3 images.</li>
              <li>- Image must be at least 100 pixels tall.</li>
              <li>- Image must be at least 100 pixels wide.</li>
            </ul>
          </div>
        </div>
      </div>
      <input type="file" enctype="multipart/form-data" accept=".png, .jpg, .jpeg" multiple style="display: none;">
    </div>
  </div>
  <ul class="validation-summary-errors error__msg margin--top-16 hidden" id="errorMessage" data-image-uploader-errors>
    <li>* Images must be in JPG, JPEG and PNG format.</li>
    <li>* File size must be 10 MB or less.</li>
    <li>* Maximum 3 images.</li>
    <li>* Image must be at least 100 pixels tall.</li>
    <li>* Image must be at least 100 pixels wide.</li>
  </ul>
  <div class="upload__thumbnails hidden" data-thumbnails-container>
    <div>
      <div>
        <span>Uploaded files</span>
        <div class="imgs__wrapper">
          <div class="item__imgs" data-image-preview-container>
            <template data-image-preview>
              <div class="item__wrapper" data-image-preview-element>
                <div class="remove__img">
                  <button class="remove__icon" data-removal-button>
                    <svg viewBox="0 0 12 12" width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12 1.2 10.8 0 6 4.8 1.2 0 0 1.2 4.8 6 0 10.8 1.2 12 6 7.2l4.8 4.8 1.2-1.2L7.2 6 12 1.2Z" fill="#4B4B4B" />
                    </svg>
                  </button>
                </div>
                <div class="review__img">
                  <picture>
                    <img style="max-width: 200px; min-width: 200px; min-width: 200px; max-width: 200px"/>
                  </picture>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>




<form class="form" action="#" method="post">
    <!--begin::Input group-->
    <div class="fv-row">
        <!--begin::Dropzone-->
        <div class="dropzone" id="kt_dropzonejs_example_1">
            <!--begin::Message-->
            <div class="dz-message needsclick">
               <img src = "assets/images/fileupload-icon.svg" class="img-responsive-needsclick" alt="" />
                <!--begin::Info-->
                <div class="ms-4">
                    <h3 class="fs-5 fw-bold text-gray-900 mb-1">Drop files here or click to upload.</h3>
                    <span class="fs-7 fw-semibold text-gray-500">Upload up to 10 files</span>
                </div>
                <!--end::Info-->
            </div>
        </div>
        <!--end::Dropzone-->
    </div>
    <!--end::Input group-->
</form>


</div>

</div>
<!--end::Form-->

<!-- Include Dropzone JavaScript -->

<!-- Dropzone initialization script -->







<script>

    
(function (root, factory) {
  "use strict";

  const windowObject = root;

  if (typeof define === "function" && define.amd) {
    const initFunction = function () {
      windowObject.ImageUploader = factory();
      return root.ImageUploader;
    };

    define([], initFunction);
  } else {
    windowObject.ImageUploader = factory();
  }
})(window, () => {
  "use strict";

  /**
   * @type {File}
   * Creating an empty array that stores in memory the images selected by the user.
   * For more information @see {@link https://developer.mozilla.org/en-US/docs/Web/API/File|MDN}.
   */
  const imageFiles = [];

  /**
   * Creating an object with the configurations that are going to be used for validations.
   */
  const configurations = {
    fileTypeValidationRegex: null,
    maxImageHeight: null,
    maxImageWidth: null,
    maxFilesQuantity: 3,
    maxFileSize: 8,
    minImageHeight: 100,
    minImageWidth: 100
  };

  /**
   * Creating an object to store the references to the HTML Elements for the Image Uploader UX.
   */
  const htmlElements = {
    component: null,
    contentWrapper: null,
    dropArea: null,
    errorMessages: null,
    imagePreviewContainer: null,
    imagePreviewTemplate: null,
    inputFile: null,
    thumbnailsContainer: null,
    uploadButton: null
  };

  /**
   * If the image is too big or too small, return false, otherwise return true.
   *
   * @param {number} width - The width of the image in pixels.
   * @param {number} height - The height of the image in pixels.
   * @returns true if the image has the valid dimensions according to the configuration object
   * otherwise false.
   */
  function hasValidDimensions(width, height) {
    const hasMaxWidthValidation = Number.isInteger(
      configurations.maxImageWidth
    );
    const hasMaxHeightValidation = Number.isInteger(
      configurations.maxImageHeight
    );
    const hasMinWidthValidation = Number.isInteger(
      configurations.minImageWidth
    );
    const hasMinHeightValidation = Number.isInteger(
      configurations.minImageHeight
    );

    if (hasMaxWidthValidation && width > configurations.maxImageWidth) {
      return false;
    }

    if (hasMaxHeightValidation && height > configurations.maxImageHeight) {
      return false;
    }

    if (hasMinWidthValidation && width < configurations.minImageWidth) {
      return false;
    }

    if (hasMinHeightValidation && height < configurations.minImageHeight) {
      return false;
    }

    return true;
  }

  /**
   * If the number of files in the imageFiles array is greater than or equal to the maxFilesQuantity
   * value in the configurations object, then disable the upload button and add the disable class to
   * the contentWrapper element. Otherwise, enable the upload button and remove the disable class from
   * the contentWrapper element.
   *
   * @returns the value of the disabled property of the uploadButton element.
   */
  function isMaxQuantityFilesReached() {
    if (imageFiles.length >= configurations.maxFilesQuantity) {
      htmlElements.uploadButton.disabled = true;
      htmlElements.contentWrapper.classList.add("disable");
    } else {
      htmlElements.uploadButton.disabled = false;
      htmlElements.contentWrapper.classList.remove("disable");
    }

    return htmlElements.uploadButton.disabled;
  }

  /**
   * Add the image to the imageFiles array if the max quantity of files has not been reached and
   * the image has valid dimensions, otherwise show an error message.
   *
   * If the image is consider valid appends the fragment to the imagePreviewContainer element to let
   * the user see the preview of the image uploaded.
   *
   * @param {File} image - the image file that was selected by the user.
   * @returns the image file if it is considered valid, otherwise null.
   */
  function acceptImage(image) {
    const fragment = this;
    const imageElement = fragment.querySelector("img");

    if (
      isMaxQuantityFilesReached() ||
      !hasValidDimensions(imageElement.width, imageElement.height)
    ) {
      htmlElements.errorMessages.classList.remove("hidden");
      return null;
    }

    imageFiles.push(image);
    htmlElements.imagePreviewContainer.appendChild(fragment);
    htmlElements.thumbnailsContainer.classList.remove("hidden");

    // Review if the new added image reaches the limit for the max amount of quantity files allowed.
    isMaxQuantityFilesReached();
    return image;
  }

  /**
   * It's a function that when called, will trigger a click event on the input file element.
   * This is used to open the File Selector dialog when the user clicks the uploadButton element.
   */
  function clickInputFile() {
    htmlElements.inputFile.click();
  }

  /**
   * It converts the file size from bytes to Mega Bytes and returns true if the file size is greater
   * than the max file size
   * @param file - The file that is being uploaded.
   * @returns a boolean value.
   */
  function isMaxFileSizeExceeded(file) {
    // Converts the file size from bytes to Mega Bytes.
    const fileSize = file.size / 1024 / 1024;
    return fileSize > configurations.maxFileSize;
  }

  /**
   * When the user selects an image to upload, read and load the image in the memory
   * and trigger the validations processes from @see acceptImage.
   * @param {File} imageFile - The file that is being uploaded by the user.
   */
  function loadImage(imageFile) {
    const reader = new FileReader();
    reader.readAsDataURL(imageFile);
    reader.onload = function () {
      const fragment = document
        .createRange()
        .createContextualFragment(htmlElements.imagePreviewTemplate.innerHTML);
      const imageElement = fragment.querySelector("img");

      fragment.querySelector("[data-image-preview-element]").dataset.index =
        imageFiles.length - 1;
      imageElement.onload = acceptImage.bind(fragment, imageFile);
      imageElement.src = reader.result;
    };
  }

  /**
   * Walks through the images selected by the user and performs the validations that don't need
   * the image to be loaded in memory.
   *
   * If the file does not meet the regex expression defined in the configurations object,
   * or if the file is too large, display an error message.
   *
   * @param imagesUploaded - An array of files that were uploaded.
   */
  function readImages(imagesUploaded) {
    htmlElements.errorMessages.classList.add("hidden");

    for (let index = 0; index < imagesUploaded.length; index += 1) {
      const image = imagesUploaded[index];
      const isInvalidFileSize = isMaxFileSizeExceeded(image);
      const isInvalidFileType =
        configurations.fileTypeValidationRegex &&
        !configurations.fileTypeValidationRegex.exec(image.name);

      if (isInvalidFileType || isInvalidFileSize) {
        htmlElements.errorMessages.classList.remove("hidden");
      } else {
        loadImage(image);
      }
    }
  }

  /**
   * When a file is dragged over the drop zone HTML element, prevent the default behavior and allow the file to be
   * copied.
   * @param {Event} event - The event object that is passed to the function.
   */
  function onDragOver(event) {
    const eventObject = event;
    event.stopPropagation();
    event.preventDefault();
    eventObject.dataTransfer.dropEffect = "copy";
  }

  /**
   * When the user drops a file on the drop zone HTML element stops the default browser behavior,  which is to open
   * the file in the browser window. The function then calls the @see readImages function, passing it the files that
   * were dropped.
   *
   * @param {Event} event - The event object that is passed to the function.
   */
  function onDrop(event) {
    event.stopPropagation();
    event.preventDefault();
    readImages(event.dataTransfer.files);
  }

  /**
   * A function that is called when the user selects the images via the uploadButton HTML element.
   * The function then calls the @see readImages function, passing it the files that were dropped.
   *
   * @param event - The event object that is passed to the function.
   */
  function onImagesUploaded(event) {
    const eventObject = event;
    readImages(event.target.files);
    eventObject.target.value = null;
  }

  /**
   * Set the data attibute index to each preview HTML element matching its position in the HTML.
   * This function is called after the @see removeImage function is invoked.
   * If there are no previews, hide the thumbnailsContainer HTML element.
   */
  function resetPreviewIndexes() {
    const previews = document.querySelectorAll("[data-image-preview-element]");

    if (previews.length === 0) {
      htmlElements.thumbnailsContainer.classList.add("hidden");
    }

    for (let index = 0; index < previews.length; index += 1) {
      previews[index].dataset.index = index;
    }
  }

  /**
   * Removes the image from the @see imageFiles array and the DOM. Then resets the index
   * data attribute for the remaining preview images and updates the status of the image uploader
   * by checking if the max quantity of files allowed has been reached.
   *
   * @param {Event} event - The event object that is passed to the function
   * @returns the event.target.closest('[data-removal-button]');
   */
  function removeImage(event) {
    const removalButton = event.target.closest("[data-removal-button]");

    if (!removalButton) {
      return null;
    }

    const previewToRemove = removalButton.closest(
      "[data-image-preview-element]"
    );
    const imageRemoved = imageFiles.splice(previewToRemove.dataset.index, 1);

    previewToRemove.remove();
    resetPreviewIndexes();
    isMaxQuantityFilesReached();

    return imageRemoved;
  }

  /**
   * Adds event listeners to the upload button, the input file, the thumbnails container, and the drop area.
   */
  function addEventListeners() {
    htmlElements.uploadButton.addEventListener("click", clickInputFile);
    htmlElements.inputFile.addEventListener("change", onImagesUploaded);
    htmlElements.thumbnailsContainer.addEventListener("click", removeImage);
    htmlElements.dropArea.addEventListener("dragover", onDragOver);
    htmlElements.dropArea.addEventListener("drop", onDrop);
  }

  /**
   * Sets the @see htmlElements object's properties to the elements within the component.
   *
   * @param {Element} root - The root element of the image uploader component.
   */
  function setHtmlElements(root) {
    htmlElements.component = root;
    htmlElements.contentWrapper = root.querySelector(
      "[data-image-uploader-content]"
    );
    htmlElements.dropArea = root.querySelector(
      "[data-image-uploader-drop-area]"
    );
    htmlElements.errorMessages = root.querySelector(
      "[data-image-uploader-errors]"
    );
    htmlElements.imagePreviewContainer = root.querySelector(
      "[data-image-preview-container]"
    );
    htmlElements.imagePreviewTemplate = root.querySelector(
      "[data-image-preview]"
    );
    htmlElements.inputFile = root.querySelector("input");
    htmlElements.thumbnailsContainer = root.querySelector(
      "[data-thumbnails-container]"
    );
    htmlElements.uploadButton = root.querySelector("button");
  }

  /**
   * Reads the data attributes from the image uploader component HTML element and sets the @see configurations object.
   *
   * @param {Element} root - The root element of the image uploader component.
   */
  function setImageUploaderConfigurations(root) {
    const temporalConfigurations = {};
    temporalConfigurations.maxFilesQuantity =
      root.dataset.imageUploaderMaxFilesQuantity * 1;
    temporalConfigurations.maxFileSize =
      root.dataset.imageUploaderMaxFileSize * 1;
    temporalConfigurations.maxImageHeight = root.dataset.maxImageHeight * 1;
    temporalConfigurations.maxImageWidth = root.dataset.maxImageWidth * 1;
    temporalConfigurations.minImageHeight = root.dataset.minImageHeight * 1;
    temporalConfigurations.minImageWidth = root.dataset.minImageWidth * 1;

    Object.keys(temporalConfigurations).forEach((key) => {
      const value = temporalConfigurations[key];

      if (Number.isInteger(value)) {
        configurations[key] = value;
      }
    });
  }

  /**
   * If the fileTypeValidationRegexString is a valid regex, then set the fileTypeValidationRegex to the
   * new RegExp object created from the fileTypeValidationRegexString.
   *
   * @param root - The root element of the image uploader component.
   */
  function setRegexValidations(root) {
    let fileTypeValidationRegex = null;
    let isValidRegex = true;

    const fileTypeValidationRegexString =
      root.dataset.imageUploaderFileTypeRegex;

    try {
      fileTypeValidationRegex = new RegExp(fileTypeValidationRegexString);
    } catch (e) {
      isValidRegex = false;
    }

    if (fileTypeValidationRegex && isValidRegex) {
      configurations.fileTypeValidationRegex = fileTypeValidationRegex;
    }
  }

  /**
   * The ImageUploader function takes a query as an argument, and creates a set of
   * functions that manipulates the DOM to allow the user to upload files from their computer to the browser.
   *
   * @constructor
   * @param {string} query - The query selector for the root element of the image uploader component.
   * @returns The image uploader object is returned.
   */
  const ImageUploader = function (query) {
    const root = document.querySelector(query);

    if (!root) {
      return null;
    }

    setHtmlElements(root);
    setRegexValidations(root);
    setImageUploaderConfigurations(root);
    addEventListeners();
    return this;
  };

  /* Exposes the files selected by the user to the outside world. */
  ImageUploader.prototype.getFiles = function () {
    return imageFiles;
  };

  return ImageUploader;
});

new window.ImageUploader("[data-image-uploader]");


</script>
   


@endsection