<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 justify-center">
    <div class="p-12 bg-white shadow-md rounded-lg w-1/2">
        <h2 class="text-2xl font-bold mb-4">Create Parameter</h2>
      
        <div class="mx-auto p-4">
        @if (session()->has('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
        @endif

        <form wire:submit.prevent="addParameter">
            <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>
            <br>
            <div class="mb-4">
                <label for="detail" class="block text-sm font-medium text-gray-700">More Info</label>
            </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>
</div>
