101 lines
4.5 KiB
PHP
101 lines
4.5 KiB
PHP
<div class="ui modal" id="add_promotion_modal">
|
|
<div class="header">
|
|
Agregar Promoción
|
|
</div>
|
|
<div class="content">
|
|
<form class="ui form" id="add_promotion_form">
|
|
<div class="field">
|
|
<label for="description">Descripción</label>
|
|
<input type="text" id="description" name="description" placeholder="Descripción" required />
|
|
</div>
|
|
<div class="fields">
|
|
<div class="field">
|
|
<label for="type">Tipo</label>
|
|
<select id="type" name="type" class="ui select dropdown" required>
|
|
<option value="1">Valor Fijo</option>
|
|
<option value="2">Valor Variable</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="value">Valor</label>
|
|
<input type="text" id="value" name="value" placeholder="Valor" required />
|
|
</div>
|
|
</div>
|
|
<div class="fields">
|
|
<div class="field">
|
|
<label for="start_date">Fecha de Inicio</label>
|
|
<div class="ui calendar" id="start_date">
|
|
<div class="ui left icon input">
|
|
<i class="calendar icon"></i>
|
|
<input type="text" name="start_date" placeholder="Fecha de Inicio" required />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="end_date">Fecha de Término</label>
|
|
<div class="ui calendar" id="end_date">
|
|
<div class="ui left icon input">
|
|
<i class="calendar icon"></i>
|
|
<input type="text" name="end_date" placeholder="Fecha de Término" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="valid_range">Válido por N Días Después del Término</label>
|
|
<input type="text" id="valid_range" name="valid_range" placeholder="Válido por N Días" value="7" required />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui black deny button">
|
|
Cancelar
|
|
</div>
|
|
<div class="ui positive right labeled icon button">
|
|
Agregar
|
|
<i class="checkmark icon"></i>
|
|
</div>
|
|
</div>
|
|
|
|
@push('page_scripts')
|
|
<script>
|
|
class AddModal {
|
|
ids = {
|
|
modal: '#add_promotion_modal',
|
|
}
|
|
modal
|
|
|
|
constructor() {
|
|
this.modal = $(this.ids.modal)
|
|
this.modal.find('.ui.dropdown').dropdown()
|
|
this.modal.find('.ui.calendar').calendar(calendar_date_options)
|
|
this.modal.modal({
|
|
onApprove: () => {
|
|
const form = document.getElementById('add_promotion_form')
|
|
const type = $(form.querySelector('[name="type"]')).dropdown('get value')
|
|
const start_date = $(form.querySelector('#start_date')).calendar('get date')
|
|
const end_date = $(form.querySelector('#end_date')).calendar('get date')
|
|
let valid_until = null
|
|
if (end_date !== null) {
|
|
valid_until = new Date(end_date)
|
|
valid_until.setDate(valid_until.getDate() + parseInt(form.querySelector('[name="valid_range"]').value))
|
|
}
|
|
const data = {
|
|
description: form.querySelector('[name="description"]').value,
|
|
type,
|
|
value: form.querySelector('[name="value"]').value,
|
|
start_date: [start_date.getFullYear(), start_date.getMonth() + 1, start_date.getDate()].join('-'),
|
|
end_date: end_date === null ? null : [end_date.getFullYear(), end_date.getMonth() + 1, end_date.getDate()].join('-'),
|
|
valid_until: valid_until === null ? null : [valid_until.getFullYear(), valid_until.getMonth() + 1, valid_until.getDate()].join('-'),
|
|
}
|
|
promotions.execute().add(data)
|
|
}
|
|
})
|
|
}
|
|
show() {
|
|
this.modal.modal('show')
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|