Commit f8d82fd3 authored by Sarun Mungthanya's avatar Sarun Mungthanya
Browse files

add user company role group permission

parent 51f4cd8b
<nav class="shadow p-4 z-100 bg-secondary " wire:init="loadNav" >
<nav class="shadow p-4 z-100 bg-secondary " wire:init="loadNav">
{{-- @if ($navLoaded) --}}
<div class="container mx-auto flex justify-between items-center">
<div class="text-xl font-bold text-stone-700"><a href="/">SPN Patch</a></div>
......@@ -32,8 +32,8 @@
Patch</a></li>
<li><a href="/send-multi-patch" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Send
Multi Patch</a></li>
<li><a href="/delete-multi-patch"
class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Delete Multi Patch</a></li>
<li><a href="/delete-multi-patch" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Delete
Multi Patch</a></li>
</ul>
</li>
......@@ -55,11 +55,11 @@
<a href="#">Configuration</a>
<ul x-cloak x-show="open" @click="open = false" @mouseleave="open = false"
class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
<li><a href="/role" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Role</a></li>
<li><a href="/user" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">User</a>
</li>
<li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu Item
3</a>
<li><a href="/company" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Company</a></li>
<li><a href="/role" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Role</a>
<li><a href="/group" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Group</a></li>
<li><a href="/user" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">User</a></li>
</li>
</ul>
</li>
......
<div x-data="{ showModal: @entangle('showNoPermissionModal') }">
<div x-show="showModal" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div x-show="showModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true">
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div x-show="showModal"
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Permission Denied
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">คุณไม่มีสิทธิ์ในการดำเนินการนี้.</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button @click="showModal = false" type="button"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
ปิด
</button>
</div>
</div>
</div>
</div>
</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 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>Comapny Type</span>
</label>
<span class="relative flex w-full">
<select name="companyType" wire:model.defer="companyType"
class="form-select mt-1.5 w-2/4 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 ($companyTypes as $type)
<option value="{{ $type->id }}">{{ $type->name }}</option>
@endforeach
</select>
@error('companyType')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Tax No.:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="tax"
class="form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs placeholder-text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder="" type="text" name="tax" />
@error('tax')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Branch:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="branch"
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="branch" type="text"/>
@error('branch')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Thai name:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="name"
class="form-input peer 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" />
@error('name')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>English name:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="name_en"
class="form-input peer 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_en" type="text"/>
@error('name_en')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Address:</span>
</label>
<span class="relative flex w-full">
<textarea wire:model.defer="address"
class="form-input peer 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"
cols="30" rows="5">
</textarea>
@error('address')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>District:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="district"
class="form-input peer 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="" type="text" name="district" />
@error('district')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Sub province:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="sub_province"
class="form-input peer 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="" type="text" name="sub_province" />
@error('sub_province')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Province:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="province"
class="form-input peer 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="" type="text" name="province" />
@error('province')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Postcode:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="postcode"
class="form-input peer 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="" type="text" name="postcode" />
@error('postcode')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Phone:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="phone"
class="form-input peer 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="" type="text" name="phone" />
@error('phone')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Fax:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="fax"
class="form-input peer 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="" type="text" name="fax" />
@error('fax')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Tax Incentive ID:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="tax_incentive"
class="form-input peer 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="" type="text" name="tax_incentive"
/>
@error('tax_incentive')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="grid grid-cols-8 justify-center space-x-2 pt-4">
<span wire:click="goBack"
class="col-start-3 btn border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
Cancel
</span>
<button type="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>
</form>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<form wire:submit.prevent="submitEditForm">
@csrf
<input type="hidden" name="id" value="{{ $company->id }}">
<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 class="fa-solid fa-edit text-primary"></i> Edit
</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>Comapny Type</span>
</label>
<span class="relative flex w-full">
<select name="companyType" wire:model.defer="company.company_type_id"
class="form-select mt-1.5 w-2/4 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 ($companyTypes as $type)
<option value="{{ $type->id }}" {!! $type->id == $company->company_type_id ? 'selected' : '' !!}>{{ $type->name }}
</option>
@endforeach
</select>
@error('company.companyType')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Tax No.:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="company.tax"
class="form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs placeholder-text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder="" type="text" />
@error('company.tax')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Branch:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="company.branch"
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="branch" type="text" value="{{ $company->branch }}" />
@error('company.branch')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Thai name:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="company.name"
class="form-input peer 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="{{ $company->name }}" />
@error('company.name')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>English name:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="company.name_en"
class="form-input peer 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_en" type="text" value="{{ $company->name_en }}" />
@error('company.name_en')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Address:</span>
</label>
<span class="relative flex w-full">
<textarea wire:model.defer="company.address"
class="form-input peer 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"
cols="30" rows="5">
</textarea>
@error('company.address')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>District:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="company.district"
class="form-input peer 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="" type="text" name="district" value="{{ $company->district }}" />
@error('company.district')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Sub province:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="company.sub_province"
class="form-input peer 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="" type="text" name="sub_province" value="{{ $company->sub_province }}" />
@error('company.sub_province')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Province:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="company.province"
class="form-input peer 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="" type="text" name="province" value="{{ $company->province }}" />
@error('company.province')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Postcode:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="company.postcode"
class="form-input peer 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="" type="text" name="postcode" value="{{ $company->postcode }}" />
@error('company.postcode')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Phone:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="company.phone"
class="form-input peer 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="" type="text" name="phone" value="{{ $company->phone }}" />
@error('company.phone')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Fax:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="company.fax"
class="form-input peer 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="" type="text" name="fax" value="{{ $company->fax }}" />
@error('company.fax')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="flex items-center">
<label class="w-2/12 mr-2">
<span>Tax Incentive ID:</span>
</label>
<span class="relative flex w-full">
<input wire:model.defer="company.tax_incentive"
class="form-input peer 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="" type="text" name="tax_incentive"
value="{{ $company->tax_incentive }}" />
@error('company.tax_incentive')
<div class="ml-3 text-red-500 text-sm self-center">
{{ $message }}</div>
@enderror
</span>
</div>
<div class="grid grid-cols-8 justify-center space-x-2 pt-4">
<span wire:click="goBack"
class="col-start-3 btn border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
Cancel
</span>
<button type="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>
</form>
</div>
<div>
@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="flex items-center space-x-4 py-5 lg:py-6 ">
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="/">Home</a>
<svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</li>
<li class="flex items-center space-x-2">
<a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
wire:click="$emit('menuClicked', 'Company')">Company</a>
</li>
</ul>
</div>
@if ($action === 'list')
<div x-data="{ show: @entangle('showMessage'), message: '' }" x-init="window.addEventListener('show-message', event => {
show = true;
message = event.detail.message;
console.log(show, message);
setTimeout(() => { show = false, console.log(show, message); }, 3000);
});">
<div x-show.transition.duration.500ms="show"
class="fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg">
{{ $message }}
</div>
</div>
<div x-data="{
showDeleteListModal: @entangle('showDeleteListModal'),
showAlert: false,
toggleGroup(event) {
const groupId = event.target.value;
if (event.target.checked) {
if (!this.selectedCompaniesAlpine.includes(groupId)) {
this.selectedCompaniesAlpine.push(groupId);
}
} else {
this.selectedCompaniesAlpine = this.selectedCompaniesAlpine.filter(id => id !== groupId);
}
},
selectedCompaniesAlpine: [],
selectedCompanies: @entangle('selectedCompanies')
}" class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 ">
<div class="card pb-4">
<div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
Company Management
</h2>
</div>
<div class="flex justify-between">
<div class="px-2 ml-4">
<button wire:click="showCompanyCreateForm()"
class="btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z">
</path>
</svg>
<span>Create</span>
</button>
<a @click.prevent="if (selectedCompaniesAlpine.length > 0) { showDeleteListModal = true; } else { showAlert = true;}"
class="btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0">
</path>
</svg>
<span>Delete</span>
</a>
</div>
<div class="inline-flex flex-initial">
<div x-data="{ isInputActive: true }">
<div class="flex 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="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<span class="w-64" x-show="isInputActive === true">
<input
class="form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder="Search Keyword" type="text" wire:model="keyword" />
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
@foreach ($searchBy as $key => $by)
<option value="{{ $key }}">{{ $by }}</option>
@endforeach
</select>
</span>
</div>
</div>
</div>
</div>
@include('livewire.select-atleast-modal')
<div class="mx-3 mt-3 px-4">
<div class="is-scrollbar-hidden min-w-full overflow-x-auto" x-data="pages.tables.initExample1">
<table class="is-hoverable w-full text-left">
<thead>
<tr>
<th
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
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">
Tax:Branch
</th>
<th
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">
Thai name
</th>
<th
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">
English name
</th>
<th
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 $company)
<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="selectedCompanies"
value="{{ $company->id }}" />
</label>
</td>
{{-- <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $company->id }}</td> --}}
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
{{ $company->tax . ':' . $company->branch }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $company->name }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $company->name_en }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5 text-center">
<div class="flex justify-center space-x-2">
<a wire:click="showCompanyEditForm({{ $company->id }})"
class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa fa-edit"></i>
</a>
<div>
<a @click="$wire.emit('showDeleteModal', {{ $company->id }})"
class="btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
<i class="fa fa-trash-alt"></i>
</a>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<template x-if="showDeleteListModal ">
<div x-show="showDeleteListModal" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform scale-90"
x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-90"
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="selectedCompaniesAlpine.length"></span> companies?
</h2>
<p class="mt-2"></p>
<button type="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', selectedCompanies ); 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 class="px-4">
<div x-data="pages.basicTable.initGridTable({{ $json_columns }}, {{ $users }}, {{ $paginate }}, '{{ $url }}', {{ json_encode($permission) }})"></div>
</div> --}}
</div>
@elseif($action === 'create')
<livewire:pages.company.company-create :companyTypes="$companyTypes" wire:key="company-create" />
@elseif($action === 'edit')
<livewire:pages.company.company-edit :companyTypes="$companyTypes" :editCompanyId="$editCompanyId" wire:key="company-edit" />
@endif
</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 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 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 }}">{{ $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>
@include('components.no-permission')
<div class="flex items-center space-x-4 py-5 lg:py-6 ">
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="/">Home</a>
<svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</li>
<li class="flex items-center space-x-2">
<a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
wire:click="$emit('menuClicked', 'Group')">Group Management</a>
</li>
</ul>
</div>
@if ($action === 'list')
<div x-data="{ show: @entangle('showMessage'), message: '' }" x-init="window.addEventListener('show-message', event => {
show = true;
message = event.detail.message;
console.log(show, message);
setTimeout(() => { show = false, console.log(show, message); }, 3000);
});">
<div x-show.transition.duration.500ms="show"
class="fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg">
{{ $message }}
</div>
</div>
<div x-data="{
showDeleteListModal: @entangle('showDeleteListModal'),
showAlert: false,
toggleGroup(event) {
const groupId = event.target.value;
if (event.target.checked) {
if (!this.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 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">
Group Management
</h2>
</div>
<div class="flex justify-between">
<div class="px-2 ml-4">
<button wire:click="showGroupCreateForm()"
class="btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z">
</path>
</svg>
<span>Create</span>
</button>
<a @click.prevent="if (selectedGroupsAlpine.length > 0) { showDeleteListModal = true; } else { showAlert = true;}"
class="btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0">
</path>
</svg>
<span>Delete</span>
</a>
</div>
<div class="inline-flex flex-initial">
<div x-data="{ isInputActive: true }">
<div class="flex 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="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<span class="w-64" x-show="isInputActive === true">
<input
class="form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder="Search Keyword" type="text" wire:model="keyword" />
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
@foreach ($searchBy as $key => $by)
<option value="{{ $key }}">{{ $by }}</option>
@endforeach
</select>
</span>
</div>
</div>
</div>
</div>
@include('livewire.select-atleast-modal')
<div class="mx-3 mt-3 px-4">
<div class="is-scrollbar-hidden min-w-full overflow-x-auto" x-data="pages.tables.initExample1">
<table class="is-hoverable w-full text-left">
<thead>
<tr>
<th
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
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
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">
group
</th>
<th
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
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-2">
<a wire:click="showGroupEditForm({{ $group->id }})"
class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa fa-edit"></i>
</a>
<div>
<a @click="$wire.emit('showDeleteModal', {{ $group->id }})"
class="btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
<i 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>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<style>
.bg-gray-800.bg-opacity-20 {
background-color: rgba(31, 41, 55, 0.20);
}
</style>
<div x-show="showAlert" @click="showAlert = false"
class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-20">
<div class="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-gray-800">Alert</h2>
<button @click="showAlert = false" class="text-gray-400 hover:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
<p class="text-gray-700">Please select at least one.</p>
<div class="mt-4 text-right">
<button @click="showAlert = false"
class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus">OK</button>
</div>
</div>
</div>
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment