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

<div x-data="{
        listOptions: '',
        recordValue: '',
        editing: false,
        init() {
    const value = @js($value);

    if (
        value !== null &&
        value !== undefined &&
        value !== 'null' &&
        !(typeof value === 'string' && value.trim() === '')
    ) {
        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() {
            if ('{{ $contenttype }}' === 'date') {
                {{-- this.recordValue = this.formatDateForSubmission(this.recordValue); --}}
            }
            const success = await $wire.updatefield('{{ $recordid }}', '{{ $recordtype }}', '{{ $contenttype }}', '{{ $fieldid }}', this.recordValue, '{{ $listoptions }}');
            {{-- console.log(success); --}}
            if (success) {
                this.editing = false;
            } else {
                alert('Field was not able to save. Please try again.');
            }
        },
        cancelEdit() {
            this.recordValue = @js($value);
            this.editing = false;
        }
    }"
    x-init="init"
    x-cloak
    @click.away="editing = false"

    wire:key="updatefield-{{ $recordid }}-{{ json_encode($value) }}"
>
    <div x-show="!editing" class="flex items-center space-x-3 relative">
        <!-- Handling different content types -->
        @switch($contenttype)
            @case('free_form_text')
                @if(isset($href))
                <a href="{{ $href }}" class="whitespace-nowrap mr-auto" target="_blank">
                    <span x-text="recordValue ? (recordValue.length > 50 ? recordValue.slice(0, 50) + '...' : recordValue) : ''"></span>
                </a>
                @else
                    <span x-text="recordValue ? (recordValue.length > 50 ? recordValue.slice(0, 50) + '...' : recordValue) : ''"></span>
                @endif
            @break
            @case('date')
                <input type="date" x-model="recordValue" class="inline-date" @change="editing = false; updateField()" />
            @break
            @case('date_time')
                <input type="datetime-local" x-model="recordValue" class="inline-date" @change="editing = false; updateField()" />
            @break
            @case('check_box')
             <span v-text="recordValue"></span>
                <input
                    type="checkbox"
                    class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600"
                    x-model="recordValue"
                    :checked="recordValue"
                    @change="editing = false; updateField()"
                />
            @break
            @case('multiple_select')
                <div class="relative" 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="px-3 rounded-sm text-gray-500 whitespace-nowrap cursor-pointer"
                        @click="toggleSelect()">
                        @foreach ($matchingOptions as $index => $option)
                        {{ $option['value'] }}@if($index < count($matchingOptions) - 1), @endif
                        @endforeach
                    </span>
                    <span
                        x-show="!recordValue"
                        class="px-3 py-2 rounded-sm text-gray-500 whitespace-nowrap cursor-pointer"
                        @click="toggleSelect()">
                        --
                    </span>

                    <div :class="editing ? 'overflow-visible z-20 ' : 'overflow-hidden'" class="relative abs-wrap ">
                        <div class="absolute " :class="editing ? 'bg-white p-2 rounded shadow-lg' : ''">
                            <select
                                x-model="recordValue"
                                :class="editing ? 'block' : 'hidden'"
                                class="cursor-pointer"
                                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="px-3 py-1 rounded-sm whitespace-nowrap list-text"
                        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="px-3 py-2 rounded-sm text-gray-500 whitespace-nowrap  cursor-pointer">
                    --
                </span>

                <select x-model="recordValue" @change="editing = false; updateField()" class="inline-hidden  cursor-pointer">
                        <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
        @if($contenttype == 'free_form_text')
            <button @click="editing = true">
                <svg class="w-5 h-5 text-gray-500 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                    <path fill-rule="evenodd" d="M11.32 6.176H5c-1.105 0-2 .949-2 2.118v10.588C3 20.052 3.895 21 5 21h11c1.105 0 2-.948 2-2.118v-7.75l-3.914 4.144A2.46 2.46 0 0 1 12.81 16l-2.681.568c-1.75.37-3.292-1.263-2.942-3.115l.536-2.839c.097-.512.335-.983.684-1.352l2.914-3.086Z" clip-rule="evenodd"/>
                    <path fill-rule="evenodd" d="M19.846 4.318a2.148 2.148 0 0 0-.437-.692 2.014 2.014 0 0 0-.654-.463 1.92 1.92 0 0 0-1.544 0 2.014 2.014 0 0 0-.654.463l-.546.578 2.852 3.02.546-.579a2.14 2.14 0 0 0 .437-.692 2.244 2.244 0 0 0 0-1.635ZM17.45 8.721 14.597 5.7 9.82 10.76a.54.54 0 0 0-.137.27l-.536 2.84c-.07.37.239.696.588.622l2.682-.567a.492.492 0 0 0 .255-.145l4.778-5.06Z" clip-rule="evenodd"/>
                </svg>
            </button>
        @endif
    </div>

    <div x-show="editing">
        <div class="inline-input-wrap">
            @switch($contenttype)
                @case('free_form_text')
                <input type="text" x-model="recordValue" @blur="editing = false; updateField()" class="input-style" style="min-width: 240px;" />
                @break
                @default
                Needs UI
            @endswitch
            <div class="btn-wrap flex items-center space-x-[3px]">
                <button @click="cancelEdit()">
                    <svg class="w-4 h-4 text-gray-500 dark:text-white hover:text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
                    </svg>
                </button>
                <button @click="editing = false; updateField()">
                    <svg class="w-4 h-4 text-gray-500 dark:text-white hover:text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7.757v8.486M7.757 12h8.486M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>