@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>
                    <a href="{{$urls->base}}/venta/{{$venta->id}}">{{$venta->propiedad()->summary()}}</a>
                </div>
            </h1>
        </div>
        <h2>Cuotas - Pie</h2>
        <table class="ui 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>
                </tr>
            </thead>
            <tbody>@php $now = new DateTimeImmutable(); @endphp
            @foreach ($venta->formaPago()->pie->cuotas() as $cuota)
                <tr>
                    <td>{{$cuota->numero}}</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 ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'abonado' and $cuota->pago->currentEstado->fecha <= $now)
                        {{$format->ufs($cuota->pago->valor())}}
                        @endif
                    </td>
                    <td
                        @if ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'abonado')
                            class="green"
                        @elseif ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'depositado')
                            class="yellow"
                        @elseif ($cuota->pago->currentEstado->tipoEstadoPago->activo !== 1)
                            class="red"
                        @endif
                    >{{ucwords($cuota->pago->currentEstado->tipoEstadoPago->descripcion)}}</td>
                    <td>
                        @if ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'abonado')
                            {{$cuota->pago->currentEstado->fecha->format('d-m-Y')}}
                        @else
                            <div class="ui action input">
                                <div class="ui calendar fecha_estado" data-date="{{$cuota->pago->currentEstado->fecha->format('Y-m-d')}}">
                                    <div class="ui icon input">
                                        <i class="calendar icon"></i>
                                        <input type="text" name="fecha_estado" />
                                    </div>
                                </div>
                                <button class="ui green basic icon button" id="accept_estado" data-pago="{{$cuota->pago->id}}">
                                    <i class="check icon"></i>
                                </button>
                                @if ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'depositado')
                                    <button class="ui red basic icon button" id="reject_estado" data-pago="{{$cuota->pago->id}}">
                                        <i class="remove icon"></i>
                                    </button>
                                @endif
                            </div>
                        @endif
                    </td>
                    <td>{{$cuota->pago->currentEstado->fecha->format('Y-m-d')}}</td>
                </tr>
            @endforeach
            </tbody>
            <tfoot>
            <tr>
                <th colspan="5">TOTAL</th>
                <th class="right aligned">
                    {{$format->pesos(array_reduce($venta->formaPago()->pie->cuotas(),
                        function(float $sum, Incoviba\Model\Venta\Cuota $cuota) {
                            return $sum + $cuota->pago->valor;
                        }, 0))}}
                </th>
                <th class="right aligned">
                    {{$format->ufs(array_reduce($venta->formaPago()->pie->cuotas(),
                        function(float $sum, Incoviba\Model\Venta\Cuota $cuota) {
                            return $sum + $cuota->pago->valor();
                        }, 0))}}
                </th>
                <th colspan="3"></th>
            </tr>
            <tr>
                <th colspan="5">TOTAL PAGADO</th>
                <th class="right aligned">
                    {{$format->pesos(array_reduce($venta->formaPago()->pie->cuotas(true),
                        function(float $sum, Incoviba\Model\Venta\Cuota $cuota) {
                            return $sum + $cuota->pago->valor;
                        }, 0))}}
                </th>
                <th class="right aligned">
                    {{$format->ufs(array_reduce($venta->formaPago()->pie->cuotas(true),
                        function(float $sum, Incoviba\Model\Venta\Cuota $cuota) {
                            return $sum + $cuota->pago->valor();
                        }, 0))}}
                </th>
                <th colspan="3"></th>
            </tr>
            </tfoot>
        </table>
    </div>
@endsection

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

@push('page_scripts')
    <script type="text/javascript">
        $(document).ready(() => {
            $('.fecha_estado').calendar({
                type: 'date',
                formatter: {
                    date: 'DD-MM-YYYY'
                }
            })

            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: '
                },
                columnDefs: [
                    {
                        target: 1,
                        orderData: [2]
                    },
                    {
                        target: 2,
                        visible: false,
                        searchable: false
                    },
                    {
                        target: 8,
                        orderData: [9]
                    },
                    {
                        target: 9,
                        visible: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'asc'],
                    [2, 'asc']
                ]
            })
        })
    </script>
@endpush