@extends('frontend::layouts.master')

@section('content')
    <x-frontend::utility.memberwelcome></x-frontend>
    <div class="container pt-8">
        <div class="flex lg:gap-6 mt-6">
            <div class="lg:w-60 lg:py-6 bg-glass lg:px-2">
                <livewire:frontend::menu.seller-sidebar active='2' />
            </div>
            <div class="flex-1 p-4 lg:p-6 bg-glass ">
                <div class="text-16 font-semibold uppercase flex items-center justify-between">
                    <a href="seller-product" class="flex space-x-2">
                        <img src="{{ Module::asset('frontend:img/back.svg') }}" alt="Back to Order">
                        <p>
                            Add New Product
                        </p>
                    </a>
                    <div class="xl:hidden">
                        <button class="sidebar-more-trigger">
                            <img src="{{ Module::asset('frontend:img/more.svg') }}" alt="More" class="lg:hidden w-7">
                        </button>
                    </div>
                </div>
                <div class="pt-4 mt-4 relative transparent-label">

                    <!-- Uploads -->
                    <div class="sm:px-7 pb-7 rounded mx-auto">
                        <div x-data="dataFileDnD()" class="relative flex flex-col p-4 text-gray-400 border border-gray-200 rounded">
                            <div x-ref="dnd" class="relative flex flex-col text-gray-400 border border-gray-200 border-dashed rounded cursor-pointer">
                                <input accept="*" type="file" multiple class="absolute inset-0 z-50 w-full p-0 m-0 outline-none opacity-0 cursor-pointer" @change="addFiles($event)" @dragover="$refs.dnd.classList.add('border-blue-400'); $refs.dnd.classList.add('ring-4'); $refs.dnd.classList.add('ring-inset');" @dragleave="$refs.dnd.classList.remove('border-blue-400'); $refs.dnd.classList.remove('ring-4'); $refs.dnd.classList.remove('ring-inset');"
                                    @drop="$refs.dnd.classList.remove('border-blue-400'); $refs.dnd.classList.remove('ring-4'); $refs.dnd.classList.remove('ring-inset');" class="line-style" title="" style="height:100%!important" />

                                <div class="flex flex-col items-center justify-center py-10 text-center">
                                    <svg class="w-6 h-6 mr-1 text-current-50" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                    <p class="m-0">Drag your files here or click in this area.</p>
                                </div>
                            </div>

                            <template x-if="files.length > 0">
                                <div class="grid grid-cols-2 gap-4 mt-4 tn:grid-cols-3 md:grid-cols-4 2xl:grid-cols-8" @drop.prevent="drop($event)" @dragover.prevent="$event.dataTransfer.dropEffect = 'move'">
                                    <template x-for="(_, index) in Array.from({ length: files.length })">
                                        <div class="relative flex flex-col items-center overflow-hidden text-center bg-gray-100 border rounded cursor-move select-none" style="padding-top: 100%;" @dragstart="dragstart($event)" @dragend="fileDragging = null" :class="{ 'border-blue-600': fileDragging == index }" draggable="true" :data-index="index">
                                            <button class="absolute top-0 right-0 z-50 p-1 bg-white rounded-bl focus:outline-none" type="button" @click="remove(index)">
                                                <svg class="w-4 h-4 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                </svg>
                                            </button>
                                            <template x-if="files[index].type.includes('audio/')">
                                                <svg class="absolute w-12 h-12 text-gray-400 transform top-1/2 -translate-y-2/3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
                                                </svg>
                                            </template>
                                            <template x-if="files[index].type.includes('application/') || files[index].type === ''">
                                                <svg class="absolute w-12 h-12 text-gray-400 transform top-1/2 -translate-y-2/3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                                                </svg>
                                            </template>
                                            <template x-if="files[index].type.includes('image/')">
                                                <img class="absolute inset-0 z-0 object-cover w-full h-full border-4 border-white preview" x-bind:src="loadFile(files[index])" />
                                            </template>
                                            <template x-if="files[index].type.includes('video/')">
                                                <video class="absolute inset-0 object-cover w-full h-full border-4 border-white pointer-events-none preview">
                                                    <fileDragging x-bind:src="loadFile(files[index])" type="video/mp4">
                                                </video>
                                            </template>

                                            <div class="absolute bottom-0 left-0 right-0 flex flex-col p-2 text-xs bg-white bg-opacity-50">
                                                <span class="w-full font-bold text-gray-900 truncate" x-text="files[index].name">Loading</span>
                                                <span class="text-xs text-gray-900" x-text="humanFileSize(files[index].size)">...</span>
                                            </div>

                                            <div class="absolute inset-0 z-40 transition-colors duration-300" @dragenter="dragenter($event)" @dragleave="fileDropping = null" :class="{ 'bg-blue-200 bg-opacity-80': fileDropping == index && fileDragging != index }">
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="sm:px-7 dark-form flex flex-wrap -mx-4">
                        <div class="w-full lg:w-1/2 p-4">
                            <x-frontend::form.input id="pname" type="text" class="line-style" title="Product Name">
                            </x-frontend>
                        </div>
                        <div class="w-full lg:w-1/2 p-4">
                            <label for="">Product Type</label>
                            <div class="flex items-center gap-2 mt-2">
                                <x-frontend::form.radio id="product-type-1" class="line-style" title="ID Game" name="product-type" class="w-1/2">
                                </x-frontend>
                                <x-frontend::form.radio id="product-type-2" class="line-style" title="Item or Toy" name="product-type" class="w-1/2">
                                </x-frontend>
                            </div>
                        </div>
                        <div class="w-full lg:w-1/2 p-4">
                            <x-frontend::form.select id="genres" class="line-style" title="Genres" name="add-product" >
                            </x-frontend>
                        </div>
                        <div class="w-full lg:w-1/2 p-4">
                            <x-frontend::form.select id="platform" class="line-style" title="Platform" name="add-product" >
                            </x-frontend>
                        </div>
                        <div class="w-full lg:w-1/2 p-4">
                            <x-frontend::form.input id="pprice" type="text" class="line-style" title="Price">
                            </x-frontend>
                        </div>
                        <div class="w-full lg:w-1/2 p-4">
                            <div class="flex items-center form-grouping">

                                <x-frontend::form.input id="pdiscount" type="text" title="Discount" class="flex-1 line-style form-style">
                                </x-frontend>

                                <div class="form-style line-style mb-[4px]">
                                    <select name="add-product" id="discountRate">
                                        <option value="0">
                                            THB
                                        </option>
                                        <option value="1">
                                            %
                                        </option>
                                    </select>
                                </div>

                            </div>
                        </div>
                        <div class="w-full px-4 pb-4">
                            <div class="com-form-basic form-style ">
                                <label for="pdetail" class="mb-2">Product Detail</label>
                                <textarea name="add-product" id="pdetail" class="pt-4" rows="7"></textarea>
                              </div>
                        </div>
                        <div class="w-full lg:w-1/3 p-4">
                            <x-frontend::form.input id="purl1" type="text" class="line-style" title="URL (Optional)">
                            </x-frontend>
                        </div>
                        <div class="w-full lg:w-1/3 p-4">
                            <x-frontend::form.input id="purl2" type="text" class="line-style" title="URL (Optional)">
                            </x-frontend>
                        </div>
                        <div class="w-full lg:w-1/3 p-4">
                            <x-frontend::form.input id="purl3" type="text" class="line-style" title="URL (Optional)">
                            </x-frontend>
                        </div>
                        <div class="w-full p-4 mx-auto max-w-xl text-right">
                            <button class="button-secondary text-white w-full">
                                Add New Product
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection


    <script>
        ! function(e, t) {
            "object" == typeof exports && "undefined" != typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define(t) : (e = e || self).createFileList = t()
        }(this, (function() {
            "use strict";
            var e = function() {
                    return new DataTransfer
                },
                t = Array.prototype.concat;
            try {
                e()
            } catch (t) {
                e = function() {
                    return new ClipboardEvent("").clipboardData
                }
            }
            return function() {
                for (var n = t.apply([], arguments), r = 0, o = n.length, i = e(); r < o; r++) i.items.add(n[r]);
                return i.files
            }
        }));

        function dataFileDnD() {
            return {
                files: [],
                fileDragging: null,
                fileDropping: null,
                humanFileSize(size) {
                    const i = Math.floor(Math.log(size) / Math.log(1024));
                    return (
                        (size / Math.pow(1024, i)).toFixed(2) * 1 +
                        " " + ["B", "kB", "MB", "GB", "TB"][i]
                    );
                },
                remove(index) {
                    let files = [...this.files];
                    files.splice(index, 1);

                    this.files = createFileList(files);
                },
                drop(e) {
                    let removed, add;
                    let files = [...this.files];

                    removed = files.splice(this.fileDragging, 1);
                    files.splice(this.fileDropping, 0, ...removed);

                    this.files = createFileList(files);

                    this.fileDropping = null;
                    this.fileDragging = null;
                },
                dragenter(e) {
                    let targetElem = e.target.closest("[draggable]");

                    this.fileDropping = targetElem.getAttribute("data-index");
                },
                dragstart(e) {
                    this.fileDragging = e.target
                        .closest("[draggable]")
                        .getAttribute("data-index");
                    e.dataTransfer.effectAllowed = "move";
                },
                loadFile(file) {
                    const preview = document.querySelectorAll(".preview");
                    const blobUrl = URL.createObjectURL(file);

                    preview.forEach(elem => {
                        elem.onload = () => {
                            URL.revokeObjectURL(elem.src);
                        };
                    });

                    return blobUrl;
                },
                addFiles(e) {
                    const files = createFileList([...this.files], [...e.target.files]);

                    if (files.length > 8) {
                        alert("Maximum is 8 Files");

                        // let files = [...this.files];
                        // files.splice(files.length-1, 1);
                        // this.files = createFileList(files);
                    } else {
                        this.files = files;
                        console.log(files);
                        // this.form.formData.files = [...files];
                    }
                }
            };
        }
    </script>