93 lines
3.9 KiB
PHP
93 lines
3.9 KiB
PHP
<div class="">
|
|
<x-jetstream.label for="period-selector" value="{{ $label }}" />
|
|
|
|
<div class="space-y-4">
|
|
<!-- Period Selection -->
|
|
<div class="w-full">
|
|
<x-select
|
|
wire:model.live="selectedPeriod"
|
|
:options="[
|
|
['label' => __('Previous Year'), 'value' => 'previous_year'],
|
|
['label' => __('Previous Quarter'), 'value' => 'previous_quarter'],
|
|
['label' => __('Previous Month'), 'value' => 'previous_month'],
|
|
['label' => __('Custom'), 'value' => 'custom']
|
|
]"
|
|
option-label="label"
|
|
option-value="value"
|
|
placeholder="{{ __('Select a period') }}"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Custom Date Range (shown when 'custom' is selected) -->
|
|
@if($selectedPeriod === 'custom')
|
|
<div class="space-y-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" wire:ignore>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('From date') }}</label>
|
|
<x-flatpickr
|
|
id="select-period-from"
|
|
dateFormat="Y-m-d"
|
|
altFormat="d-m-Y"
|
|
placeholder="{{ __('Select start date') }}"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm placeholder-theme-light"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('To date') }}</label>
|
|
<x-flatpickr
|
|
id="select-period-to"
|
|
dateFormat="Y-m-d"
|
|
altFormat="d-m-Y"
|
|
placeholder="{{ __('Select end date') }}"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm placeholder-theme-light"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
@error('customFromDate')
|
|
<div class="text-sm text-red-700" role="alert">{{ __($message) }}</div>
|
|
@enderror
|
|
@error('customToDate')
|
|
<div class="text-sm text-red-700" role="alert">{{ __($message) }}</div>
|
|
@enderror
|
|
|
|
<div class="flex justify-end">
|
|
<x-jetstream.secondary-button
|
|
x-on:click="
|
|
let fp1 = document.getElementById('select-period-from');
|
|
let fp2 = document.getElementById('select-period-to');
|
|
let from = fp1 && fp1._flatpickr ? fp1._flatpickr.input.value : '';
|
|
let to = fp2 && fp2._flatpickr ? fp2._flatpickr.input.value : '';
|
|
$wire.applyCustomPeriod(from, to)
|
|
"
|
|
wire:loading.attr="disabled"
|
|
>
|
|
<span wire:loading.remove wire:target="applyCustomPeriod">
|
|
{{ __('Update') }}
|
|
</span>
|
|
<span wire:loading wire:target="applyCustomPeriod">
|
|
<x-icon class="h-4 w-4 animate-spin" name="arrow-path" />
|
|
</span>
|
|
</x-jetstream.secondary-button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
|
|
@script
|
|
<script>
|
|
Livewire.hook('morph.updated', () => {
|
|
$nextTick(() => {
|
|
document.querySelectorAll('.flatpickr-input').forEach(el => {
|
|
if (!el._flatpickr && window.LaravelFlatpickr) {
|
|
window.LaravelFlatpickr.initializeFlatpickr(el);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endscript
|