@extends('layouts.app')

@section('content')
    <link rel="stylesheet" href="/pages/css/campanhaativo/style.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/datatables.min.css" />

    <style type="text/css">
        .page-header-fixed.page-sidebar-closed-hide-logo.page-content-white.page-sidebar-closed .page-logo .logo-mini {
            display: block !important;
        }

        .page-header-fixed.page-sidebar-closed-hide-logo.page-content-white.page-sidebar-closed .page-logo {
            width: 6% !important;
        }

        .page-sidebar-closed.page-sidebar-closed-hide-logo.page-header.navbar .menu-toggler.sidebar-toggler {
            margin-left: 4% !important;
            position: absolute !important;
            margin-right: 0px !important;
        }

        .page-header.navbar.menu-toggler.sidebar-toggler {
            position: absolute !important;
            margin-left: 14% !important;
        }
        
    </style>

    <style type="text/css">
        .center-bold th {
            text-align: center;
            font-weight: 60 !important;
        }

        th,
        td {
            white-space: nowrap;
        }

        div.dataTables_wrapper {
            width: 100%;
            margin: 0 auto;
        }

        div.dataTables_scrollHead {
            overflow: scroll;
            width: 100% !important;
        }

        div.dataTables_scrollBody {
            width: 100% !important;
        }

        .span-domingo {
            position: absolute;
            left:   94px;
            bottom: 20%;
        }
    </style>


    <div class="page-dashboard-wrapper">
        <div class="page-content" style="min-height: 650px; width: 100%; background-color: #e4e4e4; padding: 26px 12px;">
            <section class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <a href="{{ url('/home') }}">Home</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <span>Dashboard Ativo</span>
                    </li>
                </ul>
            </section>

            <section class="dashboards-section">
                <div class="dashboard-box-content" style="position: relative;">
                    <div class="dashboard-content">
                        <div class="dashboard-box-header">
                            <h3>Campanhas enviadas por dia</h3>
                            <p class="text-muted font-weight-bold">Últimos 7 dias</p>
                        </div>

                        <div class="dashboard-box-chart">
                            {!! $campanhasEnviadasChart->container() !!}
                        </div>

                        <div>
                            <span class="span-domingo">10</span>
                            <span class="span-segunda">2</span>
                            <span class="span-terca">4</span>
                            <span class="span-quarta">23</span>
                            <span class="span-quinta">66</span>
                            <span class="span-sexta">8</span>
                            <span class="span-sabado">9</span>
                        </div>
                    </div>
                </div>

                {{-- <div class="dashboard-box-content">
                    <div class="dashboard-content">
                        <div class="dashboard-box-header">
                            <h3>Campanhas respondidas por dia</h3>
                            <p class="text-muted font-weight-bold">Últimos 7 dias</p>
                        </div>

                        <div class="dashboard-box-chart">
                            {!! $campanhasRespondidasChart->container() !!}
                        </div>
                    </div>
                </div> --}}

                <div class="dashboard-box-content">
                    <div class="dashboard-content">
                        <div class="dashboard-box-header">
                            <h3>Progresso da campanha</h3>
                            <p class="text-muted font-weight-bold">Últimos 7 dias</p>
                        </div>

                        <div class="dashboard-box-chart">
                            {!! $progessoCampanhasChart->container() !!}
                        </div>
                    </div>
                </div>
            </section>

            <section class="dashboard-main-content">
                <div class="relatorio-container">
                    <div class="relatorio-contents">
                        <header class="relatorio-header">
                            <div class="title-header">
                                <h3>Relatório Campanha</h3>
                            </div>

                            <div>
                                <button class="btn btn-sm btn-primary btnDownloadRelatorio" id="{{ $campanhaId }}">
                                    Exportar Relatório
                                </button>
                            </div>
                        </header>
                    </div>

                    <div class="portlet box blue">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="glyphicon glyphicon-list-alt"></i>Campanhas de ativo
                            </div>

                            <div class="tools">
                                <!--inicio -->
                                <!--fim-->
                            </div>


                            <div id="buttommenu" style="top: 2px;"></div>
                        </div>

                        <style type="text/css">
                            div#sample_1_length {
                                display: none;
                            }

                            .centralizar {
                                text-align: center;
                            }

                            .dt-buttons {
                                float: right !important;
                                margin-top: 3px;
                            }

                            .dt-center {
                                max-width: 80px;
                            }
                        </style>
                        <div class="portlet-body">
                            <div class="table-responsive" style="width: 100%!important; margin: 0;">
                                <table
                                    class="table table-striped table-bordered table-advance table-hover order-column display"
                                    id="tableRelatorioCampanha" style="width: 100%!important; margin: 0;">

                                    <thead style="width: 100%!important; margin: 0;">
                                        <tr class="center-bold" style="width: 100% !important">
                                            <th class="text-center" style="font-weight: 60!important;"><i
                                                    class="fa fa-address-card" style="margin-right: 3px"></i> <span>Nome da
                                                    Campanha</span> </th>
                                            <th class="text-center" style="font-weight: 60!important;"><i
                                                    class="fa fa-address-card" style="margin-right: 3px"></i> <span>Número
                                                    do cliente</span> </th>
                                            <th class="text-center" style="font-weight: 60!important;"> <i
                                                    class="fa fa-check" style="margin-right: 3px"></i><span>Status</span>
                                            </th>
                                            <th class="text-center" style="font-weight: 60!important;"></i><i
                                                    class="fa fa-calendar" style="margin-right: 3px"></i> <span>Data de
                                                    Envio</span></th>
                                            <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-user"
                                                    style="margin-right: 3px"></i><span>Criado por</span></th>
                                        </tr>
                                    </thead>

                                    <tbody style="width: 100%;"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="{{ asset('global/plugins/bootstrap-select/js/bootstrap-select.min.js') }}" type="text/javascript"></script>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> -->

    <script src="{{ asset('global/plugins/jquery-repeater/jquery.repeater.1.2.1.min.js') }}" type="text/javascript">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/pt-br.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/xlsx.full.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>

    {{-- Estilização --}}
    <script src="{{ asset('global/scripts/bootstrap-sweetalert/sweetalert2.all.min.js') }}"></script>
    <link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}"
        rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="{{ asset('global/scripts/bootstrap-sweetalert/sweetalert2.min.css') }}">

    {{-- DataTable --}}
    <script src="{{ asset('global/plugins/datatables/datatables.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}" type="text/javascript">
    </script>

    <script defer type="module" src="/pages/scripts/campanhaativo/index.js"></script>
    <script src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}"
        type="text/javascript"></script>
    <script src="{{ asset('global/plugins/bootstrap-select/js/bootstrap-select.min.js') }}" type="text/javascript">
    </script>
    <script src="{{ asset('pages/scripts/usuario/form-repeater.js') }}" type="text/javascript"></script>
    <script src="{{ asset('pages/scripts/usuario/bootstrap-confirmation-index.js') }}" type="text/javascript"></script>

    {{-- Chart JS --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

    <script type="module" src="/pages/scripts/campanhaativo/dashboard/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>


    {{-- Tabela de ativos! --}}
    <script defer type="module" src="/pages/scripts/campanhaativo/index.js"></script>

    <script>
        $(document).ready(function() {
            $('.page-sidebar-wrapper').remove(); // Removendo o menu lateral do layout

            const init = new CampanhaDeAtivo();

            init.relatorio.listagemCampanhas({{ $campanhaId }});
        })
    </script>

    {{-- Scripts para carregar os gráficos --}}
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
    
    {!! $campanhasEnviadasChart->script() !!}

    {!! $progessoCampanhasChart->script() !!}

@endpush