@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h3 class="ui header">Abonar Cuotas</h3>
        <div class="ui grid">
            <div class="two wide column">Total</div>
            <div class="column">{{count($cuotas_depositadas)}}</div>
            <div class="two wide column">{{$format->pesos(array_reduce($cuotas_depositadas, function($sum, $cuota) {return $sum + $cuota['Valor'];}, 0))}}</div>
        </div>
        <table class="ui striped table" id="cuotas">
            <thead>
            <tr>
                <th class="two wide column">Proyecto</th>
                <th class="column">Departamento</th>
                <th>Departamento Sort</th>
                <th class="two wide column">Propietario</th>
                <th class="column">Valor Cuota</th>
                <th class="column">Fecha Cuota</th>
                <th>Fecha ISO</th>
                <th class="column">Fecha Depositada</th>
                <th class="two wide column">Fecha Abono / Devolución</th>
                <th class="column">Acción</th>
            </tr>
            </thead>
            <tbody>
            @foreach($cuotas_depositadas as $cuota)
                <tr>
                    <td>{{$cuota['Proyecto']}}</td>
                    <td>
                        <a href="{{$urls->base}}/venta/{{$cuota['venta_id']}}">{{$cuota['Departamento']}}</a>
                    </td>
                    <td>{{str_pad($cuota['Departamento'], 4, 0, STR_PAD_LEFT)}}</td>
                    <td>{{$cuota['Propietario']}}</td>
                    <td>{{$format->pesos($cuota['Valor'])}}</td>
                    <td>{{$cuota['Fecha Cheque']}}</td>
                    <td>{{$cuota['Fecha ISO']}}</td>
                    <td>{{$cuota['Fecha Depositada']}}</td>
                    <td>
                        <div class="ui calendar" data-cuota="{{$cuota['id']}}">
                            <div class="ui icon input">
                                <input type="text" name="fecha_abono{{$cuota['id']}}" />
                                <i class="calendar icon"></i>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="ui vertical buttons">
                            <button class="ui green icon button abonar" title="Abonar">
                                <i class="check icon"></i>
                            </button>
                            <button class="ui red icon button devolver" title="Devolver">
                                <i class="remove icon"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
@endsection

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

@push('page_scripts')
    <script>
        $(document).ready(() => {
            const cuotas_tables = new DataTable('#cuotas', {
                language: {
                    info: 'Mostrando página _PAGE_ de _PAGES_',
                    infoEmpty: 'No hay cuotas depositadas por abonar',
                    infoFiltered: '(filtrado de _MAX_ cuotas)',
                    lengthMenu: 'Mostrando de a _MENU_ cuotas',
                    zeroRecords: 'No se encotró cuotas con ese criterio',
                    search: 'Buscar: '
                },
                columnDefs: [
                    {
                        target: 6,
                        visible: false,
                        searchable: false
                    },
                    {
                        target: 2,
                        visible: false,
                        searchable: false
                    }
                ],
                order: [
                    [6, 'desc'],
                    [0, 'asc'],
                    [2, 'asc']
                ]
            })
            $('.ui.calendar').calendar({
                type: 'date',
                formatter: {
                    date: 'DD-MM-YYYY'
                }
            })
            $('.abonar.button').click(event => {
                const button = $(event.currentTarget)
                const cuota_id = button.data('cuota')
                const calendar = $(".ui.calendar[data-cuota='" + cuota_id + "']").calendar('get date')
                const fecha = [calendar.getFullYear(), calendar.getMonth()+1, calendar.getDate()].join('-')
                return fetchAPI('{{$urls->api}}/ventas/cuota/abonar', {
                    method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({cuota_id, fecha})
                }).then(response => {
                    if (response.ok) {
                        return response.json()
                    }
                }).then(data => {
                    if (data.depositada) {
                        const button = $(".depositar.button[data-cuota='" + data.cuota_id + "']")
                        const cell = button.parent()
                        const row = cell.parent()
                        cuotas_tables.row(row).remove().draw()
                    }
                })
            })
            $('.devolver.button').click(event => {
                const button = $(event.currentTarget)
                const cuota_id = button.data('cuota')
                const calendar = $(".ui.calendar[data-cuota='" + cuota_id + "']").calendar('get date')
                const fecha = [calendar.getFullYear(), calendar.getMonth()+1, calendar.getDate()].join('-')
                return fetchAPI('{{$urls->api}}/ventas/cuota/devolver', {
                    method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({cuota_id, fecha})
                }).then(response => {
                    if (response.ok) {
                        return response.json()
                    }
                }).then(data => {
                    if (data.depositada) {
                        const button = $(".depositar.button[data-cuota='" + data.cuota_id + "']")
                        const cell = button.parent()
                        const row = cell.parent()
                        cuotas_tables.row(row).remove().draw()
                    }
                })
            })
        })
    </script>
@endpush