<div class="max-w-lg mx-auto p-8 bg-white shadow-lg rounded-lg">
<div class="mx-auto ">
<form wire:submit.prevent="updateExchangerate" class="space-y-3">
<div class="mb-2">
<label for="currency" class="block text-sm font-medium text-gray-700">Currency</label>
<input type="text" wire:model.defer="currency" id="currency"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
@error('currency')
<span class="text-red-500">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
<label for="exdate" class="block text-gray-700">Expired date</label>
<input type="date" id="exdate"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
wire:model.defer="exdate">
@error('exdate')
<span class="text-red-500">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
<label for="finishdate" class="block text-gray-700">Finish date</label>
<input type="date" id="finishdate"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
wire:model.defer="finishdate">
</div>
<div class="mb-2">
<label for="rate" class="block text-sm font-medium text-gray-700">Rate</label>
<input type="text" wire:model.defer="rate" id="rate"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
</div>
<div class="mb-2">
<label for="baht" class="block text-sm font-medium text-gray-700">Baht</label>
<input type="text" wire:model.defer="baht" id="baht"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
</div>
<div class="mb-2">
<label for="exbaht" class="block text-sm font-medium text-gray-700">Export Baht</label>
<input type="text" wire:model.defer="exbaht" id="exbaht"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
</div>
<div class="flex justify-end space-x-4 mt-4">
<a href="/exchange-rate" type="button"
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Cancel</a>
<button type="submit"
class="bg-primary inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Update
</button>
</div>
</form>
</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="my-5 flex h-8 place-content-center px-4 ">
<h2 class="text-xl text-slate-800">
Exchange Rate
</h2>
<h2 class="ml-3 text-xl text-slate-800 font-semibold underline underline-offset-4">
{{ $action === 'add' ? 'Create' : ($action === 'edit' ? 'Edit' : '') }}
</h2>
</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="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="showexchangerateAddForm">Add</button>
<button type="button" class="py-2 px-3 bg-primary rounded-md text-white hover:bg-primary-focus"
onclick="confirmDeleteSelected()">Delete</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-200 px-4 py-3 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-200 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Currency
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Expired date
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Finish date
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Rate
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Baht
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Export Baht
</th>
<th scope="col"
class="whitespace-nowrap rounded-tr-lg bg-slate-200 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 $exc)
<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 hover:bg-white checked:hover:bg-primary 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="selectedExchangerates"
value="{{ $exc->currency }},{{ $exc->exdate }}" />
</label>
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $exc->currency }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $exc->exdate }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $exc->finishdate }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $exc->rate }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $exc->baht }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $exc->exbaht }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
<div class="flex justify-center space-x-2">
<a wire:click="showexchangerateEditForm('{{ $exc->currency }}', '{{ $exc->exdate }}')"
class="btn h-8 w-8 p-0 ">
<i aria-hidden="true" class="fa fa-edit"></i>
</a>
<a onclick="confirmDelete2('{{ $exc->currency }}', '{{ $exc->exdate }}')"
class="btn h-8 w-8 p-0 ">
<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.exchangerate.exchangerate-create>
@elseif($action === 'edit')
@livewire('pages.exchangerate.exchangerate-edit', ['currency' => $editCurrency, 'exdate' => $editExdate])
@endif
</div>
@vite(['resources/js/sweetalert.js'])
<script src="{{ asset('js/confirmDelete.js') }}"></script>
</div>
<div class="bg-main-container" x-data="{ notLimit: false }">
<div class="max-w-full mx-auto p-6">
<div class="mt-5 mb-2 flex h-8 place-content-center px-4 ">
<h2 class="text-xl text-slate-800">
Patch Exchange Rate
</h2>
<h2 class="ml-3 text-xl text-slate-800 font-semibold underline underline-offset-4">
Create
</h2>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
@if (session()->has('message'))
<div class="mt-4 p-4 bg-green-100 text-green-800 rounded-lg">
{{ session('message') }}
</div>
@endif
<div class="mb-4">
<div class="flex items-center mt-2">
<label for="upload_file" class="block text-gray-700 font-medium mr-5">Upload File Data</label>
@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>
</label>
</div>
@error('file')
<span class="text-red-600 text-sm mt-2">{{ $message }}</span>
@enderror
</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="updatePatch"
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">Update 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="upload">
Upload
</button>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<form wire:submit.prevent="save">
@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="flex items-center">
<label class="w-2/12 mr-2">
<span>Name :</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="name"
class="form-input w-2/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="" name="name" type="text" value="{{ old('name') }}" />
@error('name')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</span>
</div>
<div class="flex items-center">
@if ($file)
<div class="mt-2 text-sm text-slate-600 dark:text-slate-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-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
aria-label="Upload File">
<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="size-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="error">{{ $message }}</span>
@enderror
</label>
</div>
</div>
<div class="grid grid-cols-12 justify-center space-x-2 pt-4">
<a href="/format-file-master"
class="col-start-4 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
</a>
<button type="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>
</form>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<form wire:submit.prevent="save">
@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="flex items-center">
<label for="" class="w-2/12 mr-2">
<span>Name :</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="name"
class="form-input w-2/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="" name="name" type="text" value="{{ old('name') }}" />
@error('name')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</span>
</div>
<div class="flex items-center">
@if ($file)
<div class="mt-2 text-sm text-slate-600 dark:text-slate-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-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
aria-label="Upload File">
<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="size-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="error">{{ $message }}</span>
@enderror
</label>
</div>
</div>
<div class="grid grid-cols-12 justify-center space-x-2 pt-4">
<a href="/format-file-master"
class="col-start-4 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
</a>
<button type="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>
</form>
</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="my-5 flex h-8 place-content-center px-4 ">
<h2 class="text-xl text-slate-800">
Master File Format
</h2>
<h2 class="ml-3 text-xl text-slate-800 font-semibold underline underline-offset-4">
{{ $action === 'create' ? 'Create' : ($action === 'edit' ? 'Edit' : '') }}
</h2>
</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="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 bg-main-container rounded-md">
<div class="card py-4">
<div class="flex justify-between">
<div class="flex ">
<div class="px-1 ml-5">
<button type="button"
class="py-2 px-3 bg-primary rounded-md text-white hover:bg-primary-focus"
wire:click="showAddForm"><i aria-hidden="true" aria-hidden="true"
class="fa fa-add fa-solid"></i>Add</button>
</div>
</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 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 border-b">
<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">
#
</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">
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">
File
</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">
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">
Timestamp
</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 $formatFile)
<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 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="{{ $formatFile->formatservice_ID }}" />
</label>
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $formatFile->name }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
{{ \Illuminate\Support\Str::limit($formatFile->file, 100) }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $formatFile->date }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $formatFile->timestamp }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
<div class="flex justify-center space-x-2">
<a wire:click="showEditForm({{ $formatFile->formatservice_ID }})"
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({{ $formatFile->formatservice_ID }})"
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>
</div>
@elseif($action === 'add')
<livewire:pages.format-file-master.file-create />
@elseif($action === 'edit')
<livewire:pages.format-file-master.file-edit :editId="$editId" />
@endif
</div>
</div>
<div class="bg-main-container">
<link href="{{ asset('css/pages/patch.css') }}" rel="stylesheet">
<div class="max-w-full mx-auto px-5 ">
<h2 class="text-2xl text-black ">
Patch Management
</h2>
<a type="button" href="/patch" class="btn mx-auto m-3 text-white bg-primary px-3 py-2">Back</a>
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<div class="flex flex-wrap -mx-3 ">
<div class="w-full md:w-1/2 px-3 mb-6 ">
<div x-data="{
searchQuery: 'SPN64Bits',
selectedBranch: @entangle('selectedBranch'),
selectedProject: @entangle('selectedProject'),
projects: @entangle('projects').defer,
branches: @entangle('branches').defer,
fileChanges: @entangle('fileChanges').defer,
isLoading: false,
fetchProjects() {
this.isLoading = true;
this.selectedProject = '60';
this.$wire.set('searchProject', this.searchQuery);
},
fetchBranches() {
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>
{{-- <template x-if="selectedProject"> --}}
{{-- <template x-if="true">
<div class="mb-3">
<label for="branch" class="form-label w-64 text-lg mr-2">Select Branch:</label>
<select x-model="selectedBranch" id="branch"
class="ml-2 w-64 h-8 mt-1 border border-gray-300 rounded-md">
<option value="">Choose Branch</option>
<template x-for="branch in branches" :key="branch.name">
<option :value="branch.name" x-text="branch.name"></option>
</template>
</select>
</div>
</template> --}}
<div class="mb-3">
<input type="text" value="c5d80f79" wire:model.defer="startCommit" placeholder="Start Commit"
class="placeholder:text-sm text-lg mb-2 form-input rounded-lg border border-slate-300 px-2">
<input type="text" value="254e87" wire:model.defer="endCommit" placeholder="End Commit"
class="placeholder:text-sm text-lg mb-2 form-input rounded-lg border border-slate-300 px-2">
<div class="text-center">
<button type="button" wire:click="getChangedFiles"
class="btn mx-auto mt-3 text-white bg-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">
<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">
<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">
</div>
<div class="mb-4">
<label for="patch_date" class="block text-gray-700">Patch date</label>
<input type="datetime-local" id="patch_date"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" wire:model.defer="PDATE">
</div>
<div class="mb-4">
<label for="php_version" class="block text-gray-700">PHP Version</label>
<select id="php_version" wire:model.defer="PHP_VERSION"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
<option value="0">ALL</option>
<option value="1">32Bits (PHP 5.2)</option>
<option value="2">64Bits (PHP 5.6)</option>
<option value="3">64Bits (PHP 8.0)</option>
</select>
</div>
<div class="mb-4">
<label for="patch_level" class="block text-gray-700">Patch level</label>
<input type="text" id="patch_level" class="w-full mt-1 p-2 border border-gray-300 rounded-md"
wire:model.defer="PLEVEL">
</div>
<div class="mb-4">
<label for="code" class="block text-gray-700">Patch Code</label>
<input type="text" id="code" wire:model.defer="PCODE"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="major_version" class="block text-gray-700">Major version</label>
<input type="text" id="major_version"
class="w-full mt-1 p-2 border border-gray-300 rounded-md"
wire:model.defer="MAJOR_VERSION">
</div>
<div class="mb-4">
<label for="pdesc" class="block text-gray-700">Patch Desciption</label>
<input type="text" id="pdesc" wire:model.defer="PDESC"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="remark" class="block text-gray-700">Remark</label>
<input type="text" id="remark" wire:model.defer="Remark"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="owner" class="block text-gray-700">Owner</label>
<input type="text" id="owner" wire:model.defer="POWNER"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" value="aom">
</div>
<div class="mb-4">
<label for="papprovedate" class="block text-gray-700">Papprovedate</label>
<input type="datetime-local" id="papprovedate" wire:model.defer="PAPPROVEDATE"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" value="2024-03-27T15:00">
</div>
<div class="mb-4">
<label for="ptype" class="block text-gray-700">Ptype</label>
<input type="text" id="ptype" wire:model.defer="PTYPE"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="specific_customer" class="block text-gray-700">Specific Customer</label>
<input type="text" id="specific_customer"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="patchcode" class="block text-gray-700">Patchcode</label>
<textarea id="patchcode" wire:model.defer="PATCHCODE" class="w-full mt-1 p-2 border border-gray-300 rounded-md"
rows="5">pathcode</textarea>
</div>
<div class="mb-4">
<label for="uninstall" class="block text-gray-700">Uninstall</label>
<input type="text" id="uninstall" wire:model.defer="UNINSTALL"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" value="$b=1">
</div>
<div class="mb-4">
<label for="patchcode_server" class="block text-gray-700">Patchcode_server</label>
<textarea id="patchcode_server" wire:model.defer="PATCHCODE_SERVER"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" rows="5"></textarea>
</div>
<div class="flex justify-center">
<button type="button" wire:click="save"
class="bg-stone-700 text-white px-4 py-2 rounded-md hover:bg-blue-600">Save</button>
</div>
</div>
</div>
</div>
<livewire:pages.patch.modal-edit-code>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<form wire:submit.prevent="submitForm">
@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="flex items-center w-3/5">
<label class="w-2/12 mr-2">
<span>Name</span>
</label>
<span class="relative flex w-full">
<input
class="form-input w-full 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="name" />
@error('name')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center w-3/5">
<label class="w-2/12 mr-2">
<span>Comapany</span>
</label>
<span class="relative flex w-full">
<select wire:model="company"
class="form-select mt-1.5 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 ($companies as $company)
<option value="{{ $company->id }}"
{{ old('company') == $company->id ? 'selected' : '' }}>{{ $company->name }}
</option>
@endforeach
</select>
</span>
</div>
<div class="flex items-center w-3/5" wire:ignore>
<span class="w-2/12 mr-2">Add Roles :</span>
<span class="relative flex w-full">
<input class="mt-1.5 relative flex w-full " wire:ignore x-data="{ roleLists: @entangle('role_lists') }"
x-init="roleLists = [];
const tempRole = pages.roleSelect;
pages.fetchRoles(tempRole).then(() => {
$el._x_tom = new Tom($el, {
...tempRole.role,
onChange: (value) => {
roleLists = value;
}
});
})" type="text">
</span>
</div>
<div class="flex items-center w-3/5" wire:ignore>
<span class="w-2/12 mr-2">Add Users :</span>
<span class="relative flex w-full">
<input class="mt-1.5 relative flex w-full " wire:ignore x-data="{ userLists: @entangle('user_lists') }"
x-init="userLists = [];
const tempUser = pages.userSelect;
pages.fetchUsers(tempUser).then(() => {
$el._x_tom = new Tom($el, {
...tempUser.user,
onChange: (value) => {
userLists = value;
}
});
})" type="text">
</span>
</div>
</form>
<div class="grid grid-cols-12 justify-center space-x-2 pt-4">
<span wire:click="goBack"
class="col-start-4 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="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 class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6" x-data="{ tomRReady: false, tomUReady: false }" x-show="tomRReady && tomUReady ">
<form wire:submit.prevent="submitEditForm">
@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="flex items-center w-3/5">
<label for="" class="w-2/12 mr-2">
<span>Name</span>
</label>
<span class="relative flex w-full">
<input
class="form-input w-full 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="name" />
@error('name')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center w-3/5">
<label for="" class="w-2/12 mr-2">
<span>Comapany</span>
</label>
<span class="relative flex w-full">
<select wire:model="company"
class="form-select mt-1.5 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 ($companies as $company)
<option value="{{ $company->id }}">{{ $company->name }}</option>
@endforeach
</select>
</span>
</div>
<div class="flex items-center w-3/5" wire:ignore>
<span class="w-2/12 mr-2">Add Roles :</span>
<span class="relative flex w-full">
<input class="mt-1.5 relative flex w-full" wire:ignore x-data="{ roleLists: @entangle('role_lists') }"
x-init="roleLists = @js($groupRoles);
const tempRole = pages.roleSelect;
pages.fetchRoles(tempRole).then(() => {
$el._x_tom = new Tom($el, {
...tempRole.role,
onChange: (value) => {
roleLists = value;
}
});
$el._x_tom.setValue(roleLists);
tomRReady = true
})" type="text">
</span>
</div>
<div class="flex items-center w-3/5" wire:ignore>
<span class="w-2/12 mr-2">Add Users :</span>
<span class="relative flex w-full">
<input class="mt-1.5 relative flex w-full" wire:ignore x-data="{ userLists: @entangle('user_lists') }"
x-init="userLists = @js($groupUsers);
const tempUser = pages.userSelect;
pages.fetchUsers(tempUser).then(() => {
$el._x_tom = new Tom($el, {
...tempUser.user,
onChange: (value) => {
userLists = value;
}
});
$el._x_tom.setValue(userLists);
tomUReady = true
})" type="text">
</span>
</div>
</form>
<div class="grid grid-cols-12 justify-center space-x-2 pt-4">
<span wire:click="goBack"
class="col-start-4 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="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 wire:loading.class="flex" wire:loading.class.remove="hidden" wire:target="showCompanyList"
class="absolute 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="my-5 flex h-8 place-content-center px-4 ">
<h2 class="text-xl text-slate-800">
Group Management
</h2>
<h2 class="ml-3 text-xl text-slate-800 font-semibold underline underline-offset-4">
{{ $action === 'create' ? 'Create' : ($action === 'edit' ? 'Edit' : '') }}
</h2>
</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.selectedGroupsAlpine.includes(groupId)) {
this.selectedGroupsAlpine.push(groupId);
}
} else {
this.selectedGroupsAlpine = this.selectedGroupsAlpine.filter(id => id !== groupId);
}
},
selectedGroupsAlpine: [],
selectedGroups: @entangle('selectedGroups')
}" class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 ">
<div class="card py-4">
<div class="flex justify-between">
<div class="flex ">
<div class="px-1 ml-5">
<button type="button"
class="py-2 px-3 bg-primary rounded-md text-white hover:bg-primary-focus"
wire:click="showGroupCreateForm"><i aria-hidden="true" aria-hidden="true"
class="fa fa-add fa-solid"></i>Add</button>
</div>
<div class=" ml-1">
<a @click.prevent="if (selectedGroupsAlpine.length > 0) { showDeleteListModal = true; } else { showAlert = true;}"
class="py-2 px-3 bg-primary rounded-md text-white hover:bg-primary-focus flex items-center space-x-1">
<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>
</div>
</div>
<div class="inline-flex flex-initial">
<div x-data="{ isInputActive: true }">
<div class="flex flex-wrap gap-3 px-5 items-center">
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-10 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">
@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 text-black">
<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">
Role
</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 text-center 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 $group)
<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" wire:model.defer="selectedGroups"
value="{{ $group->id }}" />
</label>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $group->name }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
@php
$roles = $group->roles->take(5); // Take the first 5 roles
$remainingCount = $group->roles->count() - $roles->count();
@endphp
@foreach ($roles 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
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $group->created_at }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex justify-center space-x-1">
<a wire:click="showGroupEditForm({{ $group->id }})"
class="btn h-8 w-8 p-0 hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i aria-hidden="true" class="fa fa-edit"></i>
</a>
<div>
<a @click="$wire.emit('showDeleteModal', {{ $group->id }})"
class="btn h-8 w-8 p-0 hover:text-white focus:text-white active:bg-error/25">
<i aria-hidden="true" class="fa fa-trash-alt"></i>
</a>
</div>
</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="selectedGroupsAlpine.length"></span> groups?
</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', selectedGroups ); showDeleteListModal = false"
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.group.group-create :roles="$roles" :users="$users" :companies="$companies"
wire:key="group-create" />
@elseif($action === 'edit')
<livewire:pages.group.group-edit :roles="$roles" :users="$users" :companies="$companies" :editGroupId="$editGroupId"
wire:key="group-edit" />
@endif
</div>
<div>
<div id="backgroundDiv" class="w-11/12 mx-auto mt-5 mb-5 pb-5 bg-white/20 rounded-lg shadow-lg backdrop-blur-sm border border-white/30">
<div class="w-10/12 mx-auto pt-5" id="filterDiv">
@if ($errors->any())
{{ $displayCustomizeDiv = false }}
@endif
<h1 class="text-2xl font-bold tracking-tight text-gray-900">Manual Response: Standard Template</h1>
<hr class="my-5">
<div
class="badge space-x-2.5 rounded-full bg-primary text-white shadow-soft shadow-lg shadow-[#1f863680]/50 p-2.5 mb-2">
<div class="size-2 rounded-full bg-current mr-1"></div>
Step 1: Config
</div>
<div class="mx-auto">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3 pb-1">
<label class="block">
<span class="block text-sm font-medium text-slate-700">Message</span>
<span class="relative mt-1.5 mb-0.1 flex">
<select
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"
wire:model="messageId">
<option value="">Select an option</option>
@foreach ($messageTypes as $value => $label)
<option value="{{ $value }}">{{ $label }}</option>
@endforeach
</select>
</span>
@error('messageId')
<span class="text-tiny+ text-error">{{ $message }}</span>
@enderror
</label>
<label class="block">
<span class="block text-sm font-medium text-slate-700">Template</span>
<span class="relative mt-1.5 mb-0.1 flex">
<select
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"
wire:model.defer="templateId">
<option value="">Select an option</option>
@foreach ($responseTemplates as $value => $label)
<option value="{{ $value }}">{{ $label }}</option>
@endforeach
</select>
</span>
@error('templateId')
<span class="text-tiny+ text-error">{{ $message }}</span>
@enderror
</label>
<label class="block">
<span class="block text-sm font-medium text-slate-700">Document Type</span>
<span class="relative mt-1.5 mb-0.1 flex">
<select
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"
wire:model.defer="docType" {{ $disableDocType ? 'disabled' : '' }}>
<option value="">Select an option</option>
@foreach ($docTypes as $value => $label)
<option value="{{ $value }}">{{ $label }}</option>
@endforeach
</select>
</span>
@error('docType')
<span class="text-tiny+ text-error">{{ $message }}</span>
@enderror
</label>
</div>
<div class="flex justify-center items-center py-1">
<button class="bg-primary text-white hover:bg-primary-focus py-2 px-4 rounded-md mr-1" wire:click="gotoCustomize">
<i class="fa-solid fa-arrow-right mr-1"></i>Customize</button>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" wire:model.defer="lockData" @if ($disableLockData) disabled @endif />
<p>Lock Data</p>
</label>
</div>
</div>
</div>
@if ($displayCustomizeDiv)
<div class="w-10/12 mx-auto" id="customizeResponseDiv">
<hr class="my-5">
{{-- <h1 class="text-2xl font-bold tracking-tight text-gray-900">1. Customize Template</h1> --}}
<div
class="badge space-x-2.5 rounded-full bg-primary text-white shadow-soft shadow-lg shadow-[#1f863680]/50 p-2.5 mb-2">
<div class="size-2 rounded-full bg-current mr-1"></div>
Step 2: Customize
</div>
@if (session()->has('error'))
<div x-data="{ show: {{ session()->has('error') ? 'true' : 'false' }} }" x-init="setTimeout(() => show = false, 2000)" x-show="show"
x-transition:leave="transition ease-in duration-1000" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="alert flex rounded-lg bg-error px-4 py-4 text-white sm:px-5">
{{ session('error') }}
</div>
@endif
<div class="flex">
<div class="w-4/12">
<div class="w-12/12 py-1">
@foreach ($xmlData as $key => $value)
{{-- Change $key to Message to use autocomplete message --}}
@if ($key == 'UNUSED')
<label class="block">
<span class="text-sm font-medium text-slate-700">{{ $key }}</span>
<span class="relative mt-1.5 mb-1.5 flex">
<input
class="form-input peer w-full rounded-lg border border-slate-300 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"
type="text" id="{{ $key }}" wire:model="xmlData.{{ $key }}" value="{{ $value }}"
autocomplete="off" />
@if (!empty($masterMsg) && $showSearch)
<ul
class="z-50 border border-gray-200 top-8 rounded-md max-h-64 w-full overflow-auto absolute bg-white mt-1">
@forelse ($masterMsg as $m)
<li class="p-2 hover:bg-gray-100 cursor-pointer"
wire:click="selectMessage('{{ $m->id }}')"> {{ $m->message }}
</li>
@empty
<li class="p-2 text-gray-500">No results found</li>
@endforelse
</ul>
@endif
</span>
</label>
@else
<label class="block">
<span class="text-sm font-medium text-slate-700">{{ $key }}</span>
<span class="relative mt-1.5 mb-1.5 flex">
<input
class="form-input peer w-full rounded-lg border border-slate-300 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"
type="text" id="{{ $key }}" wire:model="xmlData.{{ $key }}" value="{{ $value }}"
autocomplete="off" />
</span>
</label>
@endif
@endforeach
</div>
</div>
<div class="w-8/12 pl-5">
<div>
<span class="block text-sm font-medium text-slate-700 mb-1.5">Preview XML</span>
</div>
<div class="bg-white p-2 rounded-lg">
<!-- Highlight.js Code Block -->
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg p-2" x-data x-init="hljs.highlightElement($el);"><code class="xml">{{ $xmlContent }}</code></pre>
</div>
<div class="flex justify-center items-center pt-1">
<button
class="bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 rounded-md border border-[#e5e7eb] py-2 px-4 mr-1"
wire:click="reGenerateXML">
<i class="fa-solid fa-rotate mr-1"></i>Reload XML</button>
{{-- <button class="bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 rounded-md border border-[#e5e7eb] py-2 px-4 mr-1" wire:click="downloadXML" ><i class="fa fa-download mr-1" aria-hidden="true"></i>Download File</button> --}}
</div>
</div>
</div>
<div class="flex justify-center items-center py-1">
<button class="bg-primary text-white hover:bg-primary-focus font-bold py-2 px-4 rounded-md mr-1"
wire:click="generateAndUploadXml"></i>Submit</button>
</div>
</div>
@endif
@include('livewire.loading-component', ['action' => 'generateAndUploadXml, messageId'])
</div>
<script>
document.addEventListener('livewire:load', () => {
Livewire.on('fileManualDownload', (url) => {
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', '');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
});
</script>
</div>
<div class=" p-6 bg-white shadow-lg rounded-lg">
<style>
.ql-container {
height: 15rem;
}
</style>
<form wire:submit.prevent="submitForm" x-data x-init="const quill = new Quill($refs.editor, {
modules: {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ header: 1 }, { header: 2 }],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: 'sub' }, { script: 'super' }],
[{ indent: '-1' }, { indent: '+1' }],
[{ direction: 'rtl' }],
[{ size: ['small', false, 'large', 'huge'] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }],
[{ font: [] }],
[{ align: [] }],
['clean'],
['image'],
],
handlers: {
image: function() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.onchange = () => {
const file = input.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.src = e.target.result;
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const MAX_WIDTH = 800;
const MAX_HEIGHT = 600;
let width = img.width;
let height = img.height;
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
const resizedImage = canvas.toDataURL('image/jpeg', 0.7);
const range = quill.getSelection();
quill.insertEmbed(range.index, 'image', resizedImage);
};
};
reader.readAsDataURL(file);
}
};
}
}
}
},
placeholder: 'Enter your content...',
theme: 'snow',
});
$refs.submitButton.addEventListener('click', function() {
@this.set('content', quill.root.innerHTML);
});">
@csrf
<div class="mb-6">
<h2
class="font-medium flex items-center 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 Update Form
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="mb-2">
<label for="topic" class="block text-sm font-medium text-gray-700">Topic:</label>
<input type="text" wire:model.defer="topic" id="topic"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
placeholder="Enter Topic">
@error('topic')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
<label for="topicColor" class="block text-sm font-medium text-gray-700">Topic Color:</label>
<input type="color" wire:model.defer="topicColor" id="topicColor"
class="mt-1 block w-full px-4 py-2 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
@error('topicColor')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
<label for="category" class="block text-sm font-medium text-gray-700">Category:</label>
<select id="category" wire:model.defer="category" class="w-full p-2 border border-gray-300 rounded-md">
@foreach ($categories as $key => $cate)
<option value="{{ $key }}">
{{ $cate }}</option>
@endforeach
</select>
@error('category')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
<label for="type" class="block text-sm font-medium text-gray-700">Type:</label>
<select id="type" wire:model.defer="type" class="w-full p-2 border border-gray-300 rounded-md">
@foreach ($types as $key2 => $type)
<option value="{{ $key2 }}">
{{ $type }}</option>
@endforeach
</select>
@error('type')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="md:col-span-2 mb-2">
<label for="description" class="block text-sm font-medium text-gray-700">Description:</label>
<textarea wire:model.defer="description" id="description" rows="3"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
placeholder="Enter Description"></textarea>
@error('description')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="md:col-span-2 mb-2" wire:ignore>
<label for="content" class="block text-sm font-medium text-gray-700">Content:</label>
<div x-ref="editor" class="h-60 max-h-60 overflow-y-auto"></div>
@error('content')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
<label for="issueDate" class="block text-sm font-medium text-gray-700">Issue Date:</label>
<input type="datetime-local" wire:model.defer="issueDate" id="issueDate"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
@error('issueDate')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
<label for="expireDate" class="block text-sm font-medium text-gray-700">Expire Date:</label>
<input type="datetime-local" wire:model.defer="expireDate" id="expireDate"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
@error('expireDate')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
@if ($uploadFilePathName1)
<div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4 flex items-center">
Uploaded File 1: {{ $uploadFilePathName1->getClientOriginalName() }}
<button wire:click.prevent="removeFile('uploadFilePathName1')"
class="ml-1 text-red-600 hover:text-red-800">
<svg 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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
@else
<div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4">
Uploaded File 1
</div>
@endif
<span wire:loading wire:target="uploadFilePathName1">
<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-1"
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
aria-label="Upload File 1">
<input tabindex="-1" id="file-upload-1" type="file" wire:model="uploadFilePathName1"
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="size-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('uploadFilePathName1')
<span class="error">{{ $message }}</span>
@enderror
</label>
</div>
<div class="mb-2">
@if ($uploadFilePathName2)
<div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4 flex items-center">
Uploaded File 2: {{ $uploadFilePathName2->getClientOriginalName() }}
<button wire:click.prevent="removeFile('uploadFilePathName2')"
class="ml-1 text-red-600 hover:text-red-800">
<svg 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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
@else
<div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4">
Uploaded File 2
</div>
@endif
<span wire:loading wire:target="uploadFilePathName2">
<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-2"
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
aria-label="Upload File 1">
<input tabindex="-1" id="file-upload-2" type="file" wire:model="uploadFilePathName2"
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="size-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('uploadFilePathName2')
<span class="error">{{ $message }}</span>
@enderror
</label>
</div>
</div>
<div class="flex justify-end space-x-4 mt-4">
<a href="/news" type="button"
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Cancel</a>
<button type="submit" x-ref="submitButton"
class="px-4 py-2 bg-primary text-white rounded-md shadow-sm hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">Save</button>
</div>
</form>
</div>
<div class=" p-6 bg-white shadow-lg rounded-lg">
<style>
.ql-container {
height: 15rem;
}
</style>
<form wire:submit.prevent="submitForm" x-data x-init="const quill = new Quill($refs.editor, {
modules: {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ header: 1 }, { header: 2 }],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: 'sub' }, { script: 'super' }],
[{ indent: '-1' }, { indent: '+1' }],
[{ direction: 'rtl' }],
[{ size: ['small', false, 'large', 'huge'] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }],
[{ font: [] }],
[{ align: [] }],
['clean'], // remove formatting button
['image'], // Add image upload button
],
handlers: {
image: function() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.onchange = () => {
const file = input.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const range = quill.getSelection();
quill.insertEmbed(range.index, 'image', e.target.result);
};
reader.readAsDataURL(file);
}
};
}
}
}
},
placeholder: 'Enter your content...',
theme: 'snow',
});
quill.clipboard.dangerouslyPasteHTML(@js($content));
$refs.submitButton.addEventListener('click', function() {
@this.set('content', quill.root.innerHTML);
});">
@csrf
<div class="mb-6">
<h2
class="font-medium flex items-center 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 Update Form
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="mb-2">
<label for="topic" class="block text-sm font-medium text-gray-700">Topic:</label>
<input type="text" wire:model.defer="topic" id="topic"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
placeholder="Enter Topic">
@error('topic')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
<label for="topicColor" class="block text-sm font-medium text-gray-700">Topic Color:</label>
<input type="color" wire:model.defer="topicColor" id="topicColor"
class="mt-1 block w-full px-4 py-2 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
@error('topicColor')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
<label for="category" class="block text-sm font-medium text-gray-700">Category:</label>
<select id="category" wire:model.defer="category" class="w-full p-2 border border-gray-300 rounded-md">
@foreach ($categories as $key => $cate)
<option value="{{ $key }}">
{{ $cate }}</option>
@endforeach
</select>
@error('category')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
<label for="type" class="block text-sm font-medium text-gray-700">Type:</label>
<select id="type" wire:model.defer="type" class="w-full p-2 border border-gray-300 rounded-md">
@foreach ($types as $key2 => $type)
<option value="{{ $key2 }}">
{{ $type }}</option>
@endforeach
</select>
@error('type')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="md:col-span-2 mb-2">
<label for="description" class="block text-sm font-medium text-gray-700">Description:</label>
<textarea wire:model.defer="description" id="description" rows="3"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
placeholder="Enter Description"> </textarea>
@error('description')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="md:col-span-2 mb-2" wire:ignore>
<label for="content" class="block text-sm font-medium text-gray-700">Content:</label>
<div x-ref="editor" class="h-60 max-h-60 overflow-y-auto"></div>
@error('content')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
<label for="issueDate" class="block text-sm font-medium text-gray-700">Issue Date:</label>
<input type="datetime-local" wire:model.defer="issueDate" id="issueDate"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
@error('issueDate')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
<label for="expireDate" class="block text-sm font-medium text-gray-700">Expire Date:</label>
<input type="datetime-local" wire:model.defer="expireDate" id="expireDate"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
@error('expireDate')
<span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
@enderror
</div>
<div class="mb-2">
@if ($uploadFilePathName1)
<div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4 flex items-center">
Uploaded File 1: {{ $uploadFilePathName1->getClientOriginalName() }}
<button wire:click.prevent="removeFile('uploadFilePathName1')" class="ml-1 text-red-600 hover:text-red-800">
<svg 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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
@else
<div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4">
Uploaded File 1
</div>
@endif
<span wire:loading wire:target="uploadFilePathName1">
<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-1"
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
aria-label="Upload File 1">
<input tabindex="-1" id="file-upload-1" type="file" wire:model="uploadFilePathName1"
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="size-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('uploadFilePathName1')
<span class="error">{{ $message }}</span>
@enderror
</label>
</div>
<div class="mb-2">
@if ($uploadFilePathName2)
<div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4 flex items-center">
Uploaded File 2: {{ $uploadFilePathName2->getClientOriginalName() }}
<button wire:click.prevent="removeFile('uploadFilePathName2')" class="ml-1 text-red-600 hover:text-red-800">
<svg 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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
@else
<div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4">
Uploaded File 2
</div>
@endif
<span wire:loading wire:target="uploadFilePathName2">
<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-2"
class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
aria-label="Upload File 1">
<input tabindex="-1" id="file-upload-2" type="file" wire:model="uploadFilePathName2"
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="size-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('uploadFilePathName2')
<span class="error">{{ $message }}</span>
@enderror
</label>
</div>
</div>
<div class="flex justify-end space-x-4 mt-4">
<a href="/news" type="button"
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Cancel</a>
<button type="submit" x-ref="submitButton"
class="px-4 py-2 bg-primary text-white rounded-md shadow-sm hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">Save</button>
</div>
</form>
</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="my-5 flex h-8 place-content-center px-4 ">
<h2 class="text-xl text-slate-800">
News & Update
</h2>
<h2 class="ml-3 text-xl text-slate-800 font-semibold underline underline-offset-4">
{{ $action === 'create'? 'Create' :(($action === 'edit')? 'Edit':'') }}
</h2>
</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="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 bg-main-container rounded-md"
x-data="{
showDeleteListModal: @entangle('showDeleteListModal'),
showAlert: false,
toggleGroup(event) {
const groupId = event.target.value;
if (event.target.checked) {
if (!this.selectedNewsAlpine.includes(groupId)) {
this.selectedNewsAlpine.push(groupId);
}
} else {
this.selectedNewsAlpine = this.selectedNewsAlpine.filter(id => id !== groupId);
}
},
selectedNewsAlpine: [],
selectedNews: @entangle('selectedNews')
}"
>
<div class="pb-4 pt-5 bg-white rounded-lg shadow-lg">
<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="showNewsAddForm">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-52" x-show="isInputActive === true">
<select wire:model.defer="searchTypeSelected"
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 ($searchType as $key => $by)
<option value="{{ $key }}">{{ $by }}</option>
@endforeach
</select>
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model.defer="searchCateSelected"
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 ($searchCategory as $key => $by)
<option value="{{ $key }}">{{ $by }}</option>
@endforeach
</select>
</span>
<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 border-b">
<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">
#
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Topic
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Category
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Author Date
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Issue Date
</th>
<th scope="col"
class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Expire Date
</th>
<th scope="col"
class="whitespace-nowrap rounded-tr-lg bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Action
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $news)
<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">
<div 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" wire:model.defer="selectedNews"
value="{{ $news->shippingnetnews_ID }}" />
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
{{ \Illuminate\Support\Str::limit($news->topic, 70) }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $news->groupname??"" }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $news->authorDate }}
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $news->issueDate }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $news->expireDate }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
<div class="flex justify-center space-x-2">
<a wire:click="showNewsEditForm({{ $news->shippingnetnews_ID }})"
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 @click="$wire.emit('showDeleteModal', {{ $news->shippingnetnews_ID }})"
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>
<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="selectedUsersAlpine.length"></span> users?
</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', selectedUsers ); showDeleteListModal = false"
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.news.news-create wire:key="news-create" />
@elseif($action === 'edit')
<livewire:pages.news.news-edit :editNewsId="$editNewsId" wire:key="news-edit" />
@else
<div></div>
@endif
</div>
</div>
<div>
<button type="button" wire:click="$emit('loadPage', 'list')"
class="btn mx-auto m-3 text-white bg-primary px-3 py-2">Back</button>
<div class="max-w-full mx-auto p-6 bg-gray-100">
<div class="w-full px-6 mb-12 flex justify-center">
<div class="p-12 bg-white shadow-md rounded-lg w-1/2">
<h2 class="text-2xl font-bold mb-4">Create Parameter</h2>
<div class="mx-auto p-4">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<form wire:submit.prevent="addParameter">
<div class="mb-4">
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
<input type="text" wire:model.defer="name" id="name"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
@error('name') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="value" class="block text-sm font-medium text-gray-700">Value</label>
<input type="text" wire:model.defer="value" id="value"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
@error('value') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="description" class="block text-sm font-medium text-gray-700">Description</label>
<textarea wire:model.defer="description" id="description"
class="w-full mt-1 p-2 border border-gray-300 rounded-md"></textarea>
@error('description') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="active" class="block text-sm font-medium text-gray-700">Active</label>
<select wire:model.defer="active" id="active"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
@error('active') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<br>
<div class="mb-4">
<label for="detail" class="block text-sm font-medium text-gray-700">More Info</label>
</div>
<div class="mb-4">
<label for="detail" class="block text-sm font-medium text-gray-700">Detail</label>
<textarea wire:model.defer="detail" id="detail"
class="w-full mt-1 p-2 border border-gray-300 rounded-md"></textarea>
@error('detail') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="pageCode" class="block text-sm font-medium text-gray-700">Page Code</label>
<div class="w-full mt-1 p-2 border border-gray-300 rounded-md flex flex-wrap">
@foreach ($searchByPage as $page)
<div class="w-1/2 mb-2 flex items-center">
<input type="checkbox" wire:model.defer="pageCode" value="{{ $page['pagecode'] }}" id="page_{{ $page['pagecode'] }}"
class="mr-2">
<label for="page_{{ $page['pagecode'] }}" class="text-gray-700">{{ $page['pagename'] }}</label>
</div>
@endforeach
</div>
@error('pageCode') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="flex items-center justify-center">
<button type="submit"
class="bg-primary inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div>
<button type="button" wire:click="$emit('loadPage', 'list')"
class="btn mx-auto m-3 text-white bg-primary px-3 py-2">Back</button>
<div class="max-w-full mx-auto p-6 bg-gray-100">
<div class="w-full px-6 mb-12 flex">
<div class="p-12 bg-white shadow-md rounded-lg w-1/2">
<h2 class="text-2xl font-bold mb-4">Edit Parameter</h2>
<div class="mx-auto p-4">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
@if (session()->has('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
<form wire:submit.prevent="updateParameter">
<div class="mb-4">
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
<input type="text" wire:model.defer="name" id="name"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
@error('name') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="value" class="block text-sm font-medium text-gray-700">Value</label>
<input type="text" wire:model.defer="value" id="value"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
@error('value') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="description" class="block text-sm font-medium text-gray-700">Description</label>
<textarea wire:model.defer="description" id="description"
class="w-full mt-1 p-2 border border-gray-300 rounded-md"></textarea>
@error('description') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="active" class="block text-sm font-medium text-gray-700">Active</label>
<select wire:model.defer="active" id="active"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
@error('active') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="detail" class="block text-sm font-medium text-gray-700">Detail</label>
<textarea wire:model.defer="detail" id="detail"
class="w-full mt-1 p-2 border border-gray-300 rounded-md"></textarea>
@error('detail') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="pageCode" class="block text-sm font-medium text-gray-700">Page Code</label>
<div class="w-full mt-1 p-2 border border-gray-300 rounded-md flex flex-wrap">
@foreach ($searchByPage as $page)
<div class="w-1/2 mb-2 flex items-center">
<input type="checkbox" wire:model.defer="pageCode" value="{{ $page['pagecode'] }}" id="page_{{ $page['pagecode'] }}"
class="mr-2">
<label for="page_{{ $page['pagecode'] }}" class="text-gray-700">{{ $page['pagename'] }}</label>
</div>
@endforeach
</div>
@error('pageCode') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="flex items-center justify-center">
<button type="submit"
class="bg-primary inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Save
</button>
</div>
</form>
</div>
</div>
<div class="p-12 bg-white shadow-md rounded-lg w-1/2 ml-4">
<h2 class="text-2xl font-bold mb-4">Upload Image</h2>
<form wire:submit.prevent="uploadImage">
<div class="mb-4">
<label for="newImage" class="block text-sm font-medium text-gray-700">Image</label>
<input type="file" wire:model="newImage" id="newImage"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
@error('newImage') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="category" class="block text-sm font-medium text-gray-700">Parameter</label>
<select wire:model.defer="category" id="category"
class="mt-1 p-2 border border-gray-300 rounded-md">
<option value="1">Enable</option>
<option value="2">Disable</option>
</select>
@error('category') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="flex items-center justify-center">
<button type="submit"
class="bg-primary inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Upload
</button>
</div>
</form>
<div class="mt-6">
<h3 class="text-lg font-medium text-gray-700 mb-2">Uploaded Images</h3>
<div class="flex flex-col gap-4">
@foreach ($images as $image)
<div class="relative">
<img src="data:image/jpeg;base64,{{ $image->imgdetail }}" alt="Image" class="w-full h-auto rounded-md">
<div class="mt-2 text-sm text-gray-700">
<p><strong>Parameter:</strong> {{ $image->category == 1 ? 'Enable' : ($image->category == 2 ? 'Disable' : '') }}</p>
<p><strong>Uploaded By:</strong> {{ $image->uploadBy }}</p>
<p><strong>Uploaded Time:</strong> {{ $image->uploadTime }}</p>
</div>
<button type="button" wire:click="deleteImage({{ $image->imgid }})"
class="absolute top-1 right-1 bg-red-500 text-white p-1 rounded-full hover:bg-red-700">
<i aria-hidden="true" class="fa fa-trash"></i>
</button>
</div>
@endforeach
</div>
</div>
</div>
</div>
<!-- JavaScript to clear file input -->
<script>
document.addEventListener('livewire:load', function () {
@this.on('clearFileInput', function () {
let input = document.getElementById('newImage');
if (input) {
input.value = null;
}
});
});
</script>
<div wire:loading.remove>
<style>
table {
width: 100%;
table-layout: auto;
}
.table-responsive {
overflow-x: auto;
}
</style>
<main 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="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<div class="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">
SPN Parameter
</h2>
</div>
<div class="flex justify-between">
<div class="px-2 ml-4">
<button type="button" class="py-2 px-3 bg-stone-700 rounded-lg text-white"
wire:click="showparameterAddForm">Add</button>
<button type="button" class="py-2 px-3 bg-stone-700 rounded-lg text-white"
onclick="confirmDeleteSelected()">Delete</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-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>
<span class="w-26" x-show="isInputActive === true">
Page
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model.defer="searchSelectedPage"
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 ($searchByPage as $page)
<option value="{{ $page['pagecode'] }}">{{ $page['pagename'] }}</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" x-data="pages.tables.initExample1">
<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">
#
</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">
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">
Value
</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">
Page
</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">
Active
</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">
Action
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $para)
<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 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="selectedParameters"
value="{{ $para->PID }}" />
</label>
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
{{ \Illuminate\Support\Str::limit($para->name, 40) }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $para->value }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2" title="{{ $para->description }}">
{{ \Illuminate\Support\Str::limit($para->description, 40) }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2" title="{{ $para->pageCode }}">
{{ \Illuminate\Support\Str::limit($para->pageCode, 40) }}
</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $para->active }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
<div class="flex justify-center space-x-2">
<a wire:click="showparameterEditForm({{ $para->PID }})"
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>
<a onclick="confirmDelete({{ $para->PID }})"
class="btn h-8 w-8 p-0 text-danger hover:bg-danger/20 focus:bg-danger/20 active:bg-danger/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>
</div>
@elseif($action === 'add')
<livewire:pages.parameter.parameter-create />
@elseif($action === 'edit')
@livewire('pages.parameter.parameter-edit', ['editPid' => $editPid])
@endif
</main>
</div>
<!-- <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> -->
<div x-data="{ isOpenEditCode: @entangle('isOpenEditCode') }">
<div wire:loading.class="flex" wire:loading.class.remove="hidden"
wire:target="search, openModalMergeVessel, closeModal, mergeFlight"
class="fixed inset-0 items-center justify-center z-50 bg-gray-800 bg-opacity-75 hidden">
<div class="bg-white p-4 rounded-lg flex items-center justify-center">
<svg class="animate-spin h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
</circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
</svg>
<span class="ml-2 text-gray-600">Loading...</span>
</div>
</div>
<div x-show="isOpenEditCode" class="fixed inset-0 z-50 bg-gray-800 bg-opacity-75 overflow-auto">
<div class="bg-white rounded-lg w-4/5 mx-auto mt-10 mb-10 pb-4">
<style>
code[class*="language-"],
pre[class*="language-"] {
background: white !important;
color: black;
}
.token.deleted {
background-color: #f8d7da;
color: #721c24;
}
.token.inserted {
background-color: #d4edda;
color: #155724;
}
</style>
<div class="flex w-full justify-between rounded-t-lg bg-slate-100 px-4 py-3 dark:bg-navy-800 sm:px-5">
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">Edit Code</h3>
<button type="button" @click="isOpenEditCode = false"
class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<button type="button" wire:click="showDeleteItemModal('{{ $patchFileId }}')"
class="bg-error hover:bg-error-focus text-white font-bold py-2 px-4 rounded mx-2 my-2">remove</button>
<div class="flex" x-data="{ gitCode: @entangle('gitCode') }" style="max-height: 70vh; overflow-y: auto;">
<div class="w-1/2 p-4">
<h3 class="text-lg font-semibold">GitLab Code:</h3>
<div class="relative">
<div class="overflow-auto p-2 bg-gray-100 rounded" style="max-height: 60vh;">
<pre class="line-numbers language-none"><code>{{ $gitCode }}</code></pre>
</div>
</div>
</div>
<div class="w-1/2 p-4">
<h3 class="text-lg font-semibold">Your Code:</h3>
<textarea wire:model.defer="dbCode" rows="20" class="w-full p-2 border rounded language-none"
placeholder="Paste your code here..." style="max-height: 60vh; overflow-y: auto;"></textarea>
<button wire:click="compare" id="compare"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">Compare</button>
</div>
</div>
<div class="mx-3 mb-3">
<h3 class="text-lg font-semibold mt-4">Differences:</h3>
<div class="overflow-auto p-2 bg-gray-100 rounded" style="max-height: 30vh;">
<pre class="line-numbers"> <code >{!! $diffResult !!}</code></pre>
</div>
</div>
</div>
</div>
</div>
<div x-data="{ isOpenFormPatchFile: @entangle('isOpenFormPatchFile') }">
<div wire:loading.class="flex" wire:loading.class.remove="hidden" wire:target="search, openModalMergeVessel, closeModal, mergeFlight" class="fixed inset-0 items-center justify-center z-50 bg-gray-800 bg-opacity-75 hidden">
<div class="bg-white p-4 rounded-lg flex items-center justify-center">
<svg class="animate-spin h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
</circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
</svg>
<span class="ml-2 text-gray-600">Loading...</span>
</div>
</div>
<div x-show="isOpenFormPatchFile" 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">
<style>
code[class*="language-"],
pre[class*="language-"] {
background: white !important;
color: black;
}
.token.deleted {
background-color: #f8d7da;
color: #721c24;
}
.token.inserted {
background-color: #d4edda;
color: #155724;
}
</style>
<div class="flex w-full justify-between rounded-t-lg bg-primary px-4 py-3 dark:bg-navy-800 sm:px-5">
<h3 class="text-lg text-white font-semibold mr-4">File Name:</h3>
<button type="button" @click="isOpenFormPatchFile = false" class="btn -mr-1.5 h-7 w-7 text-white 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="white" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="flex" x-data="{ dbCode: @entangle('dbCode').defer , patchFile: @entangle('patchFile').defer }" style=" overflow-y: auto;">
<div class="w-full p-4">
<div class="flex">
<h3 class="text-md font-semibold mr-4">File Name:</h3>
<input type="text" x-model.defer="patchFile"
class="placeholder:text-sm text-md w-3/5 form-input rounded-md border border-slate-300 px-2">
</div>
<h3 class="text-md font-semibold">Code:</h3>
<div class="relative">
<div class="overflow-auto p-2 bg-gray-100 rounded" >
<textarea x-model.defer="dbCode" 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>
</div>
<div class="flex justify-center">
<button type="button" @click="$wire.saveCode(dbCode , patchFile)" class="bg-primary hover:bg-primary-focus text-main-container font-bold py-2 px-4 rounded mx-2 my-2">Save</button>
</div>
<!-- <div class="mt-4">
<button @click="$wire.set('dbCode', dbCode)" class="btn text-white bg-blue-600 px-4 py-2 rounded">Save</button>
</div> -->
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<div class="bg-secondary"> <button type="button" wire:click="loadPage('Patch')"
class="btn mx-auto m-3 text-white bg-primary px-3 py-2">Back</button>
<div class="max-w-full mx-auto p-6 bg-gray-100">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<div class="flex flex-wrap -mx-3">
<div class="w-full md:w-1/2 px-3 mb-6">
<div x-data="{
searchQuery: 'SPN64Bits',
selectedBranch: @entangle('selectedBranch'),
selectedProject: @entangle('selectedProject'),
projects: @entangle('projects').defer,
branches: @entangle('branches').defer,
fileChanges: @entangle('fileChanges').defer,
isLoading: false,
fetchProjects() {
this.isLoading = true;
this.selectedProject = '60';
this.$wire.set('searchProject', this.searchQuery);
},
fetchBranches() {
// this.selectedBranch = '';
if (this.selectedProject) {
this.$wire.set('selectedProject', this.selectedProject);
}
},
renderTree(subtree) {
return Object.keys(subtree).map(key => {
if (typeof subtree[key] === 'object' && Object.keys(subtree[key]).length > 0) {
return `<li>
<strong>${key}</strong>
<ul class='pl-4 mt-1'>${this.renderTree(subtree[key])}</ul>
</li>`;
} else {
return `<li class='text-gray-700'><i aria-hidden="true" class='fa fa-file text-base mr-2'></i>${key}</li>`;
}
}).join('');
}
}" @projects-fetched.window="isLoading = false"
@files-fetched.window="isLoading = false" x-init="fetchProjects"
class="p-6 bg-white shadow-md rounded-lg">
</style>
<div class="">
<div class="flex mb-3">
<label for="searchProject" class="form-label text-lg mr-2">Search Project:</label>
<input type="text" @input.debounce.500ms="fetchProjects"
class="form-input h-8 ml-2 rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
id="searchProject" placeholder="Enter project name" x-model="searchQuery">
</div>
</div>
{{-- <div x-show="!isLoading && projects.length > 0" class="grid grid-cols-3"> --}}
<div x-show="true" class="">
<div class="flex mb-3">
<label for="project" class="form-label text-lg mr-2">Select Project:</label>
<div x-show="isLoading" class="mx-auto mt-2">
<span>Loading...</span>
</div>
<select x-model="selectedProject" x-show="!isLoading" @change="fetchBranches" id="project"
class="ml-2 w-64 h-8 mt-1 border border-gray-300 rounded-md">
<option value="">Choose Project</option>
<template x-for="project in projects" :key="project.id">
<option :value="project.id" x-text="project.name"></option>
</template>
</select>
</div>
</div>
{{-- <template x-if="selectedProject"> --}}
{{-- <template x-if="true">
<div class="mb-3">
<label for="branch" class="form-label w-64 text-lg mr-2">Select Branch:</label>
<select x-model="selectedBranch" id="branch"
class="ml-2 w-64 h-8 mt-1 border border-gray-300 rounded-md">
<option value="">Choose Branch</option>
<template x-for="branch in branches" :key="branch.name">
<option :value="branch.name" x-text="branch.name"></option>
</template>
</select>
</div>
</template> --}}
<div class="mb-3">
<input type="text" value="c5d80f79" wire:model.defer="startCommit" placeholder="Start Commit"
class="placeholder:text-sm text-lg mb-2 form-input rounded-lg border border-slate-300 px-2">
<input type="text" value="254e87" wire:model.defer="endCommit" placeholder="End Commit"
class="placeholder:text-sm text-lg mb-2 form-input rounded-lg border border-slate-300 px-2">
<div class="text-center">
<button type="button" wire:click="getChangedFiles"
class="btn mx-auto mt-3 text-white bg-stone-700 px-3 py-2">Get
Changed
Files</button>
</div>
</div>
<div wire:loading.class="flex" wire:loading.class.remove="hidden"
class="flex inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
<div class="app-preloader grid h-full w-full place-content-center">
<div class="app-preloader-inner relative inline-block h-48 w-48"></div>
</div>
</div>
<template x-if="Object.keys(fileChanges).length > 0">
<div class="mt-5 bg-gray-100 p-4 rounded-lg shadow">
<h3 class="text-lg mb-3">Changed Files</h3>
<div class="tree">
<ul x-html="renderTree(fileChanges)"></ul>
</div>
</div>
</template>
</div>
</div>
<div class="w-full md:w-1/2 px-3 mb-6">
<div class="p-6 bg-white shadow-md rounded-lg">
<h2 class="text-2xl font-bold mb-4">Create Patch</h2>
<div class="mb-4">
<label for="patch_name" class="block text-gray-700">Patch name</label>
<input type="text" id="patch_name" class="w-full mt-1 p-2 border border-gray-300 rounded-md"
wire:model.defer="PATCHNAME">
</div>
<div class="mb-4">
<label for="patch_date" class="block text-gray-700">Patch date</label>
<input type="datetime-local" id="patch_date"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" wire:model.defer="PDATE">
</div>
<div class="mb-4">
<label for="php_version" class="block text-gray-700">PHP Version</label>
<select id="php_version" wire:model.defer="PHP_VERSION"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
<option value="0">ALL</option>
<option value="1">32Bits (PHP 5.2)</option>
<option value="2">64Bits (PHP 5.6)</option>
<option value="3">64Bits (PHP 8.0)</option>
</select>
</div>
<div class="mb-4">
<label for="patch_level" class="block text-gray-700">Patch level</label>
<input type="text" id="patch_level" class="w-full mt-1 p-2 border border-gray-300 rounded-md"
wire:model.defer="PLEVEL">
</div>
<div class="mb-4">
<label for="code" class="block text-gray-700">Patch Code</label>
<input type="text" id="code" wire:model.defer="PCODE"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="major_version" class="block text-gray-700">Major version</label>
<input type="text" id="major_version"
class="w-full mt-1 p-2 border border-gray-300 rounded-md"
wire:model.defer="MAJOR_VERSION">
</div>
<div class="mb-4">
<label for="pdesc" class="block text-gray-700">Patch Desciption</label>
<input type="text" id="pdesc" wire:model.defer="PDESC"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="remark" class="block text-gray-700">Remark</label>
<input type="text" id="remark" wire:model.defer="Remark"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="owner" class="block text-gray-700">Owner</label>
<input type="text" id="owner" wire:model.defer="POWNER"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" value="aom">
</div>
<div class="mb-4">
<label for="papprovedate" class="block text-gray-700">Papprovedate</label>
<input type="datetime-local" id="papprovedate" wire:model.defer="PAPPROVEDATE"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" value="2024-03-27T15:00">
</div>
<div class="mb-4">
<label for="ptype" class="block text-gray-700">Ptype</label>
<input type="text" id="ptype" wire:model.defer="PTYPE"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="specific_customer" class="block text-gray-700">Specific Customer</label>
<input type="text" id="specific_customer"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="patchcode" class="block text-gray-700">Patchcode</label>
<textarea id="patchcode" wire:model.defer="PATCHCODE" class="w-full mt-1 p-2 border border-gray-300 rounded-md"
rows="5">pathcode</textarea>
</div>
<div class="mb-4">
<label for="uninstall" class="block text-gray-700">Uninstall</label>
<input type="text" id="uninstall" wire:model.defer="UNINSTALL"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" value="$b=1">
</div>
<div class="mb-4">
<label for="patchcode_server" class="block text-gray-700">Patchcode_server</label>
<textarea id="patchcode_server" wire:model.defer="PATCHCODE_SERVER"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" rows="5"></textarea>
</div>
<div class="flex justify-center">
<button type="button" wire:click="save"
class="bg-stone-700 text-white px-4 py-2 rounded-md hover:bg-blue-600">Save</button>
</div>
</div>
</div>
</div>
<livewire:pages.patch.modal-edit-code>
</div>