@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <div class="ui two column grid">
            <h1 class="four wide column header">
                <div class="content">
                    <div class="ui dividing sub header">{{$venta->proyecto()->descripcion}}</div>
                    {{$venta->propiedad()->summary()}}
                </div>
            </h1>
        </div>
        <h2>Agregar Cuotas - Pie</h2>
        <form class="ui form" id="add_form" action="{{$urls->base}}/ventas/pie/{{$pie->id}}/cuotas/add" method="post">
            <table class="ui table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Fecha</th>
                        <th>Banco</th>
                        <th>Identificador</th>
                        <th>Valor</th>
                    </tr>
                </thead>
                <tbody id="cuotas">
                @for ($i = count($pie->cuotas()); $i < $pie->cuotas - count($pie->cuotas()); $i ++)
                    <tr>
                        <td>{{$i + 1}}</td>
                        <td>
                            <div class="inline field">
                                <div class="ui calendar fecha" data-index="{{$i}}">
                                    <div class="ui icon input">
                                        <input type="text" name="fecha{{$i}}" />
                                        <i class="calendar icon"></i>
                                    </div>
                                </div>
                                <button class="ui mini compact basic icon button copy fecha" type="button" data-index="{{$i}}">
                                    <i class="down arrow icon"></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div class="ui search selection dropdown banco" data-index="{{$i}}">
                                <input type="hidden" name="banco{{$i}}" />
                                <i class="dropdown icon"></i>
                                <div class="default text">Banco</div>
                                <div class="menu">
                                    @foreach ($bancos as $banco)
                                        @if ($banco->nombre === '')
                                            @continue
                                        @endif
                                        <div class="item" data-value="{{$banco->id}}">{{$banco->nombre}}</div>
                                    @endforeach
                                </div>
                            </div>
                            <button class="ui mini compact basic icon button copy banco" type="button" data-index="{{$i}}">
                                <i class="down arrow icon"></i>
                            </button>
                        </td>
                        <td>
                            <div class="ui input">
                                <input type="text" name="identificador{{$i}}" />
                            </div>
                        </td>
                        <td>
                            <div class="inline field">
                                <div class="ui left labeled input">
                                    <div class="ui label">$</div>
                                    <input type="text" name="valor{{$i}}" />
                                </div>
                                <button class="ui mini compact basic icon button copy valor" type="button" data-index="{{$i}}">
                                    <i class="down arrow icon"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                @endfor
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5">
                            <button class="ui button" type="submit">
                                Agregar
                            </button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </form>
    </div>
@endsection

@include('layout.body.scripts.dayjs')

@push('page_scripts')
    <script type="text/javascript">
        function setDate(index, calendar, date = new Date()) {
            const d = dayjs(date)
            $(calendar).calendar('set date', new Date(d.add(index, 'M').valueOf()))
        }
        function formatValor(valor) {
            if (valor.length < 3) {
                return valor
            }
            let new_valor = parseInt(valor.split('.').join(''))
            const formatter = new Intl.NumberFormat('es-CL', {style: 'decimal', maximumFractionDigits: 0})
            return formatter.format(new_valor)
        }
        $(document).ready(() => {
            $('.fecha.calendar').calendar(calendar_date_options).each(setDate)
            $('.copy.fecha').click(event => {
                const index = $(event.currentTarget).data('index')
                const calendar = $(".fecha.calendar[data-index='" + index + "']")
                const fecha = calendar.calendar('get date')
                for (let i = index + 1; i < {{$pie->cuotas - count($pie->cuotas())}}; i ++) {
                    setDate(i - index, $(".fecha.calendar[data-index='" + i + "']"), fecha)
                }
            })
            $('.banco.ui.dropdown').dropdown()
            $('.copy.banco').click(event => {
                const index = $(event.currentTarget).data('index')
                const banco = $(".banco.dropdown[data-index='" + index + "']").dropdown('get value')
                for (let i = index + 1; i < {{$pie->cuotas - count($pie->cuotas())}}; i ++) {
                    $(".banco.dropdown[data-index='" + i + "']").dropdown('set selected', banco)
                }
            })
            $("input[name^='valor']").each((index, input) => {
                $(input).change(event => {
                    const valor = $(event.currentTarget).val()
                    $(event.currentTarget).val(formatValor(valor))
                })
            })
            $('.copy.valor').click(event => {
                const index = $(event.currentTarget).data('index')
                const valor = $("[name='valor" + index + "']").val()
                for (let i = index + 1; i < {{$pie->cuotas - count($pie->cuotas())}}; i ++) {
                    $("[name='valor" + i + "']").val(valor)
                }
            })
        })
    </script>
@endpush