@extends('layouts.masterBtnPago')
@section('header')
    <style>
        /* CSS for Credit Card Payment form */
        .credit-card-box .panel-title {
            display: inline;
            font-weight: bold;
        }

        .credit-card-box .form-control.error {
            border-color: red;
            outline: 0;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
        }

        .credit-card-box label.error {
            font-weight: bold;
            color: red;
            padding: 2px 8px;
            margin-top: 2px;
        }

        .credit-card-box .payment-errors {
            font-weight: bold;
            color: red;
            padding: 2px 8px;
            margin-top: 2px;
        }

        .credit-card-box label {
            display: block;
        }

        /*!* The old "center div vertically" hack *!
        .credit-card-box .display-table {
            display: table;
        }*/

        .credit-card-box .display-tr {
            display: table-row;
        }

        .credit-card-box .display-td {
            display: table-cell;
            vertical-align: middle;
            width: 50%;
        }

        /* Just looks nicer */
        .credit-card-box .panel-heading img {
            min-width: 180px;
        }

        .panel {
            border-color: #222222;
        }

        .panel-heading {
            color: #ffffff;
            background-color: #222;
            border-color: #222;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .head-logo {
            margin-right: 30px;
        }

        .head-logo .bg-logo > a > img {
            width: 220px;
        }

        .head-logo .navbar-brand {
            background-color: white;
            height: 90px;
            padding-right: 46px;
        }

        .head-logo div.bg-logo {
            background: #fff;
            padding-top: 15px;
            padding-bottom: 15px;
            padding-right: 50px;
            padding-left: 25px;
        }

        .head-logo div.bg-logo:after, .head-logo div.bg-logo:before {
            content: "";
            width: 0;
            height: 0;
            top: 0;
            border-style: solid;
            border-width: 92px 31px 0 0;
            position: absolute;
            -webkit-transform: skew(-30deg, 0deg);
            transform: skew(-30deg, 0deg)
        }

        .head-logo div.bg-logo:before {
            background-color: #9e9e9e;
            border-color: transparent #9e9e9e transparent transparent;
            right: -30px;
            z-index: 1
        }

        .head-logo div.bg-logo:after {
            background-color: #e2e2e2;
            border-color: transparent #e2e2e2 transparent transparent;
            right: -3px
        }

        .detalle-pago {
            margin-right: 20px;
        }
    </style>
    <style>
        /*font Awesome http://fontawesome.io*/
        @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

        body {
            margin-top: 45px;
        }

        /*--------------------------------------------------------------------------
          Navbar Style
        --------------------------------------------------------------------------*/
        .navbar {
            border-bottom-left-radius: 0; /*Change bootstrap default border-radius for menu*/
        }

        @media (min-width: 768px) {
            .navbar .navbar-brand {
                width: 224px; /*Change the width of .navbar-brand to center text and align with .sider-navbar border-right*/
                text-align: center;
            }
        }

        /*--------------------------------------------------------------------------
          Side Navigation
        --------------------------------------------------------------------------*/
        @media (min-width: 768px) {
            .sider-navbar {
                position: fixed;
                top: 51px; /*Change to reposition .sider-navbar from top*/
                left: 225px;
                width: 225px;
                margin-left: -225px;
                border-right: 1px solid #E7E7E7; /*Change for right side border color*/
                border-radius: 0;
                overflow-y: auto;
                background: #F8F8F8; /*Change for background color*/
                bottom: 0;
                overflow-x: hidden;
                padding-bottom: 40px;
            }

            .sider-navbar li.sider-menu {

            }

            .sider-navbar li.sider-menu ul {
                width: 225px;
            }

            .sider-navbar li.sider-menu > ul > li,
            .sider-navbar li.sider-menu ul li ul li {
                border-top: 1px solid #E7E7E7; /*Change for .sider-menu border color*/
                -webkit-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
            }

            .sider-navbar li.sider-menu > ul > li:last-child {
                border-bottom: 1px solid #E7E7E7; /*Change for .sider-menu border color*/
            }

            .sider-navbar li.sider-menu > ul > li.active,
            .sider-navbar li.sider-menu > ul > li:hover,
            .sider-navbar li.sider-menu ul li ul li:hover {
                border-right: 6px solid #dddddd;
            }

            .sider-navbar li.sider-menu ul li ul li:hover {
                background: #FFFFFF; /*Change for .sider-menu border color*/
            }

            .sider-navbar li.sider-menu ul li a {
                outline: none;
                padding: 15px;
            }

        }

        .sider-navbar li.sider-menu ul {
            list-style: none;
            padding: 0;
        }

        .sider-navbar li.sider-menu ul li a {
            display: block;
            padding: 15px;
            text-decoration: none;
            color: #5E5E5E; /*Change for .sider-menu color*/
        }

        .sider-navbar li.sider-menu ul li ul {
            background-color: #f3f3f3; /*Change for .sider-menu background-color*/
        }

        /*--------------------------------------------------------------------------
          Profile container
          Thanks to keenthemes' bootstrap snippet for a starting point for the styles
          http://bootsnipp.com/snippets/featured/user-profile-sidebar
        --------------------------------------------------------------------------*/
        #profile {

        }

        .profile-userpic img {
            float: none;
            margin: 12px auto 0;
            padding: 6px;
            width: 50%;
            height: 50%;
            -webkit-border-radius: 50% !important;
            -moz-border-radius: 50% !important;
            border-radius: 50% !important;
            border-left: 4px solid #333333;
            border-right: 4px solid #333333;
        }

        .profile-usertitle {
            text-align: center;
            margin-top: 16px;
            color: #333333;
        }

        .profile-usertitle-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 7px;
        }

        .profile-usertitle-title {
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 15px;
        }

        /*Hide profile picture on smaller devices*/
        @media (max-width: 768px) {
            #profile {
                display: none;
            }
        }

        /*--------------------------------------------------------------------------
          Page Keeper
          Setup layout so the main content will be to the right of .sider-navbar
        --------------------------------------------------------------------------*/
        @media (min-width: 768px) {
            #page-keeper {
                width: 100%;
                padding: 10px 10px 10px 225px;
            }
        }
    </style>

@endsection
@section('content')
    {{--@php
        echo session('pag');
    dump(Session::all());
    @endphp--}}
    <div class="row">
        <div class="col-sm-8 col-sm-push-2">
            {{--            <br><br>{{ Session::get('empresa') }}<br><br>--}}
            <h6>HOLAAA</h6>
            <div class="row">
                @if(session('pag') == 'btnpago')
                    <div class="row">
                        <div class="col-xs-12 col-sm-8 col-sm-push-2 text-center" style="margin-left: 1.5%">
                            <img src="{!! asset('img/header-btn.jpg')  !!}" alt="reclamos-bienvenida"
                                 class="img-responsive">
                        </div>
                    </div>
                    <br>
                    <div class="col-xs-12 col-sm-8 col-sm-push-2 text-center">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">Pagos Electrónicos</h3>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-6 col-sm-push-1">
                                        <a href="{{ route('botonPago.index') }}">
                                            <img src="{!! asset('img/realizar-pagos.png')  !!}" alt="pagobtn"
                                                 class="img-responsive">
                                        </a>
                                    </div>
                                    <div class="col-sm-6 col-sm-push-1">
                                        <a href="{{ route('botonPago.historial') }}">
                                            <img src="{!! asset('img/historial-de-pagos.png')  !!}" alt="historicobtn"
                                                 class="img-responsive">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-8 col-sm-push-2 text-center">

                        <iframe width="490" height="230" src="https://www.youtube.com/embed/m3CNJySg4tM" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </div>

                @elseif(session('pag') == 'reclamos')
                    <div class="row">
                        <div class="col-xs-12 col-sm-8 col-sm-push-2 text-center" style="margin-left: 1.5%">
                            <img src="{!! asset('img/header-reclamo.png')  !!}" alt="reclamos-bienvenida"
                                 class="img-responsive">
                        </div>
                    </div>
                    <br>
                    <div class="col-xs-12 col-sm-8 col-sm-push-2 text-center">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">Sistema de Reclamos</h3>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-6 col-sm-push-1">
                                        <a href="{{ route('reclamos.index') }}">
                                            <img src="{!! asset('img/crear-reclamo.png')  !!}" alt="creacionrec"
                                                 class="img-responsive">
                                        </a>
                                    </div>
                                    <div class="col-sm-6 col-sm-push-1">
                                        <a href="{{ route('reclamos.consulta') }}">
                                            <img src="{!! asset('img/consultar-caso.png')  !!}" alt="historicorec"
                                                 class="img-responsive">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                @elseif(session('pag') == 'btnpagomia')
                    <div class="row">
                        <div class="col-xs-12 col-sm-8 col-sm-push-2 text-center" style="margin-left: 1.5%">
                            <img src="{!! asset('img/header-inter.jpg')  !!}" alt="reclamos-bienvenida"
                                 class="img-responsive">
                        </div>
                    </div>
                    <br>
                    <div class="col-xs-12 col-sm-8 col-sm-push-2 text-center">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">Pagos Electrónicos - Casillero Internacional</h3>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-6 col-sm-push-1">
                                        <a href="{{ route('botonPagoMia.index') }}">
                                            <img src="{!! asset('img/realizar-pagos.png')  !!}" alt="pagobtn"
                                                 class="img-responsive">
                                        </a>
                                        {{--<button type="button" class="btn btn-primary" data-toggle="modal"
                                                data-target="#myModal">
                                            Pagar
                                        </button>--}}
                                    </div>
                                    <div class="col-sm-6 col-sm-push-1">
                                        <a href="{{ route('botonPagoMia.historialMiami') }}">
                                            <img src="{!! asset('img/historial-de-pagos-mia.png')  !!}"
                                                 alt="historicobtn"
                                                 class="img-responsive">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-8 col-sm-push-2 text-center">
                        <iframe width="490" height="230" src="https://www.youtube.com/embed/Q9myQRxWzO4" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </div>
                @else
                    <div class="col-xs-12 col-sm-6 text-center">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">Botón de Pago</h3>
                            </div>
                            <div class="panel-body">
                                <a href="{{ route('botonPago.index') }}"><span
                                            class="glyphicon glyphicon-menu-right"></span> Realizar Pago
                                </a>
                                <br>
                                <a href="{{ route('botonPago.historial') }}"><span
                                            class="glyphicon glyphicon-menu-right"></span> Historial de Pagos
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 text-center">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">Sistema de Reclamos</h3>
                            </div>
                            <div class="panel-body">
                                <a href="{{ route('reclamos.index') }}"><span
                                            class="glyphicon glyphicon-menu-right"></span>
                                    Crear Reclamo
                                </a>
                                <br>
                                <a href="{{ route('reclamos.consulta') }}"><span
                                            class="glyphicon glyphicon-menu-right"></span>
                                    Consultar Caso
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 text-center">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">Botón de Pago - Casillero Internacional</h3>
                            </div>
                            <div class="panel-body">
                                <a href="{{ route('botonPagoMia.index') }}"><span
                                            class="glyphicon glyphicon-menu-right"></span> Realizar Pago
                                </a>
                                <br>
                                <a href="{{ route('botonPagoMia.historialMiami') }}"><span
                                            class="glyphicon glyphicon-menu-right"></span> Historial de Pagos
                                </a>
                            </div>
                        </div>
                    </div>

                @endif

            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript" src="{!! asset('/js/PagosElectronicos/botonPago.js')  !!}"></script>
@endsection