@extends('template.layoutAdmin')
@section('cabecera')

  <div class="row">
    <div class="col-6 text-left">
      <h1>
        <small> {{  trans('soportes.tituloSoportes') }} </small>

      </h1>
    </div>
    <div class="col-6 " style="display: none;text-align: right"  id="divReload">
        <button type="button" class="btn btn-primary" onclick=" reload()">
            <i class="fa fa-refresh" aria-hidden="true"></i>
        </button>
    </div>
  </div>
@endsection
@section('title')
{{  trans('soportes.tituloSoportes') }} 
@endsection

@section('contenido')
<style type="text/css">
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.embed-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="row" id="tableCasos">
    <div class="box">
        <div class="box-header">
           <div class="row">
               <div class="col">
                <h3> {{  trans('soportes.CasosActivos') }} </h3>

               </div>

                <div class="col" style="text-align: right">
                        <button type="button" class="btn btn-primary" onclick=" newCaso()">
                            <i class="fa fa-plus" aria-hidden="true"></i>
                        </button>
                   </a>

                </div>
           </div>
        </div>
        <div class="box-body">
            <table class="table">
                <thead>
                    <tr>
                        <th> {{  trans('soportes.NumeroCaso') }} </th>
                        <th> {{  trans('soportes.fecha') }} </th>
                        <th> {{  trans('soportes.estado') }} </th>
                        <th> {{  trans('soportes.acciones') }} </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($data['data'] as $item)

                    <tr  >
                        <td> #{{ $item['noCaso']  }} </td>
                        <td>{{ $item['fecha'] }}</td>
                        <td>
                            @if ($item['state'] == 0)
                            <span class="badge bg-warning text-dark"> {{  trans('soportes.respuesta') }} </span>
                    @else
                    <span class="badge bg-primary text-dark">{{ trans('soportes.contestado') }}</span>
                    @endif
                        </td>

                        <td> <button type="button" class="btn btn-primary" onclick="chat('{{ $item['noCaso']  }}')">
                            <i class="fa fa-paper-plane" aria-hidden="true" ></i>
                        </button></td>
                    </tr>


                 @endforeach
                </tbody>
            </table>

        </div>
    </div>
</div>

<div id="divSoporteNew" class="embed-container"  style="display: none;" >

    <iframe  frameborder="0" allowfullscreen
    id="frameNewSoporte"
   >
   </iframe>

</div>

<div id="divSoporteChat" class="embed-container"  style="display: none;" >

    <iframe  frameborder="0" allowfullscreen
    id="frameChatSoporte"
   >
   </iframe>

</div>
@endsection

@section('js')
<script >

function newCaso(){
    var urlNewSoporte="{{ env('CRM_ROUTE') }}/support/form?token={{Auth::user()->idUsuario }}&type=1&name={{ Auth::user()->userName }}"
    document.getElementById('tableCasos').style.display  = "none";
    $("#frameNewSoporte").attr("src",urlNewSoporte);
    document.getElementById('divSoporteNew').style.display  = "block";
    document.getElementById('divReload').style.display  = "block";

}
function reload(){
    document.getElementById('tableCasos').style.display  = "block";
    document.getElementById('divSoporteNew').style.display  = "none";
    document.getElementById('divReload').style.display  = "none";
    document.getElementById('divSoporteChat').style.display  = "none";


}
function chat(caso){
    var urlNewSoporte="{{ env('CRM_ROUTE') }}/support/caso/"+caso
    document.getElementById('tableCasos').style.display  = "none";
    $("#frameChatSoporte").attr("src",urlNewSoporte);
    document.getElementById('divSoporteChat').style.display  = "block";
    document.getElementById('divReload').style.display  = "block";

}
</script>
@endsection