<div class="ui modal" id="add_promotion_modal">
    <div class="header">
        Agregar Promoción
    </div>
    <div class="content">
        <form class="ui form" id="add_promotion_form">
            <div class="field">
                <label for="description">Descripción</label>
                <input type="text" id="description" name="description" placeholder="Descripció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
