@extends('master')
@section('style')
<link rel="stylesheet" href="/assets/plugins/sweetalert2/sweetalert2.min.css">
<link rel="stylesheet" href="{{mix('/assets/css/checkout.css')}}">
<link rel="stylesheet" href="{{mix('/assets/css/pages/plugins/vibox.css')}}" />
@endsection
@section('content')
<section class="main-title-section-wrapper default">
    <div class="container">
        <div class="main-title-section">
            <h1>Pagar</h1>
        </div>
        <div class="breadcrumb"><a href="/">Inicio</a><span class="fa default"></span><span class="current">Pagar</span></div>
        @include('partials.submenu')
    </div>
</section>
@if(!empty($cart))
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="cart-summary">
                <span style="font-weight: bold;">Elige medio de pago</span>
                <style type="text/css">
                </style>
                <div class="informacionPago">
                    <div id="selectorMP">
                        <section id="mediopago" style="border-top: 1px solid rgba(0, 0, 0, 0.1); padding-top: 10px; margin-top: 10px;">
                            <ul data-js-medios="">
                                {{--<li>
                                    <div class="medio">
                                        <input type="radio" class="circ" name="payment_method" id="payment-method__credit-card" value="mercadopago"> <img src="/assets/images/mediopago/tarjetas.webp" width="89" height="57" border="0">
                                        <p class="title-payment">Tarjetas Credito / Debito</p>
                                        <span class="description_payment">Puedes realizar tu pago con las tarjetas Visa - Mastercard - American Express - Diners</span>
                                        <span class="description_payment_mini">Visa - Mastercard - AMEX - Diners</span>
                                    </div>
                                </li>--}}
                                <li style="height: 76px!important;">
                                    <div class="medio">
                                        <input type="radio" class="circ" name="payment_method" id="payment-method__pago-efectivo-cash" value="pagoefectivo"> <img src="/assets/images/mediopago/pagoefectivo.webp" width="89" height="57" border="0">
                                        <p class="title-payment">Pago Efectivo</p>
                                        <span class="description_payment">Banca móvil, Internet, Agentes o Bodegas. Tambien págalo desde tu billetera favorita <b>(YAPE o PLIN)</b></span>
                                        <span class="description_payment_mini" style="line-height: normal!important; margin-top: -10px">Banca móvil, Agentes o Bodegas. <br> Tambien págalo desde tu billetera <b>(YAPE o PLIN)</b></span><br>
                                    </div>
                                </li>                                
                                <li>
                                    <div class="medio">
                                        <input type="radio" class="circ" name="payment_method" id="payment-method__yape" value="bancaria"> <img src="/assets/images/mediopago/deposito.webp" width="89" height="57" border="0">
                                        <p class="title-payment title-payment-deposito">Depósito o Transferencia Bancaria</p>
                                        <span class="description_payment">Podras realizar tu pago a nuestra cuenta bancaria y además recibiras un <b>DESCUENTO</b> especial</b></span>
                                        <span class="description_payment_mini" style="line-height: normal!important; margin-top: -10px">Deposita a nuestra cuenta bancaria y recibe un <b>DESCUENTO</b> especial</b></span>
                                    </div>
                                </li>
                            </ul>
                        </section>
                    </div>
                </div>
            </div>
            <!-- End .cart-summary -->
        </div>
        <!-- End .col-lg-12 -->  
        <div class="col-lg-9">
            @if(!empty($cart))
            <div class="cart-table-container">
                <span style="font-weight: bold;">Detalle de tu compra</span>
                <table class="table table-cart">
                    <tbody>
                        @foreach ($cart as $x => $item)
                        <tr class="product-row">
                            <td style="width: 120px;">
                                <figure class="product-image-container">
                                    <img src="{{config('app.cdn_image')}}/images/offers/350x210/{{$item['MediaFileName']}}" alt="product">
                                </figure>
                            </td>
                            <td class="product-col">
                                <h5 class="product-title">
                                    <span><b>{{$item['MerchantName']}}</b></span>
                                    <br>
                                    {{$item['Title']}} @if(!empty($item['SubGroupLevel1'])) ({{$item['SubGroupLevel1']}} @if(!empty($item['SubGroupLevel2'])) | {{$item['SubGroupLevel2']}} @endif @if(!empty($item['SubGroupLevel3'])) | {{$item['SubGroupLevel3']}} @endif @if(!empty($item['SubGroupDate'])) | {{$item['SubGroupDate']}} @endif @if(!empty($item['SubGroupTime'])) | {{$item['SubGroupTime']}}@endif) @endif
                                </h5>
                            </td>
                            <td>{{$item['Quantity']}} x S/.{{number_format($item['ListingPrice'], 2, '.', '')}}</td>
                            <td class="text-right"><span class="subtotal-price">S/.<span id="subtotal-2000-so123" class="subtotal">{{number_format($item['ListingPrice']*$item['Quantity'], 2, '.', '')}}</span></span></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif
        </div>
        <!-- End .col-lg-9 -->
        <div class="col-lg-3">
            <div class="cart-summary">
                <h3 style="text-align: center;">Resumen Total</h3>
                <table border="1">
                    <tbody>
                        @if(!empty($creditAmount))
                        <tr>
                            <td style="min-width: 120px;">¿Usar E-cash? </td>
                            <td style="font-size: 1.0rem">S/.{{number_format($creditAmount, 2, '.', '')}} <input type="checkbox" class="cash-check" style="width: 1.0rem; height: 1.0rem; margin: 0 0 0 5px;" checked> </td>
                        </tr>
                        @endif
                        @if(!empty($codeAuto))
                        <tr>
                            <td colspan="2" style="text-align: center!important;">
                                <div id="code_discount">
                                    <span id="code_name" class="text-primary clanPro" style="color: #607D8B">Dscto. @if(!empty($codeAuto)) {{$codeAuto}} @endif </span> <br> <strong id="code_value" class="text-primary clanPro" style="font-size: 1.0rem">{{$discount_code}}</strong>
                                </div>
                            </td>
                        </tr>
                        @endif
                    </tbody>
                    <tfoot>
                        <tr>
                            <td style="min-width: 100px">Total a pagar</td>
                            <td>
                                <div class="price-box">
                                    <span id="total" style="font-size: 1.2rem">S/.{{$total}}</span>
                                    <br><span id="antes" class="old-price @empty($discount_total) d-none @endif" style="font-size: 1.1rem">{{(!empty($discount_total) and $discount_total>0)? 'S/.' . $totalBefore : ''}}</span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><button class="dt-sc-button medium red icon-right with-icon btn-block filled type1" id="btn-pagar">Realizar pago <i class="fa fa-arrow-right"></i></button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <!-- End .cart-summary -->
        </div>
        <!-- End .col-lg-4 -->              
    </div>
    <!-- End .row -->
</div>
<!-- End .container -->
@endif
<!-- **Container - End** -->
@endsection
@section('scripts')
<script src="https://sdk.mercadopago.com/js/v2"></script>
<script src="{{mix('/assets/js/pages/plugins/vibox.js')}}"></script>
<script src="/assets/plugins/sweetalert2/sweetalert2.min.js"></script>
<script src="{{mix('/assets/js/pages/compra.js')}}"></script>
<script type="text/javascript">
    const reference = '{{$referenceI}}';
    let datetime = '{{time()}}';
    let mount_reference = {{$total}};
    jQuery(function ($) {
        $(".circ").on('click', function(){
            const elements = document.querySelectorAll('*');
            elements.forEach((element) => {
                element.classList.remove('active-li');
            });            
            $(this).parent().parent().toggleClass("active-li");
        });
    });
</script>
@endsection