<!DOCTYPE html>
<html lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Last-Modified" content="0">
    <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
    <meta http-equiv="Pragma" content="no-cache">

    <meta name="csrf-token" content="{{ csrf_token() }}" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Ventanilla Virtual</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
    <!-- Custom styles for this template -->
    <link href="css/agency.min.css" rel="stylesheet">
    <link href="css/new_estilo.css?v2" rel="stylesheet">
    
    <style type="text/css" media="screen">
      .table-marcado{
        background-color: #00000014 !important;
      }
      .th-sm{
        text-align: center;
        background-color: #f5991f !important;
        color: #fff !important;
        border: 1px solid #fff !important;
      }

      .bs-select{
        font-size: 12px;
        color: #a7a5a8 !important;
      }
      .bs-select select{
        color: #a7a5a8 !important;
        border: 1px solid  #a7a5a8 !important;
      }
      .dataTables_filter{
        font-size: 12px;
        color: #a7a5a8 !important;
      }
       .dataTables_filter input{
        font-size: 12px;
        color: #a7a5a8 !important;
        border: 1px solid #a7a5a8 !important;
      }
      .dataTables_info{
        font-size: 12px;
        color: #a7a5a8 !important;
        font-weight: bolder;
      }
      .dataTables_paginate{
        font-size: 12px;
        color: #a7a5a8 !important;
      }
      
      .current{
        color: #fff !important;
        background: #f5991f !important;
      }
      ul.social-buttons li a:hover{
        background-color: #f5991f;
      }
      #mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover{
        color: #f5991f !important;
      }
      
      #loading{z-index:5555; position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.75); display: flex; justify-content: center; align-items: center; }
      [draggable] {-moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; user-select: text; -ms-user-select: text; /* Required to make elements draggable in old WebKit */ -khtml-user-drag: element; -webkit-user-drag: element; }
      /* Loading Spinner */
        .spinner{margin:0;width:70px;height:18px;}
        .spinner > div{ width:18px; height:18px; background-color:#fff; border-radius:100%; display:inline-block; -webkit-animation:bouncedelay 1.4s infinite ease-in-out; animation:bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both; }
        .spinner .bounce1{-webkit-animation-delay:-.32s; animation-delay:-.32s }
        .spinner .bounce2{-webkit-animation-delay:-.16s; animation-delay:-.16s }
        @-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}
        @keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);
          -webkit-transform:scale(0.0)}40%{transform:scale(1.0);
          -webkit-transform:scale(1.0)}}

        @media (min-width: 1px) and (max-width: 600px) {
          section h2.fs_peque {
            font-size: 2rem;
          }
        }
    </style>

  </head>

  <body id="page-top">
    <div id="loading" style="display: none;">
      <div class="container-fluid" style=" position:absolute; top:50%; left:50%;">
      <img src="https://poa.zitacuaro.tecnm.mx/docs/img/Petirrojos.jpg" class="imgPeti" style="width:70px; height:70px;">
      <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div></div>
    </div>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="img/logos/tecnm.png" style='width:100px; height: auto;'></a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Menú de Navegación" style="background-color: #f5991f">
          Menú
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive" style="font-size: .9em">
          <ul class="navbar-nav text-uppercase ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#ventanilla">Ventanilla Virtual</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#cajero">Cajero AutomÁtico</a>
            </li>
             <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#transferencia">Transferencia Bancaria</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#intro">Formas de pago</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#comprobante">Comprobante de Pago</a>
            </li>
            
            <!-- <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#banco">Ventanilla del Banco</a>
            </li> -->
          </ul>
        </div>
      </div>
    </nav>

    <!-- Header -->
    <header class="masthead">
      <div class="container-fluid">
        <div class="intro-text">
          <div class="intro-lead-in"></div>
          <div class="intro-heading text-uppercase">&nbsp;</div>
        </div>
      </div>
    </header>

    <section style="color:#fff;background:#f5991f url(img/santander/parallax_lines.png) center fixed; height: 100px;text-shadow: 0.1em 0.1em #333 ">
      <div class="container"> 
        <div class="row" style="margin-top: -2vw;">
             <div class="col-md-12" style="text-align: center;" >
               <h1 style="font-size: calc(1em + 3vw)">ESCOGE TU FORMA DE PAGO</h1>
             </div>
        </div>
      </div>
    </section>
 
    <section id="ventanilla" style="color:#fff;background:#222222 url(img/santander/parallax_bg_19.png) center fixed no-repeat; padding-bottom: 4%;">
      <div class="container">
        <div class="row">
          <div class="col-md-12" style="text-align: center;" >
            <h2 class="section-heading text-uppercase">Paga tu escuela</h2>
            <h3 class="section-subheading text-muted">¿Cómo funciona?</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 " style="text-align: center"><img src="img/SVG/uno.svg" style="max-width: 500px;"></div>
        </div>
        <div class="row">
          <div class="col-md-12 " style="text-align: center"><img src="img/SVG/dos.svg" style="max-width: 500px;"></div>
        </div>
        <div class="row">
          <div class="col-md-12 " style="text-align: center"><img src="img/SVG/tres.svg" style="max-width: 500px;"></div>
        </div>
        <div class="row">
          <div class="col-md-12 " style="text-align: center"><img src="img/SVG/cuatro.svg?v1" style="max-width: 500px;"></div>
        </div>
        <br><br>
        <div class="row">
          <div class="col-md-12" style="text-align: center;" >
            <div><a href="img/santander/formato.pdf?v.1"><input type="button" class="btn btn-sm btn-dark" value="Descargar Manual"></div></a>
          </div>
        </div> 
        <br>
      </div>
    </section>

    <section id="cajero" style="color:#fff;background:#222222 url(img/santander/parallax_bg_19.png) center fixed no-repeat; padding-bottom: 4%;">
      <div class="container">
        <div class="row">
          <div class="col-md-12" style="text-align: center;" >
            <h2 class="section-heading text-uppercase">Cajero Automatico</h2>
            <h3 class="section-subheading text-muted">Usa las practicajas del Banco</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 " style="text-align: center"><img src="img/archivo/cajero.png?v3" style="margin-left:-20px;max-width: 60%; min-width: 330px;"></div>
        </div>
        
        <br>
      </div>
    </section>

    <section id="transferencia" style="color:#fff;background:#222222 url(img/santander/parallax_bg_19.png) center fixed no-repeat; padding-bottom: 4%;">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12" style="text-align: center;" >
            <h2 class="section-heading text-uppercase fs_peque">Transferencia Bancaria</h2>
            <h3 class="section-subheading text-muted">Desde tu Banca Móvil <br><small>(solo clientes Santander)</small></h3>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 " style="text-align: center">
            <img src="img/archivo/transferencia.png?v4" style="margin-left:-20px;max-width: 100%; min-width: 320px;">
          </div>
          <!--<div class="col-12 col-md-4" style="text-align: center">
            <img src="img/archivo/3465017.png" style="margin-left:-20px;max-width: 60%; min-width: 320px;">
          </div>
          <div class="col-12 col-md-4" style="text-align: center">
            <img src="img/archivo/3465018.png" style="margin-left:-20px;max-width: 60%; min-width: 320px;">
          </div>
          <div class="col-12 col-md-4 " style="text-align: center">
            <img src="img/archivo/3465019.png" style="margin-left:-20px;max-width: 60%; min-width: 320px;">
          </div>-->
        </div>
        
        <br>
      </div>
    </section>


    <section id="intro" style="padding-bottom: 0px">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Formas de Pago</h2>
            <h3 class="section-subheading text-muted"></h3>
          </div>
        </div>
        
        <div class="row">
          <div class="col-md-12 text-muted" style='text-align: justify;'>
            <span style="font-weight: bolder;">Derivado de las condiciones sanitarias por el covid-19, como medida para evitar más contagios en nuestro municipio, al acudir a lugares con gran afluencia de personas y con el fin de salvaguardar la salud tanto de nuestros estudiantes como la de sus familias, el Instituto Tecnológico de Zitácuaro te ofrece alternativas para realizar pagos desde la comodidad de tu casa.
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 " style="text-align: center"><h4 class="service-heading">Estos son los servicios que puedes pagar</h4></div><br />
        </div>
      </div>
      <br/>

      <div class="container">
        <table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%" style="font-size: 12px; border: 0px;">
          <thead>
            <tr>
              <th class="th-sm" style="width: 10%">Seleccionar</th>
              <th class="th-sm">Concepto</th>
              <th class="th-sm">Cuota</th>
            </tr>
          </thead>
          <tbody>
            @foreach($servicios as $s)
              <tr class="">
                <td class="text-center"><input type="checkbox" name="" id="ser_{{ $s->id}}" class="servicio" data-id='{{ $s->id }}' data-costo="{{ $s->costo }}" data-extra="{{ $s->extra }}"></td>
                <td><label for="ser_{{ $s->id }}">{{ $s->nombre }}</label></td>
                <td><div style="margin-left: 20%;">${{ number_format($s->costo,2) }}</td>
              </tr>
            @endforeach

          </tbody>
        </table>

        <div class="text-right text-warning"><label>Total: $<span class="chk_total">0.00</span></label></div>
      </div>
      <br>
      <div class="container"></div>
    </section>
    <br><br>

    <section id='comprobante' style="color:#fff;background:#222222 url(img/santander/parallax_bg_19.png) center fixed no-repeat; padding-bottom: 4%;">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12" style="text-align: center;" >
            <h2 class="section-heading text-uppercase fs_peque">COMPROBANTE DE PAGO</h2>
            
          </div>
        </div>
        <div id="vaucher" style="margin-bottom: 100px;">
          @include('vaucher.seleccion')
          
        </div>
        
      </div>
    </section>

  <!--<section id='comprobante' style="color:#fff;background:#222222 url(img/santander/parallax_bg_19.png) center fixed no-repeat; padding-bottom: 4%;">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12" style="text-align: center;" >
          <h2 class="section-heading text-uppercase fs_peque">COMPROBANTE DE PAGO</h2>
        </div>
      </div>
      <div id="vaucher" style="margin-bottom: 100px;">
        @include('vaucher.seleccion', ['status' => 'complete'])  
      </div>
      
    </div>
  </section>-->


    <!-- <section id="banco" style="color:#fff;background:#222222 url(img/santander/parallax_bg_19.png) center fixed no-repeat; padding-bottom: 4%;">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12" style="text-align: center;" >
            <h2 class="section-heading text-uppercase">Ventanilla del Banco</h2>
            <h3 class="section-subheading text-muted">Usa el pago tradicional</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 " style="text-align: center"><img src="img/santander/ventanilla.png" style="margin-left:-20px;max-width: 50%; min-width: 360px;"></div>
        </div>
        
        <br>
      </div>
    </section> -->
 
    <section id="contacto" style="padding: 0px 0px; margin-bottom: 10px">
      <div class="container-fluid" style="background: #282828  url(img/santander/bg8.png);">
        <div class="row" style="padding: 10px 0px;">
          <div class="col-md-6 col-sm-12" style="border: 0px solid #fb4107">
            <div class="row" style="border: 0px solid #fb4107; text-align: center">
              <div class="col-md-12">
                <h2 style="color: #2f2f2f; ">Si tienes alguna duda.</h2>
              </div>
            </div>
            <div class="row" style="border: 0px solid #fb4107; text-align: center">
              <div class="col-md-12">
                <h3 class="section-subheading text-muted" style="margin-block-end:0em;">Contáctanos</h3>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-sm-12" style="border: 0px solid #fb4107">
            <div class="row" style="border: 0px solid #fb4107; text-align: center">
              <div class="col-md-12">
                <h3 style="font-size: 1em; padding-top: 15px; color:#596269; font-weight: bolder"><img src="img/santander/mail.svg" width="15">&nbsp;&nbsp;tesoreria@zitacuaro.tecnm.mx</h3>
              </div>
            </div>
            <!-- <div class="row" style="border: 0px solid #fb4107; text-align: center">
              <div class="col-md-12">
                <h3 style="font-size: 1em; color:#596269; font-weight: 400"><img src="img/santander/phone.svg" width="15">&nbsp;&nbsp;+52 (715) 153-44-45&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      
    </section>

    <!-- Modal Mensaje Bienvenida-->
    <div class="modal" tabindex="-1" role="dialog" id='modal_bienvenida'>
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header bg-warning text-center" style="padding: 5px 15px;">
            <div style="width: 100%" class="d-inline-flex">
              <img src="img/logos/tecnm.png" style="width:100px; height: 60px;">
              <h5 class="modal-title text-light" >Bienvenido al Tecnológico Nacional Campus Zitácuaro</h5></div>
            <button type="button" class="close x_modal" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body text-justify" id=''>
            <p>
Para tu comodidad y sobre todo por tu seguridad y la de todos(as), deberás realizar tu pago de inscripción por la cantidad de $ 3,400.00 través de las diferentes opciones que te ofrece esta VENTANILLA VIRTUAL DE PAGOS del 15 al 17 de julio de 2021.</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Modal Mensaje -->
    <div class="modal" tabindex="-1" role="dialog" id='modal_mensaje'>
      <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header bg-warning text-center" style="padding: 5px 15px;">
            <div style="width: 100%"><h5 class="modal-title">¡Atención!</h5></div>
            <button type="button" class="close x_modal" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body text-justify" id='modal_mensaje_contenido'>
            <p>Modal body text goes here.</p>
          </div>
        </div>
      </div>
    </div>
 
    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <span class="copyright">Copyright &copy; I.T. Zitácuaro 2020</span>
          </div>
          <div class="col-md-4">
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="https://www.facebook.com/comunicacion.tecnologicodezitacuaro.5?hc_ref=ARQ2h4mJd9UjcyYin_aVU0cDVsj4slW3X0MPyWeIHOOxv9fuWbrYKn2-nPzFMvuy-0g" target="blank">
                  <i class="fa fa-facebook"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul class="list-inline quicklinks">
              <li class="list-inline-item">
                <a href="#" style="color:#f5991f">Creado por Centro de Cómputo.</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>

    <!-- Portfolio Modals -->

    
    
    

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/jquery/jquery-ui.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Contact form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/agency.min.js"></script>
    <!-- <script src="js/recursos.min.js"></script> -->
    <!-- <script src="js/recursos.min.js?v4"></script> -->
    
    <script src="js/mascara.js"></script>

    <script type="text/javascript" src="DataTables/datatables.min.js"></script>
    
    <script src="js/vaucher/vaucher.js?v8.3"></script>

<script>

    var idioma = {
                  "sProcessing":     "Procesando...",
                  "sLengthMenu":     "Mostrar _MENU_ registros",
                  "sZeroRecords":    "No se encontraron resultados",
                  "sEmptyTable":     "Ningún dato disponible en esta tabla",
                  "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                  "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
                  "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
                  "sInfoPostFix":    "",
                  "sSearch":         "Buscar:",
                  "sUrl":            "",
                  "sInfoThousands":  ",",
                  "sLoadingRecords": "Cargando...",
                  "oPaginate": {
                      "sFirst":    "Primero",
                      "sLast":     "Último",
                      "sNext":     "Siguiente",
                      "sPrevious": "Anterior"
                  },
                  "oAria": {
                      "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                      "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                  },
                  "buttons": {
                      "copy": "Copiar",
                      "colvis": "Visibilidad"
                  }
              }
      
     // Basic example
      $(document).ready(function () {
      var table = $('#dtBasicExample').DataTable({
      "searching": true,
      "language":idioma

      });
        $('.dataTables_length').addClass('bs-select');
        $('.dtBasicExample_filter').addClass('bs-filtro');
        checks(table);
        //$('#modal_bienvenida').modal('show');

        
      });
    </script>

  </body>

</html>
