@props([
    'href',
    'recordtype',
    'fieldid',
    'contenttype',
    'recordid',
    'value' => '',
    'label' => '',
    'required' => false,
    'listoptions' => null
])

<div x-data="{
        listOptions: '',
        recordValue: '',
        editing: false,
        init() {
            // Convert the Blade value to a JavaScript string and format accordingly
            const value = '{{ $value }}';
            if (value && value !== 'null' && value.length > 0) {
                if ('{{ $contenttype }}' === 'date') {
                    this.recordValue = this.formatDate(value);
                } else if ('{{ $contenttype }}' === 'date_time') {
                    this.recordValue = this.formatDateTime(value);
                } else {
                    this.recordValue = value;
                }
            }
        },
        formatDate(date) {
            if (date && date !== 'null' && date.length > 0) {
                const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
                if (dateRegex.test(date)) {
                    return date;
                }
                const parsedDate = new Date(date);
                if (isNaN(parsedDate.getTime())) {
                    console.error('Invalid date format:', date);
                    return '';
                }
                return parsedDate.toISOString().split('T')[0];
            }
            return '';
        },
        formatDateForSubmission(date) {

            if (!date) return '';
            const [year, month, day] = date.split('-');
            return `${parseInt(month)}/${parseInt(day)}/${year}`;
        },
        formatDateTime(dateTime) {
            if (dateTime) {
                const parsedDateTime = new Date(dateTime);
                if (isNaN(parsedDateTime.getTime())) {
                    console.error('Invalid datetime format:', dateTime);
                    return '';
                }
                return parsedDateTime.toISOString().slice(0, 16);
            }
            return '';
        },
        async updateField() {

{{--             const success = await $wire.updatefield('{{ $recordid }}', '{{ $recordtype }}', '{{ $contenttype }}', '{{ $fieldid }}', this.recordValue, '{{ $listoptions }}');
            if (success) {
                this.editing = false;
            } else {
                alert('Field was not able to save. Please try again.');
            } --}}
        },
        cancelEdit() {
            this.recordValue = '';
            this.editing = false;
        }
    }"
    x-init="init"
    x-cloak
    @click.away="editing = false"

    wire:key="createfield-{{ $fieldid }}"
>
    <div x-show="!editing" class="flex items-center space-x-3 relative">

        @switch($contenttype)
            @case('free_form_text')
                <input type="text" class="input-style min-w-48" name="{{ $fieldid }}" :required="{{ json_encode($required) }}">
            @break
            @case('date')
                <input type="date" x-model="recordValue" class="input-style" name="{{ $fieldid }}" @change="editing = false; updateField()" :required="{{ json_encode($required) }}" />
            @break
            @case('date_time')
                <input type="datetime-local" x-model="recordValue" class="input-style" name="{{ $fieldid }}" @change="editing = false; updateField()" :required="{{ json_encode($required) }}" />
            @break
            @case('check_box')
                <input
                    type="checkbox"
                    class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600"
                     name="{{ $fieldid }}"
                    x-model="recordValue"
                    :checked="recordValue"
                    :required="{{ json_encode($required) }}"
                />
            @break
            @case('multiple_select')
                <div class="relative" name="{{ $fieldid }}" x-data="{
                    listOptions: JSON.parse('{{ $listoptions }}'),
                    editing: false,
                    toggleSelect() {
                        this.editing = !this.editing;
                    }
                }">
                    @php
                        $multilistoptions = is_string($listoptions) ? json_decode($listoptions, true) : $listoptions;
                        if (is_string($multilistoptions) && json_last_error() !== JSON_ERROR_NONE) {
                            $multilistoptions = explode(',', $multilistoptions);
                        }
                        $valueArray = explode(',', $value);
                        $matchingOptions = array_filter($multilistoptions, function($option) use ($valueArray) {
                            return in_array($option['id'], $valueArray);
                        });
                    @endphp

                    <span
                        x-show="recordValue"
                        class="input-style"
                        @click="toggleSelect()">
                        @foreach ($matchingOptions as $index => $option)
                        {{ $option['value'] }}@if($index < count($matchingOptions) - 1), @endif
                        @endforeach
                    </span>
                    <span
                        x-show="!recordValue"
                        class="rounded-sm whitespace-nowrap cursor-pointer input-style border cursor-pointer px-3 bg-white"
                        @click="toggleSelect()">
                        Select
                    </span>

                    <div :class="editing ? 'overflow-visible z-20 ' : 'overflow-hidden'" class="relative abs-wrap ">
                        <div class="absolute bottom-0" :class="editing ? 'bg-white p-2 rounded shadow-lg' : ''">
                            <select
                                x-model="recordValue"
                                :class="editing ? 'block' : 'hidden'"
                                class="cursor-pointer" name="{{ $fieldid }}"
                                :required="{{ json_encode($required) }}"
                                multiple>
                                <option value=""  >-None-</option>
                                @foreach (json_decode($listoptions) as $option)
                                    <option value="{{ $option->id }}" @if (in_array($option->id, $valueArray)) selected @endif>{{ $option->value }}</option>
                                @endforeach
                            </select>
                            <div class="flex space-x-2  mt-2">
                                <button @click="editing = false; updateField()" class="link" :class="editing ? '' : 'hidden'">Save</button>
                                <button @click="editing = false;" class="link alert" :class="editing ? '' : 'hidden'">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>

                @break
            @case('list')
            <div x-data="{
                    listOptions: JSON.parse('{{ $listoptions }}')
                }">
                <template x-for="option in listOptions" >
                    <span
                        class="input-style border cursor-pointer px-3 bg-white"
                        x-show="option.id == recordValue"
                        x-text="option.value"
                        :class="{ 'text-black': option.color }"
                        :style="{ backgroundColor: option.color }"
                    ></span>
                </template>


                <span x-show="!recordValue" class=" input-style border cursor-pointer px-3 bg-white" style="min-width: 150px;">
                    Select
                </span>

                <select x-model="recordValue" @change="editing = false; updateField()" class="inline-hidden  cursor-pointer" name="{{ $fieldid }}" :required="{{ json_encode($required) }}">
                        <option value="" disabled selected>Select an option</option>
                    @foreach (json_decode($listoptions) as $option)
                        <option value="{{ $option->id }}" @if ($option->id == $value) selected @endif>{{ $option->value }}</option>
                    @endforeach
                </select>
            </div>
            @break
        @endswitch

    </div>

</div>