File: //home/armgroup/libs/resources/views/livewire/admin/banner/edit.blade.php
<div>
<form id="form" role="form" wire:submit.prevent="update">
<div class="card-body">
<div class="form-row">
<div class="col">
<label for="banner.name">نام *</label>
<input type="text" class="form-control @error('banner.name') is-invalid @enderror" id="banner.name"
wire:model.defer="banner.name" required>
@error('banner.name')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col">
<label for="banner.height">ارتفاع</label>
<input type="number" class="form-control @error('banner.height') is-invalid @enderror" id="banner.height"
wire:model.defer="banner.height">
@error('banner.height')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col">
<label for="banner.width">عرض</label>
<input type="number" class="form-control @error('banner.width') is-invalid @enderror" id="banner.width"
wire:model.defer="banner.width">
@error('banner.width')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col">
<label for="banner.status">وضعیت *</label>
<select class="form-control @error('banner.status') is-invalid @enderror" id="banner.status"
wire:model.defer="banner.status" required>
<option value="1">فعال</option>
<option value="0">غیرفعال</option>
</select>
@error('banner.status')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<table class="table table-hover mt-4">
<thead>
<tr>
<th>عنوان</th>
<th>لینک</th>
<th>تصویر</th>
<th>محدودیت</th>
<th>تاریخ شروع</th>
<th>تاریخ پایان</th>
<th>توضیحات</th>
<th>ترتیب</th>
<th>عملیات</th>
</tr>
</thead>
<tbody>
@if(count($items))
@foreach($items as $index => $item)
<tr>
<td>
<input type="text" class="form-control @error("items.$index.title") is-invalid @enderror" wire:model.defer="items.{{$index}}.title">
@error("items.$index.title")
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</td>
<td>
<input type="text" class="form-control @error("items.$index.url") is-invalid @enderror" dir="ltr" wire:model.defer="items.{{$index}}.url">
@error("items.$index.url")
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</td>
<td class="px-5">
<div class="row">
<div id="holder{{ $index }}" class="d-inline col-md-4">
@if($item['image'])
<a href="{{ asset($item['image']) }}" target="_blank">
<img src="{{ asset($item['image']) }}" class="img-fluid" width="150" height="150">
</a>
@endif
</div>
<div class="input-group d-inline col-md-8">
<span class="input-group-btn">
<a data-input="thumbnail{{ $index }}" data-preview="holder{{ $index }}" class="btn btn-primary lfm text-white">
<i class="fa fa-picture-o"></i> انتخاب
</a>
</span>
</div>
</div>
</td>
<td>
<input type="checkbox" value="1" class="form-check @error("items.$index.limitation") is-invalid @enderror" wire:model.defer="items.{{$index}}.limitation">
@error("items.$index.limitation")
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</td>
<td>
<div wire:ignore>
<input id="started_at{{ $index }}" type="text" class="form-control" autocomplete="off">
<input id="started_at_alt{{ $index }}" type="hidden">
</div>
@error("items.$index.started_at")
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</td>
<td>
<div wire:ignore>
<input id="ended_at{{ $index }}" type="text" class="form-control" autocomplete="off">
<input id="ended_at_alt{{ $index }}" type="hidden">
</div>
@error("items.$index.ended_at")
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</td>
<td>
<textarea class="form-control @error("items.$index.description") is-invalid @enderror" wire:model.defer="items.{{$index}}.description"></textarea>
@error("items.$index.description")
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</td>
<td>
<input type="number" class="form-control @error("items.$index.sort_order") is-invalid @enderror" min="0" wire:model.defer="items.{{$index}}.sort_order">
@error("items.$index.sort_order")
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</td>
<td>
<button type="button" class="btn btn-danger btn-sm" wire:click="removeItem({{ $index }})">
<span class="fa fa-trash"></span> حذف
</button>
</td>
</tr>
@endforeach
@endif
</tbody>
<tfoot>
<tr>
<td colspan="8"></td>
<td>
<button type="button" id="add-item" class="btn btn-success btn-sm" wire:click="addItem"><span class="fa fa-plus"></span> افزودن</button>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">ذخیره</button>
<a href="{{ route('admin.banners.index') }}" class="btn btn-danger float-left">لغو</a>
</div>
</form>
</div>
@push('scripts')
<script>
var lfm = function(class_name, type, options) {
let buttons = document.getElementsByClassName(class_name);
for(let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function () {
var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
var target_preview = document.getElementById(buttons[i].getAttribute('data-preview'));
window.open(route_prefix + '?type=' + type || 'file', 'FileManager', 'width=900,height=600');
window.SetUrl = function (items) {
var file_path = items.map(function (item) {
return item.url;
}).join(',');
// set or change the preview image src
items.forEach(function (item) {
target_preview.innerHTML = `<img src="${item.thumb_url}" class="img-fluid">`;
});
// trigger change event
target_preview.dispatchEvent(new Event('change'));
Livewire.emit('imageChanged', i, file_path);
};
});
}
};
lfm('lfm', 'image');
Livewire.on('addedItem', function(index) {
lfm('lfm', 'image');
$(`#started_at${index}`).MdPersianDateTimePicker({
targetTextSelector: `#started_at${index}`,
targetDateSelector: `#started_at_alt${index}`,
enableTimePicker: true,
dateFormat: 'yyyy/MM/dd HH:mm:ss'
});
$(`#started_at${index}`).on('hidden.bs.popover', function () {
@this.set(`items.${index}.started_at`, $(`#started_at_alt${index}`).val());
});
$(`#ended_at${index}`).MdPersianDateTimePicker({
targetTextSelector: `#ended_at${index}`,
targetDateSelector: `#ended_at_alt${index}`,
enableTimePicker: true,
dateFormat: 'yyyy/MM/dd HH:mm:ss'
});
$(`#ended_at${index}`).on('hidden.bs.popover', function () {
@this.set(`items.${index}.ended_at`, $(`#ended_at_alt${index}`).val());
});
})
</script>
<script>
@foreach($items as $index => $item)
$('#started_at{{ $index }}').MdPersianDateTimePicker({
targetTextSelector: '#started_at{{ $index }}',
targetDateSelector: '#started_at_alt{{ $index }}',
enableTimePicker: true,
dateFormat: 'yyyy/MM/dd HH:mm:ss'
});
$('#started_at{{ $index }}').on('hidden.bs.popover', function () {
@this.set("items.{{ $index }}.started_at", $('#started_at_alt{{ $index }}').val());
});
@if($item['started_at'])
$('#started_at{{ $index }}').MdPersianDateTimePicker('setDate', new Date(`{{ $item['started_at'] }}`));
@endif
$('#ended_at{{ $index }}').MdPersianDateTimePicker({
targetTextSelector: '#ended_at{{ $index }}',
targetDateSelector: '#ended_at_alt{{ $index }}',
enableTimePicker: true,
dateFormat: 'yyyy/MM/dd HH:mm:ss'
});
$('#ended_at{{ $index }}').on('hidden.bs.popover', function () {
@this.set("items.{{ $index }}.ended_at", $('#ended_at_alt{{ $index }}').val());
});
@if($item['ended_at'])
$('#ended_at{{ $index }}').MdPersianDateTimePicker('setDate', new Date(`{{ $item['ended_at'] }}`));
@endif
@endforeach
</script>
@endpush