@extends('admin.layouts.template')
@section('main')
    <div class="flex items-center h-16 border-b justify-between gap-2">
        <h1 class="font-semibold text-xl dark:text-white">File Manager</h1>
        <div class="flex items-center gap-2 justify-end h-16">
            <x-primary-button>
                Add Files
            </x-primary-button>
        </div>
    </div>
    {{--        Message--}}
    @if(session('success'))
        <div class="bg-green-200 my-2 p-3 rounded-md">
            <div class="w-full flex gap-3">
            <span class="rounded-full bg-green-500 w-6 h-6 text-white flex items-center justify-center">
                <i class="fa fa-check text-sm"></i>
            </span>
                <div class="flex flex-col gap-1">
                    <h1 class="font-semibold text-sm text-green-500">Success</h1>
                    <p class="text-green-400">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if(session('errors'))
        <div class="bg-red-200 my-2 p-3 rounded-md hidden">
            <div class="w-full flex gap-3">
            <span class="rounded-full bg-red-500 w-6 h-6 text-white flex items-center justify-center">
                <i class="fa fa-times text-sm"></i>
            </span>
                <div class="flex flex-col gap-1">
                    <h1 class="font-semibold text-sm text-red-500">Error</h1>
                    <ul class="text-red-400">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    <!-- Include Dropzone CSS -->
    <link href="{{asset('dropzone/dropzone.min.css')}}" rel="stylesheet">

    <!-- Include Dropzone JavaScript -->
    <script src="{{asset('dropzone/dropzone.min.js')}}"></script>

    <div class="my-2 border-b">
        <div class="my-2">
{{--        DROPZONE HERE--}}
            <form id="myDropzone" class="dropzone dark:bg-gray-400 rounded-md" enctype="multipart/form-data" action="{{ route('upload-images') }}" method="post">
                @csrf
                    <img src="{{asset('upload.png')}}" alt="Drop Here" class="w-80 mx-auto">
                <div class="fallback">
                    <input name="file" type="file" multiple />
                </div>
            </form>
        </div>

        <script>
            Dropzone.autoDiscover = false;
            const myDropzone = new Dropzone("#myDropzone", {
                url: "{{ route('upload-images') }}",
                paramName: "file", // Name of the input field
                maxFilesize: 2, // Max filesize in MB
                acceptedFiles: 'image/*', // Specify accepted file types
                addRemoveLinks: true, // Show remove links on uploaded files
                dictDefaultMessage: 'Drop files here or click to upload', // Default message
            });

            myDropzone.on("success", function (file, response) {
                console.log(response); // Handle the response after successful upload
            });
        </script>

        <div class="my-2 hidden">
            <form method="POST" action="{{ route('create-folder') }}" class="flex flex-col gap-2">
                @csrf
                <div>
                    <x-input-label for="folder-name" :value="__('Folder Name')"/>
                    <x-text-input id="folder-name" class="block mt-1 w-full" type="text" name="folder-name"
                                  required autofocus/>
                    <x-input-error :messages="$errors->get('folder-name')" class="mt-2"/>
                </div>
                <x-primary-button class="w-fit ms-auto">
                    Create Folder
                </x-primary-button>
            </form>
        </div>
    </div>

        <div class="col-span-2">
            <h2 class="font-semibold text-lg mb-2 h-16 flex items-center dark:text-white">All Images in &nbsp;
                <span class="text-sm text-gray-400"> "{{$uploadsPath}}"</span></h2>

            <ul class="grid xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-3 grid-cols-2 gap-2">
                @foreach($directoryContents as $content)
                    @if($content instanceof Symfony\Component\Finder\SplFileInfo && $content->isFile())
                        <li>
                            <div class="border bg-white dark:bg-gray-800 rounded-md shadow flex flex-col gap-2 p-3">
                                <img src="{{ asset('uploads/' . $content->getFilename()) }}" alt="Image" class="rounded-md h-40 object-cover">
                                <marquee behavior="" direction="" class="text-sm italic dark:text-gray-400">
                                    {{ $content->getFilename() }}
                                </marquee>
                            </div>
                        </li>
                    @endif
                @endforeach
            </ul>

        </div>


@endsection