@extends('layout.padrao')
@section('title', 'List - Emails enviados pelo Tabex')

@section('content')
<script src="{!! asset ('/typeahead/dist/typeahead.bundle.min.js')!!}"></script>
<script src="{!! asset ('/typeahead/dist/bloodhound.min.js')!!}"></script>
{{-- @dd(http_build_query($params)) --}}
        <!-- Barra de Pesquisa -->
        <div class="col col-lg-12 col-sm-12 col-md-12 folha-interna shadow folha-branca-contornada rounded" >
          <div style="padding-top: 25px; padding-bottom: 7px">
              <div class="col" style="margin-right: 0px !important; margin-left: 0px !important;">
                  <div class="formulario" id="formPesquisa" style="display: none;">
                      <form class="form-inline" method="GET" action="{{ route('listIntegrationLocalWeb') }}"
                          id="loadingForm">

                          <div class="col" style="max-width: 190px">
                              {!! Form::text('tipo', 'loading', ['class' => 'form-control', 'hidden'=>'hidden']) !!}
                              {!! Form::label('sent_at_init', 'Send Date - Init', ['class' => 'control-label', 'style' => 'float:left']) !!} 
                              {!! Form::date('sent_at_init', null , ['class' => 'form-control start_date ', 'min' => '2019-01-01', 'max' => '2080-01-01']) !!}
                          </div>
                          <div class="col" style="max-width: 190px">
                              {!! Form::text('tipo', 'loading', ['class' => 'form-control', 'hidden'=>'hidden']) !!}
                              {!! Form::label('sent_at_end', 'Send Date - End', ['class' => 'control-label', 'style' => 'float:left']) !!} 
                              {!! Form::date('sent_at_end', null , ['class' => 'form-control end_date ', 'min' => '2019-01-01', 'max' => '2080-01-01']) !!}
                          </div>
                          <div class="col" style="max-width: 190px">
                              {!! Form::text('tipo', 'loading', ['class' => 'form-control', 'hidden'=>'hidden']) !!}
                              {!! Form::label('booking', 'Booking', ['class' => 'control-label', 'style' => 'float:left']) !!} 
                              {!! Form::text('booking', null, ['class' => 'form-control booking']) !!}
                          </div>
                          <div class="w-100"></div>
                          <!-- Botões de Busca e de Limpar os Filtros -->
                          <div class="col col-lg-12 form-group " style="margin-top: 10px; margin-bottom: 20px; text-align: right;">
                              <button class="btn btn-primary " type="submit">
                                  <i class="fas fa-search"></i> Search
                              </button>
                              <button
                                  onclick="if(tipo){window.location = window.location.pathname+'?tipo=clear'+tipo}else{window.location = window.location.pathname};"
                                  id="searchclearSelect2" class="btn btn-primary " type="button">Clear Filter</button>
                          </div>
                  </div>
              </div>
              </form>

              <!-- Botão para recolher a pesquisa -->
              <div class="col-12" style="text-align: center; margin-top: -16px;">
                  <div class="btn" id="dropSearch">
                      <div title="Open Search" style="color: #0d6397 !important; font-size: 1.1 rem;">
                          <span id="spanSearch" style="margin-bottom:-23px">Search</span> </br><i id="openBtn" class="fas fa-chevron-down"></i> 
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <script>

        $(document).on('click', '#dropSearch', function (click) {
            var formulario = document.getElementById("formPesquisa");
            var seta = document.getElementById("dropSearch");
            var spanSearch = document.getElementById("spanSearch");
            var icone = document.getElementById("openBtn"); 

            $('.table').floatThead('reflow')

            if (formulario.style.display == "none") {
                formulario.style.display = "block";
                spanSearch.style.display = "none";
                icone.style.transition = "0.3s";
                icone.style.transform = "rotate(180deg)";
            } else {
                formulario.style.display = "none";
                spanSearch.style.display = "block";
                icone.style.transition = "0.3s";
                icone.style.transform = "rotate(0deg)";
            }

        })

    </script>

    <!--Filtro Tag return-->

    @include('include.filtro_result')

{{-- @dd("/mscIntegration/json" . "?" . http_build_query($params)) --}}
     <div class="wrapper">

        <div class="table-responsive" style="overflow:clip; height:950px">
            <table class="table-striped text-center" id="table"
          data-toggle="table"
          data-search="true"
          {{-- data-detail-view="true" --}}
          data-show-footer="true"
          data-flat="true"
          data-show-refresh="true"
          data-click-to-select="true"
          data-show-fullscreen="true"
          data-toolbar="#toolbar"
          data-show-toggle="true"
          data-show-export="true"
          data-export-data-type="all"
          data-query-params="queryParams"
          data-url="/emailLocalweb/json{{"?" . http_build_query($params)}}"
          data-show-columns="true" >
            <thead>
                <tr class="trSuperBlue">
                    <th data-field="subject" data-sortable="true" data-width="600">Subject</th>
                    <th data-field="sender" data-sortable="true" >Sender</th>
                    <th data-field="recipient" data-sortable="true" >Recipient</th>
                    <th data-field="sent_at" data-sortable="true" >Sent at</th>
                    <th data-field="status" data-sortable="true" >Status</th>
                    <th data-field="opened_at" data-sortable="true" >Opened at</th>
                </tr>
            </thead>
        </table>
  
    </div>

    <script>
        var $table = $('#table')
        var $button = $('#button')
      

        $(function() {
            $table.bootstrapTable({
                            cache: false,
                            height: 1000,
                            striped: true,
                            pagination: false,
                           
            });
        })


        function fromPlace(cell, row, value) {         
          return cell + ' - (' + row.fromPlace + ' - ' + row.fromCountry + ')';
        }

        function toPlace(cell, row, value) {         
          return cell + ' - (' + row.toPlace + ' - ' + row.toCountry + ')';
        }

        function dateBrazilFormat(value, row, index) {

            var parts = value.match(/(\d+)/g);
            var date =  new Date(parts[0], parts[1]-1, parts[2]); 

            var data_format_due = ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) +
                '-' +
                ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) +
                '-' + date.getFullYear();
            return [data_format_due].join('')
        }

        function dateTimeBrazilFormat(value, row, index) {

          if (value == null) return '';
            let originalDate = value;
            originalDate = new Date(originalDate);

            var parts = value.match(/(\d+)/g);
            var date =  new Date(parts[0], parts[1]-1, parts[2]); 
            
            var data_format_due = ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) +
                '-' + ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) +
                '-' + date.getFullYear();    


            return [data_format_due + ' ' + originalDate.toLocaleTimeString()].join('')

        }






    </script> 
    <!-- Delete Model -->
    @include('bibliotecas.floattheadOverflow')
    @include('bibliotecas.bootstrapExport')



@endSection