@php
    $jp3_contacts_arr = [];
    $jp3_contact_projects = $project->jp_contacts_3;
    if (!empty($jp3_contact_projects)) {
        foreach ($jp3_contact_projects as $jp_contact) {
            $jp3_contacts_arr[] = $jp_contact->id;
        }
    }
@endphp


<div class="block ml-2">
    <label class="text-slate-500 mb-2">JP Contact 3</label>
    <select class="hidden" id="selectJP3">
        @foreach ($jp3_contacts as $jp_contact)
            <option value="{{ $jp_contact->id }}" @if (count($jp3_contacts_arr) > 0 && in_array($jp_contact->id, $jp3_contacts_arr)) selected @endif>
                {{ $jp_contact->contact_name }}</option>
        @endforeach
    </select>

    <div x-data="dropdownJP3()" x-init="loadOptionsJP3()"
        class="w-full mt-1 md:w-1/2 flex flex-col items-center h-6 mx-auto">
        <input name="jp_contact_id_3" type="hidden" x-bind:value="selectedValuesJP3()">
        <div class="inline-block relative w-64">
            <div class="flex flex-col items-center relative">
                <div x-on:click="openJP3" class="w-full">
                    <div class="p-1 flex border border-gray-200 bg-white rounded">
                        <div class="flex flex-auto flex-wrap">
                            <template x-for="(option,index) in selectedJP3" :key="optionsJP3[option].value">
                                <div
                                    class="flex justify-center items-center m-1 font-medium py-1 px-1 bg-white rounded bg-gray-100 border">
                                    <div class="text-xs text-slate-500 font-normal leading-none max-w-full flex-initial x-model="
                                        optionsJP3[option] x-text="optionsJP3[option].text"></div>
                                    <div class="flex flex-auto flex-row-reverse">
                                        <div x-on:click.stop="removeJP3(index,option)">
                                            <svg class="fill-current h-4 w-4 " role="button" viewBox="0 0 20 20">
                                                <path d="M14.348,14.849c-0.469,0.469-1.229,0.469-1.697,0L10,11.819l-2.651,3.029c-0.469,0.469-1.229,0.469-1.697,0
                                           c-0.469-0.469-0.469-1.229,0-1.697l2.758-3.15L5.651,6.849c-0.469-0.469-0.469-1.228,0-1.697s1.228-0.469,1.697,0L10,8.183
                                           l2.651-3.031c0.469-0.469,1.228-0.469,1.697,0s0.469,1.229,0,1.697l-2.758,3.152l2.758,3.15
                                           C14.817,13.62,14.817,14.38,14.348,14.849z" />
                                            </svg>

                                        </div>
                                    </div>
                                </div>
                            </template>
                            <div x-show="selectedJP3.length == 0" class="flex-1">
                                <input placeholder="Select a option"
                                    class="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800"
                                    x-bind:value="selectedValuesJP3()">
                            </div>
                        </div>
                        <div
                            class="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200 svelte-1l8159u">

                            <button type="button" x-show="isOpenJP3() === true" x-on:click="openJP3"
                                class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
                                <svg version="1.1" class="fill-current h-4 w-4" viewBox="0 0 20 20">
                                    <path d="M17.418,6.109c0.272-0.268,0.709-0.268,0.979,0s0.271,0.701,0,0.969l-7.908,7.83
                                        c-0.27,0.268-0.707,0.268-0.979,0l-7.908-7.83c-0.27-0.268-0.27-0.701,0-0.969c0.271-0.268,0.709-0.268,0.979,0L10,13.25
                                    L17.418,6.109z" />
                                </svg>

                            </button>
                            <button type="button" x-show="isOpenJP3() === false" @click="closeJP3"
                                class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
                                <svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
                                    <path d="M2.582,13.891c-0.272,0.268-0.709,0.268-0.979,0s-0.271-0.701,0-0.969l7.908-7.83
 c0.27-0.268,0.707-0.268,0.979,0l7.908,7.83c0.27,0.268,0.27,0.701,0,0.969c-0.271,0.268-0.709,0.268-0.978,0L10,6.75L2.582,13.891z
 " />
                                </svg>

                            </button>
                        </div>
                    </div>
                </div>
                <div class="w-full px-4">
                    <div x-show.transition.origin.top="isOpenJP3()"
                        class="absolute shadow top-100 bg-white z-40 w-full left-0 rounded max-h-select"
                        x-on:click.away="closeJP3">
                        <div class="flex flex-col w-full overflow-y-auto h-64">
                            <template x-for="(option,index) in optionsJP3" :key="option" class="overflow-auto">
                                <div class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-gray-100"
                                    @click="selectJP3(index,$event)">
                                    <div
                                        class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
                                        <div class="w-full items-center flex justify-between">
                                            <div class="text-slate-500 mx-2 leading-6" x-model="option"
                                                x-text="option.text"></div>
                                            <div x-show="option.selected">
                                                <svg class="svg-icon" viewBox="0 0 20 20">
                                                    <path fill="none" d="M7.197,16.963H7.195c-0.204,0-0.399-0.083-0.544-0.227l-6.039-6.082c-0.3-0.302-0.297-0.788,0.003-1.087
       C0.919,9.266,1.404,9.269,1.702,9.57l5.495,5.536L18.221,4.083c0.301-0.301,0.787-0.301,1.087,0c0.301,0.3,0.301,0.787,0,1.087
       L7.741,16.738C7.596,16.882,7.401,16.963,7.197,16.963z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>