@extends('ventas.base')

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

@push('page_scripts')
    <script>
        const bancos = JSON.parse('{!! json_encode($bancos) !!}')
        const estados = JSON.parse('{!! json_encode($estados) !!}')
    </script>
@endpush

@section('venta_content')
    @if (count($asociadas) > 0)
    <div class="ui grid">
        <div class="two wide column">Asociados</div>
        <div class="six wide column">
            {!! implode(' - ', array_map(function(Incoviba\Model\Venta $venta) use ($urls) {
                return "<a href=\"{$urls->base}/venta/{$venta->id}\">{$venta->propiedad()->departamentos()[0]->descripcion}</a>";
            }, $asociadas)) !!}
        </div>
        @if ($venta->formaPago()->pie->asociado !== null)
            <div class="row">
                <div class="ui tiny basic segment">
                    * Este pie no es la base para el cálculo de las cuotas
                </div>
            </div>
        @endif
    </div>
    @endif
    <div class="ui grid">
        <div class="column">Valor</div>
        <div class="four wide column">
            {{$format->ufs($venta->formaPago()->pie->valor)}}
            @if (count($asociadas) > 0)
                [{{$format->ufs($venta->formaPago()->pie->valor + array_reduce($asociadas, function(float $sum, Incoviba\Model\Venta $venta) {
                    return $sum + $venta->formaPago()->pie->valor;
                }, 0.0))}}]
            @endif
        </div>
        <div class="column">Cuotas</div>
        <div class="column">{{$venta->formaPago()->pie->cuotas}}</div>
    </div>
    <table class="ui compact table" id="cuotas">
        <thead>
            <tr>
                <th>#</th>
                <th>Fecha</th>
                <th>Fecha ISO</th>
                <th>Banco</th>
                <th>Identificador</th>
                <th class="right aligned">Valor</th>
                <th class="right aligned">Valor UF</th>
                <th>Estado</th>
                <th>Fecha Estado</th>
                <th>Fecha Estado ISO</th>
                <th></th>
            </tr>
        </thead>
        <tbody>@php
            $now = new DateTimeImmutable();
            $uf_venta = $venta->uf === 0.0 ? $UF->get($venta->currentEstado()->fecha) : $venta->uf;
            if ($uf_venta === 0.0) {
                $uf_venta = $UF->get();
            }
        @endphp
        @foreach ($venta->formaPago()->pie->cuotas() as $cuota)
            <tr data-pago="{{$cuota->pago->id}}"
            @if (in_array($cuota->pago->currentEstado->tipoEstadoPago->descripcion, ['anulado', 'reemplazado']))
                class="disabled"
            @endif >
                <td>
                    {{$cuota->numero}}
                    <button class="ui mini tertiary icon button edit_cuota" data-cuota="{{$cuota->pago->id}}">
                        <i class="edit icon"></i>
                    </button>
                </td>
                <td>{{$cuota->pago->fecha->format('d-m-Y')}}</td>
                <td>{{$cuota->pago->fecha->format('Y-m-d')}}</td>
                <td>{{$cuota->pago->banco->nombre}}</td>
                <td>{{$cuota->pago->identificador}}</td>
                <td class="right aligned">{{$format->pesos($cuota->pago->valor)}}</td>
                <td class="right aligned">
                    @if (in_array($cuota->pago->currentEstado->tipoEstadoPago->descripcion, ['depositado', 'abonado'])
                        and $cuota->pago->currentEstado->fecha <= $now)
                    {{$format->ufs($cuota->pago->valor())}}
                    @else
                    ~{{$format->ufs($cuota->pago->valor / $uf_venta)}}
                    @endif
                </td>
                <td{!! ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'abonado' ? ' class="green"' :
                    ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'depositado' ? ' class="yellow"' :
                        ($cuota->pago->currentEstado->tipoEstadoPago->activo !== 1 ? ' class="red"' : ''))) !!}>
                    {{ucwords($cuota->pago->currentEstado->tipoEstadoPago->descripcion)}}
                    <button class="ui mini tertiary icon button edit_estado_cuota" data-cuota="{{$cuota->pago->id}}"
                            data-estado="{{$cuota->pago->currentEstado->tipoEstadoPago->id}}"
                            data-fecha="{{$cuota->pago->currentEstado->fecha->format('Y-m-d')}}">
                        <i class="edit icon"></i>
                    </button>
                </td>
                <td>
                    @if (in_array($cuota->pago->currentEstado->tipoEstadoPago->descripcion, ['abonado', 'anulado', 'reemplazado']))
                        {{$cuota->pago->currentEstado->fecha->format('d-m-Y')}}
                    @elseif (!in_array($cuota->pago->currentEstado->tipoEstadoPago->descripcion, ['anulado', 'reemplazado']))
                        @if ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'depositado')
                            {{$cuota->pago->currentEstado->fecha->format('d-m-Y')}}
                        @endif
                        <div class="ui calendar fecha_estado" data-date="{{$cuota->pago->currentEstado->fecha->format('Y-m-d')}}">
                            <div class="ui action left icon input">
                                <i class="calendar icon"></i>
                                <input type="text" name="fecha_estado" />
                                <button class="ui green basic icon button accept_estado"
                                        data-pago="{{$cuota->pago->id}}"
                                        data-estado="{{$cuota->pago->currentEstado->tipoEstadoPago->descripcion}}">
                                    <i class="check icon"></i>
                                </button>
                                @if ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'depositado')
                                    <button class="ui red basic icon button reject_estado"
                                            data-pago="{{$cuota->pago->id}}">
                                        <i class="remove icon"></i>
                                    </button>
                                @endif
                            </div>
                        </div>
                    @endif
                </td>
                <td>{{$cuota->pago->currentEstado->fecha->format('Y-m-d')}}</td>
                <td>
                @if ($cuota->pago->currentEstado->tipoEstadoPago->descripcion !== 'anulado')
                    <button class="ui mini red icon basic button anular" data-pago="{{$cuota->pago->id}}">
                        <i class="remove icon"></i>
                    </button>
                @endif
                </td>
            </tr>
        @endforeach
        </tbody>
        <tfoot>
        <tr>
            <th colspan="5">TOTAL</th>
            <th class="right aligned">
                {{$format->pesos($total_pesos = array_reduce($venta->formaPago()->pie->cuotas(vigentes: true),
                    function(int $sum, Incoviba\Model\Venta\Cuota $cuota) {
                        return $sum + $cuota->pago->valor;
                    }, 0))}}
            </th>
            <th class="right aligned">
                {{$format->ufs($total = array_reduce($venta->formaPago()->pie->cuotas(vigentes: true),
                    function(float $sum, Incoviba\Model\Venta\Cuota $cuota) use ($now, $uf_venta) {
                        return $sum + (($cuota->pago->fecha > $now or $cuota->pago->uf === null) ?
                            $cuota->pago->valor / $uf_venta :
                            $cuota->pago->valor());
                    }, 0.0))}}
            </th>
            <th colspan="4"></th>
        </tr>
        <tr>
            <th colspan="5">TOTAL PAGADO</th>
            <th class="right aligned">
                {{$format->pesos($pagado_pesos = array_reduce($venta->formaPago()->pie->cuotas(pagadas: true, vigentes: true),
                    function(int $sum, Incoviba\Model\Venta\Cuota $cuota) {
                        return $sum + $cuota->pago->valor;
                    }, 0))}}
            </th>
            <th class="right aligned">
                {{$format->ufs($pagado = array_reduce($venta->formaPago()->pie->cuotas(pagadas: true, vigentes: true),
                    function(float $sum, Incoviba\Model\Venta\Cuota $cuota) {
                        return $sum + $cuota->pago->valor();
                    }, 0.0))}}
            </th>
            <th class="right aligned">
                {{ $format->percent(($total > 0) ? $pagado / $total : 0, 2, true) }} Pie<br />
                {{ $format->percent($pagado / $venta->valor, 2, true) }} Promesa
            </th>
            <th colspan="3"></th>
        </tr>
        <tr>
            <th colspan="5">POR PAGAR</th>
            <th class="right aligned">
                {{$format->pesos($total_pesos - $pagado_pesos)}}
            </th>
            <th class="right aligned">
                {{$format->ufs($total - $pagado)}}
            </th>
            <th class="right aligned">
                {{$format->percent(($total > 0) ? ($total - $pagado) / $total * 100 : 0, 2)}}*
            </th>
            <th colspan="3"></th>
        </tr>
        </tfoot>
    </table>
    <div class="ui tiny basic right aligned segment">
        * Porcentaje calculado sobre el valor de la venta
    </div>

    @include('ventas.pies.cuotas.edit')
    @include('ventas.pies.cuotas.estados.edit')
@endsection

@include('layout.head.styles.datatables')
@include('layout.head.styles.datatables.buttons')
@include('layout.body.scripts.datatables')
@include('layout.body.scripts.datatables.buttons')

@push('page_scripts')
    <script type="text/javascript">
        $(document).ready(() => {
            function updateRow({pago_id, valor, fecha, color, estado, remove_fecha=false, add_reject=false, disable=false}) {
                const tr = $("tr[data-pago='" + pago_id + "']")

                tr.find(':nth-child(6)').html(valor)
                if (typeof color !== 'undefined') {
                    tr.find(':nth-child(7)').attr('class', color).html(estado)
                } else {
                    tr.find(':nth-child(7)').html(estado)
                }
                if (remove_fecha) {
                    tr.find(':nth-child(8)').html(fecha)
                }
                if (add_reject) {
                    tr.find(':nth-child(8)>.calendar>.input').append(
                        $('<button></button>').addClass('ui red basic icon button reject_estado').attr('data-pago', pago_id).append(
                            $('<i></i>').addClass('remove icon')
                        ).click(event => {
                            const target = $(event.currentTarget)
                            const pago_id = target.data('pago')
                            const fecha = target.parent().parent().calendar('get date')
                            devolver(target, pago_id, fecha)
                        })
                    )
                }
                if (disable) {
                    tr.addClass('disabled')
                    tr.find(':nth-child(9)').html('')
                }
                return tr
            }
            function depositar(button, pago_id, fecha) {
                const url = '{{$urls->api}}/ventas/pago/' + pago_id + '/depositar'
                const body = new FormData()
                body.set('fecha', fecha.toISOString())
                return fetchAPI(url, {method: 'post', body}).then(response => {
                    if (!response) {
                        return
                    }
                    return response.json().then(json => {
                        if (!json.depositado) {
                            return
                        }
                        updateRow({pago_id: json.pago_id, valor: json.pago.valor_uf, fecha: json.input.fecha, estado: 'Depositado', color: 'yellow', add_reject: true})
                        button.attr('data-estado', 'depositado')
                    })
                })
            }
            function abonar(pago_id, fecha) {
                const url = '{{$urls->api}}/ventas/pago/' + pago_id + '/abonar'
                const body = new FormData()
                body.set('fecha', [fecha.getFullYear(), fecha.getMonth() + 1, fecha.getDate()].join('-'))
                return fetchAPI(url, {method: 'post', body}).then(response => {
                    if (!response) {
                        return
                    }
                    return response.json().then(json => {
                        if (!json.abonado) {
                            return
                        }
                        updateRow({pago_id: json.pago_id, fecha: json.input.fecha, estado: 'Abonado', color: 'green', remove_fecha: true})
                    })
                })
            }
            function anular(pago_id) {
                const url = '{{$urls->api}}/ventas/pago/' + pago_id + '/anular'
                return fetchAPI(url).then(response => {
                    if (!response) {
                        return
                    }
                    return response.json().then(json => {
                        if (!json.anulado) {
                            return
                        }
                        updateRow({pago_id: json.pago_id, fecha: json.fecha, estado: 'Anulado', color: 'red', remove_fecha: true, disable: true})
                    })
                })
            }
            function devolver(button, pago_id, fecha) {
                const url = '{{$urls->api}}/ventas/pago/' + pago_id + '/devolver'
                const body = new FormData()
                body.set('fecha', fecha.toISOString())
                return fetchAPI(url, {method: 'post', body}).then(response => {
                    if (!response) {
                        return
                    }
                    return response.json().then(json => {
                        if (!json.devuelto) {
                            return
                        }
                        updateRow({pago_id: json.pago_id, fecha: json.input.fecha, estado: 'Devuelto', color: 'red'})
                        button.parent().find('.accept_estado').attr('data-estado', 'devuelto')
                        button.remove()
                    })
                })
            }
            function editar(id, body) {
                const url = '{{$urls->api}}/ventas/pago/' + id
                return fetchAPI(url, {method: 'post', body}).then(response => {
                    if (!response) {
                        return
                    }
                    return response.json().then(json => {
                        if (!json.editado) {
                            return
                        }
                        const tr = $(`tr[data-pago='${json.pago.id}']`)
                        tr.children(':nth-child(1)').html(json.pago.numero)
                        const fecha = json.pago.fecha.split(' ')[0].split('-').reverse().join('-')
                        tr.children(':nth-child(2)').html(fecha)
                        tr.children(':nth-child(3)').html(json.pago.banco.nombre)
                        tr.children(':nth-child(4)').html(json.pago.identificador)
                        const pesosFormatter = Intl.NumberFormat('es-CL', {style: 'currency', currency: 'CLP'})
                        tr.children(':nth-child(5)').html(pesosFormatter.format(json.pago.valor))
                        const ufFormatter = Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
                        tr.children(':nth-child(6)').html(ufFormatter.format(json.pago.valor_uf) + ' UF')
                    })
                })
            }

            const editModal = new EditModal({id: '#edit_cuota_modal', approve: ({id, data}) => {
                    editar(id, data)
                }})
            $('.edit_cuota').on('click', clickEvent => {
                const id = $(clickEvent.currentTarget).data('cuota')
                const tr = $(`tr[data-pago='${id}']`)
                const number = tr.children(':nth-child(1)').text().split('<')[0].trim()
                const fecha = tr.children(':nth-child(2)').text()
                const nombre_banco = tr.children(':nth-child(3)').text()
                const banco_id = bancos.filter(banco => banco.nombre === nombre_banco)[0].id
                const identificador = tr.find(':nth-child(4)').text()
                const valor = parseInt(tr.find(':nth-child(5)').text().replace('$', '').replaceAll('.', '').trim())

                editModal.open({id, number, fecha, banco_id, identificador, valor})
            })
            const editCuotaModal = new EditEstadoModal({id: '#edit_estado_cuota_modal', approve: ({id, data}) => {
                    const url = '{{$urls->api}}/ventas/pago/' + id + '/estado'
                    return fetchAPI(url, {method: 'post', body: data}).then(response => {
                        if (!response) {
                            return
                        }
                        return response.json().then(json => {
                            if (!json.editado) {
                                return
                            }
                            window.location.reload()
                        })
                    })
                }})
            $('.edit_estado_cuota').on('click', clickEvent => {
                const id = $(clickEvent.currentTarget).data('cuota')
                const estado_id = $(clickEvent.currentTarget).data('estado')
                const fecha = $(clickEvent.currentTarget).data('fecha')

                editCuotaModal.open({id, estado_id, fecha})
            })
            $('.fecha_estado').calendar({
                type: 'date',
                formatter: {
                    date: 'DD-MM-YYYY'
                }
            })
            $('.accept_estado').click(event => {
                const target = $(event.currentTarget)
                const pago_id = target.data('pago')
                const fecha = target.parent().parent().calendar('get date')

                if (target.attr('data-estado') === 'depositado') {
                    return abonar(pago_id, fecha)
                }
                return depositar(target, pago_id, fecha)
            })
            $('.reject_estado').click(event => {
                const target = $(event.currentTarget)
                const pago_id = target.data('pago')
                const fecha = target.parent().parent().calendar('get date')
                devolver(target, pago_id, fecha)
            })
            $('.anular').click(event => {
                const pago_id = $(event.currentTarget).data('pago')
                anular(pago_id)
            })

            new DataTable('#cuotas', {
                language: {
                    info: 'Mostrando página _PAGE_ de _PAGES_',
                    infoEmpty: 'No hay cuotas ingresadas',
                    infoFiltered: '(filtrado de _MAX_ cuotas)',
                    lengthMenu: 'Mostrando de a _MENU_ cuotas',
                    zeroRecords: 'No se encotró cuotas con ese criterio',
                    search: 'Buscar: '
                },
                pageLength: "100",
                columnDefs: [
                    {
                        target: 1,
                        orderData: [2],
                        className: 'dt-center'
                    },
                    {
                        target: 2,
                        visible: false,
                        searchable: false
                    },
                    {
                        target: 3,
                        className: 'dt-center'
                    },
                    {
                        targets: [5, 6],
                        className: 'dt-right'
                    },
                    {
                        target: 7,
                        className: 'dt-center'
                    },
                    {
                        target: 8,
                        orderData: [9]
                    },
                    {
                        target: 9,
                        visible: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'asc'],
                    [2, 'asc']
                ],
                layout: {
                    top2End: {
                        buttons: [
                            {
                                extend: 'excel',
                                className: 'green',
                                text: 'Exportar a Excel <i class="file excel icon"></i>',
                                title: 'Cuotas - {{$venta->proyecto()->descripcion}} - {{$venta->propiedad()->summary()}}',
                                download: 'open',
                                exportOptions: {
                                    columns: ':visible'
                                }
                            }
                        ]
                    }
                }
            })
        })
    </script>
@endpush