<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>
<div class="bg-main-container" x-data="{ progress: 0, interval: null }" x-init="window.addEventListener('process-started', () => {
interval = setInterval(() => {
$wire.call('processStep').then(result => {
console.log(result)
progress = result;
if (progress >= 100) {
progress = 0;
clearInterval(interval);
}
});
}, 1000);
});" x-cloak>
<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">
Edit
</h2>
</div>
<div class="max-w-full mx-auto px-5">
<style>
.progress-bar {
height: 20px;
background-color: #4CAF50;
transition: width 0.5s;
}
</style>
<a href="/patch" type="button" class="btn mx-auto m-1 text-white bg-primary px-3 py-2">Back</a>
<div x-show="progress > 0" x-text="progress + '%'"></div>
@if ($message)
<div class="alert alert-success">
<div wire:ignore x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)" x-show.transition.duration.500ms="show"
class="fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg">
{{ $message }}
</div>
</div>
@endif
<div class="progress-bar" :style="`width: ${progress}%`"></div>
<div class="flex flex-wrap -mx-3">
<div class="w-full md:w-1/2 px-3 mb-6">
<div x-data="{
activeTab: 'tab1',
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() {
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 ">
<div class="mb-4">
<button @click="activeTab = 'tab1'"
:class="{ 'border-b-2 border-blue-500': activeTab === 'tab1' }"
class="px-4 py-2">Git</button>
<button @click="activeTab = 'tab2'"
:class="{ 'border-b-2 border-blue-500': activeTab === 'tab2' }"
class="px-4 py-2">Manual</button>
</div>
<div x-show="activeTab === 'tab1'" class="">
<!-- Content for Tab 1 -->
<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="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" 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" 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" 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-primary px-3 py-2">Get Changed
Files</button>
</div>
</div>
<div class="mt-5 bg-gray-100 p-4 rounded-lg shadow">
<h3 class="text-lg mb-3">Git Changed Files</h3>
<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>
<div class="file-tree">
<ul class='pl-4 mt-1'>
@foreach ($fileGitChanges as $name => $item)
@include('livewire.pages.patch.tree-item', [
'name' => $name,
'item' => $item,
])
@endforeach
</ul>
</div>
</div>
<div class="mt-5 bg-gray-100 p-4 rounded-lg shadow">
<h3 class="text-lg mb-3">Patch Files</h3>
<div class="file-tree">
<ul class='pl-4 mt-1'>
@foreach ($filePatchChanges as $name => $item)
@include('livewire.pages.patch.tree-item', [
'name' => $name,
'item' => $item,
'patchId' => $patchId,
])
@endforeach
</ul>
</div>
</div>
</div>
<div x-show="activeTab === 'tab2'" class="" x-data="{ selectedDeleteFiles: [], showDeleteListModal: false }">
<div class="py-2 ">
<button type="button"
class="py-2 px-3 bg-primary border border-primary text-white rounded-md hover:bg-primary-focus"
wire:click="$emit('openModalFormPatchFile', '', '{{ $patchId }}')">Add</button>
<button type="button"
class="py-2 px-3 bg-error border-error border rounded-md text-white hover:bg-error-focus"
@click="showDeleteListModal = true">Delete</button>
</div>
<div x-show="showDeleteListModal"
class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900/50 bg-opacity-50">
<div class="bg-white rounded-lg p-6 max-w-md w-full">
<h2 class="text-lg font-semibold text-gray-900">Confirm Deletion</h2>
<p class="mt-2 text-gray-600">Are you sure you want to delete the selected files?</p>
<div class="mt-4 flex justify-end">
<button @click="showDeleteListModal = false"
class="bg-gray-200 text-gray-700 px-4 py-2 rounded mr-2">Cancel</button>
<button
@click="$wire.call('deleteSelectedPatchFiles', selectedDeleteFiles); showDeleteListModal = false;"
class="bg-red-500 text-white px-4 py-2 rounded">Confirm</button>
</div>
</div>
</div>
<div class="is-scrollbar-hidden min-w-full table-responsive" x-data="pages.tables.initExample1">
<table aria-describedby="mydesc" class="is-hoverable table w-full text-left border-b">
<thead>
<tr>
<th scope="col"
class="whitespace-nowrap rounded-tl-md bg-slate-300 px-4 py-1 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
#
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-2 py-1 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
File Name
</th>
<th scope="col"
class="whitespace-nowrap rounded-tr-md bg-slate-300 px-2 py-1 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Action
</th>
</tr>
</thead>
<tbody>
@foreach ($filePatch as $patchFile)
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-1 sm:px-5">
<label for="patchFile-{{ $patchFile['fid'] }}"
class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" x-model="selectedDeleteFiles"
id="patchFile-{{ $patchFile['fid'] }}"
value="{{ $patchFile['fid'] }}" />
</label>
</td>
<td class="whitespace-nowrap px-1 py-1 sm:px-2">
{{ $patchFile['file_name'] }}</td>
<td class="whitespace-nowrap px-1 py-1 sm:px-2">
<div class="flex justify-center space-x-2">
<button
wire:click="$emit('openModalFormPatchFile', '{{ $patchFile['fid'] }}' , '{{ $patchId }}')"
class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
<i aria-hidden="true" class="fa fa-edit"></i>
</button>
<button onclick="confirmDeletePatchFile({{ $patchFile['fid'] }})"
class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
<i aria-hidden="true" class="fa fa-trash"></i>
</button>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</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-lg rounded-lg ">
<h2 class="text-2xl font-bold mb-4">Edit 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">
</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 Description</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">
</div>
<div class="mb-4">
<label for="owner" class="block text-gray-700 ">Owner</label>
<input type="text" id="owner" wire:model.defer="POWNERNAME" readonly
class="w-full mt-1 p-2 border border-gray-300 rounded-md bg-gray-300">
</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" @click="$wire.call('startProcess')"
class="bg-primary text-white px-4 py-2 rounded-md hover:bg-blue-600">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>
<div wire:init="loadModal">
@if ($modalLoaded)
<livewire:pages.patch.modal-edit-code />
<livewire:pages.patch.modal-form-patch-file />
<livewire:delete-item-modal />
@endif
</div>
</div>
</div>
<div class="border-0 shadow-none">
<div wire:loading.class="" wire:loading.class.remove="hidden" wire:target="save"
class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
<div class="flex justify-center items-center ">
<div class="items-center h-100vh" style="align-content: center;">
<div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
</div>
</div>
</div>
<div class="m-2">
@if ($action === 'list')
@if ($message)
<div class="alert alert-success">
<div wire:ignore x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)"
x-show.transition.duration.500ms="show"
class="fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg">
{{ $message }}
</div>
</div>
@endif
<div class="my-5 flex h-8 place-content-center px-4 ">
<h2 class="text-xl text-slate-800">
Patch Management
</h2>
</div>
<div class="pb-4 card shadow-lg p-4">
<div class="flex justify-between">
<div class="px-2 ml-4">
<button type="button"
class="py-2 px-3 bg-primary rounded-md text-white hover:bg-primary-focus"
wire:click="showpatchAddForm">Add</button>
</div>
<div class="inline-flex flex-initial">
<div x-data="{ isInputActive: true }">
<div class="flex flex-wrap gap-4 px-5 items-center">
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-10 rounded-full p-0 hover:bg-primary-focus hover:text-main-container active:text-main-container focus:text-main-container primary-focus hover:text-main-container active:text-main-container focus:text-main-container 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="black">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<span class="w-64" x-show="isInputActive === true">
<input
class="form-input h-9 peer w-full 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"
placeholder="Search Keyword" type="text" wire:model.defer="keyword" />
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model.defer="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-main-container px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
@foreach ($searchBy as $key => $by)
<option value="{{ $key }}">{{ $by }}</option>
@endforeach
</select>
</span>
<button type="button"
class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus"
wire:click="search">Search</button>
</div>
</div>
</div>
</div>
<div class="mx-3 mt-3">
<div class="is-scrollbar-hidden min-w-full table-responsive" x-data="pages.tables.initExample1">
<table aria-describedby="mydesc" class="is-hoverable table w-full text-left border-b text-black">
<thead>
<tr>
<th scope="col"
class="whitespace-nowrap rounded-tl-lg bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Patch ID
</th>
{{-- <th scope="col"
class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch ID
</th> --}}
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch Name
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch Date
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch Level
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Major Version
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Description
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Remark
</th>
<th scope="col"
class="whitespace-nowrap rounded-tr-lg bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Action
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $patch)
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
{{-- <td class="whitespace-nowrap px-4 py-3 sm:px-5">
<label for="selectedPatch-{{ $patch->id }}"
class="inline-flex items-center space-x-2">
<input id="selectedPatch-{{ $patch->id }}"
class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" wire:model.defer="selectedPatch"
value="{{ $patch->id }}" />
</label>
</td> --}}
<td class="whitespace-nowrap px-1 py-3 sm:px-2 text-center">{{ $patch->PID }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
{{ \Illuminate\Support\Str::limit($patch->PATCHNAME, 120) }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PDATE }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PLEVEL }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->MAJOR_VERSION }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
{{ \Illuminate\Support\Str::limit($patch->PDESC, 40) }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->Remark }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
<div class="flex justify-center space-x-2">
<a wire:click="showpatchEditForm({{ $patch->PID }})"
class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
<i aria-hidden="true" class="fa fa-edit"></i>
</a>
<a wire:click="showDeleteModal({{ $patch->PID }})"
class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
<i aria-hidden="true" class="fa fa-trash"></i>
</a>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<livewire:delete-modal />
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
@elseif($action === 'add')
<livewire:pages.patch.patch-create>
@elseif($action === 'edit')
<livewire:pages.patch.patch-edit :editPid="$editPid">
@endif
</div>
</div>
<div class="bg-main-container" x-data="{ notLimit: false }">
<div class="max-w-full mx-auto p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-3xl font-semibold text-gray-800">Patch Master File</h2>
<a href="/patch" class="btn text-white bg-primary px-4 py-2 rounded hover:bg-primary-focus">
Back
</a>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="mb-4">
<label for="format_file_id" class="block text-gray-700 font-medium">Choose Format File</label>
<select id="format_file_id" wire:model.defer="format_file_id"
class="w-full mt-2 p-3 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary">
@foreach ($formatFiles as $format )
<option value="{{ $format->formatservice_ID }}">{{ $format->name }}</option>
@endforeach
</select>
</div>
<div class="mb-4">
<label for="upload_file" class="block text-gray-700 font-medium">Upload File Data</label>
<div class="flex items-center mt-2">
@if ($file)
<div class="text-sm text-gray-600 dark:text-gray-300 mr-4">
Uploaded File: {{ $file->getClientOriginalName() }}
</div>
@endif
<span wire:loading>
<svg class="animate-spin h-5 w-5 text-primary m-3" 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</span>
<label for="file-upload"
class="btn bg-gray-200 text-gray-800 hover:bg-gray-300 focus:bg-gray-300 active:bg-gray-300 dark:bg-gray-500 dark:text-gray-50 dark:hover:bg-gray-450 dark:focus:bg-gray-450 dark:active:bg-gray-450/90">
<input tabindex="-1" id="file-upload" type="file" wire:model="file"
class="pointer-events-none absolute inset-0 h-full w-full opacity-0" />
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
</svg>
<span>Choose File</span>
</div>
@error('file')
<span class="text-red-600 text-sm mt-2">{{ $message }}</span>
@enderror
</label>
</div>
</div>
<div class="mb-4">
<label for="limit_data" class="block text-gray-700 font-medium">Limit Data per Patch</label>
<select id="limit_data" class="w-full mt-2 p-3 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"
:disabled="notLimit" wire:model.defer="limit">
<option value="10000">10,000</option>
<!-- Add more options or use a loop to generate -->
</select>
<div class="mt-3">
<label class="inline-flex items-center">
<input class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary focus:bordark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" type="checkbox"
x-model="notLimit" wire:model.defer="noLimit"/>
<span class="ml-2">Not Limit</span>
</label>
</div>
</div>
<div class="mb-4">
<label class="inline-flex items-center">
<input wire:model.defer="genWithSmartUpdate" class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" type="checkbox" value="">
<span class="ml-2">Gen patch ด้วย function spnsmartupdatedecode</span>
</label>
</div>
<div class="mb-4 flex items-center space-x-4">
<label class="inline-flex items-center">
<input wire:model.defer="createPatch" class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" type="checkbox" value="">
<span class="ml-2">Create Patch</span>
</label>
<label class="inline-flex items-center">
<input wire:model.defer="sendToEec" class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" type="checkbox" value="">
<span class="ml-2">Send To EEC</span>
</label>
</div>
<div class="text-right">
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary-focus focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50"
wire:click="createPatch">
Create Patch
</button>
</div>
</div>
</div>
</div>
@php
$isFile = isset($item['id']);
@endphp
<li class="{{ $isFile ? 'file' : 'folder' }} tree">
@if($isFile)
<a href="#" class="text-bold" wire:click="$emit('openModalFormPatchFile', '{{ $item['id'] }}' , '{{ $patchId??'' }}')"><i aria-hidden="true" class='fa fa-file text-base mr-2'></i>{{ $name }}</a>
@else
<span>{{ $name }}</span>
<ul class='pl-4 mt-1'>
@foreach($item as $childName => $childItem)
@include('livewire.pages.patch.tree-item', ['name' => $childName, 'item' => $childItem])
@endforeach
</ul>
@endif
</li>
<div x-data="{ progress: @entangle('progress'), exporting: @entangle('exporting') }" x-init="setInterval(() => { $wire.checkProgress() }, 2000)">
<button @click="exporting = true" wire:click="exportReport" :disabled="exporting">
Export Report
</button>
<!-- Progress Bar -->
<div x-show="exporting" class="progress-bar" style="position: relative; width: 100%; background-color: #e0e0e0;">
<div class="progress" :style="{ width: progress + '%' }" style="background-color: #4caf50; height: 20px;"></div>
</div>
<!-- แสดง progress เป็นเปอร์เซ็นต์ -->
<div x-show="exporting">
<span x-text="progress + '%'"></span>
</div>
<!-- แสดงสถานะของ batch -->
<div x-text="'Status: ' + @entangle('status')"></div>
</div>
\ No newline at end of file
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6" x-data="{
permissionListAlpine: [],
submit() {
@this.call('submitForm', this.permissionListAlpine);
}
}">
<form wire:submit.prevent="">
@csrf
<div class="card pb-4">
<div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
<i aria-hidden="true" class="fa-solid fa-edit text-primary"></i> Create
</h2>
</div>
<div class="w-3/4 px-3 space-y-3 m-auto mb-4">
<div class="grid grid-cols-1">
<div class="flex items-center mb-2 ml-4">
<label for='name' class="w-3/12 mr-2">
<span>Name</span>
</label>
<span class="relative flex w-full">
<input
class="form-input w-3/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs 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"
placeholder="" type="text" wire:model.defer="name" />
@error('name')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center mb-2 ml-4">
<label for='description' class="w-3/12 mr-2">
<span>Description</span>
</label>
<span class="relative flex w-full">
<input
class="form-input w-3/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 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"
placeholder="" wire:model.defer="description" type="text" />
</span>
</div>
</div>
<div class="tabs flex flex-col">
<div x-data="{ activeTab: 'Import' }" class="tabs flex flex-col">
<div class="tab-content pt-4 px-2 mt-2 pb-2">
<div x-transition:enter="transition-all duration-500 ease-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div
class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-3">
@php
$currentGroup = '';
$tabGroup = [
'User Management',
'Role Management',
'Group Management',
'Company Management',
'Company Type Management',
'Server License Management',
'Patch Management',
'Send Patch Management',
'Parameter Management',
'Patch Exchange Rate Management',
'Patch Discharge Port Management',
];
@endphp
@foreach ($permissions as $permission)
@if (!in_array($permission['permission_group_name'], $tabGroup))
@continue
@endif
@if ($permission['permission_group_name'] !== $currentGroup)
@if ($currentGroup !== '')
</div>
</div>
@endif
<div x-data="{
allChecked: false,
permissionList: @entangle('permission_lists'),
toggleAll(group) {
this.allChecked = !this.allChecked;
document.querySelectorAll(`.permissionGroup[data-group='${group}'] input[type='checkbox']`).forEach(checkbox => {
checkbox.checked = this.allChecked;
if (this.allChecked) {
if (!this.permissionListAlpine.includes(checkbox.value)) {
this.permissionListAlpine.push(checkbox.value);
}
} else {
this.permissionListAlpine = this.permissionListAlpine.filter(id => id != checkbox.value);
}
});
},
toggleIndividual(event) {
event.stopPropagation();
this.allChecked = this.permissionListAlpine.length === @json($permissions->count());
}
}"
class="card grow items-center p-4 sm:p-5 cursor-pointer permissionGroup"
data-group="{{ $permission['permission_group_name'] }}"
@click="toggleAll('{{ $permission['permission_group_name'] }}')">
<h3 class="pt-3 text-lg font-medium text-slate-700 dark:text-navy-100">
{{ $permission['permission_group_name'] }}
</h3>
<div class="my-4 h-px w-full bg-slate-200 dark:bg-navy-500"></div>
<div class="grow space-y-4 permission-list">
@endif
<div class="flex items-center space-x-4">
<label class="inline-flex items-center space-x-2"
@click="toggleIndividual($event)">
<input
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
type="checkbox" x-model="permissionListAlpine"
value="{{ $permission['id'] }}" />
<span>{{ $permission['name'] }}</span>
</label>
</div>
@php $currentGroup = $permission['permission_group_name']; @endphp
@endforeach
@if ($currentGroup !== '')
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="grid grid-cols-6 justify-center space-x-2 pt-4">
<span wire:click="goBack"
class="col-start-3 btn border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
Cancel
</span>
<button type="button" @click="submit"
class="btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
Save
</button>
</div>
</div>
@php
$jsonPermissionLists = json_encode($permissionLists ?? []);
@endphp
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6" x-data="{
permissionListAlpine: {!! $jsonPermissionLists !!},
submit() {
@this.call('submitEditForm', this.permissionListAlpine);
}
}">
<form wire:submit.prevent="">
@csrf
<div class="card pb-4">
<div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
<i aria-hidden="true" class="fa-solid fa-edit text-primary"></i> Create
</h2>
</div>
<div class="w-3/4 px-3 space-y-3 m-auto mb-4">
<div class="grid grid-cols-1">
<div class="flex items-center mb-2 ml-4">
<label for="name" class="w-3/12 mr-2">
<span id='name'>Name</span>
</label>
<span class="relative flex w-full">
<input
class="form-input w-3/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs 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"
placeholder="" type="text" wire:model.defer="name" />
@error('name')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center mb-2 ml-4">
<label for='description' class="w-3/12 mr-2">
<span>Description</span>
</label>
<span class="relative flex w-full">
<input
class="form-input w-3/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 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"
placeholder="" wire:model.defer="description" type="text" />
</span>
</div>
</div>
<div class="tabs flex flex-col">
<div x-data="{ activeTab: 'Import' }" class="tabs flex flex-col">
<div class="tab-content pt-4 px-2 mt-2 pb-2">
<div x-transition:enter="transition-all duration-500 ease-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div
class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-3">
@php
$currentGroup = '';
$tabGroup = [
'User Management',
'Role Management',
'Group Management',
'Company Management',
'Company Type Management',
'Server License Management',
'Patch Management',
'Send Patch Management',
'Parameter Management',
'Patch Exchange Rate Management',
'Patch Discharge Port Management',
];
@endphp
@foreach ($permissions as $permission)
@if (!in_array($permission['permission_group_name'], $tabGroup))
@continue
@endif
@if ($permission['permission_group_name'] !== $currentGroup)
@if ($currentGroup !== '')
</div>
</div>
@endif
<div x-data="{
allChecked: false,
permissionList: @entangle('permissionLists'),
toggleAll(group) {
this.allChecked = !this.allChecked;
document.querySelectorAll(`.permissionGroup[data-group='${group}'] input[type='checkbox']`).forEach(checkbox => {
checkbox.checked = this.allChecked;
if (this.allChecked) {
if (!this.permissionListAlpine.includes(checkbox.value)) {
this.permissionListAlpine.push(checkbox.value);
}
} else {
this.permissionListAlpine = this.permissionListAlpine.filter(id => id != checkbox.value);
}
});
},
toggleIndividual(event) {
event.stopPropagation();
this.allChecked = this.permissionListAlpine.length === @json($permissions->count());
}
}"
class="card grow items-center p-4 sm:p-5 cursor-pointer permissionGroup"
data-group="{{ $permission['permission_group_name'] }}"
@click="toggleAll('{{ $permission['permission_group_name'] }}')">
<h3 class="pt-3 text-lg font-medium text-slate-700 dark:text-navy-100">
{{ $permission['permission_group_name'] }}
</h3>
<div class="my-4 h-px w-full bg-slate-200 dark:bg-navy-500"></div>
<div class="grow space-y-4 permission-list">
@endif
<div class="flex items-center space-x-4">
<label class="inline-flex items-center space-x-2"
@click="toggleIndividual($event)">
<input
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
type="checkbox" x-model="permissionListAlpine"
value="{{ $permission['id'] }}" />
<span>{{ $permission['name'] }}</span>
</label>
</div>
@php $currentGroup = $permission['permission_group_name']; @endphp
@endforeach
@if ($currentGroup !== '')
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="grid grid-cols-6 justify-center space-x-2 pt-4">
<span wire:click="goBack"
class="col-start-3 btn border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
Cancel
</span>
<button type="button" @click="submit"
class="btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
Save
</button>
</div>
</div>
<div x-cloak>
@include('components.no-permission')
<div class="flex items-center space-x-4 py-5 lg:py-6 ">
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="/">Home</a>
<svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</li>
<li class="flex items-center space-x-2">
<a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
wire:click="$emit('menuClicked', 'Role')">Role Management</a>
</li>
</ul>
</div>
@if ($action === 'list')
<div x-data="{ show: @entangle('showMessage'), message: '' }" x-init="window.addEventListener('show-message', event => {
show = true;
message = event.detail.message;
console.log(show, message);
setTimeout(() => { show = false, console.log(show, message); }, 3000);
});">
<div x-show.transition.duration.500ms="show"
class="fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg">
{{ $message }}
</div>
</div>
<div x-data="{
showDeleteListModal: @entangle('showDeleteListModal'),
showAlert: false,
toggleGroup(event) {
const groupId = event.target.value;
if (event.target.checked) {
if (!this.selectedRolesAlpine.includes(groupId)) {
this.selectedRolesAlpine.push(groupId);
}
} else {
this.selectedRolesAlpine = this.selectedRolesAlpine.filter(id => id !== groupId);
}
},
selectedRolesAlpine: [],
selectedRoles: @entangle('selectedRoles')
}" class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 ">
<div class="card pb-4">
<div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Role Management
</h2>
</div>
{{-- @include('components/search-by', ['searchBy' => $searchBy ?? []]) --}}
<div class="flex justify-between">
<div class="px-2 ml-4">
@if (Auth::user()->hasPermissions(['add-role']))
<button wire:click="showRoleCreateForm()"
class="btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z">
</path>
</svg>
<span>Create</span>
</button>
@endif
@if (Auth::user()->hasPermissions(['delete-role']))
<a @click.prevent="if (selectedRolesAlpine.length > 0) { showDeleteListModal = true; } else { showAlert = true;}"
class="btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0">
</path>
</svg>
<span>Delete</span>
</a>
@endif
</div>
<div class="inline-flex flex-initial">
<div x-data="{ isInputActive: true }">
<div class="flex gap-4 px-5 items-center">
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-14 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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<span class="w-64" x-show="isInputActive === true">
<input
class="form-input h-9 peer w-full 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"
placeholder="Search Keyword" type="text" wire:model="keyword" />
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
@foreach ($searchBy as $key => $by)
<option value="{{ $key }}">{{ $by }}</option>
@endforeach
</select>
</span>
</div>
</div>
</div>
</div>
@include('livewire.select-atleast-modal')
<div class="mx-3 mt-3 px-4">
<div class="is-scrollbar-hidden min-w-full overflow-x-auto" x-data="pages.tables.initExample1">
<table aria-describedby="mydesc" class="is-hoverable w-full text-left">
<thead>
<tr>
<th scope="col"
class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
#
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Name
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Permission
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Create Date
</th>
<th scope="col"
class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Action
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $role)
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<label class="inline-flex items-center space-x-2">
<input @change="toggleGroup($event)"
class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
value="{{ $role->id }}" />
</label>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $role->name }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<ul>
@php
$permissions = $role->permissions->take(5); // Take the first 5 permissions
$remainingCount =
$role->permissions->count() - $permissions->count();
@endphp
@foreach ($permissions as $permission)
<li
class="inline-block mr-2 mb-2 px-2 py-1 bg-primary text-white rounded text-xs">
{{ $permission->name }}</li>
@endforeach
@if ($remainingCount > 0)
<li
class="inline-block px-2 py-1 bg-gray-300 text-gray-700 rounded">
+
{{ $remainingCount }} more</li>
@endif
</ul>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $role->created_at }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex justify-center space-x-2">
@if (Auth::user()->hasPermissions(['edit-role']))
<a wire:click="showRoleEditForm({{ $role->id }})"
class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i aria-hidden="true" class="fa fa-edit"></i>
</a>
@endif
@if (Auth::user()->hasPermissions(['delete-role']))
<div>
<a @click="$wire.emit('showDeleteModal', {{ $role->id }})"
class="btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
<i aria-hidden="true" class="fa fa-trash-alt"></i>
</a>
</div>
@endif
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<template x-if="showDeleteListModal">
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
@keydown.window.escape="showDeleteListModal = false">
<div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
@click="showDeleteListModal = false"></div>
<div
class="relative p-4 max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5">
<svg xmlns="http://www.w3.org/2000/svg" class="inline h-28 w-28 text-error"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z">
</path>
</svg>
<div class="mt-4 mx-5">
<h2 class="text-2xl text-slate-700 dark:text-navy-100">
Are you sure <br> you want to delete <span
x-text="selectedRolesAlpine.length"></span> roles?
</h2>
<p class="mt-2"></p>
<button @click="showDeleteListModal = false"
class="btn mt-6 bg-[#6a6e69] font-medium text-white hover:bg-[#313430] focus:bg-[#313430]-focus active:bg-[#313430]-focus/90">
Close
</button>
<button
@click="$wire.emitSelf('deleteSelected', selectedRolesAlpine ); showDeleteListModal = false; selectedRolesAlpine = []"
class="btn mt-6 bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90">
Confirm
</button>
</div>
</div>
</div>
</template>
<livewire:delete-modal />
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
</div>
@elseif($action === 'create')
<livewire:pages.role.role-create :permissions="$permissions" wire:key="role-create" />
@elseif($action === 'edit')
<livewire:pages.role.role-edit :permissions="$permissions" :editRoleId="$editRoleId" wire:key="role-edit" />
@endif
</div>
<div class="w-full md:w-1/3 px-3 mb-6" x-data="{ showProgressModal: @entangle('showProgressModal') }">
<div class="p-6 bg-white shadow-md rounded-lg">
<h2 class="text-2xl font-bold mb-4">Selected Patches</h2>
<div class="bg-gray m-3">
@if (count($selectedPatchName) > 0)
@foreach ($selectedPatchName as $key => $patch)
<div class="flex items-center bg-lime-800 text-white w-full px-4 py-2 rounded m-1">
<span class="flex-grow"> {{ $selectedPatches[$key] . ' : ' . $patch }}</span>
<button wire:click="removePatch('{{ $selectedPatches[$key] }}')" class="ml-2">
<i aria-hidden="true" class="fas fa-trash-alt"></i>
</button>
</div>
@endforeach
@else
<span class="flex-grow">No patch selected</span>
@endif
</div>
<div class="flex flex-col items-center">
<div>
@if (!empty($serverkey) && $showSearch)
<ul class="mt-2 border border-gray-200 rounded-md max-h-64 overflow-auto">
@forelse($results as $result)
<li class="p-2 hover:bg-gray-100 cursor-pointer"
wire:click="selectResult('{{ $result->SNKEY }}')">
{{ $result->SNKEY }}
</li>
@empty
<li class="p-2 text-gray-500">No results found</li>
@endforelse
</ul>
@endif
</div>
<button type="button" class="bg-primary text-white px-4 py-2 rounded max-w-xs mt-4"
wire:click="deleteSelectedPatches" @click="showProgressModal = true" wire:loading.attr="disabled"
class="bg-primary text-white px-4 py-2 rounded relative">
<span wire:loading.remove wire:target="deleteSelectedPatches">Delete Patch</span>
<span wire:loading wire:target="deleteSelectedPatches">
<svg class="animate-spin h-5 w-5 text-white" 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</span>
</button>
</div>
</div>
<div x-show="showProgressModal" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90" class="fixed z-10 inset-0 overflow-y-auto">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div x-show="showProgressModal" class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div x-show="showProgressModal"
class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div>
<div class="mt-3 text-center sm:mt-5">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
Delete Patch ID
</h3>
<div class="mt-2">
<ul>
@if (count($reponseMessages) > 0)
@foreach ($reponseMessages as $message)
<li>{!! $message !!}</li>
@endforeach
@endif
</ul>
</div>
</div>
</div>
<div class="mt-5 sm:mt-6">
<button @click="showProgressModal = false" type="button"
class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:text-sm">
Close
</button>
</div>
</div>
</div>
</div>
</div>
<div x-data=" {
selectedPatch: [],
selectedPatchByPage: {},
allSelectPatches: [],
allSelectPatchName: [],
currentPage: @entangle('page'), // Bind currentPage to Livewire 'page' variable
init() {
this.$watch('currentPage', (value) => {
this.loadSelectedPatch();
this.resetCheckAllCheckbox();
});
this.loadSelectedPatch();
Livewire.on('removePatchSelected', (patch) => {
const checkboxes = document.querySelectorAll('.individual-checkbox');
checkboxes.forEach(checkbox => {
if (checkbox.value === patch) {
checkbox.checked = false;
this.updatePatchSelection(checkbox.value, checkbox.getAttribute('data-patchname'), false);
}
});
this.updateSelectedPatchList();
});
Livewire.on('updateSelectPatchAfterDeleted', () => {
this.clearAllSelections();
});
},
toggleAllCheckboxes(event) {
const checkboxes = document.querySelectorAll('.individual-checkbox');
const isChecked = event.target.checked;
checkboxes.forEach(checkbox => {
checkbox.checked = isChecked;
// Livewire.emit('updateSelectedPatches', checkbox.value);
const patchName = checkbox.getAttribute('data-patchname');
this.updatePatchSelection(checkbox.value, patchName, isChecked);
});
this.updateSelectedPatchList();
},
updateSelectedPatch(event) {
const patchName = event.target.getAttribute('data-patchname');
this.updatePatchSelection(event.target.value, patchName, event.target.checked);
this.updateSelectedPatchList();
},
updatePatchSelection(patch, patchName, isSelected) {
const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
if (isSelected) {
if (!pagePatches.includes(patch)) {
pagePatches.push(patch);
this.allSelectPatches.push(patch);
this.allSelectPatchName.push(patchName);
}
} else {
const indexPage = pagePatches.indexOf(patch);
const indexAll = this.allSelectPatches.indexOf(patch);
if (indexPage !== -1) {
pagePatches.splice(indexPage, 1);
}
if (indexAll !== -1) {
this.allSelectPatches.splice(indexAll, 1);
this.allSelectPatchName.splice(indexAll, 1);
}
}
Livewire.emit('updateDeletedPatches', this.allSelectPatches, this.allSelectPatchName);
this.selectedPatchByPage[this.currentPage] = pagePatches;
},
clearAllSelections() {
this.allSelectPatches = [];
this.allSelectPatchName = [];
},
updateSelectedPatchList() {
this.selectedPatch = Object.values(this.selectedPatchByPage).flat();
},
loadSelectedPatch() {
const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
const checkboxes = document.querySelectorAll('.individual-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = pagePatches.includes(checkbox.value);
});
this.updateSelectedPatchList();
},
resetCheckAllCheckbox() {
const checkAllCheckbox = document.getElementById('check-all');
const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
const checkboxes = document.querySelectorAll('.individual-checkbox');
checkAllCheckbox.checked = checkboxes.length > 0 && pagePatches.length === checkboxes
.length;
}
}" x-init="$watch('selectedPatch', () => resetCheckAllCheckbox())" class="w-full mb-6">
<div class="p-6 bg-white shadow-md rounded-lg">
<div x-show="true" class="">
<div class="flex justify-end mb-5">
<div class="inline-flex flex-initial">
<div x-data="{ isInputActive: true }">
<div class="flex flex-wrap gap-4 px-5 items-center">
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-14 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="black">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<span class="w-64" x-show="isInputActive === true">
<input
class="form-input h-9 peer w-full 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"
placeholder="Search Keyword" type="text" wire:model.defer="keyword" />
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model.defer="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
@foreach ($searchBy as $key => $by)
<option value="{{ $key }}">{{ $by }}</option>
@endforeach
</select>
</span>
<button type="button" class="bg-primary text-white px-4 py-2 rounded"
wire:click="search">Search</button>
</div>
</div>
</div>
</div>
<div class="mt-3 ">
<div class="is-scrollbar-hidden min-w-full table-responsive">
<table aria-describedby="mydesc" class="is-hoverable table w-full text-left">
<thead>
<tr>
<th scope="col"
class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
<input
class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" id="check-all" @click="toggleAllCheckboxes" />
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch ID
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch Name
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Description
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Server
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Date
</th>
<th scope="col"
class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Remark
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $patch)
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox individual-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" @click="updateSelectedPatch" value="{{ $patch->PID }}"
data-patchname = "{{ $patch->PATCHNAME }}" />
</label>
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PID }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2" data-id="{{ $patch->PID }}">
{{ \Illuminate\Support\Str::limit($patch->PATCHNAME, 40) }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
{{ \Illuminate\Support\Str::limit($patch->PDESC, 40) }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->server }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PDATE }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->Remark }}
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="justify-center flex">
<span wire:loading>
<svg class="animate-spin h-16 w-16 text-primary m-2 " 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</span>
</div>
</div>
<livewire:delete-modal />
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
</div>
</div>
<div x-cloak class="w-full px-3 mb-6 bg-main-container">
<div class="my-5 flex h-8 place-content-center px-4 ">
<h2 class="text-xl text-slate-800">
Delete Patch
</h2>
<h2 @click="selectedPatches = []; "
class="ml-3 text-xl text-slate-800 font-semibold underline underline-offset-4 cursor-pointer">
Delete Multi
</h2>
</div>
<div class="pt-2 pb-4 rounded-lg relative h-svh bg-main-container ">
<div class="flex flex-wrap -mx-3">
<div class="w-2/3 px-3 mb-6 ">
<div class="shadow-md bg-white w-full mb-3 p-3 rounded-lg">
<div class="flex flex-col items-center ">
<div class="flex flex-row justify-items-start self-start ">
<h5 class="flex justify-self-center items-center mx-2 ml-4 text-xl">Serverkey : </h5>
<div class="flex flex-col">
<input type="text"
class="form-input h-9 peer w-64 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"
wire:model="serverkey" placeholder="Search for a server key">
@if (!empty($serverkey) && $showSearch)
<ul
class="z-50 border border-gray-200 top-14 rounded-md max-h-64 w-64 overflow-auto absolute bg-white mt-1">
@forelse($results as $result)
<li class="p-2 hover:bg-gray-100 cursor-pointer"
wire:click="selectResult('{{ $result->SNKEY }}')">
{{ $result->SNKEY }}
</li>
@empty
<li class="p-2 text-gray-500">No results found</li>
@endforelse
</ul>
@endif
</div>
<span wire:loading>
<svg class="animate-spin h-5 w-5 text-primary m-2" 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</span>
<span
class="flex justify-self-center items-center ml-3">{{ !empty($companyName) ? '(' . $companyName . ')' : '' }}
</span>
</div>
</div>
</div>
<livewire:pages.send-patch.delete-multi-patch-list />
</div>
<livewire:pages.send-patch.delete-multi-patch-box :selectedPatches="$selectedPatches" />
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-3 mb-6" x-cloak x-data="{ showProgressModal: @entangle('showProgressModal') }">
<div class="p-6 bg-white shadow-md rounded-lg">
<h2 class="text-2xl font-bold mb-4">Selected Patches</h2>
<div class="bg-gray m-3">
@foreach ($selectedPatchName as $key => $patch)
<button class="bg-lime-800 text-white px-4 py-2 rounded m-1">{{ $selectedPatches[$key]." : ".$patch }}</button>
@endforeach
</div>
<div class="flex flex-col items-center">
{{-- <input type="text"
class="form-input h-9 peer w-full 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"
name="serverkey" id="serverkey"> --}}
<div>
<input type="text"
class="form-input h-9 peer w-full 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"
wire:model.debounce.500ms="serverkey" placeholder="Search for a server key">
@if (!empty($serverkey) && $showSearch)
<ul class="border border-gray-200 rounded-md max-h-64 overflow-auto">
@forelse($results as $result)
<li class="p-2 hover:bg-gray-100 cursor-pointer"
wire:click="selectResult('{{ $result->SNKEY }}')">
{{ $result->SNKEY }}
</li>
@empty
<li class="p-2 text-gray-500">No results found</li>
@endforelse
</ul>
@endif
</div>
<button type="button" class="bg-primary text-white px-4 py-2 rounded max-w-xs mt-4"
wire:click="sendSelectedPatches" @click="showProgressModal = true" wire:loading.attr="disabled"
type="button" class="bg-primary text-white px-4 py-2 rounded relative">
<span wire:loading.remove>Send Patch</span>
<span wire:loading>
<svg class="animate-spin h-5 w-5 text-white" 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</span>
</button>
</div>
</div>
<div x-show="showProgressModal" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90" class="fixed z-10 inset-0 overflow-y-auto">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div x-show="showProgressModal" class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div x-show="showProgressModal"
class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div>
<div class="mt-3 text-center sm:mt-5">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
Inserted Patch IDs
</h3>
<div class="mt-2">
<ul>
@if (count($reponseMessages) > 0)
@foreach ($reponseMessages as $message)
<li>{!! $message !!}</li>
@endforeach
@endif
</ul>
</div>
</div>
</div>
<div class="mt-5 sm:mt-6">
<button @click="showProgressModal = false" type="button"
class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:text-sm">
Close
</button>
</div>
</div>
</div>
</div>
</div>
<div x-data=" {
selectedPatch: [],
selectedPatchByPage: {},
allSelectPatches: [],
allSelectPatchName: [],
currentPage: @entangle('page'),
init() {
this.$watch('currentPage', (value) => {
this.loadSelectedPatch();
this.resetCheckAllCheckbox();
});
// this.$watch('selectedPatch.length', () => {
// this.resetCheckAllCheckbox();
// });
this.loadSelectedPatch();
},
toggleAllCheckboxes(event) {
const checkboxes = document.querySelectorAll('.individual-checkbox');
const isChecked = event.target.checked;
checkboxes.forEach(checkbox => {
checkbox.checked = isChecked;
// Livewire.emit('updateSelectedPatches', checkbox.value);
const patchName = checkbox.getAttribute('data-patchname');
this.updatePatchSelection(checkbox.value, patchName, isChecked);
});
this.updateSelectedPatchList();
},
updateSelectedPatch(event) {
const patchName = event.target.getAttribute('data-patchname');
this.updatePatchSelection(event.target.value, patchName, event.target.checked);
this.updateSelectedPatchList();
},
updatePatchSelection(patch, patchName, isSelected) {
const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
console.log(this.allSelectPatches)
console.log(this.allSelectPatchName)
if (isSelected) {
if (!pagePatches.includes(patch)) {
pagePatches.push(patch);
this.allSelectPatches.push(patch);
this.allSelectPatchName.push(patchName);
}
} else {
const indexPage = pagePatches.indexOf(patch);
const indexAll = this.allSelectPatches.indexOf(patch);
if (indexPage !== -1) {
pagePatches.splice(indexPage, 1);
}
if (indexAll !== -1) {
this.allSelectPatches.splice(indexAll, 1);
this.allSelectPatchName.splice(indexAll, 1);
}
}
Livewire.emit('updateSelectedPatches', this.allSelectPatches, this.allSelectPatchName);
this.selectedPatchByPage[this.currentPage] = pagePatches;
},
updateSelectedPatchList() {
this.selectedPatch = Object.values(this.selectedPatchByPage).flat();
},
loadSelectedPatch() {
const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
const checkboxes = document.querySelectorAll('.individual-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = pagePatches.includes(checkbox.value);
});
this.updateSelectedPatchList();
},
resetCheckAllCheckbox() {
const checkAllCheckbox = document.getElementById('check-all');
const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
const checkboxes = document.querySelectorAll('.individual-checkbox');
checkAllCheckbox.checked = checkboxes.length > 0 && pagePatches.length === checkboxes
.length;
}
}" x-init="$watch('selectedPatch', () => resetCheckAllCheckbox())">
<style>
.animate-spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="max-w-full mx-auto pb-5 bg-gray-100">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<div class="my-5 flex h-8 place-content-center px-4 ">
<h2 class="text-xl text-slate-800">
Send Patch to Customer
</h2>
<h2 @click="selectedPatches = []; " class="ml-3 text-xl text-slate-800 font-semibold underline underline-offset-4 cursor-pointer">
Send Multi
</h2>
</div>
<div class="flex flex-wrap -mx-3">
<div class="w-full md:w-2/3 px-3 mb-6">
<div class="p-6 bg-white shadow-md rounded-lg">
<div x-show="true" class="">
<div class="flex justify-between mb-5">
<div class="inline-flex flex-initial">
<div x-data="{ isInputActive: true }">
<div class="flex flex-wrap gap-4 px-5 items-center">
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-14 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="black">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<span class="w-64" x-show="isInputActive === true">
<input
class="form-input h-9 peer w-full 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"
placeholder="Search Keyword" type="text"
wire:model.defer="keyword" />
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model.defer="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
@foreach ($searchBy as $key => $by)
<option value="{{ $key }}">{{ $by }}</option>
@endforeach
</select>
</span>
<button type="button" class="bg-primary text-white px-4 py-2 rounded"
wire:click="search">Search</button>
</div>
</div>
</div>
</div>
<div class="mx-3 mt-3 px-4">
<div class="is-scrollbar-hidden min-w-full table-responsive">
<table aria-describedby="mydesc" class="is-hoverable table w-full text-left">
<thead>
<tr>
<th scope="col"
class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
<input
class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" id="check-all" @click="toggleAllCheckboxes" />
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch ID
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch Name
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Description
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Server
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Date
</th>
<th scope="col"
class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Remark
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $patch)
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox individual-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" @click="updateSelectedPatch"
value="{{ $patch->PID }}"
data-patchname = "{{ $patch->PATCHNAME }}" />
</label>
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PID }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2"
data-id="{{ $patch->PID }}">
{{ \Illuminate\Support\Str::limit($patch->PATCHNAME, 40) }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
{{ \Illuminate\Support\Str::limit($patch->PDESC, 40) }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->server }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PDATE }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->Remark }}
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<livewire:delete-modal />
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
</div>
</div>
<livewire:pages.send-patch.send-multi-patch-box :selectedPatches="$selectedPatches">
</div>
</div>
</div>
<!-- example-component.blade.php -->
<div x-data="patchManager()" x-init="$watch('selectedPatch', () => resetCheckAllCheckbox())">
<style>
.animate-spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<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-2/3 px-3 mb-6">
<div class="p-6 bg-white shadow-md rounded-lg">
<div x-show="true" class="">
<div class="flex justify-between mb-5">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Send Multi Patch
</h2>
<div class="inline-flex flex-initial">
<div x-data="{ isInputActive: true }">
<div class="flex flex-wrap gap-4 px-5 items-center">
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-14 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="black">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<span class="w-64" x-show="isInputActive === true">
<input
class="form-input h-9 peer w-full 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"
placeholder="Search Keyword" type="text"
wire:model.defer="keyword" />
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model.defer="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
@foreach ($searchBy as $key => $by)
<option value="{{ $key }}">{{ $by }}</option>
@endforeach
</select>
</span>
<button type="button" class="bg-stone-700 text-white px-4 py-2 rounded"
wire:click="search">Search</button>
</div>
</div>
</div>
</div>
<div class="mx-3 mt-3 px-4">
<div class="is-scrollbar-hidden min-w-full table-responsive">
<table aria-describedby="mydesc" class="is-hoverable table w-full text-left">
<thead>
<tr>
<th scope="col"
class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
<input
class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" id="check-all" @click="toggleAllCheckboxes" />
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch ID
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch Name
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Description
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Server
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Date
</th>
<th scope="col"
class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Remark
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $patch)
<tr
class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox individual-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" x-model="selectedPatch"
value="{{ $patch->PID }}"
wire:click="updateSelectedPatch" />
</label>
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PID }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2"
data-id="{{ $patch->PID }}">
{{ \Illuminate\Support\Str::limit($patch->PATCHNAME, 40) }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
{{ \Illuminate\Support\Str::limit($patch->PDESC, 40) }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->server }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PDATE }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->Remark }}
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<livewire:delete-modal />
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
</div>
</div>
<livewire:pages.send-patch.send-multi-patch-box>
</div>
</div>
{{-- <div x-show="showModal" x-data="{ showModal: false }" @patchInserted.window="showModal = true"
x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90"
class="fixed z-10 inset-0 overflow-y-auto">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div x-show="showModal" class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div x-show="showModal"
class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div>
<div class="mt-3 text-center sm:mt-5">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
Inserted Patch IDs
</h3>
<div class="mt-2">
<ul>
@foreach ($insertedIds as $id)
<li>{{ $id }}</li>
@endforeach
</ul>
</div>
</div>
</div>
<div class="mt-5 sm:mt-6">
<button @click="showModal = false" type="button"
class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:text-sm">
Close
</button>
</div>
</div>
</div>
</div> --}}
<script>
function patchManager() {
return {
selectedPatch: [],
selectedPatchByPage: {},
currentPage: @entangle('page'), // Bind currentPage to Livewire 'page' variable
// init() {
// this.$watch('currentPage', (value) => {
// this.loadSelectedPatch();
// this.resetCheckAllCheckbox();
// });
// this.$watch('selectedPatch.length', () => {
// this.resetCheckAllCheckbox();
// });
// this.loadSelectedPatch();
// },
toggleAllCheckboxes(event) {
const checkboxes = document.querySelectorAll('.individual-checkbox');
const isChecked = event.target.checked;
checkboxes.forEach(checkbox => {
checkbox.checked = isChecked;
@this.call('updateSelectedPatch', checkbox.value);
// this.updatePatchSelection(checkbox.value, isChecked);
});
this.updateSelectedPatchList();
},
// updateSelectedPatch(event) {
// this.updatePatchSelection(event.target.value, event.target.checked);
// this.updateSelectedPatchList();
// },
// updatePatchSelection(patch, isSelected) {
// const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
// if (isSelected) {
// if (!pagePatches.includes(patch)) {
// pagePatches.push(patch);
// }
// } else {
// const index = pagePatches.indexOf(patch);
// if (index !== -1) {
// pagePatches.splice(index, 1);
// }
// }
// this.selectedPatchByPage[this.currentPage] = pagePatches;
// },
// updateSelectedPatchList() {
// this.selectedPatch = Object.values(this.selectedPatchByPage).flat();
// },
// loadSelectedPatch() {
// const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
// const checkboxes = document.querySelectorAll('.individual-checkbox');
// checkboxes.forEach(checkbox => {
// checkbox.checked = pagePatches.includes(checkbox.value);
// });
// this.updateSelectedPatchList();
// },
// resetCheckAllCheckbox() {
// const checkAllCheckbox = document.getElementById('check-all');
// const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
// const checkboxes = document.querySelectorAll('.individual-checkbox');
// checkAllCheckbox.checked = checkboxes.length > 0 && pagePatches.length === checkboxes.length;
// },
// sendSelectedPatches() {
// @this.call('setPagePatches', this.selectedPatch);
// @this.call('sendPatch');
// }
}
}
</script>
</div>
<div class="border-0 shadow-none">
<div wire:loading.class="" wire:loading.class.remove="hidden" wire:target="save"
class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
<div class="flex justify-center items-center ">
<div class="items-center h-100vh" style="align-content: center;">
<div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
</div>
</div>
</div>
<div class="bg-main-container rounded-md">
<div class="max-w-full mx-auto px-5 text-left flex flex-col items-start">
<h2 class="text-2xl text-black ">
Send Patch to Customer
</h2>
<a href="/send-patch" type="button" class="btn m-3 text-white bg-primary px-3 py-2">Back</a>
</div>
<div class="" x-data="{ tomGReady: false }" x-show="tomGReady">
<div class="mb-4">
<div class="grid grid-cols-4 gap-2 ">
<div class="bg-white col-span-1 p-6 rounded-lg shadow-md">
<!-- Server Information Group -->
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-900 mb-2">Server Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="server_of" class="block text-sm font-medium text-gray-700">Server of</label>
<select id="server_of" name="server_of" wire:model="selectedOwnerType"
class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<option value="">Please Select</option>
@foreach ($ownerType as $type)
<option value="{{ $type->owntype_code }}">{{ $type->owntype_description }}</option>
@endforeach
</select>
</div>
</div>
</div>
<!-- Company & Database Information Group -->
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-900 mb-2">Company & Database Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="company" class="block text-sm font-medium text-gray-700">Company</label>
<input type="text" id="company" name="company"
class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="db_type" class="block text-sm font-medium text-gray-700">DB Type</label>
<input type="text" id="db_type" name="db_type"
class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
</div>
</div>
<!-- Additional Information Group -->
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-900 mb-2">Additional Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="cur_ver" class="block text-sm font-medium text-gray-700">Cur. Ver.</label>
<input type="text" id="cur_ver" name="cur_ver"
class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="hscode_method" class="block text-sm font-medium text-gray-700">HSCODE 2017 Method</label>
<select id="hscode_method" name="hscode_method"
class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<option>Please Select</option>
<!-- Options -->
</select>
</div>
</div>
</div>
<!-- Company Select Group -->
<div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Company Selection</h3>
<div>
<label for="company_select" class="block text-sm font-medium text-gray-700">Company</label>
<select id="company_select" name="company_select"
class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<option>Please select company</option>
<!-- Options -->
</select>
</div>
</div>
</div>
<div wire:ignore class="col-span-3">
<label for="server_key" class="block text-sm font-medium text-gray-700">Server Key</label>
<input id="server_key" class="mt-1.5 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
x-data="{
serverKeyLists: @entangle('server_lists'),
serverKeyOption: @entangle('serverKeyOption')
}"
x-init="serverKeyLists = [];
const tempLicense = pages.serverLicenseSelect;
tempLicense.serverkey.options = serverKeyOption;
$el._x_tom = new Tom($el, {
...tempLicense.serverkey,
onChange: (value) => {
serverKeyLists = value;
}
});
$el._x_tom.setValue(serverKeyLists);
tomGReady = true;"
type="text" placeholder="Search Server Key">
</div>
</div>
</div>
<div class="flex justify-end mb-4 space-x-2">
<button type="button" wire:click="sendPatch"
class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus">Send</button>
{{-- <button class="btn bg-stone-600 text-white px-4 py-2 rounded hover:bg-stone-700">Resend</button> --}}
</div>
<div class="mb-4">
<h3 class="text-xl font-medium leading-6 text-black">Server list</h3>
</div>
<div class="flex px-5 items-center justify-end mb-3" x-data="{ isInputActive: false }">
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-14 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="black">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<span class="w-64" x-show="isInputActive === true">
<input
class="form-input h-9 peer w-full 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"
placeholder="Search Keyword" type="text" wire:model="keyword" />
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
<option value="SNKEY">Server Key</option>
<option value="COMPANY">Company</option>
</select>
</span>
</div>
<div class="is-scrollbar-hidden min-w-full table-responsive">
<table aria-describedby="mydesc" class="min-w-full is-hoverable table w-full divide-y divide-gray-200">
<thead>
<tr>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Choose</th>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Server ID</th>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Company</th>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Serverkey</th>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Status</th>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Task Date</th>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Action</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@foreach ($results as $server)
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox"
class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ $server->ServerID }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ $server->COMPANY }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->SNKEY }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->STATUS }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ $server->TaskDate }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
@if ($server->TaskStatus == '999')
<button type="button" wire:click="resendPatch({{ $server->ServerID }})"
class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25"><i
class="fa fa-repeat" aria-hidden="true"></i></button>
@else
<button type="button" wire:click="deletePatch({{ $server->ServerID }})"
class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25"><i
class="fa fa-trash" aria-hidden="true"></i></button>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="mt-4">
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
</div>
</div>
<div class="border-0 shadow-none" x-data="{
open: @entangle('showSearch'),
serverKeySuccess: [],
serverKeyWaitingSend: [],
loading: false,
allKeys: @entangle('resultsServerkeyArr'),
serverKeySelectAll() {
console.log('test');
this.allKeys.forEach(key => {
if (!this.serverKeyWaitingSend.some(item => item.id == key.ID)) {
this.serverKeyWaitingSend.push({ id: key.ID, value: key.SNKEY });
}
});
},
serverKeySelect(id, value) {
if (!this.serverKeyWaitingSend.some(item => item.id == id)) {
this.serverKeyWaitingSend.push({ id, value });
}
},
removeServerKey(id) {
this.serverKeyWaitingSend = this.serverKeyWaitingSend.filter(item => item.id !== id);
},
sendPatch() {
this.loading = true;
Livewire.emit('sendPatch', this.serverKeyWaitingSend);
this.serverKeyWaitingSend = [];
}
}">
<div wire:loading.class="" wire:loading.class.remove="hidden" wire:target="save"
class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
<div class="flex justify-center items-center ">
<div class="items-center h-100vh" style="align-content: center;">
<div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
</div>
</div>
</div>
<div class="mt-5 mb-2 flex h-8 place-content-center px-4 " x-data="{ serverKeyWaitingSend2: @entangle('serverKeyWaitingSend') }">
<h2 class="text-xl text-slate-800">
Send Patch to Customer
</h2>
<h2 @click="serverKeySuccess = [], serverKeyWaitingSend2= [] "
class="ml-3 text-xl text-slate-800 font-semibold underline underline-offset-4 cursor-pointer">
Send
</h2>
<h2 class="ml-3 text-xl text-slate-800 font-semibold underline underline-offset-4 cursor-pointer">
<a href="{{ route('patch.edit', ['editPid' => $PID]) }}" target="_blank">
{{ $patchName }}
</a>
</h2>
</div>
<a href="/send-patch" type="button" class="btn ml-1 my-3 text-white bg-primary px-3 py-2">Back</a>
<div class="rounded-md">
<div class="" x-data="{ tomGReady: false }" x-show="true">
<div class="mb-4">
<div class="grid grid-cols-12 gap-2 ">
<div class="col-span-3 p-6 rounded-lg shadow-md card">
<!-- Server Information Group -->
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-900 mb-2">Server Key</h3>
<div class="grid grid-cols-1 gap-4">
<div class="relative">
<div class="relative flex items-center w-full">
<input type="text"
class="form-input h-9 peer w-full 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"
wire:model.debounce.1000ms="serverkey" placeholder="Search for a server key">
<span wire:loading
wire:target="serverkey, selectedOwnerType, company, db_type, cur_ver, selectAllResults"
class="absolute right-3">
<svg class="animate-spin h-5 w-5 text-black"
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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</span>
</div>
@if ($showSearch)
<ul x-show="open" @click.away="open = false"
class="absolute left-0 right-0 border border-gray-200 rounded-md max-h-64 overflow-auto z-50 bg-white">
<li class="p-2 bg-gray-200 hover:bg-gray-300 cursor-pointer font-semibold"
{{-- wire:click="selectAllResults" --}} @click="serverKeySelectAll()">
Select All
</li>
@forelse($resultsServerkey as $result)
<li class="p-2 hover:bg-gray-100 cursor-pointer active:bg-[#065f46]"
@click="serverKeySelect('{{ $result->ID }}', '{{ $result->SNKEY }}')"
value="{{ $result->SNKEY }}">
{{ $result->SNKEY }}
</li>
@empty
<li class="p-2 text-gray-500">No results found</li>
@endforelse
</ul>
@endif
</div>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-900 mb-2">Server Information</h3>
<div class="grid grid-cols-1 gap-4">
<div>
<select id="server_of" name="server_of" wire:model="selectedOwnerType"
class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<option value="">Please Select</option>
@foreach ($ownerType as $type)
<option value="{{ $type->owntype_code }}">
{{ $type->owntype_description }}
</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="mb-6 ">
<h3 class="text-lg font-medium text-gray-900 mb-2">Company Information </h3>
<div class="grid grid-cols-1 gap-4">
<div>
<input type="text" id="company" name="company" wire:model='company'
class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
</div>
</div>
<div class="mb-6 ">
<h3 class="text-lg font-medium text-gray-900 mb-2">Database </h3>
<div class="grid grid-cols-1 gap-4">
<div>
<input type="text" id="db_type" name="db_type" wire:model='db_type'
class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
</div>
</div>
<div class="mb-6 ">
<h3 class="text-lg font-medium text-gray-900 mb-2">Current Version</h3>
<div class="grid grid-cols-1 gap-4">
<div>
<input type="text" id="cur_ver" name="cur_ver" wire:model='cur_ver'
class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
</div>
</div>
</div>
<div class="card p-6 rounded-lg shadow-md col-span-4">
<h3 class="text-lg font-medium text-gray-900 mb-2">Server key waiting to send</h3>
<div id="serverkey-list" class="overflow-y-auto max-h-[70vh]">
<div class="bg-gray m-3">
<template x-for="(serverkey, index) in serverKeyWaitingSend" :key="index">
<div class="flex items-center bg-[#3d6a4d] text-white w-full px-4 py-2 rounded m-1">
<span class="flex-grow" x-text="serverkey.value"></span>
<button @click="removeServerKey(serverkey.id)" class="ml-2">
<i aria-hidden="true" class="fas fa-trash-alt"></i>
</button>
</div>
</template>
</div>
</div>
</div>
<div class="grid grid-cols-1 place-items-center">
<div class="rounded-lg">
<div class="flex justify-center items-center mb-4 space-x-2">
<button type="button" @click="sendPatch" x-show="!loading"
class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus">Send</button>
<span x-show="loading" class="relative ">
<svg class="animate-spin h-8 w-8 text-black" 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="#1B4332" stroke-width="4"></circle>
<path class="opacity-75" fill="#1B4332"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</span>
</div>
</div>
</div>
<div class="card p-6 rounded-lg shadow-md col-span-4">
<h3 class="text-lg font-medium text-gray-900 mb-2">Server key send success</h3>
<div x-init="Livewire.on('patchSent', server => {
loading = false;
serverKeySuccess.push(server);
});">
<template x-for="server in serverKeySuccess" :key="server.id">
<div class="bg-[#009332] text-white p-2 rounded mb-2">
Success: <span x-text="server.value"></span>
</div>
</template>
</div>
</div>
</div>
</div>
<div class="mb-1">
<h3 class="text-xl font-medium leading-6 text-black my-3"><i aria-hidden="true" aria-hidden="true"
class="fa fa-server mr-3"></i>Server list</h3>
</div>
<div class="is-scrollbar-hidden min-w-full table-responsive card p-4 mb-4">
<div class="flex justify-between">
<div class="flex items-center justify-start mb-3">
<span class="cursor-pointer text-black p-2 rounded-lg hover:bg-primary hover:text-white mr-3"
onclick="confirmDeleteSelected()"><i class="fa fa-trash" aria-hidden="true"></i>
Delete</span>
<span class="cursor-pointer text-black p-2 rounded-lg hover:bg-primary hover:text-white"
wire:click="export"><i class="fa fa-download" aria-hidden="true"></i> Export</span>
<span wire:loading wire:target="export,deleteSelected" class="relative ">
<svg class="animate-spin h-5 w-5 text-black" 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</span>
</div>
<div class="flex px-5 items-center justify-end mb-3" x-data="{ isInputActive: false }">
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-14 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="black">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<span class="w-64" x-show="isInputActive === true">
<input
class="form-input h-9 peer w-full 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"
placeholder="Search Keyword" type="text" wire:model="keyword" />
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
<option value="SNKEY">Server Key</option>
<option value="COMPANY">Company</option>
</select>
</span>
</div>
</div>
<table aria-describedby="mydesc"
class="min-w-full is-hoverable table w-full divide-y divide-gray-200">
<thead>
<tr>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Choose</th>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Server ID</th>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Company</th>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Serverkey</th>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Status</th>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Task Date</th>
<th scope="col"
class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
Action</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@foreach ($results as $server)
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<label class="inline-flex items-center space-x-2">
@if ($server->TaskStatus == '999')
@else
<input
class="form-checkbox individual-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" wire:model.defer="selectedPenddings"
value="{{ $server->ServerID }}"
data-serverId = "{{ $server->ServerID }}" />
@endif
</label>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ $server->ServerID }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ $server->COMPANY }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->SNKEY }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ $server->STATUS }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ $server->TaskDate }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
@if ($server->TaskStatus == '999')
<button type="button" wire:click="resendPatch({{ $server->ServerID }})"
class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25"><i
class="fa fa-repeat" aria-hidden="true"></i></button>
@else
<button type="button" wire:click="deletePatch({{ $server->ServerID }})"
class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25"><i
class="fa fa-trash" aria-hidden="true"></i></button>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="mt-4">
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
<div>
&nbsp;
</div>
</div>
</div>
</div>
<div class="border-0 shadow-none">
<div wire:loading.class="" wire:loading.class.remove="hidden" wire:target="save"
class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
<div class="flex justify-center items-center ">
<div class="items-center h-100vh" style="align-content: center;">
<div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
</div>
</div>
</div>
<div class="m-2">
@if ($action === 'list')
<div x-data="{ show: @entangle('showMessage'), message: '' }" x-init="window.addEventListener('show-message', event => {
show = true;
message = event.detail.message;
console.log(show, message);
setTimeout(() => { show = false, console.log(show, message); }, 3000);
});">
<div x-show.transition.duration.500ms="show" x-cloak
class="fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg">
{{ $message }}
</div>
</div>
<div class="my-5 flex h-8 place-content-center px-4 ">
<h2 class="text-xl text-slate-800">
Send Patch to Customer
</h2>
</div>
<div class="pb-4 card shadow-lg p-4">
<div class="flex justify-between">
<div class="px-2 ml-4">
</div>
<div class="inline-flex flex-initial">
<div x-data="{ isInputActive: true }">
<div class="flex flex-wrap gap-4 px-5 items-center">
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-14 rounded-full p-0 hover:bg-primary-focus hover:text-main-container active:text-main-container focus:text-main-container 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="black">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<span class="w-64" x-show="isInputActive === true">
<input
class="form-input h-9 peer w-full 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"
placeholder="Search Keyword" type="text" wire:model.defer="keyword" />
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model.defer="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-main-container px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
@foreach ($searchBy as $key => $by)
<option value="{{ $key }}">{{ $by }}</option>
@endforeach
</select>
</span>
<button type="button"
class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus"
wire:click="search">Search</button>
</div>
</div>
</div>
</div>
<div class="mx-3 mt-3 px-4">
<div class="is-scrollbar-hidden min-w-full table-responsive" x-data="pages.tables.initExample1">
<table aria-describedby="mydesc" class="is-hoverable table w-full text-left text-black">
<thead>
<tr>
<th scope="col"
class="whitespace-nowrap text-center rounded-tl-lg bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Patch ID
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch Name
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Description
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Server
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Date
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Level
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Remark
</th>
<th scope="col"
class="whitespace-nowrap rounded-tr-lg bg-slate-300 text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Action
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $patch)
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-1 py-3 sm:px-2 text-center">{{ $patch->PID }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PATCHNAME }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
{{ \Illuminate\Support\Str::limit($patch->PDESC, 40) }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->NUMSERVER }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PDATE }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PLEVEL }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->Remark }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
<div class="flex justify-center space-x-2">
<a wire:click="showpatchEditForm({{ $patch->PID }})"
class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
<i aria-hidden="true" class="fa fa-edit"></i>
</a>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
{{-- <livewire:delete-modal /> --}}
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
@elseif($action === 'edit')
<livewire:pages.send-patch.send-patch-edit :editPid="$editPid">
@endif
</main>
</div>
<div class=" p-4">
<div class="max-w-6xl mx-auto bg-white rounded-lg">
<!-- Header -->
<div class="text-black p-4 rounded-t-lg flex justify-between items-center">
<h1 class="text-lg font-semibold">{{ $company }} (SN={{ $serverKey }}):: CSV Mapping</h1>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
Export Query
</button>
</div>
<!-- Table Section -->
<div class="overflow-x-auto p-4">
<table aria-describedby="mydesc" class="min-w-full bg-white border border-gray-300">
<thead>
<tr class="bg-slate-300 text-gray-700">
<th scope="col" class="py-2 px-4 border-b">ID</th>
<th scope="col" class="py-2 px-4 border-b">Map Name</th>
<th scope="col" class="py-2 px-4 border-b">Map Type</th>
<th scope="col" class="py-2 px-4 border-b">Map To</th>
<th scope="col" class="py-2 px-4 border-b">Map Config</th>
</tr>
</thead>
<tbody>
@if (count($mappingList) > 0)
@foreach ($mappingList['mapId'] as $index => $mapId)
<tr class="border-b">
<td class="py-2 px-4 border">{{ $index + 1 }}</td>
<td class="py-2 px-4 border w-1/4"><input type="text"
class="w-3/4 p-2 border border-gray-300 rounded-md"
wire:model.defer="mappingList.mapName.{{ $index }}" /></td>
<td class="py-2 px-4 border"><input type="text"
class="w-3/4 p-2 border border-gray-300 rounded-md"
wire:model.defer="mappingList.mapType.{{ $index }}" /></td>
<td class="py-2 px-4 border"><input type="text"
class="w-3/4 p-2 border border-gray-300 rounded-md"
wire:model.defer="mappingList.mapTo.{{ $index }}" /></td>
<td class="py-2 px-4 border w-2/4">
<textarea class="w-full p-1 border rounded" wire:model.defer="mappingList.mapConfig.{{ $index }}"></textarea>
</td>
</tr>
@endforeach
@endif
</tbody>
</table>
<div class="p-4">
<button wire:click="saveMapping"
class="bg-primary hover:bg-primary-focus text-white font-bold py-2 px-4 rounded">
Save
</button>
</div>
</div>
</div>
</div>
<div class=" p-4">
<div class="max-w-full mx-auto bg-white rounded-lg">
<!-- Header -->
<div class="text-black p-4 rounded-t-lg flex justify-between items-center">
<h1 class="text-lg font-semibold">{{ $company }} (SN={{ $serverKey }}):: MAINVAR.inc</h1>
<button wire:click="downloadAllFile" class="bg-info hover:info-focus text-white font-bold py-2 px-4 rounded">
Download
</button>
</div>
<div class="overflow-x-auto p-4">
<table aria-describedby="mydesc" class="is-hoverable table w-full text-left border-b">
<thead>
<tr>
<th scope="col"
class="whitespace-nowrap rounded-tl-md bg-slate-300 px-4 py-1 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
#
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-2 py-1 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
File Name
</th>
<th scope="col"
class="whitespace-nowrap rounded-tr-md bg-slate-300 px-2 py-1 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Action
</th>
</tr>
</thead>
<tbody>
@if (count($fileNameList) > 0)
@foreach ($fileNameList as $key => $file)
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="py-2 px-4 border w-32">
{{ $key + 1 }}
</td>
<td class="py-2 px-4 border w-32">
{{ $file }}
</td>
<td class="whitespace-nowrap px-1 py-1 sm:px-2">
<div class="flex justify-center space-x-2">
<a wire:click="downloadFile('{{ $key }}')" href="javascript:void(0)"
class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
<i aria-hidden="true" class="fa fa-download"></i>
</a>
</div>
</td>
</tr>
@endforeach
@endif
</tbody>
</div>
</div>
</div>