@extends('ventas.base')

@section('venta_subtitle')
    Agregar Cuotas - Pie
@endsection

@section('venta_content')
    <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(vigentes: true)); $i < $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>
@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}}; 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}}; 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}}; i ++) {
                    $("[name='valor" + i + "']").val(valor)
                }
            })
        })
    </script>
@endpush