<div class="bg-main-container">

    <link href="{{ asset('css/pages/patch.css') }}" rel="stylesheet">
    <div class="mt-5  mb-2 flex h-8 place-content-center px-4 ">
        <h2 class="text-xl  text-slate-800">
            Patch Management
        </h2>
        <h2 class="ml-3 text-xl text-slate-800 font-semibold underline  underline-offset-4">
            Create
        </h2>
    </div>
    <a type="button" href="/patch" class="btn mx-auto m-3 text-white bg-primary px-3 py-2">Back</a>
    <div class="pb-4  max-w-full mx-auto">

        @if (session()->has('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
        @endif
        <div class="flex flex-wrap -mx-3 ">

            <div class="w-full md:w-1/2 px-3 mb-6 ">
                <div x-data="{
                    searchQuery: 'SPN64Bits',
                    selectedBranch: @entangle('selectedBranch'),
                    selectedProject: @entangle('selectedProject'),
                    projects: @entangle('projects').defer,
                    branches: @entangle('branches').defer,
                    fileChanges: @entangle('fileChanges').defer,
                    isLoading: false,
                    showChangeFile : false,
                    fetchProjects() {
                        this.isLoading = true;
                        this.selectedProject = '60';
                        this.$wire.set('searchProject', this.searchQuery);
                    },
                    fetchBranches() {
                        if (this.selectedProject) {
                            this.$wire.set('selectedProject', this.selectedProject);
                        }
                    }
                }" @projects-fetched.window="isLoading = false"
                    @files-fetched.window="isLoading = false" x-init="fetchProjects"
                    class="p-6 bg-white shadow-lg rounded-lg ">



                    </style>
                    <div class="">
                        <div class="flex mb-3">
                            <label for="searchProject" class="form-label text-lg mr-2">Search Project:</label>
                            <input type="text" @input.debounce.500ms="fetchProjects"
                                class="form-input h-8 ml-2 rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                id="searchProject" placeholder="Enter project name" x-model="searchQuery">
                        </div>
                    </div>



                    {{-- <div x-show="!isLoading && projects.length > 0" class="grid grid-cols-3"> --}}
                    <div x-show="true" class="">
                        <div class="flex mb-3">
                            <label for="project" class="form-label text-lg mr-2">Select Project:</label>
                            <div x-show="isLoading" class="mx-auto mt-2">
                                <span>Loading...</span>
                            </div>
                            <select x-model="selectedProject" x-show="!isLoading" @change="fetchBranches" id="project"
                                class="ml-2 w-64 h-8 mt-1 border border-gray-300 rounded-md">
                                <option value="">Choose Project</option>
                                <template x-for="project in projects" :key="project.id">
                                    <option :value="project.id" x-text="project.name"></option>
                                </template>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <input type="text" value="c5d80f79" wire:model.defer="startCommit" placeholder="Start Commit"
                            class="placeholder:text-sm text-lg mb-2 form-input rounded-lg border border-slate-300 px-2">
                        <input type="text" value="254e87" wire:model.defer="endCommit" placeholder="End Commit"
                            class="placeholder:text-sm text-lg  mb-2 form-input rounded-lg border border-slate-300 px-2">
                        <div class="text-center">
                            <button type="button" wire:click="getChangedFiles" @click="showChangeFile = true"
                                class="btn mx-auto mt-3 text-white bg-primary px-3 py-2">Get
                                Changed
                                Files</button>
                        </div>
                    </div>
                    <div wire:loading.class="flex" wire:loading.class.remove="hidden"
                        class="flex inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
                        <div class="app-preloader grid h-full w-full place-content-center">
                            <div class="app-preloader-inner relative inline-block h-48 w-48"></div>
                        </div>
                    </div>
                    {{-- <template x-if="Object.keys(fileChanges).length > 0">
                        <div class="mt-5 bg-gray-100 p-4 rounded-lg shadow">
                            <h3 class="text-lg mb-3">Changed Files</h3>
                            <div class="tree">
                                <ul x-html="renderTree(fileChanges)"></ul>
                            </div>
                        </div>
                    </template> --}}
                    <div class="mt-5 bg-gray-100 p-4 rounded-lg shadow"  x-show="showChangeFile">
                        <h3 class="text-lg mb-3">Changed Files</h3>
                        <div class="file-tree">
                            <ul class='pl-4 mt-1'>
                                @foreach ($fileChanges as $name => $item)
                                    @include('livewire.pages.patch.tree-item', [
                                        'name' => $name,
                                        'item' => $item,
                                    ])
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 px-3 mb-6" x-data="{ showModal: false, showModal2: false, tempPathCode: @entangle('PATCHCODE').defer, tempPathCodeServer: @entangle('PATCHCODE_SERVER').defer }">
                <div class="p-6 bg-white shadow-md rounded-lg rounded-lg ">
                    <h2 class="text-2xl text-black font-bold mb-4">Create Patch</h2>
                    <div class="mb-4">
                        <label for="patch_name" class="block text-gray-700">Patch name</label>
                        <input type="text" id="patch_name" class="w-full mt-1 p-2 border border-gray-300 rounded-md"
                            wire:model.defer="PATCHNAME">
                        @error('PATCHNAME')
                            <span class="text-tiny+ text-error">{{ $message }}</span>
                        @enderror
                    </div>
                    {{-- <div class="mb-4">
                        <label for="patch_date" class="block text-gray-700">Patch date</label>
                        <input type="datetime-local" id="patch_date"
                            class="w-full mt-1 p-2 border border-gray-300 rounded-md" wire:model.defer="PDATE">
                        @error('PDATE')
                            <span class="text-tiny+ text-error">{{ $message }}</span>
                        @enderror
                    </div> --}}
                    <div class="grid grid-cols-6 space-x-2 mb-4">
                        <div class="col-span-2">
                            <label for="major_version" class="block text-gray-700">Major version</label>
                            <input type="text" id="major_version"
                                class="w-full mt-1 p-2 border border-gray-300 rounded-md"
                                wire:model.defer="MAJOR_VERSION">
                            @error('MAJOR_VERSION')
                                <span class="text-tiny+ text-error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-span-2">
                            <label for="php_version" class="block text-gray-700">PHP Version</label>
                            <select id="php_version" wire:model.defer="PHP_VERSION"
                                class="w-full mt-1 p-2 border border-gray-300 rounded-md">
                                <option value="0">ALL</option>
                                <option value="1">32Bits (PHP 5.2)</option>
                                <option value="2">64Bits (PHP 5.6)</option>
                                <option value="3">64Bits (PHP 8.0)</option>
                            </select>
                            @error('PHP_VERSION')
                                <span class="text-tiny+ text-error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-span-2">
                            <label for="patch_level" class="block text-gray-700">Patch level</label>
                            <select id="patch_level" wire:model.defer="PLEVEL"
                                class="w-full mt-1 p-2 border border-gray-300 rounded-md">
                                <option value="High">High</option>
                                <option value="Auto">Auto</option>
                                <option value="Critical">Critical</option>
                            </select>
                            @error('PLEVEL')
                                <span class="text-tiny+ text-error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="pdesc" class="block text-gray-700">Patch Desciption</label>
                        <textarea id="pdesc" wire:model.defer="PDESC" class="w-full mt-1 p-2 border border-gray-300 rounded-md"
                            rows="3"></textarea>
                        @error('PDESC')
                            <span class="text-tiny+ text-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="mb-4">
                        <label for="remark" class="block text-gray-700">Remark</label>
                        <input type="text" id="remark" wire:model.defer="Remark"
                            class="w-full mt-1 p-2 border border-gray-300 rounded-md">
                        @error('Remark')
                            <span class="text-tiny+ text-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="mb-4">
                        <label for="owner" class="block text-gray-700 ">Owner</label>
                        <input type="text" id="owner" wire:model.defer="POWNERNAME"
                            class="w-full mt-1 p-2 border border-gray-300 rounded-md bg-gray-300" readonly>
                    </div>
                    <div class="mb-4">
                        <label for="papprovedate" class="block text-gray-700">Papprovedate</label>
                        <input type="datetime-local" id="papprovedate" wire:model.defer="PAPPROVEDATE"
                            class="w-full mt-1 p-2 border border-gray-300 rounded-md" value="2024-03-27T15:00">
                    </div>
                    <div x-data="{ isOpen: false }" class="mb-4">
                        <button @click="isOpen = !isOpen"
                            class="flex items-center space-x-2 bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus justify-self-end">
                            <span x-text="isOpen ? 'Hide Details' : 'More Details'"></span>
                            <svg x-show="!isOpen" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 4v16m8-8H4" />
                            </svg>
                            <svg x-show="isOpen" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                            </svg>
                        </button>
                        <div id="specialBox" x-show="isOpen" x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform scale-90"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            x-transition:leave="transition ease-in duration-100"
                            x-transition:leave-start="opacity-100 transform scale-100"
                            x-transition:leave-end="opacity-0 transform scale-90" class="">
                            <div class="mb-4">
                                <label for="code" class="block text-gray-700">Patch Code</label>
                                <input type="text" id="code" wire:model.defer="PCODE"
                                    class="w-full mt-1 p-2 border border-gray-300 rounded-md">
                            </div>
                            <div class="mb-4">
                                <label for="ptype" class="block text-gray-700">Ptype</label>
                                <input type="text" id="ptype" wire:model.defer="PTYPE"
                                    class="w-full mt-1 p-2 border border-gray-300 rounded-md">
                            </div>
                            <div class="mb-4">
                                <label for="specific_customer" class="block text-gray-700">Specific Customer</label>
                                <input type="text" id="specific_customer"
                                    class="w-full mt-1 p-2 border border-gray-300 rounded-md">
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="patchcode" class="block text-gray-700">Patchcode</label>
                        <textarea id="patchcode" @click="showModal = true" x-model="tempPathCode" wire:model.defer="PATCHCODE"
                            class="w-full mt-1 p-2 border border-gray-300 rounded-md" rows="5">pathcode</textarea>
                    </div>
                    <div class="mb-4">
                        <label for="uninstall" class="block text-gray-700">Uninstall</label>
                        <input type="text" id="uninstall" wire:model.defer="UNINSTALL"
                            class="w-full mt-1 p-2 border border-gray-300 rounded-md" value="$b=1">
                    </div>
                    <div class="mb-4">
                        <label for="patchcode_server" class="block text-gray-700">Patchcode_server</label>
                        <textarea id="patchcode_server" @click="showModal2 = true" x-model="tempPathCodeServer"
                            wire:model.defer="PATCHCODE_SERVER" class="w-full mt-1 p-2 border border-gray-300 rounded-md" rows="5"></textarea>
                    </div>
                    <div class="flex justify-center">
                        <button type="button" wire:click="save"
                            class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary-focus">Save</button>
                    </div>
                    <div x-show="showModal" class="fixed inset-0 z-50 bg-gray-800/40 overflow-auto">
                        <div class="bg-white rounded-lg w-4/5 mx-auto mt-10 mb-10 pb-4">
                            <div class="w-full p-4">
                                <h2 class="text-xl font-semibold mb-4">Edit Patch Code</h2>
                                <textarea x-model="tempPathCode" class="w-full h-full p-2 bg-white rounded border border-gray-300" rows="30"
                                    style="font-family: monospace; white-space: pre; overflow-wrap: normal; overflow-x: auto;">></textarea>
                                <div class="mt-4 flex justify-end space-x-2">
                                    <button @click="showModal = false"
                                        class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">Close</button>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div x-show="showModal2" class="fixed inset-0 z-50 bg-gray-800/40 overflow-auto">
                        <div class="bg-white rounded-lg w-4/5 mx-auto mt-10 mb-10 pb-4">
                            <div class="w-full p-4">
                                <h2 class="text-xl font-semibold mb-4">Edit Patch Code Server</h2>
                                <textarea x-model="tempPathCodeServer" class="w-full h-full p-2 bg-white rounded border border-gray-300"
                                    rows="30" style="font-family: monospace; white-space: pre; overflow-wrap: normal; overflow-x: auto;">></textarea>
                                <div class="mt-4 flex justify-end space-x-2">
                                    <button @click="showModal2 = false"
                                        class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">Close</button>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <livewire:pages.patch.modal-edit-code>
    </div>
