@extends('admin.layouts.template')

@section('main')

    {{--        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

    <div class="h-16 flex items-center justify-between gap-2">
        <h1 class="font-semibold text-xl dark:text-white">Add Staff</h1>
        <span class="text-gray-400">Create a New Staff</span>
    </div>

    <form action="{{route('update-staff')}}" class="flex flex-col gap-2 max-w-xl mx-auto" method="post">
        @csrf

        <div id="open-filemanager" class="cursor-pointer relative h-80 flex items-center justify-center">
            <div class="absolute top-0 h-full left-0 right-0 bottom-0">
                <img id="image-placeholder" src="{{asset('uploads/'.$staff->image)}}" alt="Placeholder Image"
                     class="w-full h-full object-cover rounded-md">
            </div>
            <span class="z-10">Click to Select your Image</span>
        </div>

        <div>
            <x-input-label for="path" :value="__('Image Path')"/>
            <x-text-input readonly id="path" class="block mt-1 w-full" type="text" name="path"
                          value="{{$staff->image}}"  placeholder="E.g. upload/IMG_12345.jpg"/>
            <x-input-error :messages="$errors->get('path')" class="mt-2"/>
        </div>

        <div class="hidden">
            <x-input-label for="id" :value="__('Staff Id')"/>
            <x-text-input readonly id="id" class="block mt-1 w-full" type="number" name="id"
                          value="{{$staff->id}}" placeholder="E.g. 2"/>
            <x-input-error :messages="$errors->get('id')" class="mt-2"/>
        </div>

        <div>
            <x-input-label for="name" :value="__('Staff Name')"/>
            <x-text-input id="name" class="block mt-1 w-full" type="text" name="name"
                          value="{{$staff->name}}"    placeholder="E.g. Jane Doe"/>
            <x-input-error :messages="$errors->get('name')" class="mt-2"/>
        </div>


        <div>
            <x-input-label for="occupation" :value="__('Staff Occupation')"/>
            <x-text-input id="occupation" class="block mt-1 w-full" type="text" name="occupation"
                          value="{{$staff->occupation}}"  placeholder="E.g. Electrician"/>
            <x-input-error :messages="$errors->get('occupation')" class="mt-2"/>
        </div>


        <div class="grid grid-cols-2 gap-2 items-center">
            <div>
                <x-input-label for="order" :value="__('Order')"/>
                <x-text-input id="order" class="block mt-1 w-full" type="number" name="order" placeholder="E.g. 2"
                              value="{{$staff->order}}"/>
                <x-input-error :messages="$errors->get('order')" class="mt-2"/>
            </div>

            <div>
                <div>
                    <div class="flex items-center justify-between gap-2">
                        <x-input-label for="active" :value="__('Active?')"/>
                        <input  id="active" name="active" class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300
                        focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600
                         rounded-md shadow-sm" type="checkbox" {{$staff->active == 1 ? 'checked' : '' }}
                        /></div>
                    <x-input-error :messages="$errors->get('active')" class="mt-2"/>
                </div>

                <x-input-error :messages="$errors->get('active')" class="mt-2"/>
            </div>


        </div>

        <div class="flex items-center justify-end">
            <x-primary-button class="">
                Update Staff
            </x-primary-button>
        </div>

    </form>

    <div id="filemanager"
         class="fixed invisible z-20 top-0 right-0 left-0 h-screen bg-black/60 flex items-center justify-center">
        <div class="bg-white flex flex-col gap-2 rounded-md shadow-sm p-3 m-3 w-screen md:max-w-2xl h-[96vh]">
            <div class="flex h-16 gap-2 items-center justify-between">
                <h1 class="font-semibold text-xl">Select your Image</h1>
                <x-danger-button id="close-filemanager">
                    <i class="fa fa-close"></i>
                </x-danger-button>
            </div>
            <ul class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 items-center gap-2">
                @php
                    $uploadsPath = public_path('uploads');
                    $directoryContents = Illuminate\Support\Facades\File::allFiles($uploadsPath);
                @endphp

                @foreach($directoryContents as $content)
                    @if($content instanceof Symfony\Component\Finder\SplFileInfo && $content->isFile())
                        <li class="">
                            <x-secondary-button class="p-0 w-full">
                                <img src="{{ asset('uploads/' . $content->getFilename()) }}" alt="Image"
                                     class="rounded-md w-full h-40 object-cover">
                            </x-secondary-button>
                        </li>
                    @endif
                @endforeach
            </ul>

            <div class="flex justify-end items-center text-gray-400">You can add more images from the file manager</div>

        </div>
    </div>


    <script>
        let openFileManager = document.getElementById('open-filemanager')
        let fileManager = document.getElementById('filemanager')
        let closeFileManager = document.getElementById('close-filemanager')

        openFileManager.addEventListener('click', toggleFileManager)
        closeFileManager.addEventListener('click', toggleFileManager)

        function toggleFileManager() {
            fileManager.classList.toggle('invisible')

        }

        // Get all the secondary buttons (images) within the file manager
        const imageButtons = document.querySelectorAll('#filemanager .grid li');

        // console.log(imageButtons.length)
        // Get the input field for the image path
        const imagePathInput = document.getElementById('path');
        const imagePlaceholder = document.getElementById('image-placeholder');

        // Loop through each image button and attach a click event listener
        imageButtons.forEach(button => {
            button.addEventListener('click', function () {
                // Get the image source (src)
                const imagePath = this.querySelector('img').src;

                const imageName = imagePath.substring(imagePath.lastIndexOf('/') + 1); // Extracts the image name
                imagePathInput.value = imageName; // Set the image name to the input field

                imagePlaceholder.src = '{{ asset('/uploads/') }}' + '/' + imageName; // Set the image source for the placeholder

                toggleFileManager()
            });
        });

    </script>

@endsection