@extends('master')
@section('style')
<link rel="stylesheet" href="/assets/plugins/sweetalert2/sweetalert2.min.css">
@endsection
@section('content')
<section class="main-title-section-wrapper default">
    <div class="container">
        <div class="main-title-section">
            <h1>Pagar con Yape</h1>
        </div>
        <div class="breadcrumb"><a href="/">Inicio</a><span class="fa default"></span><span class="current">Pagar con Yape</span></div>
        @include('partials.submenu')
    </div>
</section>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <style type="text/css">
                /*! CSS Used from: Embedded */
                .ezJozY{background-color:#683978;height:82px;display:flex;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center;padding:0px 25px;box-sizing:border-box;}
                @media screen and (max-width: 500px){
                .ezJozY{flex-direction:column;height:122px;padding:15px 0px;}
                }
                .khUSez{text-align:center;}
                .cGxryq{font-weight:bold;font-size:18px;color:#fff}
                .kqLucY{margin-bottom:10px;font-size:13px;}
                .dKpVWp{max-width:1092px;text-align:center;margin:0px auto 0px;padding:0px 10px;}
                @media (max-width: 644px){
                .dKpVWp{margin:0px auto;padding:0px;}
                }
                .fNlexH{line-height:34px;width:calc(100% - 92px);outline:none;border:1px solid rgb(83, 83, 83);padding:0px 10px;font-size:14px;box-sizing:border-box;margin:0px;}
                .kXyuFy{display:flex;flex-wrap:nowrap;}
                @media (max-width: 644px){
                .kXyuFy{flex-wrap:wrap;}
                }
                .gWoEjH{
                height: 32px;
                outline: none;
                cursor: pointer;
                background-color: rgb(0, 0, 0);
                color: white;
                padding: 0px 12px;
                font-size: 14px;
                border: none;
                margin-top: 0;
                margin: 0 0 0 5px;
                }
                .hfyLFP{display:block;width:100%;font-weight:bold;font-size:20px;margin:40px 0px 12px;margin-block:0.83em;margin-inline:0px;overflow-wrap:break-word;}
                .iOtDzm{display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;}
                .bnlLpy{flex:1 1 calc(100% - 230px);}
                @media (max-width: 644px){
                .bnlLpy{width:100%;}
                }
                .dtHTYm{background-color:rgb(244, 244, 244);}
                .kWgUNB{text-align:left;margin:0px auto;padding:0px 10px;display:flex;-webkit-box-pack:center;justify-content:center;flex-direction:column;-webkit-box-align:center;align-items:center;}
                .cqvssG{display:flex;flex-direction:column;}
                @media (min-width: 500px){
                .cqvssG{flex-direction:row;}
                }
                .kJLWOR{background-color:#773C78;flex:1 1 0%;min-height:88px;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;flex-direction:column;font-size:14px;padding:16px 5px;box-sizing:border-box;}
                .hrlmaO{margin:0px 0px 6px;font-size:14px;color:#fff}
                .hQXjPT{display:block;-webkit-box-align:center;align-items:center;}
                @media screen and (max-width: 500px){
                .hQXjPT{flex-direction:column;}
                }
                .cULFlb{background-color:rgb(0, 0, 0);color:white;flex:1 1 0%;min-height:88px;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;flex-direction:column;font-size:14px;padding:16px 0px;box-sizing:border-box;}
                .hlLdvd{position:relative;height:26px;padding:0px 10px;background-color:#9C27B0;border:1px solid #673AB7;font-weight:600;font-size:12px;border-radius:4px;margin:0px;}
                .hlLdvd:hover{cursor:pointer;background-color:rgb(221, 179, 5);}
                .hlLdvd::before{position:absolute;transition:opacity 0.2s ease-in 0s;content:"¡Copiado!";opacity:0;top:-18px;left:50%;transform:translateX(-50%);color:rgb(255, 255, 255);font-size:10px;font-weight:400;background-color:rgb(0, 0, 0);border-radius:2px;width:50px;height:12px;}
                .hlLdvd::after{content:"";transition:opacity 0.2s ease-in 0s;opacity:0;position:absolute;left:50%;transform:translateX(-50%);top:-8px;border-top:4px solid rgb(0, 0, 0);border-left:4px solid transparent;border-right:4px solid transparent;}
                .hlLdvd svg{margin:0px 5px 0px 0px;vertical-align:text-bottom;}
                @media screen and (max-width: 500px){
                .hlLdvd::before{top:50%;left:100%;transform:translate(8px, -50%);}
                .hlLdvd::after{top:50%;left:100%;border-right:4px solid rgb(0, 0, 0);border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:none;transform:translate(4px, -50%);}
                }
                .gbkIDu{font-size:26px;font-weight:bold;margin:0px;}
                .deFOJS{display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;margin:10px auto;padding:0px 12px;}
                .deFOJS svg{margin-right:8px;}
                .hKBWkr{text-align:left;font-size:14px;}
                .hKBWkr span{color:rgb(0, 0, 0);}
                .hKBWkr strong{color:rgb(0, 0, 0);font-weight:bold;}
                .kIsmDr{padding:12px 0px;font-size:15px;}
                .kIsmDr p{margin:0px;}
                .iAWSO{display:block;border:0.5px solid rgb(237, 237, 237);margin:0px auto 35px;}
                @media (min-width: 644px){
                .iAWSO{display:none;}
                }
                .cdkMlZ{min-width:320px;margin-left:15px;}
                @media (max-width: 644px){
                .cdkMlZ{width:100%;margin:38px auto 0px;padding:0px 15px;}
                }
                .gwfVKz{display:block;-webkit-box-align:center;align-items:center;font-size:24px;font-weight:bold;margin:0px;flex:0 0 auto;}
                @media screen and (max-width: 500px){
                .gwfVKz{margin-right:0px;margin-bottom:6px;}
                }
                .hJfMFZ{margin:0px auto;text-align:center;border:1px solid rgba(0, 0, 0, 0.19);}
                @media (max-width: 644px){
                .hJfMFZ{margin:0px 10px;}
                }
                .ivRLby{line-height:24px;padding:4px 0px;background-color:rgb(244, 244, 244);}
                .jMmuRg{width:200px;height:200px;margin:0px auto;}
                @media (max-width: 290px){
                .jMmuRg{width:100%;height:auto;}
                .jMmuRg img{width:100%;height:auto;}
                }
                .cvOhsU{font-size:13px;line-height:15px;color:red!important;font-style:italic;font-weight:400;}
                .irlVUY{margin:19px auto 33px;width:140px;}
                .ftumEp{margin:0px 3px;}
                .dxgkji{max-width:670px;margin:0px auto 40px;text-align:center;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;flex-wrap:wrap;}
                .cqCRmp{max-width:538px;margin:0px auto 40px;text-align:center;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;flex-wrap:wrap;}
                .ebOirj{margin:0px 6px 6px 0px;}
                .OUqIT{font-size:24px;font-weight:bold;text-align:center;margin-block:0.83em;margin-inline:0px;margin:40px 0px 12px;}
                .deNRsc{display:flex;flex-wrap:wrap;width:100%;}
                @media (min-width: 768px){
                .deNRsc{margin:22px auto 26px;}
                }
                .lfQhRr{font-size:18px;color:black;margin-top:0px;margin-bottom:4px;text-transform:none;font-weight:bold;text-align:left;}
                @media (min-width: 768px){
                .lfQhRr{margin-bottom:16px;}
                }
                .hviCKw{flex:1 1 0%;font-size:13px;padding:0px;}
                @media (min-width: 768px){
                .hviCKw{padding:0px 10px;}
                }
                .doiKMc{border-top:1px solid rgb(237, 237, 237);padding-top:20px;padding-left:4%;display:flex;flex-direction:column;width:100%;}
                @media (min-width: 768px){
                .doiKMc{flex-direction:row;}
                }
                .bTlqcJ{display:flex;flex-wrap:wrap;line-height:20px;margin:0px;padding:0px;}
                .lmKLdO{display:flex;height:25px;color:rgb(109, 109, 109);font-weight:bold;font-size:16px;align-items:flex-end;}
                .iYIneG{align-self:flex-end;}
                .fRzfaQ{margin-right:4px;}
                .jQcSux{padding:0px 4px;}
                .xILRr{align-self:flex-start;font-size:12px;margin-left:2px;}
                .hHRwTc{display:flex;margin-bottom:12px;}
                .jPwlaz{margin-right:6px;display:inline-block;}
                .jsEkkp{display:inline-block;max-width:95%;vertical-align:top;}
                .jxexlS{list-style:none;margin:15px 0px;font-size:14px;color:rgb(0, 0, 0);}
                .gVUnWu{flex:1 1 0%;font-size:14px;color:rgb(109, 109, 109);padding:0px;}
                @media (min-width: 768px){
                .gVUnWu{padding:0px 5px;}
                }
                .fjFrwD{font-size:14px;color:rgb(109, 109, 109);font-style:italic;font-weight:400;margin:15px 0px;}
                .hRFAll{font-size:20px;font-weight:normal;margin:0px 0px 5px;text-transform:none;}
                .jRYnKb{color:rgb(0, 0, 0);display:block;font-size:20px;font-weight:bold;margin:0px 0px 15px;text-decoration:none;}
                .isJZpy{font-size:14px;max-width:600px;margin:0px auto;}
                .jpvZSy{text-align:center;margin-top:20px;}
                .cYmiYY{font-size:12px;line-height:24px;list-style:none;margin:22px 0px;padding-left:10px;}
                @media (min-width: 768px){
                .cYmiYY{padding-left:60px;}
                }
                .dVhhfx{display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;background-color:rgb(232, 232, 232);padding:40px 120px;margin:60px 0px 40px;gap:20px;}
                @media screen and (max-width: 720px){
                .dVhhfx{padding:40px;}
                }
                @media screen and (max-width: 500px){
                .dVhhfx{flex-direction:column;padding:40px;}
                }
                .bgpwAh{display:flex;flex-direction:column;-webkit-box-pack:start;justify-content:flex-start;gap:10px;}
                @media screen and (max-width: 500px){
                .bgpwAh{-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;}
                }
                .bgpwAh h2,.bgpwAh p{margin:0px;padding:0px;}
                .bgpwAh h2{font-size:19px;font-weight:700;}
                .bgpwAh p{font-size:16px;max-width:400px;}
                @media screen and (max-width: 500px){
                .bgpwAh p{text-align:center;}
                }
                .fIyNSq{width:auto;height:40px;object-fit:cover;}
                .gIXCTE{max-width:900px;margin:20px auto 0px;display:flex;-webkit-box-pack:end;justify-content:flex-end;}
                .gIXCTE a{background:black;color:white;cursor:pointer;display:flex;-webkit-box-align:center;align-items:center;width:140px;-webkit-box-pack:center;justify-content:center;height:34px;font-size:15px;text-decoration:none;}
                .gIXCTE a svg{fill:white;margin-left:8px;}
                .gIXCTE a:hover{color:white;outline:none;}
                .eYRMDm{border:0.5px solid rgb(237, 237, 237);margin:22px auto 26px;width:95%;}
                @media (max-width: 644px){
                .eYRMDm{display:none;}
                }
                *{box-sizing:border-box;}
                .qrDisplayNone{display:inline-block!important;}
                .secSoles .usdData{display:none;}
                .dWzgsN{display:block;-webkit-box-align:center;align-items:center;font-size:24px;font-weight:bold;margin:0px;flex:0 0 auto;color:#fff}
                @media screen and (max-width: 500px){
                .dWzgsN{margin-right:0px;margin-bottom:6px;color:#fff}
                }
            </style>
            <div style="margin:20px auto;border:2px solid #773C78">
                <div class="sc-bdVaJa ezJozY">
                    <img src="https://d1nxzqpcg2bym0.cloudfront.net/google_play/com.bcp.innovacxion.yapeapp/c828e408-b37e-11e9-a5c5-6f0b051d7627/128x128" width="64">
                    <div class="sc-bwzfXH cGxryq">Información para tu pago</div>
                </div>
                <div class="sc-htpNat dKpVWp">
                    <h2 class="sc-ifAKCX hfyLFP" style="line-height: 30px;">¡Estás a punto de finalizar tu compra en JUNEDAP!</h2>
                    <div class="sc-bxivhb kXyuFy">
                        <div data-qid="cipSection" class="sc-EHOje bnlLpy">
                            <div class="sc-bZQynM dtHTYm">
                                <div class="sc-fjdhpX kIsmDr">
                                    <p>Empresa: <strong>Junta Nacional de Estudiantes de Derecho</strong></p>
                                </div>
                                <div class="sc-gzVnrw cqvssG">
                                    <div data-qid="cipCodeWrapper" class="sc-htoDjs kJLWOR">
                                        <h4 class="sc-dnqmqq hrlmaO">Código de pago</h4>
                                        <span id="copyCode" class="sc-kgoBCf gwfVKz">
                                            <div class="sc-dnqmqq hQXjPT">
                                                <span class="sc-iwsKbI dWzgsN">{{$code}}</span>
                                                <button class="sc-gZMcBi hlLdvd" style="margin: 5px 0 0 38px;">
                                                    <svg width="16" height="15" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <g>
                                                            <path d="M8.05704 1.99872H2.52618C2.00721 1.99872 1.58569 2.40362 1.58569 2.90214V10.5251C1.58569 11.0236 2.00721 11.4285 2.52618 11.4285H8.05704C8.57602 11.4285 8.99753 11.0236 8.99753 10.5251V2.90214C8.99509 2.40362 8.57358 1.99872 8.05704 1.99872ZM8.33724 10.5228C8.33724 10.6725 8.21054 10.7942 8.0546 10.7942H2.52375C2.36781 10.7942 2.24111 10.6725 2.24111 10.5228V2.90214C2.24111 2.75235 2.36781 2.63065 2.52375 2.63065H8.0546C8.21054 2.63065 8.33724 2.75235 8.33724 2.90214V10.5228Z" fill="black"></path>
                                                            <path d="M10.1719 0H4.64105C4.12208 0 3.70056 0.404903 3.70056 0.903426C3.70056 1.07896 3.84675 1.21939 4.02949 1.21939C4.21223 1.21939 4.35842 1.07896 4.35842 0.903426C4.35842 0.753635 4.48512 0.63193 4.64105 0.63193H10.1719C10.3278 0.63193 10.4545 0.753635 10.4545 0.903426V8.52637C10.4545 8.67616 10.3278 8.79787 10.1719 8.79787C9.98917 8.79787 9.84298 8.9383 9.84298 9.11384C9.84298 9.28937 9.98917 9.4298 10.1719 9.4298C10.6909 9.4298 11.1124 9.0249 11.1124 8.52637V0.903426C11.1124 0.404903 10.6909 0 10.1719 0Z" fill="black"></path>
                                                        </g>
                                                        <defs>
                                                            <clipPath id="clip0">
                                                                <rect width="11.8974" height="11.4286" fill="white" transform="translate(0.400391)"></rect>
                                                            </clipPath>
                                                        </defs>
                                                    </svg>
                                                    Copiar
                                                </button>
                                            </div>
                                        </span>
                                    </div>
                                    <div data-qid="amountWrapper" class="sc-gZMcBi cULFlb">
                                        Monto a pagar
                                        <p data-qid="amount" class="sc-gqjmRU gbkIDu">S/.        328.90</p>
                                    </div>
                                </div>
                            </div>
                            <div class="sc-VigVT deFOJS">
                                <svg width="23" height="26" viewBox="0 0 23 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.3789 23.3553C6.54394 23.3553 2.61007 19.6 2.61007 14.9845C2.61007 10.3687 6.54394 6.61396 11.3789 6.61396C16.2136 6.61396 20.1474 10.3687 20.1474 14.9845C20.1474 19.6 16.2136 23.3553 11.3789 23.3553M13.5357 4.32053V2.64325H15.9338V0.204193H6.82402V2.64325H9.22214V4.32053C3.9758 5.2852 0 9.69891 0 14.9845C0 20.974 5.10455 25.8469 11.3789 25.8469C17.6533 25.8469 22.7575 20.974 22.7575 14.9845C22.7575 9.69891 18.7817 5.2852 13.5357 4.32053" fill="#1E1E1C"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5897 15.6838C10.4069 16.2818 10.7615 16.9092 11.3818 17.0856C12.0018 17.2618 12.653 16.9203 12.8357 16.3223L14.8541 9.72354L10.7543 15.3548C10.6844 15.4514 10.626 15.5643 10.5897 15.6838" fill="#1E1E1C"></path>
                                </svg>
                                <div class="sc-jTzLTM hKBWkr" style="text-align: center;">
                                    <span>Tienes <b>60 minutos</b> para </span> realizar el pago. 
                                    <strong data-qid="dateLine">
                                        Finaliza en : 
                                        <div class="simple-timer" style="display: inline-block; font-size: 15px"> <span class="timer-hour">00</span> <label class="separator">:</label> <span class="timer-minute">00</span> <label class="separator">:</label> <span class="timer-second">00</span> </div>
                                    </strong>
                                </div>
                            </div>
                            <div class="sc-jTzLTM hKBWkr" style="text-align: center; line-height: 22px; margin: 10px;">
                                <span><b>Instrucciones:</b><br> 
                                1. Coloca el <b>monto a pagar</b> y en la descripcion el <b>Código de pago</b>.<br> 
                                2. <b>YAPEA</b>, ingresa el numero de operación y adjunta la captura de pantalla. <br> 
                                3. Validaremos tu pago si es conforme, caso contrario se anulará el pedido.</span>
                                <br><br>
                                <span class="cvOhsU">
                                * Recuerda que la validación del pago puede tomar un máximo de 15 minutos<br>
                                * Los horarios son de 9:00 AM a 7:00 PM, los pagos realizados fuera del mismo se procesarán al día siguiente.
                                </span>
                            </div>
                        </div>
                        <div data-qid="qrSection" class="qrDisplayNone sc-cSHVUG cdkMlZ">
                            <hr class="sc-jzJRlG iAWSO">
                            <div class="sc-kpOJdX hJfMFZ" style="text-align: center; line-height: 22px;">
                                <div class="sc-dxgOiQ ivRLby">Escanea o descarga el <strong> QR </strong>, <br> subelo a tu YAPE <strong> y relice el pago</strong></div>
                                <div id="qr-code" class="sc-ckVGcZ jMmuRg"><img src="https://niubizqr.pagoefectivo.pe/B2AB68B6-4FCA-47E1-8C72-9378D2D02D10.png" alt="Código QR" width="200px" height="200px"></div>
                                <div class="sc-dxgOiQ ivRLby"><strong> YAPE / PLIN 987654321 <br></strong></div>
                                <input type="file" name="" style="font-size: 12px; margin: 20px 0 10px 0">
                                <div class="sc-ifAKCX iOtDzm" style="margin-bottom: 20px"><button class="sc-bxivhb gWoEjH">Enviar</button></div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
            </div>
        </div>
    </div>
    <!-- End .row -->
</div>
@endsection
@section('scripts')
<script src="/assets/plugins/sweetalert2/sweetalert2.min.js"></script>
<script src="/assets/js/simpletimer.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        $('.simple-timer').simpletimer({
            day: 0,
            dayDom: '.timer-day',
            hour: 1,
            hourDom: '.timer-hour',
            minute: 0,
            minuteDom: '.timer-minute',
            second: 0,
            secondDom: '.timer-second',
            millisecond: 0,
            millisecondDom: '.timer-millisecond',
            blank: 100,
            endFun: function () {
                location.href = '/checkout'
            }
        });
    });
</script>
@endsection