<div x-data="{ isOpenEditCode: @entangle('isOpenEditCode') }">
    <div wire:loading.class="flex" wire:loading.class.remove="hidden"
        wire:target="search, openModalMergeVessel, closeModal, mergeFlight"
        class="fixed inset-0 items-center justify-center z-50 bg-gray-800 bg-opacity-75 hidden">
        <div class="bg-white p-4 rounded-lg flex items-center justify-center">
            <svg class="animate-spin h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                </circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
            </svg>
            <span class="ml-2 text-gray-600">Loading...</span>
        </div>
    </div>
    <div x-show="isOpenEditCode" class="fixed inset-0 z-50 bg-gray-800 bg-opacity-75 overflow-auto">
        <div class="bg-white rounded-lg w-4/5 mx-auto mt-10 mb-10 pb-4">
            <style>
                code[class*="language-"],
                pre[class*="language-"] {
                    background: white !important;
                    color: black;
                }

                .token.deleted {
                    background-color: #f8d7da;
                    color: #721c24;
                }

                .token.inserted {
                    background-color: #d4edda;
                    color: #155724;
                }
            </style>
            
            <div class="flex w-full justify-between rounded-t-lg bg-slate-100 px-4 py-3 dark:bg-navy-800 sm:px-5">
                <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">Edit Code</h3>
               
                <button type="button" @click="isOpenEditCode = false"
                    class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <button type="button" wire:click="showDeleteItemModal('{{ $patchFileId }}')" 
            class="bg-error hover:bg-error-focus text-white font-bold py-2 px-4 rounded mx-2 my-2">remove</button>
            <div class="flex" x-data="{ gitCode: @entangle('gitCode') }" style="max-height: 70vh; overflow-y: auto;">
                <div class="w-1/2 p-4">
                    <h3 class="text-lg font-semibold">GitLab Code:</h3>
                    <div class="relative">
                        <div class="overflow-auto p-2 bg-gray-100 rounded" style="max-height: 60vh;">
                            <pre class="line-numbers language-none"><code>{{ $gitCode }}</code></pre>
                        </div>
                    </div>
                </div>
                <div class="w-1/2 p-4">
                    <h3 class="text-lg font-semibold">Your Code:</h3>
                    <textarea wire:model.defer="dbCode" rows="20" class="w-full p-2 border rounded language-none"
                        placeholder="Paste your code here..." style="max-height: 60vh; overflow-y: auto;"></textarea>
                    <button wire:click="compare" id="compare"
                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">Compare</button>
                   
                </div>
            </div>
            <div class="mx-3 mb-3">
                <h3 class="text-lg font-semibold mt-4">Differences:</h3>
                <div class="overflow-auto p-2 bg-gray-100 rounded" style="max-height: 30vh;">
                    <pre class="line-numbers"> <code >{!! $diffResult !!}</code></pre>
                </div>
            </div>
        </div>
    </div> 
</div>
