@extends('ventas.base')

@section('venta_subtitle')
    Cuotas - Abono a Escritura
@endsection

@section('venta_content')
    <table class="ui table">
        <thead>
        <tr>
            <th rowspan="2">#</th>
            <th rowspan="2">Fecha</th>
            <th>Valor $</th>
            <th>UF</th>
            <th rowspan="2">Estado</th>
            <th class="right aligned">
                <button class="ui green icon button" id="add_button">
                    <i class="plus icon"></i>
                </button>
            </th>
        </tr>
        </thead>
        <tbody id="cuotas">
        @foreach ($cuotas as $cuota)
            <tr data-id="{{$cuota->id}}">
                <td class="numero" rowspan="2" data-value="{{$cuota->numero}}">{{$cuota->numero}}</td>
                <td class="fecha" rowspan="2" data-value="{{$cuota->pago->fecha->format('Y-m-d')}}">{{$cuota->pago->fecha->format('d-m-Y')}}</td>
                <td class="valor" data-value="{{$cuota->pago->valor}}">{{$format->pesos($cuota->pago->valor)}}</td>
                <td class="valor_uf" data-value="{{$cuota->pago->valor()}}">{{$format->ufs($cuota->pago->valor())}}</td>
                <td class="estado" rowspan="2" data-value="{{$cuota->pago->currentEstado->tipoEstadoPago->id}}">{{ucwords($cuota->pago->currentEstado->tipoEstadoPago->descripcion)}}</td>
                <td class="right aligned">
                    <button class="ui icon button edit_button" data-id="{{$cuota->id}}">
                        <i class="edit icon"></i>
                    </button>
                    <button class="ui red icon button remove_button" data-id="{{$cuota->id}}">
                        <i class="remove icon"></i>
                    </button>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>

    @include('ventas.escrituras.abono.cuotas.add_modal')
    @include('ventas.escrituras.abono.cuotas.edit_modal')
@endsection

@push('page_scripts')
    <script>
        $(document).ready(function () {
            const addModal = new AddModal({
                modal: '#add_cuota_modal',
                form: '#add_cuota_form',
                fecha: '#add_fecha',
            })
            const editModal = new EditModal({
                table: 'cuotas',
                modal: '#edit_cuota_modal',
                form: '#edit_cuota_form',
                fecha: '#edit_fecha',
                estado: '#edit_estado'
            })

            document.getElementById('add_button').addEventListener('click', clickEvent => {
                addModal.draw()
            })
            Array.from(document.getElementsByClassName('edit_button')).forEach(button => {
                button.addEventListener('click', clickEvent => {
                    const id = $(clickEvent.currentTarget).data('id')
                    editModal.getData({cuota_id: id})
                })
            })
            Array.from(document.getElementsByClassName('remove_button')).forEach(button => {
                button.addEventListener('click', clickEvent => {
                    const id = $(clickEvent.currentTarget).data('id')
                    const url = `{{$urls->api}}/venta/{{$venta->id}}/cuota/${id}`
                    const method = 'delete'
                    console.debug(url)
                })
            })
        })
    </script>
@endpush