@extends('template.home.index')
@section('title',  trans('soporte.soporte_title'))

@section('style')
  <link rel="stylesheet" href="{{asset('assets/css/ajustes.css')}}">
@endsection

@section('content')

<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>
<br>

<div class="col-md-6">
    <a href="{{route('adminweb')}}" class="btn btn-dark">
        <i class="fa fa-long-arrow-left" aria-hidden="false"></i>
    Regresar</a>
</div>
<br>
<div class="pos_content hght_100" id="tableCasos">
    <div class="container-fluid hght_100">

<div class="row hght_100"  >
    <div class="box">
        <div class="box-header">
           <div class="row">
               <div class="col">
                <h3>{{  trans('soporte.casos_activos') }}</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>
                        <button type="button" class="btn btn-primary" onclick=" reload()" id="divReload">
                            <i class="fa fa-refresh" aria-hidden="true"></i>
                        </button>

                </div>
           </div>
        </div>
        <div class="box-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>{{  trans('soporte.no_caso') }}</th>
                        <th>{{  trans('soporte.fecha') }}</th>
                        <th>{{  trans('soporte.estado') }}</th>
                        <th>{{  trans('soporte.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('soporte.esperandoRes') }}</span>
                    @else
                    <span class="badge bg-primary text-dark">{{  trans('soporte.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>
  </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={{session()->get('session_enjoit')->restaurant->idRestaurant}}&type=1&name={{session()->get('session_enjoit')->restaurant->name}}"
    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){
    console.log(caso)
    var urlNewSoporte="{{ env('CRM_ROUTE') }}/support/caso/"+caso
    console.log(urlNewSoporte)
    document.getElementById('tableCasos').style.display  = "none";
    $("#frameChatSoporte").attr("src",urlNewSoporte);
    document.getElementById('divSoporteChat').style.display  = "block";
    document.getElementById('divReload').style.display  = "block";

}
</script>
@endsection