@include('admin.header', [
   'elementActive' => 'statistics'
])
<div class="content-wrapper" style="min-height: 869px;">
    <section class="content-header">
       <h1>
          Configurações
          <small>Altere as configurações do seu WebSite</small>
       </h1>
    </section>

    

    <!-- Main content -->
    <section class="content">
       <div class="row">
           
          <div class="col-xs-12">

            <form class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="enable" id="enable" {{ $enable ? 'checked' : '' }} onclick="enableStatistics()" id="flexCheckDefault">
                    <label class="form-check-label" for="flexCheckDefault">
                      Habilitar estátisticas na página principal
                    </label>
                  </div>
            </form>

             <div class="nav-tabs-custom">
                <ul class="nav nav-tabs ">
                   {{-- <li >
                      <a href="#emails" data-toggle="tab">Estátisticas</a>
                   </li> --}}

                   <li {!! $action == 'statistics' || $action == false ? 'class="active"' : '' !!}>
                     <a href="#statistics" data-toggle="tab">Estátisticas</a>
                   </li>
                   <li {!! $action == 'texts' ? 'class="active"' : '' !!}>
                     <a href="#texts" data-toggle="tab">Textos</a>
                   </li>
                   <li {!! $action == 'colors' ? 'class="active"' : '' !!}>
                        <a href="#colors" data-toggle="tab" aria-expanded="false">Cores</a>
                  </li>

                </ul>
                {{-- <div class="tab-content">
                   <div id="emails" class="tab-pane active">
                  
                   </div> --}}
                   <div class="tab-content">
                     <div id="statistics" class="tab-pane {!! $action == 'statistics' || $action == false ? 'active' : '' !!}">
                        
















                        <!-- Styles -->
                        <style>
                           #chartdiv {
                           width: 100%;
                           height: 500px;
                           }
                           </style>
                           
                           <!-- Resources -->
                           <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
                           <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
                           <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
                           
                           <!-- Chart code -->
                           <script>
                           am5.ready(function() {
                           // Create root element
                           // https://www.amcharts.com/docs/v5/getting-started/#Root_element
                           var root = am5.Root.new("chartdiv");
                           // Set themes
                           // https://www.amcharts.com/docs/v5/concepts/themes/
                           root.setThemes([
                           am5themes_Animated.new(root)
                           ]);
                           // Create chart
                           // https://www.amcharts.com/docs/v5/charts/xy-chart/
                           var chart = root.container.children.push(am5xy.XYChart.new(root, {
                           panX: true,
                           panY: true,
                           wheelX: "panX",
                           wheelY: "zoomX",
                           pinchZoomX:true
                           }));
                           chart.get("colors").set("step", 3);
                           // Add cursor
                           // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
                           var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
                           cursor.lineY.set("visible", false);
                           // Create axes
                           // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
                           var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
                           maxDeviation: 0.3,
                           baseInterval: {
                              timeUnit: "day",
                              count: 1
                           },
                           renderer: am5xy.AxisRendererX.new(root, {}),
                           tooltip: am5.Tooltip.new(root, {})
                           }));
                           var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
                           maxDeviation: 0.3,
                           renderer: am5xy.AxisRendererY.new(root, {})
                           }));
                           // Add series
                           // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
                           var series = chart.series.push(am5xy.LineSeries.new(root, {
                           name: "Series 1",
                           xAxis: xAxis,
                           yAxis: yAxis,
                           valueYField: "value1",
                           valueXField: "date",
                           tooltip: am5.Tooltip.new(root, {
                              labelText: "Acessos: {valueY}\nAcessos únicos: {value2}"
                           })
                           }));
                           series.strokes.template.setAll({
                           strokeWidth: 2
                           });
                           series.get("tooltip").get("background").set("fillOpacity", 0.5);
                           var series2 = chart.series.push(am5xy.LineSeries.new(root, {
                           name: "Series 2",
                           xAxis: xAxis,
                           yAxis: yAxis,
                           valueYField: "value2",
                           valueXField: "date"
                           }));
                           series2.strokes.template.setAll({
                           strokeDasharray: [2, 2],
                           strokeWidth: 2
                           });
                           // Set date fields
                           // https://www.amcharts.com/docs/v5/concepts/data/#Parsing_dates
                           root.dateFormatter.setAll({
                           dateFormat: "yyyy-MM-dd",
                           dateFields: ["valueX"]
                           });
                           data = {!! $json !!};
                           series.data.setAll(data);
                           series2.data.setAll(data);
                           // Make stuff animate on load
                           // https://www.amcharts.com/docs/v5/concepts/animations/
                           series.appear(1000);
                           series2.appear(1000);
                           chart.appear(1000, 100);
                           }); // end am5.ready()
                           </script>







                           <div id="chartdiv"></div>









                        
                     </div>
                     <div id="texts" class="tab-pane {!! $action == 'texts' ? 'active' : '' !!}">
                        <form action="{{ route('admin.statistics.update', 'info') }}" class="form-horizontal" method="post">
                           @csrf
                           @method('PUT')

                           <section class="content">
                              <div class="row">
                                 <div class="col-xs-12">
                                    <div class="nav-tabs-custom">

                                       <fieldset>

                                          @foreach ($statisticsinformations as $statisticsinformation)
                                          <div class="form-group">
                              
                                             
                                             <div class="col-md-5">
                                                <label>Titulo</label>
                                                <input name="name_{{ $statisticsinformation->id }}" value="{{ $statisticsinformation->name }}" type="text" class="form-control" >
                                             </div>
                                          
                                             <div class="col-md-5">
                                                <label>Valor</label>
                                                <input name="value_{{ $statisticsinformation->id }}" value="{{ $statisticsinformation->value }}" type="text" class="form-control" >
                                             </div>
                                          </div>
                                          @endforeach
                                       
                                          <div>
                                             <button type="submit" class="btn btn-primary">Salvar</button>
                                          </div>

                                       </fieldset>

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

                        </form>
                     </div>
                     <div id="colors" class="tab-pane {!! $action == 'colors' ? 'active' : '' !!}">
                                 <form action="{{ route('admin.statistics.colors.update') }}" class="form-horizontal" method="post" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
            
                                    <div class="col-md-5">
                                        <div class="row" style="margin-left:15px;">
                                            <div class="col-md-4 form-group">
                                               <label for="color">Fundo</label>
                                               <input type="color" id="color" name="color" onchange="clickColor(0, -1, -1, 5)" value="{{ $statisticsColor->color }}" style="width:85%;height: 36px;">
                                            </div>
                                            <div class="col-md-8 form-group">
                                            <label for="background_file"><br/></label>
                                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                               <div class="input-append">
                                                  <div class="uneditable-input">
                                                  <i class="fa fa-file fileupload-exists"></i>
                                                  <span class="fileupload-preview"></span>
                                                  </div>
                                                  <span class="btn btn-default btn-file">
                                                  <span class="fileupload-exists">Alterar</span>
                                                  <span class="fileupload-new">Procurar arquivo</span>
                                                  <input type="file" name="background">
                                                  </span>
                                                  <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remover</a>
                                               </div>
                                            </div>
                                            <input type="checkbox" name="resize" checked> Redimencionar imagem (1920x700)
                                          </div>
                                          @if (isset($statisticsColor->background))
                                          <div class="col-md-12">
                                             <img src="{{ asset($statisticsColor->background) }}" width="470px" max-height="300px">
                                             <br/>
                                             <br/>
                                             <input type="button" onclick="$('#removeImage').submit();" class="btn btn-danger btn-sm" value="Remover"/>
                                          </div>    
                                          @endif
                                         </div>
                                    </div>
            
                                       
                                    <div class="col-md-7">
                                       <style>
                                           iframe {
                                               width: 900px;
                                               height: 400px;
                                               overflow: auto;
                                           }
                                       </style>
                                       <label for="color">Pré-visualização</label>
                                       <iframe src="{{ route('home.index') }}" frameborder="0" width="100%" height="400"></iframe>
                                   </div>
                                       
                                       
                                                                     
                                    <div style="padding-top:15px;">
                                       <button type="submit" class="btn btn-primary">Salvar</button>
                                    </div>
            
                                 </form>
                                 <form method="POST" action="{{ route('admin.statistics.colors.delete') }}" id="removeImage">
                                    @csrf
                                    @method('DELETE')
                                    
                                 </form>
            
                        </div>  
                     </div>
                   </div>
                </div>
             </div>
          </div>
          <!-- /.row -->
       </div>
    </section>
    <!-- /.content -->
 </div>

@include('admin.footer')

<script>
function enableStatistics(){
        $('#enable').prop( "disabled", true );
        $.ajax({
            headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}",
            },
            type: 'PUT',
            url: "{{ route('admin.statistics.update', 'enable') }}",
            data: { 
                enable: $('#enable').is(':checked')
            },
            enctype: 'multipart/form-data',
            success: function(data){
                $('#enable').prop( "disabled", false );
            },
            error: function(data){
                $('#enable').prop( "disabled", false );
                console.log('Erro no Ajax !');
            }
        });
    }
</script>