<div class="bg-secondary"> <button type="button" wire:click="loadPage('Patch')"
        class="btn mx-auto m-3 text-white bg-primary px-3 py-2">Back</button>

    <div class="max-w-full mx-auto p-6 bg-gray-100">
        @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,
                    fetchProjects() {
                        this.isLoading = true;
                        this.selectedProject = '60';
                        this.$wire.set('searchProject', this.searchQuery);
                    },
                    fetchBranches() {
                        //  this.selectedBranch = '';
                        if (this.selectedProject) {
                            this.$wire.set('selectedProject', this.selectedProject);
                        }
                    },
                    renderTree(subtree) {
                        return Object.keys(subtree).map(key => {
                            if (typeof subtree[key] === 'object' && Object.keys(subtree[key]).length > 0) {
                                return `<li>
                                                                                                                        <strong>${key}</strong>
                                                                                                                        <ul class='pl-4 mt-1'>${this.renderTree(subtree[key])}</ul>
                                                                                                                    </li>`;
                            } else {
                                return `<li class='text-gray-700'><i aria-hidden="true" class='fa fa-file text-base mr-2'></i>${key}</li>`;
                            }
                        }).join('');
                    }
                }" @projects-fetched.window="isLoading = false"
                    @files-fetched.window="isLoading = false" x-init="fetchProjects"
                    class="p-6 bg-white shadow-md 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>

                    {{-- <template x-if="selectedProject"> --}}
                    {{-- <template x-if="true">
                    <div class="mb-3">
                        <label for="branch" class="form-label w-64 text-lg mr-2">Select Branch:</label>
                        <select x-model="selectedBranch" id="branch"
                            class="ml-2 w-64 h-8 mt-1 border border-gray-300 rounded-md">
                            <option value="">Choose Branch</option>
                            <template x-for="branch in branches" :key="branch.name">
                                <option :value="branch.name" x-text="branch.name"></option>
                            </template>
                        </select>
                    </div>
                </template> --}}

                    <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"
                                class="btn mx-auto mt-3 text-white bg-stone-700 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>
            </div>
            <div class="w-full md:w-1/2 px-3 mb-6">
                <div class="p-6 bg-white shadow-md rounded-lg">
                    <h2 class="text-2xl 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">
                    </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">
                    </div>
                    <div class="mb-4">
                        <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>
                    </div>
                    <div class="mb-4">
                        <label for="patch_level" class="block text-gray-700">Patch level</label>
                        <input type="text" id="patch_level" class="w-full mt-1 p-2 border border-gray-300 rounded-md"
                            wire:model.defer="PLEVEL">
                    </div>
                    <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="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">
                    </div>
                    <div class="mb-4">
                        <label for="pdesc" class="block text-gray-700">Patch Desciption</label>
                        <input type="text" id="pdesc" wire:model.defer="PDESC"
                            class="w-full mt-1 p-2 border border-gray-300 rounded-md">
                    </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">
                    </div>
                    <div class="mb-4">
                        <label for="owner" class="block text-gray-700">Owner</label>
                        <input type="text" id="owner" wire:model.defer="POWNER"
                            class="w-full mt-1 p-2 border border-gray-300 rounded-md" value="aom">
                    </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 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 class="mb-4">
                        <label for="patchcode" class="block text-gray-700">Patchcode</label>
                        <textarea id="patchcode" 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" 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-stone-700 text-white px-4 py-2 rounded-md hover:bg-blue-600">Save</button>
                    </div>
                </div>
            </div>
        </div>
        <livewire:pages.patch.modal-edit-code>
    </div>
