@extends('master')
@section('style')
<link rel="stylesheet" href="{{mix('/assets/css/pages/dashboard.css')}}">
<link rel="stylesheet" href="/assets/plugins/sweetalert2/sweetalert2.min.css">
<link rel="stylesheet" href="{{mix('/assets/css/pages/plugins/vibox.css')}}" />
<link rel='stylesheet' href="{{mix('/assets/css/custom.css')}}" type='text/css' media='all' />
@endsection
@section('content')
<section class="main-title-section-wrapper default" style="">
    <div class="container">
        <div class="main-title-section">
            <h1>Mi Cuenta</h1>
        </div>
        <div class="breadcrumb"><a href="/">Inicio</a><span class="fa default"></span><span class="current">Mis compras</span></div>
        @include('partials.submenu')
    </div>
</section>
<!-- ** Container ** -->
<main class="main">
    <div class="container account-container custom-account-container">
        <div class="row">
            <div class="sidebar widget widget-dashboard mb-lg-0 mb-3 col-lg-3 order-0">
                <h2>Mi cuenta</h2>
                <ul class="nav nav-tabs list flex-column mb-0" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link" href="/micuenta/perfil">Datos personales</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/micuenta/documentos">Mis documentos</a>
                    </li>
                    @if(!empty($user['CustomerID']))
                    <li class="nav-item">
                        <a class="nav-link" href="/micuenta/membresia">Mi Membresía</a>
                    </li>                    
                    <li class="nav-item">
                        <a class="nav-link active show" href="/micuenta/compras">Mis compras</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/micuenta/cash">E-Cash</a>
                    </li>
                    @endif
                </ul>
            </div>
            <div class="col-lg-9 order-lg-last order-1 tab-content">
                <div class="dt-sc-tabs-horizontal-frame-container type3">
                    <ul class="dt-sc-tabs-horizontal-frame">
                        <li><a href="/micuenta/compras"><span class="fa fa-ticket"></span>Mis Tickets</a></li>
                        <li><a href="/micuenta/orders" class="current"><span class="fa fa-credit-card"></span>Pagos</a></li>
                    </ul>
                    <div class="wpb_text_column wpb_content_element">
                        <div class="wpb_wrapper">
                            <!-- End .tab-pane -->
                            <div class="tab-pane fade active show" id="order" role="tabpanel">
                                <div class="dashboard-content" style="min-height: 250px;">
                                    <p class="title_tab">
                                        En esta sección podras visualizar las solicitudes de compra con su estado de pago, la cual al ser canceladas, generará los tickets automaticamente en la pestaña <b>(Mis tickets)</b>.
                                    </p>
                                    <div class="order-table-container text-center" style="min-height: 250px;">
                                        <table class="table_desktop">
                                            <thead>
                                                <tr>
                                                    <th>Fecha</th>
                                                    <th>Estado</th>
                                                    <th>Total</th>
                                                    <th>Expira</th>
                                                    <th style="min-width: 150px!important">Pago</th>
                                                    <th>Detalle</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if(!empty($data))
                                                @foreach($data as $item)
                                                <tr style="text-align: center;">
                                                    <td style="vertical-align: middle;">{{date('d/m/Y h:i A', strtotime($item['FechaOrden']))}}</td>
                                                    <td style="vertical-align: middle;">
                                                        @if(empty($item['StatusID']))
                                                            <span class="label label-warning">{{$item['Status']}}</span>
                                                        @elseif($item['StatusID'] == 2)
                                                            <span class="label label-secondary">{{$item['Status']}}</span>
                                                        @elseif($item['StatusID'] == 4)
                                                            <span class="label label-success">{{$item['Status']}}</span>
                                                        @elseif($item['StatusID'] == 6)
                                                            <span class="label label-danger">{{$item['Status']}}</span>
                                                        @endif
                                                    </td>
                                                    <td style="vertical-align: middle;">S/.{{number_format($item['Total'], 2)}}</td>
                                                    <td style="vertical-align: middle;">{{date('d/m/Y h:i A', strtotime($item['FechaExpiracion']))}}</td>
                                                    <td>
                                                        @if($item['IDMetodoPago'] == 2)
                                                            @if($item['StatusID'] == 4)
                                                                <center><i class="fa fa-check" aria-hidden="true"></i></center>
                                                            @else
                                                                <center><a href="javascript:;" class="dt-sc-button small icon-right filled type4 gray" onclick=modal('{{$item['URLTransRef']}}')> <img src="/assets/images/mediopago/pagoefectivo.webp" width="24" height="24" border="0" style="display: inline-block;"> Ver Código Pago &nbsp; <span class="fa fa-arrow-circle-right"> </span></a></center>
                                                            @endif
                                                        @else
                                                            @if($item['StatusID'] == 4)
                                                                <center><i class="fa fa-check" aria-hidden="true"></i></center>
                                                            @else
                                                                <center><a href="javascript:;" class="dt-sc-button small icon-right filled type4 gray" onclick=modal('{{config('app.url') . '/checkout/payment/bank/' . base64_encode($item['Referencia'])}}')> <span class="fa fa-exchange"></span> Ver Cuenta &nbsp; <span class="fa fa-arrow-circle-right"> </span></a></center>
                                                            @endif
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <a href="javascript:;" class="dt-sc-button small red rounded-corner  partially-rounded" onclick=modal('{{config('app.url')}}/micuenta/payment/detail/{{$item['Referencia']}}')> Ver </a>
                                                    </td>
                                                </tr>
                                                @endforeach
                                                @endif                                        
                                            </tbody>
                                        </table>
                                        @if(!empty($data))
                                        @foreach($data as $item)
                                        <table class="table_mobile">
                                            <tr>
                                                <th>Fecha</th>
                                                <td>{{date('d/m/Y h:i A', strtotime($item['FechaOrden']))}}</td>
                                            </tr>
                                            <tr>
                                                <th>Estado</th>
                                                <td>
                                                    @if(empty($item['StatusID']))
                                                        <span class="label label-warning">{{$item['Status']}}</span>
                                                    @elseif($item['StatusID'] == 2)
                                                        <span class="label label-info">{{$item['Status']}}</span>
                                                    @elseif($item['StatusID'] == 4)
                                                        <span class="label label-success">{{$item['Status']}}</span>
                                                    @elseif($item['StatusID'] == 6)
                                                        <span class="label label-danger">{{$item['Status']}}</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Total</th>
                                                <td>S/.{{number_format($item['Total'], 2)}}</td>
                                            </tr>
                                            <tr>
                                                <th>Expira</th>
                                                <td>
                                                    {{date('d/m/Y h:i A', strtotime($item['FechaExpiracion']))}}
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Pago</th>
                                                <td>
                                                    @if($item['IDMetodoPago'] == 2)
                                                        @if($item['StatusID'] == 4)
                                                            <center><i class="fa fa-check" aria-hidden="true"></i></center>
                                                        @else
                                                            <center><a href="javascript:;" class="dt-sc-button small icon-right filled type4 gray" onclick=modal('{{$item['URLTransRef']}}')> <img src="/assets/images/mediopago/pagoefectivo.webp" width="24" height="24" border="0" style="display: inline-block;"> Ver Código Pago &nbsp; <span class="fa fa-arrow-circle-right"> </span></a></center>
                                                        @endif
                                                    @else
                                                        @if($item['StatusID'] == 4)
                                                            <center><i class="fa fa-check" aria-hidden="true"></i></center>
                                                        @else
                                                            <center><a href="javascript:;" class="dt-sc-button small icon-right filled type4 gray" onclick=modal('{{config('app.url') . '/checkout/payment/bank/' . base64_encode($item['Referencia'])}}')> <span class="fa fa-exchange"></span> Ver Cuenta &nbsp; <span class="fa fa-arrow-circle-right"> </span></a></center>
                                                        @endif
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Detalle</th>
                                                <td>
                                                    <a href="javascript:;" class="dt-sc-button small red rounded-corner  partially-rounded" onclick=modal('{{config('app.url')}}/micuenta/payment/detail/{{$item['Referencia']}}')> Ver carrito </a>
                                                </td>
                                            </tr>
                                        </table>
                                        @endforeach
                                        @endif                                        
                                    </div>
                                </div>
                            </div>
                            <!-- End .tab-pane --> 
                        </div>
                    </div>
                </div>
            </div>
            <!-- End .tab-content -->
        </div>
        <!-- End .row -->
    </div>
</main>
<script type="text/javascript">
    function modal(url){
        jQuery(function ($) {
            $('#modal-btn').remove();
            let btn = document.createElement("input");
            btn.type = "hidden";
            btn.id = "modal-btn";
            document.body.appendChild(btn);
            $('#modal-btn').vibox({
                src: url,
                width: 1024,
                height: 804,
                preload: true,
                responsive: true
            });
            $('#modal-btn').click();
        });
    }
    @if(!empty(Session::get('urlcip')))
        modal("{{Session::get('urlcip')}}");
    @endif
    @if(!empty(Session::get('urlreference')))
        modal("{{Session::get('urlreference')}}");
    @endif    
</script>
@endsection
@section('scripts')
<script src="{{mix('/assets/js/pages/plugins/vibox.js')}}"></script>
<script src="/assets/plugins/sweetalert2/sweetalert2.min.js"></script>
@endsection