@extends('layouts.app')

@section('content')

<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <!-- Dashboard Ecommerce Starts -->
            <section id="dashboard-ecommerce">
                <!-- Stats Horizontal Card -->
                <div class="row">
                    <div class="col-lg-3 col-sm-6 col-12">
                        <div class="card">
                            <div class="card-header">
                                <div>
                                    <h2 class="font-weight-bolder mb-0">{{$dClientes}}</h2>
                                    <p class="card-text">Total de Clientes / Todos Revendas</p>
                                </div>
                                <div class="avatar bg-light-primary p-50 m-0">
                                    <div class="avatar-content">
                                        <i data-feather="cpu" class="font-medium-5"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-12">
                        <div class="card">
                            <div class="card-header">
                                <div>
                                    <h2 class="font-weight-bolder mb-0">{{$dAtivos}}</h2>
                                    <p class="card-text">Total de Clientes Particular</p>
                                </div>
                                <div class="avatar bg-light-success p-50 m-0">
                                    <div class="avatar-content">
                                        <i data-feather="server" class="font-medium-5"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-12">
                        <div class="card">
                            <div class="card-header">
                                <div>
                                    <h2 class="font-weight-bolder mb-0">{{$dTestes}}</h2>
                                    <p class="card-text">Testes</p>
                                </div>
                                <div class="avatar bg-light-danger p-50 m-0">
                                    <div class="avatar-content">
                                        <i data-feather="activity" class="font-medium-5"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-12">
                        <div class="card">
                            <div class="card-header">
                                <div>
                                    <h2 class="font-weight-bolder mb-0">{{$tRevendas -1}}</h2>
                                    <p class="card-text">Revendas</p>
                                </div>
                                <div class="avatar bg-light-warning p-50 m-0">
                                    <div class="avatar-content">
                                        <i data-feather="alert-octagon" class="font-medium-5"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--/ Stats Horizontal Card -->

                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">URL DE TESTES RÁPIDOS IPTV</h4>
                                <h6 class="card-subtitle text-muted">Crie aqui sua página personalizada de Testes</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12 col-12 mb-1">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <button class="btn btn-outline-primary" type="button">
                                                    <i data-feather="play"></i>
                                                </button>
                                            </div>
                                            <input type="text" id="linkiptv" class="form-control" placeholder="Digite a URL Personalizada" value="{{ $keyiptv }}" />
                                            <div class="input-group-append">
                                                <button class="btn btn-outline-primary" onClick="copiarTexto()" type="button">Copiar</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6 col-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">URL DE TESTES RÁPIDOS P2P</h4>
                                <h6 class="card-subtitle text-muted">Crie aqui sua página personalizada de Testes</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12 col-12 mb-1">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <button class="btn btn-outline-primary" type="button">
                                                    <i data-feather="play"></i>
                                                </button>
                                            </div>
                                            <input type="text" id="linkp2p" class="form-control" placeholder="Digite a URL Personalizada" value="{{ $keyp2p }}" />
                                            <div class="input-group-append">
                                                <button class="btn btn-outline-primary" onClick="copiarTexto2()" type="button">Copiar</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row match-height">
                    <!-- Revenue Report Card -->
                    <div class="col-lg-6 col-12">
                        <div class="card card-revenue-budget">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title">INFORMAÇÕES IMPORTANTES</h4>
                                    <div>
                                        {!! $informacoes[0]->conteudo !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ Revenue Report Card -->
                    <div class="col-lg-6 col-12">
                        <div class="row match-height">
                            <!-- Bar Chart - Orders -->
                            <div class="col-lg-12 col-md-6 col-12">
                                <div class="card">

                                    <div class="card-body">
                                        <h4 class="card-title">PRÓXIMOS VENCIMENTOS</h4>
                                        <table id="table-clientes" class="datatables-ajax table">
                                            <thead>
                                                <tr>
                                                    <th>Id</th>
                                                    <th>Usuário</th>
                                                    <th>Exp</th>
                                                    <th>Ações</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($aVencer as $vencido)
                                                <tr>
                                                    <td>{{ $vencido->id }}</td>
                                                    <td>{{ $vencido->username }}</td>
                                                    <td>{{ $vencido->expiracao }}</td>
                                                    <td class="text-center edit">
                                                        <div data-toggle="tooltip" data-placement="top" title="Renovar" class=""><a href="#"><i class="fa fa-calendar edit"></i></a>
                                                        </div>
                                                    </td>
                                                <tr>
                                                    @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                            <!--/ Bar Chart - Orders -->
                            <!-- Earnings Card -->
                            <div class="col-lg-12 col-md-6 col-12">
                                <div class="card earnings-card">
                                    <div class="card-header d-flex flex-sm-row flex-column justify-content-md-between align-items-start justify-content-start">
                                        <div>
                                            <h4 class="card-title">ESTATÍSTICAS DO MÊS ATUAL</h4>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="line-area-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Earnings Card -->



                        </div>
            </section>
            <!-- Dashboard Ecommerce ends -->
            <!-- END: Content-->

            @endsection()

            @push('scripts')
            <!-- BEGIN: Page Vendor JS-->
            <script>
                function copiarTexto() {
                    var textoCopiado = document.getElementById("linkiptv");
                    textoCopiado.select();
                    document.execCommand("Copy");
                    alert("Texto Copiado: " + textoCopiado.value);
                }

                function copiarTexto2() {
                    var textoCopiado = document.getElementById("linkp2p");
                    textoCopiado.select();
                    document.execCommand("Copy");
                    alert("Texto Copiado: " + textoCopiado.value);
                }
            </script>

            <script>
                //$((function(){"use strict";var e=$(".flat-picker"),t="rtl"===$("html").attr("data-textdirection"),a={series1:"#826af9",series2:"#d2b0ff",bg:"#f8d3ff"},o={series1:"#ffe700",series2:"#00d4bd",series3:"#826bf8",series4:"#2b9bf4",series5:"#FFA1A1"},r={series3:"#a4f8cd",series2:"#60f2ca",series1:"#2bdac7"};function s(e,t){for(var a=0,o=[];a<e;){var r="w"+(a+1).toString(),s=Math.floor(Math.random()*(t.max-t.min+1))+t.min;o.push({x:r,y:s}),a++}return o}if(e.length){new Date;e.each((function(){$(this).flatpickr({mode:"range",defaultDate:["2019-05-01","2019-05-10"]})}))}var i=document.querySelector("#line-area-chart"),n={chart:{height:400,type:"area",parentHeightOffset:0,toolbar:{show:!1}},dataLabels:{enabled:!1},stroke:{show:!1,curve:"straight"},legend:{show:!0,position:"top",horizontalAlign:"start"},grid:{xaxis:{lines:{show:!0}}},colors:[r.series3,r.series2,r.series1],series:[{name:"Visits",data:[100,120,90,170,130,160,140,240,220,180,270,280,375]},{name:"Clicks",data:[60,80,70,110,80,100,90,180,160,140,200,220,275]},{name:"Sales",data:[20,40,30,70,40,60,50,140,120,100,140,180,220]}],xaxis:{categories:["7/12","8/12","9/12","10/12","11/12","12/12","13/12","14/12","15/12","16/12","17/12","18/12","19/12","20/12"]},fill:{opacity:1,type:"solid"},tooltip:{shared:!1},yaxis:{opposite:t}};void 0!==typeof i&&null!==i&&new ApexCharts(i,n).render();}));
                $((function() {
                    var options = {
                        chart: {
                            type: 'area',
                            toolbar: {
                                show: false
                            },
                        },
                        series: [{
                            name: 'Novos Clientes',
                            data: [{
                                {
                                    $nnamount
                                }
                            }]
                        }],
                        xaxis: {
                            categories: [{
                                !!$nndata!!
                            }]
                        },
                        dataLabels: {
                            enabled: false
                        },
                    }

                    var chart = new ApexCharts(document.querySelector("#line-area-chart"), options);

                    chart.render();
                }));
            </script>


            @if(!empty(Session::get('msg')) && Session::get('msg') == 15)
            <script>
                Swal.fire({
                    title: "Sucesso!",
                    text: "Seus dados foram alterados com sucesso",
                    icon: "success",
                    customClass: {
                        confirmButton: "btn btn-primary"
                    },
                    buttonsStyling: !1
                });
            </script>
            @endif

            @endpush