@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 colspan="2">Valor</th>
            <th rowspan="2" colspan="2">Estado</th>
            <th class="right aligned" rowspan="2">
                <button class="ui tertiary green icon button" id="add_button">
                    <i class="plus icon"></i>
                </button>
            </th>
        </tr>
        <tr>
            <th class="right aligned">$</th>
            <th class="right aligned">UF</th>
        </tr>
        </thead>
        <tbody id="cuotas">
        @foreach ($cuotas as $cuota)
            <tr data-id="{{$cuota->id}}">
                <td class="numero" data-value="{{$cuota->numero}}">{{$cuota->numero}}</td>
                <td class="fecha" data-value="{{$cuota->pago->fecha->format('Y-m-d')}}">{{$cuota->pago->fecha->format('d-m-Y')}}</td>
                <td class="valor right aligned" data-value="{{$cuota->pago->valor}}">{{$format->pesos($cuota->pago->valor)}}</td>
                <td class="valor_uf right aligned" data-value="{{$cuota->pago->valor()}}">{{$format->ufs($cuota->pago->valor())}}</td>
                <td class="estado{{$cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'no pagado' ? ' warning' :
                        ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'abonado' ? ' positive' : '')}}"
                    data-value="{{$cuota->pago->currentEstado->tipoEstadoPago->id}}">
                    {{ucwords($cuota->pago->currentEstado->tipoEstadoPago->descripcion)}}
                    @if (in_array($cuota->pago->currentEstado->tipoEstadoPago->descripcion, ['abonado', 'depositado']))
                        <br />
                        {{$cuota->pago->currentEstado->fecha->format('d-m-Y')}}
                    @endif
                </td>
                <td class="collapsing">
                    @if (in_array($cuota->pago->currentEstado->tipoEstadoPago->descripcion, ['depositado', 'no pagado']))
                        <form class="ui compact form avance_pago_form" data-id="{{$cuota->id}}"
                              data-pago="{{$cuota->pago->id}}"
                              data-estado="{{$cuota->pago->currentEstado->tipoEstadoPago->descripcion}}">
                            <div class="inline field">
                                <div class="ui calendar">
                                    <div class="ui icon input">
                                        <input type="text" name="fecha_avance_pago{{$cuota->id}}" />
                                        <i class="calendar icon"></i>
                                    </div>
                                </div>
                                <button class="ui tertiary green icon button accept_button" data-id="{{$cuota->id}}"><i class="check icon"></i></button>
                                @if ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'depositado')
                                    <button class="ui tertiary red icon button cancel_button" data-id="{{$cuota->id}}"><i class="remove icon"></i></button>
                                @endif
                            </div>
                        </form>
                    @endif
                </td>
                <td class="right aligned">
                    <button class="ui tertiary icon button edit_button" data-id="{{$cuota->id}}">
                        <i class="edit icon"></i>
                    </button>
                    <button class="ui tertiary 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)
                })
            })

            Array.from(document.getElementsByClassName('avance_pago_form')).forEach(form => {
                form.addEventListener('submit', submitEvent => {
                    submitEvent.preventDefault()
                    return false
                })
                const cdo = structuredClone(calendar_date_options)
                cdo['initialDate'] = new Date()
                cdo['maxDate'] = new Date()
                @if ($cuota->pago->currentEstado->tipoEstadoPago->descripcion === 'depositado')
                    cdo['initialDate'] = new Date('{{$cuota->pago->currentEstado->fecha->format('Y-m-d')}}')
                @endif
                $(form).find('.ui.calendar').calendar(cdo)
            })
            Array.from(document.getElementsByClassName('accept_button')).forEach(button => {
                button.addEventListener('click', clickEvent => {
                    const id = $(clickEvent.currentTarget).data('id')
                    const method = 'post'
                    const form = Array.from(document.getElementsByClassName('avance_pago_form')).filter(form => parseInt(form.dataset.id) === id)[0]
                    const pago = form.dataset.pago
                    const estado = form.dataset.estado
                    const newEstado = estado === 'depositado' ? 'abonar' : 'depositar'
                    const url = `{{$urls->api}}/ventas/pago/${pago}/${newEstado}`
                    const body = new FormData()
                    const fecha = $(form).find('.ui.calendar').calendar('get date')[0]
                    body.set('fecha', fecha.getFullYear() + '-' + (fecha.getMonth() + 1).toString().padStart(2, '0') + '-' + fecha.getDate().toString().padStart(2, '0'))

                    APIClient.fetch(url, {method, body}).then(response => {
                        if (response.ok) {
                            return response.json().then(json => {
                                if (json.success) {
                                    window.location.reload()
                                }
                            })
                        }
                    })
                })
            })
            Array.from(document.getElementsByClassName('cancel_button')).forEach(button => {
                button.addEventListener('click', clickEvent => {
                    const id = $(clickEvent.currentTarget).data('id')
                    const method = 'post'
                    const form = Array.from(document.getElementsByClassName('avance_pago_form')).filter(form => parseInt(form.dataset.id) === id)[0]
                    const pago = form.dataset.pago
                    const url = `{{$urls->api}}/ventas/pago/${pago}/devolver`
                    const body = new FormData()
                    const fecha = $(form).find('.ui.calendar').calendar('get date')[0]
                    body.set('fecha', fecha.getFullYear() + '-' + (fecha.getMonth() + 1).toString().padStart(2, '0') + '-' + fecha.getDate().toString().padStart(2, '0'))

                    console.debug(url, body)
                })
            })
        })
    </script>
@endpush