@props(['name', 'message' => '', 'status' => ''])
<div
x-data="{ showModal: false, name: '{{ $name }}', message: '{{ $message }}', status: '{{ $status }}' }"
x-show="showModal"
x-on:open-modal.window="if ($event.detail.name === name) { showModal = true; message = $event.detail.message; status = $event.detail.status; }"
x-on:close-modal.window="showModal = false" style="display: none">
<div>
<dialog class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5 w-full h-full bg-transparent"
x-show="showModal" @keydown.window.escape="showModal = false">
<div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300" @click="showModal = false"
x-show="showModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"></div>
<div class="relative max-w-lg min-w-[500px] rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
x-show="showModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<!-- Conditional SVGs based on status -->
<template x-if="status === 'success'">
<svg xmlns="http://www.w3.org/2000/svg" class="inline size-28 text-success" 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>
</template>
<template x-if="status === 'warning'">
<svg xmlns="http://www.w3.org/2000/svg" class="inline size-28 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
</template>
<template x-if="status === 'failed'">
<svg xmlns="http://www.w3.org/2000/svg" class="inline size-28 text-error" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
</template>
<div class="mt-4">
<p class="mt-2" x-html="message"></p>
<button @click="showModal = false"
class="btn mt-6 bg-gray-200 font-medium text-gray-700 hover:bg-gray-200-focus focus:bg-gray-200-focus active:bg-gray-200-focus/90">
Close
</button>
</div>
</div>
</dialog>
</div>
</div>
@props(['name'])
<div
x-data="{ showModal: false, name: '{{ $name }}' }"
x-show="showModal"
x-on:open-modal.window="showModal = ($event.detail.name === name); console.log(event.detail)"
x-on:close-modal.window="showModal = false" style="display: none">
<template x-teleport="#x-teleport-target">
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
x-show="showModal" role="dialog" @keydown.window.escape="showModal = false">
<div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300" @click="showModal = false"
x-show="showModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"></div>
<div class="relative max-w-lg min-w-[500px] rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
x-show="showModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<svg xmlns="http://www.w3.org/2000/svg" class="inline size-28 text-success" 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">
<h2 class="text-2xl text-slate-700 dark:text-navy-100"></h2>
@if(isset($message))
<p class="mt-2">{{ $message }}</p>
@endif
<button @click="showModal = false"
class="btn mt-6 font-medium text-slate-700 hover:bg-slate-300/20 active:bg-slate-300/25 border border-slate-300">
Cancel
</button>
<button @click="$wire.emit('test') ; showModal = false"
class="btn mt-6 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90">
Confirm
</button>
</div>
</div>
</div>
</template>
</div>
<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>
<ul class="flex space-x-4 z-50">
<li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
@mouseleave="timer = setTimeout(() => open = false, 100)"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<a href="/server-license">Server License Management</a>
</li>
<li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
@mouseleave="timer = setTimeout(() => open = false, 100)"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<span class="cursor-pointer" @click.stop>Patch</span>
<ul x-cloak x-show="open" @click.stop="open = false" @mouseleave="open = false"
class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
<li><a href="/patch" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Create
Patch</a></li>
<li><a href="/master-file" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Create
MasterFile</a></li>
<li><a href="/exchange-rate" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Create
Exchangerate</a></li>
<li><a href="/discharge-port" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Create
Discharge Port</a></li>
</ul>
</li>
<li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
@mouseleave="timer = setTimeout(() => open = false, 100)"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<span class="cursor-pointer" @click.stop>Send Patch</span>
<ul x-cloak x-show="open" @click.stop="open = false" @mouseleave="open = false"
class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
<li><a href="/send-patch" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Send
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>
</ul>
</li>
{{-- <li x-data="{ open: false }"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<a href="/test">Test</a>
</li> --}}
<li x-data="{ open: false }"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<a href="/news">News & Update</a>
</li>
<li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
@mouseleave="timer = setTimeout(() => open = false, 100)"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<span class="cursor-pointer" @click.stop>Knowledge</span>
<ul x-cloak x-show="open" @click.stop="open = false" @mouseleave="open = false"
class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
<li><a href="/parameter" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Parameter</a></li>
</ul>
</li>
<li x-data="{ open: false }"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<a href="/report">Report</a>
</li>
<li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
@mouseleave="timer = setTimeout(() => open = false, 100)"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<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="/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>
<a href="/format-file-master" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Format
File Master</a>
</li>
</ul>
</li>
<li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
@mouseleave="timer = setTimeout(() => open = false, 100)"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white cursor-pointer">
<i aria-hidden="true" class="fa fa-user" aria-hidden="true"></i>
<span>Hello , {{ $userName ?? '' }}</span>
<ul x-cloak x-show="open" @click="open = false" @mouseleave="open = false"
class="absolute left-0 mt-2 w-32 bg-white shadow-lg">
<li class="block px-4 py-2 text-gray-700 hover:bg-stone-100">
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="button"
onclick="event.preventDefault(); this.closest('form').submit();">
Logout
</button>
</form>
</li>
</ul>
</li>
</ul>
</div>
{{-- @endif --}}
</nav>
<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>
\ No newline at end of file
<div class="flex justify-between">
{{-- version 1 --}}
{{-- <div x-data="usePopper({ placement: 'bottom-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex flex-initial mx-5">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn h-8 w-8 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="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="{{ $url }}/create"
class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-primary outline-none transition-all hover:bg-primary/20 focus:bg-primary/20">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4">
</path>
</svg>
<span> Add User</span></a>
</li>
<li>
<a href="#"
class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20">
<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="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
<span> Delete item</span></a>
</li>
</ul>
</div>
</div>
</div> --}}
{{-- version 2 --}}
<div class="px-2 ml-4">
<a href="{{ $url }}/create"
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>
</a>
<a href="#"
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"
onclick="deleteData()">
<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: false }">
<div class="flex gap-4 px-5 items-center">
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-14 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
{{-- <label class="w-20 mr-2 ">
<span>Search By :</span>
</label> --}}
<span class="w-52" x-show="isInputActive === true">
<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">
@foreach ($searchBy 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" />
</span>
<button x-show="isInputActive === true"
class="btn min-w-[7rem] mx-4 w-24 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">
Search
</button>
</div>
</div>
</div>
{{-- <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex flex-initial mx-5">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn h-8 w-8 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="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Delete</a>
</li>
</ul>
</div>
</div>
</div> --}}
</div>
<div class="sidebar sidebar-panel print:hidden">
<div class="flex h-full grow flex-col border-r border-slate-150 bg-white dark:border-navy-700 dark:bg-navy-750">
<div class="flex items-center justify-between pr-5 pl-1 pt-1">
<!-- Application Logo -->
<div class="flex p-4">
<a href="/">
<img class=" transition-transform duration-500 ease-in-out "
src="{{ asset('images/logo-left-login.png') }}" alt="logo" />
<div class="h-full text-white bg-main-container w-80 p-4 transition-all duration-300 overflow-y" x-data="{ activeLink: window.location.pathname }">
<div class="rounded-2xl p-3 bg-white w-full mb-2" x-init="checkWindowWidth(); window.addEventListener('resize', checkWindowWidth)">
<ul >
<li class="flex justify-between">
<a href="/" class="text-black block py-1 px-4 rounded text-xl">SPN Patch</a>
<button @click="sidebarOpen = false; if (!sidebarOpen) setTimeout(() => showSidebarButton = true, 400)" class="mb-4 pt-1 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="black" viewBox="0 0 24 24"
stroke="black">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</li>
<!-- <li class="mb-1">
<a href="#" class="block py-1 px-4 rounded hover:primary-focus text-black">
<i aria-hidden="true" class="fa fa-home mr-2"></i>Home</a>
</li> -->
</ul>
</div>
<div class="rounded-2xl p-3 bg-white w-full mb-2" x-data="{ open: ['/patch', '/master-file', '/exchange-rate', '/discharge-port' , '/patch-exchange-rate'].includes(activeLink) }">
<ul >
<li class="mb-1">
<a href="#" @click="open = !open" class="block py-2 px-4 rounded text-black flex items-center">
<i aria-hidden="true" class="fa fa-file-code mr-2"></i> Patch
<svg class="ml-auto h-4 w-4 transition-transform transform" :class="open ? 'rotate-180' : ''"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</a>
</div>
<button @click="$store.global.isSidebarExpanded = false"
class="btn h-7 w-7 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent-light/80 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 xl:hidden">
<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="M15 19l-7-7 7-7" />
</svg>
</button>
</div>
<div class="h-[calc(100%-4.5rem)] overflow-x-hidden pb-6 mt-5" x-data="{ expandedItem: null }" x-init="$el._x_simplebar = new SimpleBar($el);">
<ul class="grow space-y-1.5 px-5 font-inter font-medium">Configuration
<li><a href="/server-license"
class="cursor-pointer flex text-xs+ py-2 tracking-wide outline-none transition-all duration-300 ease-in-out {{ $currentMenu === 'Configuration' ? 'rounded-lg bg-primary px-5 py-2.5 text-white dark:text-white font-medium' : 'text-slate-600 hover:text-slate-800 dark:text-navy-200 dark:hover:text-navy-50' }}">Server License Management</a>
</li>
<div x-show="open" class="transition-all duration-300" x-cloak>
<li class="mb-1 ml-6">
<a href="/patch" :class="activeLink === '/patch' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-file-signature mr-2"></i>Create Patch</a>
</li>
{{-- <li><a
class="cursor-pointer flex text-xs+ py-2 tracking-wide outline-none transition-all duration-300 ease-in-out {{ $currentMenu === 'Company' ? 'rounded-lg bg-primary px-5 py-2.5 text-white dark:text-white font-medium' : 'text-slate-600 hover:text-slate-800 dark:text-navy-200 dark:hover:text-navy-50' }}">Company</a>
<li class="mb-1 ml-6">
<a href="/master-file" :class="activeLink === '/master-file' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-file-shield mr-2"></i>Create Patch MasterFile</a>
</li>
<li><a
class="cursor-pointer flex text-xs+ py-2 tracking-wide outline-none transition-all duration-300 ease-in-out {{ $currentMenu === 'Group' ? 'rounded-lg bg-primary px-5 py-2.5 text-white dark:text-white font-medium' : 'text-slate-600 hover:text-slate-800 dark:text-navy-200 dark:hover:text-navy-50' }}">Group</a>
<li class="mb-1 ml-6">
<a href="/patch-exchange-rate" :class="activeLink === '/patch-exchange-rate' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-file-invoice-dollar mr-2"></i>Create Patch Exchange Rate</a>
</li>
<li><a
class="cursor-pointer flex text-xs+ py-2 tracking-wide outline-none transition-all duration-300 ease-in-out {{ $currentMenu === 'Role' ? 'rounded-lg bg-primary px-5 py-2.5 text-white dark:text-white font-medium' : 'text-slate-600 hover:text-slate-800 dark:text-navy-200 dark:hover:text-navy-50' }}">Role</a>
{{-- <li class="mb-1 ml-6">
<a href="/discharge-port" :class="activeLink === '/discharge-port' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-anchor mr-2"></i>Create Patch Discharge Port</a>
</li> --}}
</div>
</ul>
</div>
<div class="rounded-2xl p-3 bg-white w-full mb-2" x-data="{ open: ['/send-patch', '/send-multi-patch', '/delete-multi-patch'].includes(activeLink) }">
<ul >
<li class="mb-1">
<a href="#" @click="open = !open" class="block py-2 px-4 rounded text-black flex items-center">
<i aria-hidden="true" class="fa fa-share-from-square mr-2"></i> Send Patch
<svg class="ml-auto h-4 w-4 transition-transform transform" :class="open ? 'rotate-180' : ''"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</a>
</li>
<div x-show="open" class="transition-all duration-300" x-cloak>
<li class="mb-1 ml-6">
<a href="/send-patch" :class="activeLink === '/send-patch' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-file-import mr-2"></i>Send Patch</a>
</li>
<li class="mb-1 ml-6">
<a href="/send-multi-patch" :class="activeLink === '/send-multi-patch' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-shuffle mr-2"></i>Send Multi Patch</a>
</li>
<li class="mb-1 ml-6">
<a href="/delete-multi-patch" :class="activeLink === '/delete-multi-patch' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-trash-can mr-2"></i>Delete Multi Patch</a>
</li>
</div>
</ul>
</div>
<div class="rounded-2xl p-3 bg-white w-full mb-2">
<ul >
<li class="mb-1">
<a href="/server-license" :class="activeLink === '/server-license' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded text-black flex items-center">
<i aria-hidden="true" class="fa-solid fa-building mr-2"></i> Server License Management
</a>
</li>
</ul>
</div>
<div class="rounded-2xl p-3 bg-white w-full mb-2">
<ul >
<li class="mb-1">
<a href="/exchange-rate" :class="activeLink === '/exchange-rate' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded text-black flex items-center">
<i aria-hidden="true" class="fa fa-money-bill-transfer mr-2"></i> Exchange Rate
</a>
</li>
</ul>
</div>
<div class="rounded-2xl p-3 bg-white w-full mb-2">
<ul >
<li class="mb-1">
<a href="/news" :class="activeLink === '/news' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded text-black flex items-center">
<i aria-hidden="true" class="fa-sharp fa-regular fa-newspaper mr-2"></i> News & Update
</a>
</li>
</ul>
</div>
<div class="rounded-2xl p-3 bg-white w-full mb-2">
<ul >
<li class="mb-1">
<a href="/manual-response/index" :class="activeLink === '/manual-response/index' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded text-black flex items-center">
<i aria-hidden="true" class="fa-sharp fa-regular fa-paper-plane mr-2"></i> Manual Response
</a>
</li>
</ul>
</div>
<div class="rounded-2xl p-3 bg-white w-full mb-2" x-data="{ open: ['/company', '/role', '/group', '/user', '/format-file-master'].includes(activeLink) }">
<ul >
<li class="mb-1">
<a href="#" @click="open = !open" class="block py-2 px-4 rounded text-black flex items-center">
<i aria-hidden="true" class="fa fa-gear mr-2"></i> Configuration
<svg class="ml-auto h-4 w-4 transition-transform transform" :class="open ? 'rotate-180' : ''"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</a>
</li>
<div x-show="open" class="transition-all duration-300" x-cloak>
<li class="mb-1 ml-6">
<a href="/company" :class="activeLink === '/company' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-building mr-2"></i>Company</a>
</li>
<li class="mb-1 ml-6">
<a href="/role" :class="activeLink === '/role' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-id-card mr-2"></i>Role</a>
</li>
<li class="mb-1 ml-6">
<a href="/group" :class="activeLink === '/group' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-user-group mr-2"></i>Group</a>
</li>
<li class="mb-1 ml-6">
<a href="/user" :class="activeLink === '/user' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-user mr-2"></i>User</a>
</li>
<li class="mb-1 ml-6">
<a href="/format-file-master" :class="activeLink === '/format-file-master' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-file-pen mr-2"></i>Format File Master</a>
</li>
</div>
</ul>
</div>
<div class="rounded-2xl p-3 bg-white w-full mb-2 bottom-0">
<div x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
@mouseleave="timer = setTimeout(() => open = false, 100)"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white cursor-pointer">
<i aria-hidden="true" class="fa fa-user mr-2" aria-hidden="true"></i>
<span>Hello, {{ ucwords($userName) ?? '' }}</span>
<ul x-cloak x-show="open" @click="open = false" @mouseleave="open = false"
class="absolute left-0 mt-2 w-32 bg-white shadow-lg">
<li class="block px-4 py-2 text-gray-700 hover:bg-stone-100">
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="button" onclick="event.preventDefault(); this.closest('form').submit();">
Logout
</button>
</form>
</li>
</ul>
</div>
</div>
......
<x-base-layout title="Starter Sideblock" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<!-- <div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div> -->
<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>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 28" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
</svg><span class="ml-0">Home</span>
</div>
</li>
</ul>
<x-app-layout title="Starter Sideblock" is-sidebar-open="true" is-header-blur="true">
<style>
[x-cloak] {
display: none;
}
</style>
<div x-data="{
sidebarOpen: true,
showSidebarButton: false,
checkWindowWidth() {
this.sidebarOpen = window.innerWidth >= 1550;
this.showSidebarButton = window.innerWidth < 1550;
}
}"
x-init="checkWindowWidth(); window.addEventListener('resize', () => checkWindowWidth())"
class="flex h-screen">
<div x-show="sidebarOpen" x-cloak class=" w-1/5 max-w-[340px] bg-gray-100"
x-transition:enter="transition transform ease-out duration-300"
x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0"
x-transition:leave="transition transform ease-in duration-300"
x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full">
@include('components.sidebar', [
'currentContent' => $currentContent,
'userName' => auth()->user()->username ?? '',
])
</div>
<div class="w-full">
<div class="w-full card p-4 sm:p-5">
<p class="text-3xl text-center font-medium text-slate-700 dark:text-navy-100">
Welcome Admin
</p>
<div class="mt-4 space-y-4">
<div class="flex">
<div class="flex w-full items-center justify-center rounded-lg gap-10">
<button
class="btn h-6 w-56 space-x-2 rounded-full bg-amber-500 font-medium text-slate-800 hover:bg-amber-600 ">
<span>Upload File</span>
</button>
<button @click="sidebarOpen = true" x-show="showSidebarButton" x-cloak
class="mb-4 ml-2 pt-1 focus:outline-none"
x-transition:enter="transition ease-out duration-100 transform"
x-transition:enter-start="opacity-0 -translate-x-full" x-transition:enter-end="opacity-100 translate-x-0"
x-transition:leave="transition ease-in duration-300 transform"
x-transition:leave-start="opacity-100 translate-x-0" x-transition:leave-end="opacity-0 -translate-x-full">
<svg xmlns="http://www.w3.org/2000/svg" x-show="!sidebarOpen" class="h-6 w-6" fill="black" viewBox="0 0 24 24" stroke="black">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
<button
class="btn h-6 w-56 space-x-2 rounded-full bg-amber-500 font-medium text-slate-800 hover:bg-amber-600 ">
<span>Pre-Arrival Manifest</span>
</button>
</div>
</div>
<label class="block">
<span class="text-center">
<ol class="steps">
<li class="step before:bg-slate-200 dark:before:bg-navy-500">
</li>
<li class="step before:bg-slate-200 dark:before:bg-navy-500">
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white">
</div>
</li>
<li class="step before:bg-slate-200 dark:before:bg-navy-500">
</li>
</ol>
</span>
</label>
</div>
</div>
<div :class="sidebarOpen ? 'lg:w-4/5 mr-5' : 'w-full ml-2 mr-5'" class="transition-all duration-300">
<livewire:main-container :currentContent="$currentContent" />
</div>
</main>
</x-layout-sideblock>
</div>
</x-app-layout>
<div class="mx-5">
<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 " x-data="{ gitCode: @entangle('gitCode') }">
<div class="w-1/2 p-4">
<h3 class="text-lg font-semibold">GitLab Code:</h3>
<div class="relative">
<div class="overflow-auto h-svh p-2 bg-gray-100 rounded">
<pre class="line-numbers language-markup"><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="code" rows="20" class="w-full p-2 border rounded language-markup" placeholder="Paste your code here...">
</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">
<h3 class="text-lg font-semibold mt-4">Differences:</h3>
<div class="overflow-auto p-2 bg-gray-100 rounded">
<pre class="line-numbers "> <code >{!! $diffResult !!}</code></pre>
</div>
</div>
</div>
<div x-data="{ showModal: @entangle('showModal') }">
<template x-if="showModal">
<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="showModal = false">
<div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
@click="showModal = 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 this item?
</h2>
<p class="mt-2"></p>
<button @click="showModal = 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.emit('deleteSubItem', {{ $deleteId }}) ; showModal = 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>
</div>
<div x-data="{ showModal: @entangle('showModal') }">
<template x-if="showModal">
<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="showModal = false">
<div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
@click="showModal = 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 this item?
</h2>
<p class="mt-2"></p>
<button @click="showModal = 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.emit('deleteItem', {{ $deleteId }}) ; showModal = 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>
</div>
<div>
<div wire:loading wire:target="{{ $action }}" style="display: none">
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5">
<div class="absolute inset-0 bg-slate-200/60 backdrop-blur transition-opacity duration-300">
</div>
<div
class="spinner size-16 animate-spin rounded-full border-4 border-[#A020F0] border-r-transparent dark:border-accent dark:border-r-transparent">
</div>
</div>
</div>
</div>
<div class="bg-main-container mt-1 z-0 "
:class="sidebarOpen
?
(window.innerWidth < 1500 ? (window.innerWidth < 1300 ? 'w-[90%] justify-self-end' :
'w-[95%] justify-self-end') : 'w-full') :
'w-full'">
<link href="{{ asset('css/pages/patch.css') }}" rel="stylesheet">
<div wire:loading.delay wire:loading.class.remove="hidden"
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>
{{-- end loading --}}
<div wire:loading.remove class="bg-main-container">
@switch($currentContent)
@case('Role')
<livewire:pages.role.role-index wire:init />
@break
@case('User')
<livewire:pages.user.user-index wire:init />
@break
@case('Company')
<livewire:pages.company.company-index wire:init />
@break
@case('Group')
<livewire:pages.group.group-index wire:init />
@break
@case('ServerLicense')
<livewire:pages.server-license.server-license-index wire:init />
@break
@case('SendPatch')
<livewire:pages.send-patch.send-patch-index wire:init />
@break
@case('SendMultiPatch')
<livewire:pages.send-patch.send-multi-patch-list wire:init />
@break
@case('DeleteMultiPatch')
<livewire:pages.send-patch.delete-multi-patch wire:init />
@break
@case('Patch')
<livewire:pages.patch.patch-index wire:init />
@break
@case('Parameter')
<livewire:pages.parameter.parameter-index wire:init />
@break
@case('News')
<livewire:pages.news.news-index wire:init />
@break
@case('ExchangeRate')
<livewire:pages.exchangerate.exchangerate-index wire:init />
@break
@case('PatchExchangeRate')
<livewire:pages.exchangerate.exchangerate-upload wire:init />
@break
@case('DischargePort')
<livewire:pages.dischargeport.dischargeport-index wire:init />
@break
@case('MasterFile')
@include('patch.patch-master-file')
{{-- <livewire:pages.patch.patch-master-file wire:init /> --}}
@break
@case('FormatFileMaster')
<livewire:pages.format-file-master.file-index wire:init />
@break
@case('Report')
<livewire:pages.report.report-index wire:init />
@break
@case('ManualResponse')
<livewire:pages.manual-response.manual-response />
@break
@default
<div class="bg-gray-100 h-screen flex justify-center h-[800px] w-full items-center">
<div class="text-center min-w-full card shadow-md h-screen flex justify-center items-center m-4 max-h-[780px]">
<h1 class="text-4xl font-bold text-primary-500 mb-4">Welcome {{ ucwords(auth()->user()->username )}}</h1>
<p class="text-gray-700">Have a nice day.</p>
</div>
</div>
{{-- @livewire('code-comparer') --}}
@endswitch
<x-modals.alert-modal name="alert-modal"></x-modals.alert-modal>
</div>
</div>
<nav class="shadow p-4 z-100 bg-secondary ">
<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>
<ul class="flex space-x-4 z-50">
<li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
@mouseleave="timer = setTimeout(() => open = false, 100)"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<a href="#">Server License Management</a>
<ul x-show="open" @click="open = false" @mouseenter="clearTimeout(timer)"
@mouseleave="timer = setTimeout(() => open = false, 100)"
class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
<li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 1</a></li>
<li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 2</a></li>
<li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 3</a></li>
</ul>
</li>
<li x-data="{ open: false }" wire:click.prevent="loadContent('Patch')"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<a href="#">Patch</a>
</li>
<li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
@mouseleave="timer = setTimeout(() => open = false, 100)"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<span class="cursor-pointer" @click.stop wire:click.prevent="loadContent('SendPatch')">Send Patch</span>
<ul x-show="open" @click.stop="open = false" @mouseleave="open = false"
class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
<li><a href="#" wire:click.prevent="loadContent('SendPatch')"
class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Send Patch</a></li>
<li><a href="#" wire:click.prevent="loadContent('SendMultiPatch')"
class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Send Multi Patch</a></li>
<li><a href="#" wire:click.prevent="loadContent('DeleteMultiPatch')"
class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Delete Multi Patch</a></li>
</ul>
</li>
<li x-data="{ open: false }" wire:click.prevent="loadContent('Parameter')"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<a href="#">Parameter</a>
</li>
<li x-data="{ open: false }" wire:click.prevent="loadContent('Exchangerate')"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<a href="#">Create Patch Exchangerate</a>
</li>
<li x-data="{ open: false }" wire:click.prevent="loadContent('Dischargeport')"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<a href="#">Create Discharge Port</a>
</li>
<li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
@mouseleave="timer = setTimeout(() => open = false, 100)"
class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
<a href="#">Configuration</a>
<ul x-show="open" @click="open = false" @mouseleave="open = false"
class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
<li><a href="#" wire:click.prevent="loadContent('Role')"
class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Role</a></li>
<li><a href="#" wire:click.prevent="loadContent('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>
</ul>
</li>
<li><a href="#" class="bg-primary text-white px-4 py-2 rounded">Logout</a></li>
<span>Hello , {{ auth()->user()->USERNAME ?? '' }}</span>
</ul>
</div>
</nav>
\ No newline at end of file
<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 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>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 aria-hidden="true" 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 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">
Company 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.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 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="showCompanyCreateForm"><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 (selectedCompaniesAlpine.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-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>
@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">
Tax:Branch
</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">
Thai 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">
English name
</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 $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-1">
<a wire:click="showCompanyEditForm({{ $company->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', {{ $company->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 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="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">
Patch Discharge Port
</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 mb-5 bg-main-container rounded-md">
<div class="pb-4 pt-5 bg-white rounded-lg shadow-lg">
<div class="flex justify-between">
<div class="px-2 ml-4">
@livewire('pages.dischargeport.dischargeport-upload')
</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>
<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">
<thead>
<tr>
<th scope="col"
class="whitespace-nowrap rounded-tl-lg bg-slate-300 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
ISO Code
</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">
Port Name
</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">
Country Code
</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">
Flag Status
</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">
Last Update
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $disc)
<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">
{{ $disc->isocode }}
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-2">{{ $disc->portname }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-2">{{ $disc->cntrycode }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-2">{{ $disc->flagstatus }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-2">{{ $disc->lastupdate }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<livewire:delete-modal />
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
</div>
@endif
</main>
</div>
</div>
<div class="bg-white p-2 flex flex-row items-center space-x-3">
<div class="flex flex-row items-center">
@if ($file)
<div class="text-sm text-gray-600 dark:text-gray-300">
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>
@if (!$file)
<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>
@error('file')
<span class="text-red-600 text-sm mt-2">{{ $message }}</span>
@enderror
@else
<button
class=" text-error px-1 py-1 text-xl hover:text-2xl"
wire:click="removeFile">
<i class="fa fa-remove" aria-hidden="true"></i>
</button>
@endif
</div>
<div class="text-right">
@if (!$fileUploaded)
<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="uploadFile">
Upload
</button>
@endif
</div>
</div>
<div class="max-w-lg mx-auto p-8 bg-white shadow-lg rounded-lg">
<div class="mx-auto ">
<form wire:submit.prevent="addExchangerate" 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="w-full mt-1 p-2 border border-gray-300 rounded-md"
wire:model.defer="exdate">
</div>
<div class="mb-2">
<label for="finishdate" class="block text-gray-700">Finish date</label>
<input type="date" id="finishdate" class="w-full mt-1 p-2 border border-gray-300 rounded-md"
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="w-full mt-1 p-2 border border-gray-300 rounded-md">
</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="w-full mt-1 p-2 border border-gray-300 rounded-md">
</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="w-full mt-1 p-2 border border-gray-300 rounded-md">
</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" type="submit"
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>