@extends('layouts.dashboardnew')

@section('content')

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                 
                <div class="row">
                    <div class="col-md-10 col-5">
                        <div class="form-group mt-2">
                            <h4><b>N° de orden: {{ $datos->id }}</b></h4>
                        </div>
                    </div>

                    <div class="col-md-2 col-7">
                        <div class="form-group">
                            <a class="btn btn-info w-100" id="btnCrearPdf">
                                <i class="fa-solid fa-cloud-arrow-down me-2"></i> Descargar PDF
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>   


<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body" id="descarga_pdf">
               
                <div class="d-flex justify-content-between me-3">
                    <div class="bd-highlight">
                        <img src="{{ asset('fondo/5.jpg') }}" alt="dark logo" class="img-fluid avatar-lg">
                    </div>
                    <div class="bd-highlight"></div>
                    <div class="bd-highlight text-end">
                        <h2><b>Factura</b></h2>
                        <h4>{{ $settings->name }}</h4>
                        <p>{{ $settings->direccion }}</p>
                    </div>
                </div>
                
                <div class="col-md-12 mb-3" style="height: 1px; border-top: 1px solid #ccc; margin: 1em 0;">
                </div>

                <div class="d-flex justify-content-between me-3">
                    <div class="bd-highlight">
                        <h5 class="text-muted">Factura a:</h5>
                        <h4>{{$datos->nombre}} {{$datos->apellido}}</h4>
                        <p class="mb-0">{{$datos->direccion}}</p>
                        <p class="mb-0">{{$datos->estado}}</p>
                        <p class="mb-0">{{$datos->ciudad}}</p>

                        <br>

                        <p class="mb-0">{{$datos->correo}}</p>
                        <p>{{$datos->telefono}}</p>
                    </div>
                    <div class="bd-highlight"></div>
                    <div class="bd-highlight">
                        <p class="mb-0"><b>N° de factura:</b> {{$datos->id}}</p>
                        <p class="mb-0"><b>Fecha:</b> {{$datos->fecha}}</p>
                        <p class="mb-0"><b>Forma de pago:</b> 
                            @if($datos->idmetodo != 0)
                              {{ $datos->optioncarrito->nombre }}
                            @else
                             {{ $datos->nombre_retiro }}
                            @endif
                        </p>

                        <div style="width:auto; height:30px; background-color: #d9f8eb; border-width: 1px; border-style: solid; border-color: #99edca;">
                            <h5 class="p-1" style="color: #00894f;">
                                Total pagado: 

                                <b>
                                @if ($moneda->mostrar_a_d)
                                   {{$moneda->simbolo}} {{$datos->total}}
                                @else
                                   {{$datos->total}} {{$moneda->simbolo}}
                                @endif
                                </b>

                            </h5>
                        </div>
                    </div>
                </div>    


                <div class="col-md-12">
                    <table class="table table-borderless">
                        <thead style="background: #2c7be5;">
                            <tr>
                              <th class="text-white">Productos</th>
                              <th class="text-white">Cantidad</th>
                              <th class="text-white">Precio</th>
                              <th class="text-white">Iva</th>
                              <th class="text-white">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(json_decode($datos->datoscompra) as $compra)
                            <tr>
                                <td>{{ $compra->producto }}</td>
                                <td>{{ $compra->cantidad }}</td>
                                <td>
                                  @if ($moneda->mostrar_a_d)
                                     {{$moneda->simbolo}} {{$compra->precio}}
                                  @else
                                     {{$compra->precio}} {{$moneda->simbolo}}
                                  @endif
                                </td>
                                <td>
                                  @if ($moneda->mostrar_a_d)
                                     {{$moneda->simbolo}} {{$compra->info}}
                                  @else
                                     {{$compra->info}} {{$moneda->simbolo}}
                                  @endif
                                </td>
                                <td>
                                  @if ($moneda->mostrar_a_d)
                                     {{$moneda->simbolo}} {{ (($compra->precio * $compra->cantidad) + $compra->info) }}
                                  @else
                                     {{ (($compra->precio * $compra->cantidad) + $compra->info) }} {{$moneda->simbolo}}
                                  @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>    

                <div class="col-md-12 mb-3" style="height: 1px; border-top: 1px solid #ccc; margin: 1em 0;">
                </div>

                <div class="d-flex flex-row-reverse bd-highlight me-3">
                    <div class="bd-highlight">
                        <p class="mb-0">
                            <b class="me-2">Sub total:</b>
                            @if ($moneda->mostrar_a_d)
                                {{$moneda->simbolo}} {{$datos->subtotal}}
                            @else
                                {{$datos->subtotal}} {{$moneda->simbolo}}
                            @endif
                        </p>

                        <div class="col-md-12" style="height: 1px; border-top: 1px solid #ccc; margin: .2em 0;">
                        </div>

                        <p class="mb-0">
                            <b class="me-2">IVA:</b>
                            @if ($moneda->mostrar_a_d)
                                {{$moneda->simbolo}} {{$datos->total_iva}}
                            @else
                                {{$datos->total_iva}} {{$moneda->simbolo}}
                            @endif
                        </p>

                        <div class="col-md-12" style="height: 1px; border-top: 1px solid #ccc; margin: .2em 0;">
                        </div>

                        <p class="mb-0">
                            <b class="me-2">Costo de envio:</b>
                            @if ($moneda->mostrar_a_d)
                                {{$moneda->simbolo}} {{$datos->total_costo}}
                            @else
                                {{$datos->total_costo}} {{$moneda->simbolo}}
                            @endif
                        </p>

                        <div class="col-md-12" style="height: 1px; border-top: 1px solid #ccc; margin: .2em 0;">
                        </div>

                        <h5 class="mb-0">
                            <b class="me-2">Total:</b>
                            <strong>
                            @if ($moneda->mostrar_a_d)
                                {{$moneda->simbolo}} {{$datos->total}}
                            @else
                                {{$datos->total}} {{$moneda->simbolo}}
                            @endif
                            </strong>
                        </h5>

                    </div>
                    <div class="bd-highlight"></div>
                    <div class="bd-highlight"></div>
                </div>


                <div class="col-md-12">
                    <div class="form-group mt-3">
                        <p><b>Nota:</b> {{ $datos->nota }}</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>    

@endsection


@push('script')
<script type="text/javascript">
    
    document.addEventListener("DOMContentLoaded", () => {
        // Escuchamos el click del botón
        const $boton = document.querySelector("#btnCrearPdf");
        $boton.addEventListener("click", () => {
            const $elementoParaConvertir = document.querySelector("#descarga_pdf");
            html2pdf()
                .set({
                    margin: 1,
                    filename: 'orden {{ $datos->id }}.pdf',
                    image: {
                        type: 'jpeg',
                        quality: 1
                    },
                    html2canvas: {
                        scale: 3, // A mayor escala, mejores gráficos, pero más peso
                        letterRendering: true,
                    },
                    jsPDF: {
                        unit: "cm",
                        format: "a3",
                        orientation: 'p'
                    }
                })
                .from($elementoParaConvertir)
                .save()
                .catch(err => console.log(err));
        });
    });

</script>
@endpush