<div>
    <button type="button" wire:click="$emit('loadPage', 'list')" 
    class="btn mx-auto m-3 text-white bg-primary px-3 py-2">Back</button>
<div class="max-w-full mx-auto p-6 bg-gray-100">

<div class="w-full px-6 mb-12 flex">
    <div class="p-12 bg-white shadow-md rounded-lg w-1/2">
        <h2 class="text-2xl font-bold mb-4">Edit Parameter</h2>
      
        <div class="mx-auto p-4">
        @if (session()->has('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
        @endif
        @if (session()->has('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <form wire:submit.prevent="updateParameter">
            <div class="mb-4">
                <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                <input type="text" wire:model.defer="name" id="name"
                    class="w-full mt-1 p-2 border border-gray-300 rounded-md">
                @error('name') <span class="text-red-500">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label for="value" class="block text-sm font-medium text-gray-700">Value</label>
                <input type="text" wire:model.defer="value" id="value"
                class="w-full mt-1 p-2 border border-gray-300 rounded-md">
                @error('value') <span class="text-red-500">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                <textarea wire:model.defer="description" id="description"
                class="w-full mt-1 p-2 border border-gray-300 rounded-md"></textarea>
                @error('description') <span class="text-red-500">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label for="active" class="block text-sm font-medium text-gray-700">Active</label>
                <select wire:model.defer="active" id="active"
                class="w-full mt-1 p-2 border border-gray-300 rounded-md">
                    <option value="Y">Yes</option>
                    <option value="N">No</option>
                </select>
                @error('active') <span class="text-red-500">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label for="detail" class="block text-sm font-medium text-gray-700">Detail</label>
                <textarea wire:model.defer="detail" id="detail"
                class="w-full mt-1 p-2 border border-gray-300 rounded-md"></textarea>
                @error('detail') <span class="text-red-500">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label for="pageCode" class="block text-sm font-medium text-gray-700">Page Code</label>
                <div class="w-full mt-1 p-2 border border-gray-300 rounded-md flex flex-wrap">
                    @foreach ($searchByPage as $page)
                        <div class="w-1/2 mb-2 flex items-center">
                            <input type="checkbox" wire:model.defer="pageCode" value="{{ $page['pagecode'] }}" id="page_{{ $page['pagecode'] }}"
                                class="mr-2">
                            <label for="page_{{ $page['pagecode'] }}" class="text-gray-700">{{ $page['pagename'] }}</label>
                        </div>
                    @endforeach
                </div>
                @error('pageCode') <span class="text-red-500">{{ $message }}</span> @enderror
            </div>

            <div class="flex items-center justify-center">
                <button type="submit"
                    class="bg-primary inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Save
                </button>
            </div>
        </form>
    </div>
    </div>

    <div class="p-12 bg-white shadow-md rounded-lg w-1/2 ml-4">
        <h2 class="text-2xl font-bold mb-4">Upload Image</h2>

        <form wire:submit.prevent="uploadImage">
            <div class="mb-4">
                <label for="newImage" class="block text-sm font-medium text-gray-700">Image</label>
                <input type="file" wire:model="newImage" id="newImage"
                    class="w-full mt-1 p-2 border border-gray-300 rounded-md">
                @error('newImage') <span class="text-red-500">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label for="category" class="block text-sm font-medium text-gray-700">Parameter</label>
                <select wire:model.defer="category" id="category"
                class="mt-1 p-2 border border-gray-300 rounded-md">
                    <option value="1">Enable</option>
                    <option value="2">Disable</option>
                </select>
                @error('category') <span class="text-red-500">{{ $message }}</span> @enderror
            </div>

            <div class="flex items-center justify-center">
                <button type="submit"
                    class="bg-primary inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Upload
                </button>
            </div>
        </form>

        <div class="mt-6">
            <h3 class="text-lg font-medium text-gray-700 mb-2">Uploaded Images</h3>
            <div class="flex flex-col gap-4">
                @foreach ($images as $image)
                    <div class="relative">
                        <img src="data:image/jpeg;base64,{{ $image->imgdetail }}" alt="Image" class="w-full h-auto rounded-md">
                        <div class="mt-2 text-sm text-gray-700">
                            <p><strong>Parameter:</strong> {{ $image->category == 1 ? 'Enable' : ($image->category == 2 ? 'Disable' : '') }}</p>
                            <p><strong>Uploaded By:</strong> {{ $image->uploadBy }}</p>
                            <p><strong>Uploaded Time:</strong> {{ $image->uploadTime }}</p>
                        </div>
                        <button type="button" wire:click="deleteImage({{ $image->imgid }})"
                            class="absolute top-1 right-1 bg-red-500 text-white p-1 rounded-full hover:bg-red-700">
                            <i aria-hidden="true" class="fa fa-trash"></i>
                        </button>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- JavaScript to clear file input -->
<script>
    document.addEventListener('livewire:load', function () {
        @this.on('clearFileInput', function () {
            let input = document.getElementById('newImage');
            if (input) {
                input.value = null;
            }
        });
    });
</script>
