@props(['fields'])

@if ($fields)
    <div class="space-y-12">
        <div class="border-b border-gray-700 pb-12">
            {{ $slot }}
            <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
               
                @foreach ($fields as $key => $field)
                    @if($field['type']=="text" or $field['type']=="date" or $field['type']=="email" or $field['type']=="password" or $field['type']=="number")
                        <div class="{{$field['col']}}">
                            <label for="{{$field['id']}}" class="block text-sm font-medium leading-6 text-gray-100">{{$field['label']}}</label>
                            <div class="mt-2">
                                <input 
                                    type="{{$field['type']}}" 
                                    name="{{$field['name']}}" 
                                    id="{{$field['id']}}" 
                                    @if(isset($field['attr']) && $field['attr']) {{$field['attr']}} @endif
                                    placeholder="{{$field['label']}}" 
                                    autocomplete="{{$field['name']}}"
                                    value="{{$field['value']}}"
                                    class="block w-full rounded-md border-0 py-1.5 text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 bg-gray-700">
                            </div>
                            @if(isset($field['description']) && $field['description'])
                            <p class="mt-3 text-sm leading-6 text-gray-400">{{$field['description']}}</p>
                            @endif
                            <x-input-error :messages="$errors->get($field['name'])" class="mt-2" />
                        </div>
                    @elseif($field['type']=="textarea")
                        <div class="{{$field['col']}}">
                            <label for="{{$field['id']}}" class="block text-sm font-medium leading-6 text-gray-100">{{$field['label']}}</label>
                            <div class="mt-2">
                                <textarea 
                                    type="text" 
                                    name="{{$field['name']}}" 
                                    id="{{$field['id']}}"
                                    @if(isset($field['attr']) && $field['attr']) {{$field['attr']}} @endif
                                    rows="3"
                                    class="block w-full rounded-md border-0 py-1.5 text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 bg-gray-700">{{$field['value']}}</textarea>
                            </div>
                            @if(isset($field['description']) && $field['description'])
                            <p class="mt-3 text-sm leading-6 text-gray-400">{{$field['description']}}</p>
                            @endif
                            <x-input-error :messages="$errors->get($field['name'])" class="mt-2" />
                        </div>
                    @elseif($field['type']=="select")
                        <div class="{{$field['col']}}">
                            <label for="{{$field['id']}}" class="block text-sm font-medium leading-6 text-gray-100">{{$field['label']}}</label>
                            <div class="mt-2">
                                <select 
                                    name="{{$field['name']}}" 
                                    id="{{$field['id']}}"
                                    @if(isset($field['attr']) && $field['attr']) {{$field['attr']}} @endif
                                    class="block w-full rounded-md border-0 py-1.5 text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 bg-gray-700">
                                    @if(isset($field['list']))
                                        @foreach ($field['list'] as $key => $list)
                                            <option 
                                                value="{{$list['id']}}"
                                                @if($field['value'] == $list['id']) selected="selected" @endif
                                            >
                                                {{$list['name']}}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            @if(isset($field['description']) && $field['description'])
                            <p class="mt-3 text-sm leading-6 text-gray-400">{{$field['description']}}</p>
                            @endif
                            <x-input-error :messages="$errors->get($field['name'])" class="mt-2" />
                        </div>
                    @elseif($field['type']=="switch")
                        <div class="{{$field['col']}}">
                            <label for="{{$field['id']}}" class="block text-sm font-medium leading-6 text-gray-100">{{$field['label']}}</label>
                            <div class="mt-2">
                                <div class="inline-flex items-center">
                                    <div class="relative inline-block h-4 w-8 cursor-pointer rounded-full">
                                        <input
                                            id="{{ $field['id'] }}"
                                            name="{{$field['name']}}" 
                                            @if(isset($field['attr']) && $field['attr']) {{$field['attr']}} @endif
                                            type="checkbox"
                                            @if($field['value']) checked="checked" @endif
                                            class="peer absolute h-4 w-8 cursor-pointer appearance-none rounded-full bg-blue-gray-100 transition-colors duration-300 checked:bg-blue-500 peer-checked:border-blue-500 peer-checked:before:bg-blue-500 !bg-none"
                                        />
                                        <label
                                            for="{{ $field['id'] }}"
                                            class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-gray-50 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-blue-500 peer-checked:before:bg-blue-500"
                                        >
                                        <div
                                            class="top-2/4 left-2/4 inline-block -translate-x-2/4 -translate-y-2/4 rounded-full p-5"
                                            data-ripple-dark="true"
                                        >
                                        </div>
                                        </label>
                                    </div>
                                    <label
                                        for="auto-update"
                                        class="mt-px ml-3 mb-0 cursor-pointer select-none font-light text-gray-700"
                                        >
                                    </label>
                                </div>
                            </div>
                            @if(isset($field['description']) && $field['description'])
                            <p class="mt-3 text-sm leading-6 text-gray-400">{{$field['description']}}</p>
                            @endif
                            <x-input-error :messages="$errors->get($field['name'])" class="mt-2" />
                        </div>
                    @elseif($field['type']=="checklist")
                        <div class="{{$field['col']}}">
                            <label for="{{$field['id']}}" class="block text-sm font-medium leading-6 text-gray-100">{{$field['label']}}</label>
                            <div class="mt-2">
                                <div class="mt-6 space-y-6">
                                    @foreach ($field['list'] as $key => $list)
                                        <div class="relative flex gap-x-3">
                                            <div class="flex h-6 items-center">
                                                <input 
                                                    id="{{$field['id'].$list['id']}}" 
                                                    name="{{$field['name'].'[]'}}" 
                                                    value="{{$list['id']}}"
                                                    @if(isset($field['attr']) && $field['attr']) {{$field['attr']}} @endif
                                                    type="checkbox"
                                                    @if(is_object($field['value']) && count($field['value']) > 0)
                                                        @foreach ($field['value'] as $permision)
                                                            @if($permision['id'] == $list['id']) checked="checked" @endif
                                                        @endforeach
                                                    @endif
                                                    class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                            </div>
                                            <div class="text-sm leading-6">
                                                <label for="comments" class="font-medium text-gray-100">{{$list['name']}}</label>
                                                @if(isset($list['description'])) <p class="text-gray-400">{{$list['description']}}</p> @endif
                                            </div>
                                        </div>
                                    @endforeach
                                    
                                </div>
                            </div>
                            @if(isset($field['description']) && $field['description'])
                            <p class="mt-3 text-sm leading-6 text-gray-400">{{$field['description']}}</p>
                            @endif
                            <x-input-error :messages="$errors->get($field['name'])" class="mt-2" />
                        </div>
                    @elseif($field['type']=="image")
                        <div class="{{$field['col']}}">
                            <label for="{{$field['id']}}" class="block text-sm font-medium leading-6 text-gray-100">{{$field['label']}}</label>
                            <div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-600 px-6 py-10" ondragover="highlightDropArea(event)" ondragleave="resetDropArea()" ondrop="handleDrop(event)">
                                <div class="text-center">
                                    <div id="preview-container" class="">
                                        @if($field['value'])
                                            <img class="w-full h-auto max-h-32 object-contain" src="{{ asset("image/{$field['value']}") }}">
                                        @else
                                            <x-icon-image />
                                        @endif
                                    </div>
                                    <div class="mt-4 flex text-sm leading-6 text-gray-400">
                                        <label for="{{$field['id']}}" class="relative cursor-pointer rounded-m font-semibold text-gray-100 hover:text-gray-200">
                                            <span>Cargar una imagen</span>
                                            <input id="{{$field['id']}}" name="{{$field['name']}}" type="file" class="sr-only" onchange="previewImage(this)">
                                        </label>
                                        <p class="pl-1">o arrastrar y soltar</p>
                                    </div>
                                    <p class="text-xs leading-5 text-gray-400">PNG, JPG, WEBP hasta 200kb</p>
                                </div>
                            </div>
                            <x-input-error :messages="$errors->get($field['name'])" class="mt-2" />
                        </div>
                        <script>
                            function previewImage(input) {
                                const previewContainer = document.getElementById('preview-container');
                                const file = input.files[0];
                        
                                if (file) {
                                    const reader = new FileReader();
                        
                                    reader.onload = function (e) {
                                        const img = document.createElement('img');
                                        img.src = e.target.result;
                                        img.classList.add('w-full', 'h-auto', 'max-h-32', 'object-contain');
                                        previewContainer.innerHTML = '';
                                        previewContainer.appendChild(img);
                                    };
                        
                                    reader.readAsDataURL(file);
                                }
                            }
                        
                            function allowDrop(event) {
                                event.preventDefault();
                            }

                            function highlightDropArea(event) {
                                event.preventDefault();
                                const dropArea = document.querySelector('.border-dashed'); // Selecciona el contenedor
                                dropArea.classList.add('bg-gray-700'); // Cambia el color de fondo al arrastrar sobre el contenedor
                            }

                            function resetDropArea() {
                                const dropArea = document.querySelector('.border-dashed'); // Selecciona el contenedor
                                dropArea.classList.remove('bg-gray-700'); // Restaura el color de fondo al soltar fuera del contenedor
                            }
                        
                            function handleDrop(event) {
                                event.preventDefault();
                                resetDropArea();
                                const file = event.dataTransfer.files[0];
                                const input = document.getElementById('{{$field['id']}}');
                        
                                if (file && input) {
                                    input.files = event.dataTransfer.files;
                                    previewImage(input);
                                }
                            }
                        </script>
                        
                    @else
                        <div> {{$field['label']}}</div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>                    
@endif