@extends('ATCore::atcore_layout')

@section('head_buttons')

@stop

@section('atplus_main_content')
@if (isset($selectedAccount))
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Main content -->
            <div class="invoice p-3 mb-3">
                <!-- Table row -->
                <div class="row">
                    <div class="col-12 table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Servicio</th>
                                    <th>Periodo de Facturación</th>
                                    <th>Valor</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($unpaidServices as $us)
                                <tr>
                                    <td>{{$us->service_name}}</td>
                                    <td>{{$us->period}}</td>
                                    <td style="text-align: right">{{ATFormatMoney($us->service_value)}}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->

                <div class="row">
                    <!-- accepted payments column -->
                    <div class="col-md-6 col-sm-12">
                        <p class="lead">Selecciona el método de Pago:</p>
                        <button class="btn btn-default btn-lg btn-block" id="_wire_transfer" onclick="selectPaymentMethod(1)">Transferencia Bancaria</button>
                        @if (env('TRANSBANK_ENABLED') || auth()->user()->email == 'revision@transbank.cl')
                        <button class="btn btn-default btn-lg btn-block" id="_transbank" onclick="selectPaymentMethod(2)">Transbank</button>

                        <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">
                            Los pagos realizados a través de Transbank tienen un recargo de servicio del 2,43%
                        </p>

                        @endif
                    </div>
                    <!-- /.col -->
                    <div class="col-md-6 col-sm-12">
                        <div class="table-responsive">
                            <table class="table">
                                <tr>
                                    <th style="width:50%">Cargo por Servicio:</th>
                                    <td style="text-align: right"><span id="_charge_for_service">{{ATFormatMoney(0)}}</span></td>
                                </tr>
                                <tr>
                                    <th style="width:50%">Subtotal:</th>
                                    <td style="text-align: right"><span id="_subtotal">{{ATFormatMoney($subtotal)}}</span></td>
                                </tr>

                                <tr>
                                    <th>IVA</th>
                                    <td style="text-align: right"><span id="_iva">{{ATFormatMoney($IVA)}}</span></td>
                                </tr>

                                <tr>
                                    <th>Total:</th>
                                    <td style="text-align: right"><span id="_total">{{ATFormatMoney($total)}}</span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->

                <!-- this row will not appear when printing -->
                <div class="row no-print">
                    <div class="col-12">
                        <button type="button" class="btn btn-success float-right disabled" id="_payment_button" onclick="makePayment();"><i class="far fa-credit-card"></i> Realizar Pago</button>
                        <a href="{{route('account_status')}}" class="btn btn-secondary"> Cancelar</a>
                    </div>
                </div>
            </div>
            <!-- /.invoice -->
        </div><!-- /.col -->
    </div><!-- /.row -->
</div><!-- /.container-fluid -->
<form name="step_one_store" id="_step_one_store" method="POST" action="{{route('step_one_store')}}">
    @csrf
    <input type="hidden" name="account_id" value="{{$selectedAccount->id}}">
    <input type="hidden" name="billing_invoices" value="{{$unpaidServicesIDs}}">
    <input type="hidden" name="payment_type" id="_payment_type">
    <input type="hidden" name="charge_for_service" id="_form_charge_for_service">
    <input type="hidden" name="subtotal" id="_form_subtotal">
    <input type="hidden" name="iva" id="_form_iva">
    <input type="hidden" name="total" id="_form_total">
</form>

@else
<div class="alert alert-warning">

    <h5><i class="icon fas fa-exclamation-triangle"></i> Atención!</h5>
    Para usar esta característica debes primero seleccionar una cuenta para operar.
</div>
@endif


@stop


@section('atplus_main_js')
@if (isset($selectedAccount))
<script>
    function selectPaymentMethod(value){
        if (value == 1){
            @if (env('TRANSBANK_ENABLED') || auth()->user()->email == 'revision@transbank.cl')
            document.getElementById('_transbank').classList.remove('btn-success');
            document.getElementById('_transbank').classList.add('btn-default');
            @endif
            document.getElementById('_wire_transfer').classList.remove('btn-default');
            document.getElementById('_wire_transfer').classList.add('btn-success');

            document.getElementById('_charge_for_service').innerHTML = '{{ATFormatMoney(0)}}';
            document.getElementById('_subtotal').innerHTML = '{{ATFormatMoney($subtotal)}}';
            document.getElementById('_iva').innerHTML = '{{ATFormatMoney($IVA)}}';
            document.getElementById('_total').innerHTML = '{{ATFormatMoney($total)}}';

            document.getElementById('_form_charge_for_service').value = '{{(0)}}';
            document.getElementById('_form_subtotal').value = '{{($subtotal)}}';
            document.getElementById('_form_iva').value = '{{($IVA)}}';
            document.getElementById('_form_total').value = '{{($total)}}';

        }else{
            document.getElementById('_wire_transfer').classList.remove('btn-success');
            document.getElementById('_wire_transfer').classList.add('btn-default');
            document.getElementById('_transbank').classList.remove('btn-default');
            document.getElementById('_transbank').classList.add('btn-success');

            document.getElementById('_charge_for_service').innerHTML = '{{ATFormatMoney($chargeForService)}}';
            document.getElementById('_subtotal').innerHTML = '{{ATFormatMoney($subtotalWCFS)}}';
            document.getElementById('_iva').innerHTML = '{{ATFormatMoney($IVAWCFS)}}';
            document.getElementById('_total').innerHTML = '{{ATFormatMoney($totalWCFS)}}';

            document.getElementById('_form_charge_for_service').value = '{{($chargeForService)}}';
            document.getElementById('_form_subtotal').value = '{{($subtotalWCFS)}}';
            document.getElementById('_form_iva').value = '{{($IVAWCFS)}}';
            document.getElementById('_form_total').value = '{{($totalWCFS)}}';
        }
        document.getElementById('_payment_button').classList.remove('disabled');
        document.getElementById('_payment_type').value = value;

    }

    function makePayment(){
        if (document.getElementById('_payment_type').value)
            document.getElementById('_step_one_store').submit();
    }
</script>
@endif
@stop
@section('atplus_main_css')

@stop