<div class="ui modal" id="edit_promotion_modal">
    <div class="header">
        Editar Promoción - <span class="description"></span>
    </div>
    <div class="content">
        <form class="ui form" id="edit_promotion_form">
            <input type="hidden" name="id" />
            <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="edit_start_date">Fecha de Inicio</label>
                    <div class="ui calendar" id="edit_start_date">
                        <div class="ui left icon input">
                            <i class="calendar icon"></i>
                            <input type="text" name="edit_start_date" placeholder="Fecha de Inicio" required />
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label for="edit_end_date">Fecha de Término</label>
                    <div class="ui calendar" id="edit_end_date">
                        <div class="ui left icon input">
                            <i class="calendar icon"></i>
                            <input type="text" name="edit_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">
            Editar
            <i class="checkmark icon"></i>
        </div>
</div>

@push('page_scripts')
    <script>
        class EditModal {
            ids = {
                modal: '#edit_promotion_modal',
            }
            modal
            promotions

            constructor(data) {
                this.promotions = data
                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('edit_promotion_form')
                        const type = $(form.querySelector('[name="type"]')).dropdown('get value')
                        const start_date = $(form.querySelector('#edit_start_date')).calendar('get date')
                        const end_date = $(form.querySelector('#edit_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 = {
                            id: form.querySelector('[name="id"]').value,
                            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().edit(data)
                    }
                })
            }
            load(promotion_id) {
                const promotion = this.promotions.find(promotion => promotion.id === parseInt(promotion_id))
                const form = document.getElementById('edit_promotion_form')
                form.reset()
                form.querySelector('[name="id"]').value = promotion.id
                form.querySelector('[name="description"]').value = promotion.description
                form.querySelector('[name="type"]').value = promotion.type
                form.querySelector('[name="value"]').value = promotion.amount
                const start_date_parts = promotion.start_date.split('-')
                const start_date = new Date(start_date_parts[0], start_date_parts[1] - 1, start_date_parts[2])
                $('#edit_start_date').calendar('set date', start_date)
                if (promotion.end_date !== null) {
                    const end_date_parts = promotion.end_date.split('-')
                    const end_date = new Date(end_date_parts[0], end_date_parts[1] - 1, end_date_parts[2])
                    $('#edit_end_date').calendar('set date', end_date)

                    if (promotion.valid_until !== null) {
                        const valid_until_parts = promotion.valid_until.split('-')
                        const valid_until = new Date(valid_until_parts[0], valid_until_parts[1] - 1, valid_until_parts[2])
                        form.querySelector('[name="valid_range"]').value = valid_until.getDate() - end_date.getDate()
                    }
                }

                this.modal.modal('show')
            }
        }
    </script>
@endpush
