@extends('layouts.app')
@section('style')
  <link rel="stylesheet" href="{{asset('css/v4.0/styleTicket.css')}}">
  <style>
    .luz.on {
      color: #2C2B7C; /*color del texto al cambiar*/
      text-shadow: 1px 1px rgba(255, 255, 255, .1),
      -1px -1px rgba(239, 68, 54, .88),
      0px 0px 20px #2C2B7C; /*color de la luz del texto*/
    }

    .luz {
      font-size: 30px; /*tamaño de la fuente*/
      color: #EF4436;
      text-shadow: 1px 1px rgba(255, 255, 255, .1),
      -1px -1px rgba(239, 68, 54, .88);
    }

    .modalDialog {
      position: fixed;
      font-family: Arial, Helvetica, sans-serif;
      color: #343a40;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 19999;

    }

    .modalDialog:target {
      opacity: 1;
      pointer-events: auto;
    }

    .modalDialog > div > h2 {
      color: #2c2b7c;
    }

    .modalDialog > div {
      width: 100%;
      margin: 2% auto;
      padding: 5px 10px 13px 10px;
      border-radius: 10px;
      background: #fff;
      background: -moz-linear-gradient(#fff, #d4d4e4);
      background: -webkit-linear-gradient(#fff, #d4d4e4);
      background: -o-linear-gradient(#fff, #d4d4e4);
      -webkit-transition: opacity 400ms ease-in;
      -moz-transition: opacity 400ms ease-in;
      transition: opacity 400ms ease-in;
    }

    .close {
      background: #c7254e;
      color: #FFFFFF;
      line-height: 25px;
      right: -12px;
      text-align: center;
      top: -10px;
      width: 24px;
      text-decoration: none;
      font-weight: bold;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      -moz-box-shadow: 1px 1px 3px #000;
      -webkit-box-shadow: 1px 1px 3px #000;
      box-shadow: 1px 1px 3px #000;
    }

    #cerrar-modal {
      display: none;
    }

    .close:hover {
      background: #2c2b7c;
    }
  </style>
@endsection

@section('content')
  @if(sysconf()->type =='distribuidor')

    <div class="modalDialog">
      <div class="row">
        <h2>Importante Leer primero antes de seguir</h2>
        <p>Cambios en Friendly Pos</p>
        <div class="col-md-12">
          <div class="col-md-6">
            <h1>Hemos reorganizado el menú</h1>
            <h3>Para poder ver los cambios aquí le dejamos este video</h3>
            <iframe width="460" height="215" src="https://www.youtube.com/embed/gvlciWJ3kAA"
                    frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
          <div class="col-md-6">
            <h1>Hemos agregado una mejora en Aplicar /Asignar pedidos</h1>
            <iframe width="460" height="215" src="https://www.youtube.com/embed/3JUJ6R4EUiw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
          <div class="col-md-6">
            <h1>Se ha habilitado temporalmente, una nueva opción para agregar el inventario con los archivos xml</h1>

            <iframe width="460" height="215" src="https://www.youtube.com/embed/5m5e71ki9w8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
        </div>
        <a class="btn btn-success" href="/update-message-change">Ya los miré</a>
      </div>
    </div>
  @endif
  <div class="wrapper wrapper-content">
    <div class="container">
      <div class="row">
        @if($errorEmail > 0)
          <div class="col-md-2">
            <div class="ibox float-e-margins">
              <div class="ibox-title">
                <span class="label label-success pull-right">{{$errorEmail}}</span>
                <h5><i class="fa fa-warning "></i> Alerta</h5>
              </div>
              <div class="ibox-content">
                <h4 class="colorpicker-color"><strong>Emails de Clientes malos </strong></h4>
                <div class="stat-percent font-bold text-success"><a href="/lista-clientes">Ver
                    <i class="fa fa-hand-o-left"></i></a></div>
                <small>Favor corregirlos</small>
              </div>
            </div>
          </div>

        @endif
        @if($errorCard > 0)
          <div class="col-md-2">
            <div class="ibox float-e-margins">
              <div class="ibox-title">
                <span class="label label-success pull-right">{{$errorCard}}</span>
                <h5><i class="fa fa-warning "></i> Alerta</h5>
              </div>
              <div class="ibox-content">
                <h4 class="colorpicker-color"><strong>Cédulas de Clientes malas </strong></h4>
                <div class="stat-percent font-bold text-success"><a href="/lista-clientes">Ver
                    <i class="fa fa-hand-o-left"></i></a></div>
                <small>Favor corregirlos</small>
              </div>
            </div>
          </div>

        @endif
      </div>
    </div>
  </div>
  @if(activitiy() > 0)
    <div class=" col-lg-10 col-md-10">

      <div id="vue-app" class="panel-body">
        <!--  <list-tickets></list-tickets>-->
        {{-- @if (sysconf()->type == 'distribuidor')
           <routes-invoices></routes-invoices>
         @endif--}}

      </div>

    </div>
    {{-- <passport-clients></passport-clients>
   <passport-authorized-clients></passport-authorized-clients>
   <passport-personal-access-tokens></passport-personal-access-tokens> --}}
  @else
    <div id="vue-app">
      <edit-activity-td
              redirecction="/lista-productos" url="/update-productos"
              name_button="Actualizar Cambios" title="Editar de Productos">

      </edit-activity-td>
      <div class="container">
        <h1 class="text-center text-color">Ejemplo de como conseguir el código de las actividades</h1>
        <h2> Link para consultar Actividades:
          <a href="https://www.hacienda.go.cr/ATV/frmConsultaSituTributaria.aspx" target="_blank">
            https://www.hacienda.go.cr/ATV/frmConsultaSituTributaria.aspx</a></h2>
        <div class="col-md-12"><img src="{{asset('img/paso1.png')}}" width="100%"></div>
        <div class="col-md-12"><img src="{{asset('img/paso2.png')}}" width="100%"></div>
        <div class="col-md-12"><img src="{{asset('img/paso3.png')}}" width="100%"></div>
        <div class="col-md-12"><img src="{{asset('img/paso4.png')}}" width="100%"></div>
      </div>
    </div>
  @endif

@endsection
@section('scripts')
  <script>
    $(document).ready(function () {
      $('#openModal').modal('toggle')
    });

    (function () {

      setInterval(function () {
        var el = document.getElementById('blink');
        var elc = document.getElementById('card');
        if (el.className == 'luz' || elc.className == 'luz') {
          el.className = 'luz on';
          elc.className = 'luz on';
        } else {
          el.className = 'luz';
          elc.className = 'luz';
        }
      }, 500);

    })();
  </script>
  <script src="{{ mix('js/app.js') }}"></script>
@endsection