@extends('layouts.app')

@section('content-header')
    <div class="col-sm-6">
        <h1 class="m-0"><i class="nav-icon fas fa-receipt fa-xs"></i> {{ __('Recibos') }}</h1>
    </div><!-- /.col -->
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item">Recibos</li>
        <li class="breadcrumb-item active">Ver Recibo</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

  <!-- Main content -->
  <section class="content">

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-12">
                <!-- jquery validation -->

                <div class="card card-primary">

                    <div class="card-header">
                    <h3 class="card-title">Recibo #{{ $recibo->id }}</h3>
                    </div>
                    <!-- /.card-header -->
                    
                    <div class="card-body">
                        
                        <!-- Main content -->
                        <div class="invoice p-3 mb-3">

                            <!-- title row -->
                            <div class="row">
                                <div class="col-12">
                                <h4>
                                    @if ($recibo->socio != null)
                                        <i class="fas fa-house-user"></i> {{ $recibo->socio->apellidos }}, {{ $recibo->socio->nombres }}
                                    @elseif ($recibo->inquilino != null)
                                        <i class="fas fa-users"></i> {{ $recibo->inquilino->apellidos }}, {{ $recibo->inquilino->nombres }}                                    
                                    @endif                                
                                    <small class="float-right">Fecha: {{ $recibo->fecha->format('d/m/Y') }}</small>
                                </h4>
                                </div>
                                <!-- /.col -->
                            </div>
                            <!-- info row -->

                            <div class="row invoice-info">

                                {{-- <div class="col-sm-4 invoice-col">
                                    From
                                    <address>
                                        <strong>Admin, Inc.</strong><br>
                                        795 Folsom Ave, Suite 600<br>
                                        San Francisco, CA 94107<br>
                                        Phone: (804) 123-5432<br>
                                        Email: info@almasaeedstudio.com
                                    </address>
                                </div> --}}
                                <!-- /.col -->

                                <div class="col-sm-4 invoice-col">
                                    Para
                                    <address>                                        
                                        @if ($recibo->socio != null)
                                            <strong>{{ $recibo->socio->apellidos }}, {{ $recibo->socio->nombres }}</strong><br>
                                            @foreach($recibo->socio->unidades as $vinculo)
                                                Dirección: {{ $vinculo->unidad->bloque->descripcion }}-{{ $vinculo->unidad->numero }}<br>
                                            @endforeach
                                            Teléfono: {{ $recibo->socio->telefono }}<br>
                                            E-mail: {{ $recibo->socio->email }}
                                        @elseif ($recibo->inquilino != null)
                                            <strong>{{ $recibo->inquilino->apellidos }}, {{ $recibo->inquilino->nombres }}</strong><br>                                            
                                            @foreach($recibo->inquilino->contratos as $vinculo)
                                                Nombre: {{ $vinculo->local->nombre }}<br>
                                                Dirección: {{ $vinculo->local->bloque->descripcion }}-{{ $vinculo->local->numero }}<br>
                                            @endforeach
                                            Teléfono: {{ $recibo->inquilino->telefono }}<br>
                                            E-mail: {{ $recibo->inquilino->email }}
                                        @endif                                                                                
                                    </address>
                                </div>
                                <!-- /.col -->

                                <div class="col-sm-4 invoice-col">
                                    Datos del recibo
                                    <address>
                                        Recibo <span class="badge bg-secondary">#{{ $recibo->id }}</span><br>
                                        Forma de pago: <br> 
                                        @foreach($recibo->origenesPago as $origen)
                                            <span class="badge bg-secondary">{{ $origen->origenPago->descripcion }}</span>
                                        @endforeach
                                    </address>
                                </div>
                                <!-- /.col -->

                            </div>
                            <!-- /.row -->

                            <!-- Table row -->
                            <div class="row">
                                <div class="col-12 table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Descripción</th>
                                                <th class="text-center">Subtotal</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if (empty($recibo->detalle) || count($recibo->detalle) == 0)
                                                <tr>
                                                    <td colspan="2" class="text-center">No existe detalle del recibo.</td>
                                                </tr>
                                            @endif
                                            @foreach($recibo->detalle as $detalle)
                                                <tr>                                            
                                                    <td>{{ $detalle->descripcion }}</td>
                                                    <td class="text-right">{{ $recibo->moneda->simbolo }} {{ number_format($detalle->importe, 2, ',', '.') }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.col -->

                            </div>
                            <!-- /.row -->

                            <div class="row">
                                <div class="col-12">
                                    <hr>
                                </div>
                            </div>
                            <!-- /.row -->

                            <div class="row">      

                                <!-- accepted payments column -->
                                <div class="col-6">                                    
                                    <p class="lead">Notas:</p>                                    
                                    <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">
                                        {{ $recibo->nota ?? 'No hay observaciones.' }}
                                    </p>
                                </div>
                                <!-- /.col -->

                                <div class="col-6">
                                    <p class="lead">&nbsp;</p>

                                    <div class="table-responsive">
                                        <table class="table">   
                                            <tr>
                                                <th>Redondeo:</th>
                                                <td class="text-right">{{ $recibo->moneda->simbolo }} {{ number_format($recibo->total - (int)$recibo->total, 2, ',', '.') }}</td>
                                            </tr>                                 
                                            <tr>
                                                <th>Total:</th>
                                                <td class="text-right">{{ $recibo->moneda->simbolo }} {{ number_format($recibo->total, 0, ',', '.') }}</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 class="btn btn-default btn-sm" onclick="printContentFromIframe( {{ $recibo->id }} )"><i class="fas fa-print"></i>  Imprimir</button>
                                <a href="{{ url()->previous() }}" class="btn btn-success float-right">Volver</a>
                                </div>
                            </div>

                        </div>
                        <!-- /.invoice -->
                        
                    </div>
                    <!-- /.card-body -->

                    <div class="card-footer text-right">
                        
                    </div>
                    <!-- /.card-footer -->

                </div>
                <!-- /.card -->

            </div>
            <!-- /.col -->

        </div>
        <!-- /.row -->

    </div>
    <!-- /.container-fluid -->

  </section>
  <!-- /.content -->

  <div class="modal fade" id="modal-printed" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Confirma</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>¿El recibo se imprimió correctamente?</p>
          <input type="hidden" name="recibo_id" id="recibo_id" value="">
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-error" data-dismiss="modal">No</button>
          <button type="button" class="btn btn-success" data-dismiss="modal" id="modal-printed-yes">Si</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

@endsection

@section('custom-scripts')
    <!-- jquery-validation -->
    <script src="/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="/plugins/jquery-validation/additional-methods.min.js"></script>
    <!-- InputMask -->
    <script src="/plugins/moment/moment.min.js"></script>
    <script src="/plugins/inputmask/jquery.inputmask.min.js"></script>
  <script>

    $(function () {

        moment.locale('es');

        //Datemask dd/mm/yyyy
        // $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
        //Datemask2 mm/dd/yyyy
        // $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })

        //Money Euro
        $('[data-mask]').inputmask()

        //Date picker
        $('#fecha').datetimepicker({
            format: 'DD/MM/YYYY',
            autoclose:true,
            language: 'es',
        });

        $('#editForm').validate({
            rules: {
            descripcion: {
                required: true,
                maxlength: 20,
            },
            simbolo: {
                required: true,
                maxlength: 5
            },
            },
            messages: {
                descripcion: {
                    required: "Por favor ingresa el identificador de la moneda",
                    maxlength: "El largo máximo es de 20."
                },
                simbolo: {
                    required: "Por favor ingresa el símbolo de la moneda",
                    maxlength: "El largo máximo es 5."
                },
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.col-sm-10').append(error);
            },
            highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
            },
            submitHandler: function(form) {
                form.submit();
            }
        });
    
    });

    $('#modal-printed').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal      
    });
    
    $("#modal-printed-yes").on("click", function(){
        console.log("yes clicked");
        window.location.href = "/recibos/after-print/" + $('#recibo_id').val();
    });

    function closePrint (reciboId) {
        const myModal = new bootstrap.Modal(document.getElementById('modal-printed'));
        myModal.show();
    }

    function setPrint (reciboId) {
        this.contentWindow.__container__ = this;
        this.contentWindow.onbeforeunload = closePrint(reciboId);
        this.contentWindow.onafterprint = closePrint(reciboId);
        this.contentWindow.focus(); // Required for IE
        this.contentWindow.print();
    }

    //Print Report
    function printContentFromIframe(reciboId) {      

        $('#recibo_id').val(reciboId);

        var iFrame = document.createElement("iframe");

        iFrame.id = 'hidden-frame';
        iFrame.onload = setPrint;
        iFrame.style.position = "fixed";
        iFrame.style.right = '100%'; // Move off-screen
        iFrame.style.bottom = '100%'; // Move off-screen
        iFrame.style.width = "0";
        iFrame.style.height = "0";
        iFrame.style.border = "0";
        iFrame.src = "/recibos/print/" + reciboId;

        document.body.appendChild(iFrame);
    
    }

  </script>
@endsection