262 lines
11 KiB
PHP
262 lines
11 KiB
PHP
@csrf
|
|
|
|
<div class="grid gap-6 lg:grid-cols-2">
|
|
<div>
|
|
<label for="name" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Company name</label>
|
|
<input
|
|
id="name"
|
|
name="name"
|
|
value="{{ old('name', $company->name) }}"
|
|
class="mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
|
|
required
|
|
>
|
|
@error('name')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="billing_email" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Billing email</label>
|
|
<input
|
|
id="billing_email"
|
|
type="email"
|
|
name="billing_email"
|
|
value="{{ old('billing_email', $company->billing_email) }}"
|
|
placeholder="billing@example.com"
|
|
class="mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
|
|
>
|
|
@error('billing_email')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="status" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Status</label>
|
|
<select
|
|
id="status"
|
|
name="status"
|
|
class="mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
|
|
required
|
|
>
|
|
<option value="active" @selected(old('status', $company->status) === 'active')>Active</option>
|
|
<option value="suspended" @selected(old('status', $company->status) === 'suspended')>Suspended</option>
|
|
<option value="inactive" @selected(old('status', $company->status) === 'inactive')>Inactive</option>
|
|
</select>
|
|
@error('status')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="country_id" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Country</label>
|
|
<select
|
|
id="country_id"
|
|
name="country_id"
|
|
data-company-country-select2
|
|
data-placeholder="Search and select country"
|
|
class="wms-country-select mt-2 w-full"
|
|
>
|
|
<option value=""></option>
|
|
@foreach($countries as $country)
|
|
<option
|
|
value="{{ $country->id }}"
|
|
data-code="{{ $country->alpha2 }}"
|
|
@selected(old('country_id', $company->address?->country_id) == $country->id)
|
|
>
|
|
{{ $country->display_name ?? $country->common_name ?? $country->name }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@error('country_id')
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 flex flex-wrap items-center gap-3 border-t border-zinc-200 pt-6 dark:border-zinc-800">
|
|
<button class="rounded-xl bg-green-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm shadow-green-950/20 transition hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/40">
|
|
Save company
|
|
</button>
|
|
|
|
<a
|
|
href="{{ $company->exists ? route('platform.companies.show', $company) : route('platform.companies.index') }}"
|
|
class="rounded-xl border border-zinc-300 px-5 py-2.5 text-sm font-semibold text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
|
|
>
|
|
Cancel
|
|
</a>
|
|
</div>
|
|
|
|
|
|
@once
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
|
|
|
|
<style>
|
|
.wms-country-select.select2-hidden-accessible {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
.wms-country-select + .select2-container {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
margin-top: 0.5rem !important;
|
|
}
|
|
|
|
.wms-country-select + .select2-container .select2-selection--single {
|
|
height: 3rem !important;
|
|
min-height: 3rem !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
border-radius: 0.75rem !important;
|
|
border: 1px solid rgb(63 63 70) !important;
|
|
background: rgb(9 9 11) !important;
|
|
box-shadow: none !important;
|
|
transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease !important;
|
|
}
|
|
|
|
.wms-country-select + .select2-container .select2-selection--single .select2-selection__rendered {
|
|
width: 100% !important;
|
|
height: 3rem !important;
|
|
line-height: 3rem !important;
|
|
padding-left: 1rem !important;
|
|
padding-right: 2.75rem !important;
|
|
color: rgb(244 244 245) !important;
|
|
font-size: 0.875rem !important;
|
|
}
|
|
|
|
.wms-country-select + .select2-container .select2-selection--single .select2-selection__placeholder {
|
|
color: rgb(161 161 170) !important;
|
|
}
|
|
|
|
.wms-country-select + .select2-container .select2-selection--single .select2-selection__arrow {
|
|
height: 3rem !important;
|
|
right: 0.75rem !important;
|
|
top: 0 !important;
|
|
}
|
|
|
|
.wms-country-select + .select2-container .select2-selection--single .select2-selection__arrow b {
|
|
border-color: rgb(161 161 170) transparent transparent transparent !important;
|
|
}
|
|
|
|
.wms-country-select + .select2-container .select2-selection--single .select2-selection__clear {
|
|
margin-right: 0.5rem !important;
|
|
color: rgb(161 161 170) !important;
|
|
font-size: 1rem !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.wms-country-select + .select2-container.select2-container--focus .select2-selection--single,
|
|
.wms-country-select + .select2-container.select2-container--open .select2-selection--single {
|
|
border-color: rgb(59 130 246) !important;
|
|
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.28) !important;
|
|
}
|
|
|
|
.select2-container--open .select2-dropdown.wms-country-select2-dropdown,
|
|
.wms-country-select2-dropdown {
|
|
border: 1px solid rgb(63 63 70) !important;
|
|
border-radius: 0.875rem !important;
|
|
overflow: hidden !important;
|
|
background: rgb(24 24 27) !important;
|
|
box-shadow: 0 20px 35px -15px rgb(0 0 0 / 0.7) !important;
|
|
}
|
|
|
|
.wms-country-select2-dropdown .select2-search--dropdown {
|
|
padding: 0.75rem !important;
|
|
border-bottom: 1px solid rgb(63 63 70) !important;
|
|
background: rgb(24 24 27) !important;
|
|
}
|
|
|
|
.wms-country-select2-dropdown .select2-search__field {
|
|
min-height: 2.5rem !important;
|
|
border-radius: 0.75rem !important;
|
|
border: 1px solid rgb(63 63 70) !important;
|
|
background: rgb(9 9 11) !important;
|
|
padding: 0.5rem 0.75rem !important;
|
|
color: rgb(244 244 245) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
.wms-country-select2-dropdown .select2-results__option {
|
|
padding: 0.7rem 0.9rem !important;
|
|
color: rgb(228 228 231) !important;
|
|
font-size: 0.875rem !important;
|
|
}
|
|
|
|
.wms-country-select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
|
|
background: rgb(37 99 235) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.wms-country-select2-dropdown .select2-results__option--selected {
|
|
background: rgb(22 101 52) !important;
|
|
color: white !important;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function () {
|
|
function loadScript(src, callback) {
|
|
var existing = document.querySelector('script[src="' + src + '"]');
|
|
if (existing) {
|
|
existing.addEventListener('load', callback, { once: true });
|
|
callback();
|
|
return;
|
|
}
|
|
|
|
var script = document.createElement('script');
|
|
script.src = src;
|
|
script.defer = true;
|
|
script.onload = callback;
|
|
document.head.appendChild(script);
|
|
}
|
|
|
|
function initCompanyCountrySelect2() {
|
|
if (!window.jQuery || !window.jQuery.fn || !window.jQuery.fn.select2) {
|
|
return;
|
|
}
|
|
|
|
window.jQuery('[data-company-country-select2]').each(function () {
|
|
var select = window.jQuery(this);
|
|
|
|
if (select.hasClass('select2-hidden-accessible')) {
|
|
return;
|
|
}
|
|
|
|
select.select2({
|
|
width: '100%',
|
|
placeholder: select.data('placeholder') || 'Search and select country',
|
|
allowClear: true,
|
|
dropdownAutoWidth: false,
|
|
dropdownCssClass: 'wms-country-select2-dropdown',
|
|
selectionCssClass: 'wms-country-select2-selection'
|
|
});
|
|
});
|
|
}
|
|
|
|
window.initialiseCompanyCountrySelect2 = initCompanyCountrySelect2;
|
|
|
|
function bootCompanyCountrySelect2() {
|
|
if (window.jQuery && window.jQuery.fn && window.jQuery.fn.select2) {
|
|
initCompanyCountrySelect2();
|
|
return;
|
|
}
|
|
|
|
loadScript('https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js', function () {
|
|
loadScript('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js', initCompanyCountrySelect2);
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', bootCompanyCountrySelect2);
|
|
document.addEventListener('livewire:navigated', bootCompanyCountrySelect2);
|
|
bootCompanyCountrySelect2();
|
|
})();
|
|
</script>
|
|
@endonce
|