<div class="ui modal" id="add_contract_modal">
    <div class="header">
        Agregar Contrato
    </div>
    <div class="content">
        <form class="ui form" id="add_contract_form">
            <input type="hidden" name="broker_rut" value="{{$broker->rut}}" />
            <div class="fields">
                <div class="six wide field">
                    <label>Proyecto</label>
                    <div class="ui search selection dropdown" id="project">
                        <input type="hidden" name="project_id" />
                        <i class="dropdown icon"></i>
                        <div class="default text">Proyecto</div>
                        <div class="menu">
                        @foreach($projects as $project)
                            <div class="item" data-value="{{ $project->id }}">{{ $project->descripcion }}</div>
                        @endforeach
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label>Comisión</label>
                    <div class="ui right labeled input">
                        <input type="text" name="commission" placeholder="Comisión" />
                        <div class="ui basic label">%</div>
                    </div>
                </div>
            </div>
            <div class="fields">
                <div class="field">
                    <label>Fecha Inicio</label>
                    <div class="ui calendar" id="add_fecha_inicio">
                        <div class="ui icon input">
                            <i class="calendar icon"></i>
                            <input type="text" name="date" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="actions">
        <div class="ui deny button">
            Cancelar
        </div>
        <div class="ui positive right labeled icon button">
            Agregar
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>

@push('page_scripts')
    <script>
        class AddModal {
            ids
            modal
            handler
            constructor(handler) {
                this.handler = handler
                this.ids = {
                    modal: 'add_contract_modal',
                    form: 'add_contract_form',
                    proyecto: 'project',
                    date: 'add_fecha_inicio'
                }
                $(`#${this.ids.proyecto}`).dropdown()
                const cdo = structuredClone(calendar_date_options)
                cdo['initialDate'] = new Date()
                $(`#${this.ids.date}`).calendar(cdo)
                this.modal = $(`#${this.ids.modal}`)
                this.modal.modal({
                    onApprove: () => {
                        const form = document.getElementById(this.ids.form)
                        let commission = parseFloat(form.querySelector('[name="commission"]').value)
                        if (commission > 1) {
                            commission /= 100
                        }
                        const date = $(`#${this.ids.date}`).calendar('get date')
                        const data = {
                            broker_rut: form.querySelector('[name="broker_rut"]').value,
                            project_id: form.querySelector('[name="project_id"]').value,
                            commission: commission,
                            date: [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
                        }
                        this.handler.execute().add(data)
                    }
                })
            }
            show() {
                this.modal.modal('show')
            }
        }
    </script>
@endpush
