@extends('voyager::master')

@section("css")
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
<style>
    ul.nav li.active a:hover {
        background: #62a8ea !important;
    }

    a.contact-button img{
        width: 25px !important;
        height: 25px !important;
    }

    /* Responsive improvements */
    .analytics-container .nav-tabs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid #ddd;
        padding-bottom: 6px;
        margin-bottom: 12px;
        gap: 6px;
        width: 100%;
        padding-left: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .analytics-container .nav-tabs > li {
        float: none;
    }

    .analytics-container .nav-tabs > li > a {
        white-space: nowrap;
    }

    .analytics-container .tab-content {
        width: 100%;
    }

    .analytics-container .tab-pane .nav-tabs {
        margin-top: 0;
    }

    .analytics-container .dataTables_wrapper {
        width: 100%;
        display: block;
    }

    .analytics-container table.dataTable {
        width: 100% !important;
    }

    .analytics-container .dataTables_wrapper .dataTables_scrollBody,
    .analytics-container .dataTables_wrapper .dataTables_scroll,
    .analytics-container .dataTables_wrapper .dataTables_scrollHead,
    .analytics-container .dataTables_wrapper .dataTables_scrollFoot {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 992px) {
        /* ULTRA COMPACT - Zero padding approach */
        .page-content {
            padding: 0 !important;
            margin: 0 !important;
        }

        .container-fluid {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .analytics-container {
            margin: 0 !important;
            padding: 0 !important;
        }

        .analytics-container .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .analytics-container [class*="col-"] {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .analytics-container .nav-tabs {
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding: 0 !important;
            margin: 0 0 2px 0 !important;
            gap: 1px;
            border-bottom: 1px solid #ddd;
            background: #f5f5f5;
        }

        .analytics-container .nav-tabs > li {
            margin: 0 !important;
        }

        .analytics-container .nav-tabs > li > a {
            padding: 4px 8px !important;
            font-size: 11px !important;
            border-radius: 0 !important;
            margin: 0 !important;
            border: none !important;
        }

        .analytics-container .tab-content {
            padding: 0 !important;
        }

        .analytics-container .tab-content > .tab-pane {
            padding: 0 !important;
        }

        .analytics-container .tab-content > .tab-pane > .nav-tabs {
            margin: 0 0 2px 0 !important;
            padding: 0 !important;
            background: #e9e9e9;
        }

        .analytics-container .tab-content > .tab-pane > .nav-tabs > li > a {
            padding: 3px 6px !important;
            font-size: 10px !important;
        }

        .analytics-container table.dataTable {
            min-width: 600px;
        }

        .analytics-container .dataTables_wrapper {
            padding: 0 2px !important;
        }

        .analytics-container .dataTables_wrapper .dataTables_length,
        .analytics-container .dataTables_wrapper .dataTables_filter {
            float: none;
            text-align: left;
            width: 100%;
            margin: 0 0 2px 0 !important;
            padding: 0 !important;
        }

        .analytics-container .dataTables_wrapper .dataTables_length label,
        .analytics-container .dataTables_wrapper .dataTables_filter label {
            font-size: 10px !important;
            margin: 0 !important;
        }

        .analytics-container .dataTables_wrapper .dataTables_filter input {
            width: 100%;
            max-width: none;
            padding: 2px 4px !important;
            font-size: 11px !important;
        }

        .analytics-container .dataTables_wrapper .dataTables_paginate,
        .analytics-container .dataTables_wrapper .dataTables_info {
            float: none;
            text-align: center;
            margin: 2px 0 !important;
            padding: 0 !important;
            font-size: 10px !important;
        }

        .analytics-container .panel {
            margin: 0 0 2px 0 !important;
            border-radius: 0 !important;
        }

        .analytics-container .panel-body {
            padding: 2px !important;
        }

        .analytics-container .panel-heading {
            padding: 4px 6px !important;
            font-size: 11px !important;
        }

        .analytics-container .dataTables_wrapper .dataTables_length select {
            padding: 1px 2px !important;
            font-size: 10px !important;
        }

        .analytics-container .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 2px 6px !important;
            font-size: 10px !important;
        }

        /* Table cells ultra compact */
        .analytics-container table.dataTable td,
        .analytics-container table.dataTable th,
        .tab-content .table-responsive table td,
        .tab-content .table-responsive table th {
            font-size: 10px !important;
            padding: 3px 4px !important;
            vertical-align: middle;
        }

        .table-responsive {
            border: 0;
            overflow-x: auto;
            margin: 0 !important;
            padding: 0 !important;
        }

        .tab-content .table-responsive table {
            white-space: nowrap;
            width: 100% !important;
            margin: 0 !important;
        }

        .tab-content .table-responsive {
            margin: 0 !important;
            box-shadow: none !important;
            border-radius: 0 !important;
        }

        /* Modal compact */
        .modal-dialog {
            margin: 5px !important;
        }

        /* Hide unnecessary elements on mobile */
        .analytics-container .dataTables_wrapper .dataTables_length {
            display: none;
        }
    }

    @media (max-width: 480px) {
        .analytics-container .nav-tabs > li > a {
            padding: 3px 5px !important;
            font-size: 9px !important;
        }

        .analytics-container .tab-content > .tab-pane > .nav-tabs > li > a {
            padding: 2px 4px !important;
            font-size: 8px !important;
        }

        .analytics-container table.dataTable td,
        .analytics-container table.dataTable th,
        .tab-content .table-responsive table td,
        .tab-content .table-responsive table th {
            font-size: 9px !important;
            padding: 2px 3px !important;
        }

        .analytics-container .dataTables_wrapper .dataTables_filter label {
            font-size: 9px !important;
        }

        .analytics-container .dataTables_wrapper .dataTables_info,
        .analytics-container .dataTables_wrapper .dataTables_paginate {
            font-size: 9px !important;
        }

        .analytics-container .panel-heading {
            padding: 3px 4px !important;
            font-size: 10px !important;
        }
    }

    /* Session Cards Styling - Professional Design */
    .session-card {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border-radius: 15px;
        overflow: hidden;
        border: none;
        margin-bottom: 15px;
        background: linear-gradient(145deg, #ffffff, #ffffff);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
        position: relative;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
    .session-card:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(0, 0, 0, 0.06);
        border-color: rgba(77, 171, 247, 0.3);
    }
    .session-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #007bff, #6610f2, #00d4ff);
        z-index: 1;
        border-radius: 15px 15px 0 0;
    }
    .card-header {
        background: linear-gradient(135deg, #1a237e, #283593, #3949ab);
        border-top-left-radius: 15px !important;
        border-top-right-radius: 15px !important;
        padding: 8px 15px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .card-header div {
        display: flex;
        align-items: center;
        color: white;
        font-weight: 600;
        font-size: 0.9rem;
    }
    .card-header i {
        font-size: 1rem;
        margin-right: 8px;
        color: #80deea;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    .card-header .badge {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        font-weight: 600;
        font-size: 0.75rem;
        padding: 4px 10px;
        border-radius: 50px;
        margin: 0;
    }
    .session-cover-wrapper {
        position: relative;
        overflow: hidden;
        height: 160px;
    }
    .session-cover {
        height: 160px;
        object-fit: cover;
        width: 100%;
        border-bottom: none;
        transition: transform 0.5s ease;
    }
    .session-card:hover .session-cover {
        transform: scale(1.05);
    }
    .session-cover-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
        padding: 20px 15px 10px;
        backdrop-filter: blur(1px);
    }
    .media-title {
        font-size: 1rem;
        font-weight: 700;
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
        margin-bottom: 2px;
        letter-spacing: 0.2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .media-subtitle {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    .card-body {
        padding: 12px 15px;
    }
    .user-profile-section {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .user-avatar-large {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50%;
        border: 2px solid #007bff;
        box-shadow: 0 3px 6px rgba(0, 123, 255, 0.3);
        transition: transform 0.3s ease;
        margin-right: 10px;
    }
    .user-avatar-large:hover {
        transform: scale(1.1);
    }
    .user-name {
        font-size: 0.95rem;
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
        line-height: 1.2;
    }
    .user-role {
        display: block;
        color: #6c757d;
        font-size: 0.75rem;
        font-weight: 500;
    }
    .session-details {
        margin: 0 -5px;
        display: flex;
    }
    .detail-col {
        padding: 0 5px;
        display: flex;
        flex-direction: column;
    }
    .detail-label {
        font-size: 0.7rem;
        color: #999;
        text-transform: uppercase;
        margin-bottom: 2px;
    }
    .detail-icon {
        display: none;
    }
    .detail-value {
        font-size: 0.8rem;
        font-weight: 600;
        color: #495057;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .info-item {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 8px 10px;
        margin-bottom: 8px;
        border-left: 3px solid #007bff;
        transition: all 0.3s ease;
    }
    .info-item:hover {
        background: #e9ecef;
        transform: translateX(3px);
    }
    .info-item i {
        color: #007bff;
        font-size: 1rem;
        margin-right: 8px;
        width: 20px;
        text-align: center;
    }
    .info-item p {
        margin-bottom: 0;
        font-weight: 500;
        color: #495057;
        font-size: 0.85rem;
    }
    .info-item small {
        color: #6c757d;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
    }
    .card-footer {
        background: linear-gradient(135deg, #ffffff, #f8f9fa);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        padding: 10px 15px !important;
        border-bottom-left-radius: 15px !important;
        border-bottom-right-radius: 15px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    .badge {
        font-size: 0.82rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 50px;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        border: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .badge-device {
        background: linear-gradient(135deg, #5a6268, #868e96);
        color: white;
        box-shadow: 0 2px 6px rgba(90, 98, 104, 0.3);
    }
    .badge-status {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white;
        box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3);
    }
    .live-indicator {
        display: inline-flex;
        align-items: center;
        color: #dc3545;
        font-weight: 600;
        font-size: 0.95rem;
    }
    .live-indicator::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #dc3545;
        border-radius: 50%;
        margin-right: 8px;
        animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
        0% { transform: scale(0.95); opacity: 0.7; }
        70% { transform: scale(1.1); opacity: 1; }
        100% { transform: scale(0.95); opacity: 0.7; }
    }
    .session-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .meta-item {
        display: flex;
        align-items: center;
        color: #6c757d;
        font-size: 0.9rem;
    }
    .meta-item i {
        margin-right: 6px;
        color: #007bff;
    }
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        border-radius: 16px;
        border: 2px dashed #dee2e6;
    }
    .empty-state i {
        font-size: 4rem;
        color: #adb5bd;
        margin-bottom: 20px;
    }
    .empty-state h4 {
        color: #6c757d;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .empty-state p {
        color: #6c757d;
        max-width: 500px;
        margin: 0 auto;
    }
</style>
@stop

@section('content')
    <div class="page-content">
        @include('voyager::alerts')

        @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 4)
            @include('all-active-sessions')
        @endif

        @include('voyager::dimmers')
            <div class="analytics-container">
                <div class="row">
                    <div class="col-md-12">
                         <ul class="nav nav-tabs" id="globalTabs">
                            @php
                                $services = Auth::user()->services;
                                $firstService = true;
                            @endphp
                            
                            @if(!empty($services))
                                @foreach($services as $service)
                                    <li class="{{ $firstService ? 'active' : '' }}">
                                        <a href="#{{ $service }}" data-toggle="tab">
                                            @if($service === 'plex')
                                                Plex
                                            @elseif($service === 'jellyfin')
                                                Jellyfin
                                            @elseif($service === 'emby')
                                                Emby
                                            @else
                                                {{ ucfirst($service) }}
                                            @endif
                                        </a>
                                    </li>
                                    @php $firstService = false; @endphp
                                @endforeach
                            @else
                                <li class="active">
                                    <a href="#no-services" data-toggle="tab">Sin Servicios</a>
                                </li>
                            @endif
                         </ul>

                         <div class="tab-content">
                            @if(!empty($services))
                                @php
                                    $firstService = true;
                                @endphp
                                
                                @foreach($services as $service)
                                    <div id="{{ $service }}" class="tab-pane fade {{ $firstService ? 'active in' : '' }}">
                                        @if($service === 'plex')
                                            @include('plex-dashboard')
                                        @elseif($service === 'jellyfin')
                                            @include('jellyfin-dashboard')
                                        @elseif($service === 'emby')
                                            @include('emby-dashboard')
                                        @endif
                                    </div>
                                    @php $firstService = false; @endphp
                                @endforeach
                            @else
                                <div id="no-services" class="tab-pane fade active in">
                                    <div class="alert alert-info">
                                        <h4>No hay servicios asignados</h4>
                                        <p>No tienes servicios asignados. Por favor, contacta al administrador para que te asigne los servicios correspondientes.</p>
                                    </div>
                                </div>
                            @endif
                         </div>
                    </div>
                </div>
            </div>
            
            <!-- Send Message Modal -->
            <div class="modal fade" id="send-message-modal" tabindex="-1" role="dialog" aria-labelledby="sendMessageModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="sendMessageModalLabel">Enviar Mensaje a Sesión</h4>
                        </div>
                        <div class="modal-body">
                            <form id="send-message-form">
                                <input type="hidden" id="message-session-id" name="session_id">
                                <input type="hidden" id="message-server-id" name="server_id">
                                <div class="form-group">
                                    <label for="message-text" class="control-label">Mensaje:</label>
                                    <textarea class="form-control" id="message-text" name="text" rows="3" required></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="message-header" class="control-label">Título (Opcional):</label>
                                    <input type="text" class="form-control" id="message-header" name="header" value="Aviso Importante">
                                </div>
                                <div class="form-group">
                                    <label for="message-timeout" class="control-label">Tiempo (ms):</label>
                                    <input type="number" class="form-control" id="message-timeout" name="timeout" value="10000">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                            <button type="button" class="btn btn-primary" id="btn-send-message">Enviar</button>
                        </div>
                    </div>
                </div>
            </div>
    </div>
@stop

@section('javascript') 
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script>
        $(document).ready(function(){

            @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 4)
                function loadActiveSessions() {
                    $.get('/api/get-all-platforms-servers', function(servers) {
                        // Procesar Plex
                        if (servers.plex && servers.plex.length > 0) {
                            let plexCount = 0;
                            let plexRequests = servers.plex.map(id => {
                                return $.post('/api/get-sessions-by-platform', {
                                    platform: 'plex',
                                    id: id
                                }).then(function(response) {
                                    plexCount += response.count;
                                });
                            });
                            
                            $.when.apply($, plexRequests).done(function() {
                                $('#load_sp').text(plexCount);
                            });
                        } else {
                            $('#load_sp').text('0');
                        }

                        // Procesar Jellyfin
                        if (servers.jelly && servers.jelly.length > 0) {
                            let jellyCount = 0;
                            let jellyRequests = servers.jelly.map(id => {
                                return $.post('/api/get-sessions-by-platform', {
                                    platform: 'jellyfin',
                                    id: id
                                }).then(function(response) {
                                    jellyCount += response.count;
                                });
                            });
                            
                            $.when.apply($, jellyRequests).done(function() {
                                $('#load_sj').text(jellyCount);
                            });
                        } else {
                            $('#load_sj').text('0');
                        }

                        // Procesar Emby
                        if (servers.emby && servers.emby.length > 0) {
                            let embyCount = 0;
                            let embyRequests = servers.emby.map(id => {
                                return $.post('/api/get-sessions-by-platform', {
                                    platform: 'emby',
                                    id: id
                                }).then(function(response) {
                                    embyCount += response.count;
                                });
                            });
                            
                            $.when.apply($, embyRequests).done(function() {
                                $('#load_se').text(embyCount);
                            });
                        } else {
                            $('#load_se').text('0');
                        }
                    }).fail(function(error) {
                        console.error('Error al obtener la lista de servidores:', error);
                        $('#load_sp, #load_sj, #load_se').text('Error');
                    });
                }
                loadActiveSessions();
                const interval = setInterval(loadActiveSessions, 300000);
            @endif

            function adjustVisibleTables() {
                if ($.fn.dataTable) {
                    $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
                }
            }

            @if(!empty($services))
                // Función para activar el primer sub-tab dentro de un tab principal
                function activateFirstSubTab(tabId) {
                    var $tabContent = $('#' + tabId);
                    
                    // Verificar si el tab tiene la clase 'in' (que Bootstrap usa para mostrar contenido)
                    if ($tabContent.length && $tabContent.hasClass('in')) {
                        // Buscar el primer sub-tab dentro del tab principal
                        var $firstSubTab = $tabContent.find('.nav-tabs a:first');
                        if ($firstSubTab.length) {
                            $firstSubTab.tab('show');
                        }
                    } else {
                        // Si el tab no está activo, esperar y reintentar
                        setTimeout(function() {
                            activateFirstSubTab(tabId);
                        }, 100);
                    }
                }
                
                // Configurar el evento para activar el primer sub-tab cuando se muestre un tab principal
                $('#globalTabs a').on('shown.bs.tab', function(e) {
                    var tabId = $(e.target).attr('href').substring(1);
                    activateFirstSubTab(tabId);
                    setTimeout(adjustVisibleTables, 50);
                });
                
                // Para el primer tab que ya está activo al cargar la página
                var $firstActiveTab = $('#globalTabs .active a');
                if ($firstActiveTab.length) {
                    var firstTabId = $firstActiveTab.attr('href').substring(1);
                    // Dar un pequeño delay para asegurar que Bootstrap haya inicializado los tabs
                    setTimeout(function() {
                        activateFirstSubTab(firstTabId);
                        adjustVisibleTables();
                    }, 50);
                }
            @endif

            $('.analytics-container .tab-content .nav-tabs a').on('shown.bs.tab', function() {
                setTimeout(adjustVisibleTables, 50);
            });

            $(window).on('resize', function() {
                adjustVisibleTables();
            });



            $("body").on('click','button.view-customers-by-reseller-emby', function(){
                let reseller = $(this).attr("data-reseller");
                let customers = JSON.parse($(this).attr("data-customers"));
                $("#reseller_name").text(reseller);

                $("#load-view-customers-by-reseller-emby").empty();

                $.each(customers, function(e,v){
                    $("#load-view-customers-by-reseller-emby").append("<tr><td>"+(v.embyserver.name ? v.embyserver.name: v.embyserver.name)+"</td><td>"+(v.name ? v.name:'')+"</td><td>"+v.date_to+"</td></tr>");
                });

                $("#view-customers-by-reseller-emby").modal("show");
            });

            $("body").on('click','button.view-customers-button-emby', function(){
                let customers = JSON.parse($(this).attr("data-customers"));
                let server = $(this).attr("data-server");
                $("#server_name_emby").text(server);

                $("#load-view-customers-emby").empty();

                $.each(customers, function(e,v){
                    $("#load-view-customers-emby").append("<tr><td>"+v.user.name+" ("+v.user.role.name+") </td><td>"+(v.name ? v.name:'')+"</td><td>"+v.date_to+"</td></tr>");
                });

                $("#view-customers-modal-emby").modal('show');
            });

            $("body").on('click','button.view-customers-by-reseller', function(){
                let reseller = $(this).attr("data-reseller");
                let customers = JSON.parse($(this).attr("data-customers"));
                $("#reseller_name").text(reseller);

                $("#load-view-customers-by-reseller").empty();

                $.each(customers, function(e,v){
                    $("#load-view-customers-by-reseller").append("<tr><td>"+(v.server.local_name ? v.server.local_name: v.server.name)+"</td><td>"+v.email+" "+(v.name ? v.name:'')+"</td><td>"+v.date_to+"</td></tr>");
                });

                $("#view-customers-by-reseller").modal("show");
            });




            $("body").on('click','button.view-customers-by-reseller-jelly', function(){
                let reseller = $(this).attr("data-reseller");
                let customers = JSON.parse($(this).attr("data-customers"));
                $("#reseller_name").text(reseller);

                $("#load-view-customers-by-reseller-jelly").empty();

                $.each(customers, function(e,v){
                    $("#load-view-customers-by-reseller-jelly").append("<tr><td>"+(v.jellyfinserver.name ? v.jellyfinserver.name: v.jellyfinserver.name)+"</td><td>"+(v.name ? v.name:'')+"</td><td>"+v.date_to+"</td></tr>");
                });

                $("#view-customers-by-reseller-jelly").modal("show");
            });

            $("body").on('click','button.view-customers-button-jelly', function(){
                let customers = JSON.parse($(this).attr("data-customers"));
                let server = $(this).attr("data-server");
                $("#server_name_jelly").text(server);

                $("#load-view-customers-jelly").empty();

                $.each(customers, function(e,v){
                    $("#load-view-customers-jelly").append("<tr><td>"+v.user.name+" ("+v.user.role.name+") </td><td>"+(v.name ? v.name:'')+"</td><td>"+v.date_to+"</td></tr>");
                });

                $("#view-customers-modal-jelly").modal('show');
            });

            $("body").on('click','button.view-customers-by-reseller', function(){
                let reseller = $(this).attr("data-reseller");
                let customers = JSON.parse($(this).attr("data-customers"));
                $("#reseller_name").text(reseller);

                $("#load-view-customers-by-reseller").empty();

                $.each(customers, function(e,v){
                    $("#load-view-customers-by-reseller").append("<tr><td>"+(v.server.local_name ? v.server.local_name: v.server.name)+"</td><td>"+v.email+" "+(v.name ? v.name:'')+"</td><td>"+v.date_to+"</td></tr>");
                });

                $("#view-customers-by-reseller").modal("show");
            });

            $("body").on('click','button.view-customers-button', function(){
                let customers = JSON.parse($(this).attr("data-customers"));
                let server = $(this).attr("data-server");
                $("#server_name").text(server);

                $("#load-view-customers").empty();

                $.each(customers, function(e,v){
                    $("#load-view-customers").append("<tr><td>"+v.user.name+" ("+v.user.role.name+") </td><td>"+v.email+" "+(v.name ? v.name:'')+"</td><td>"+v.date_to+"</td></tr>");
                });

                $("#view-customers-modal").modal('show');
            });

            var tableDefaults = {
                "responsive": false,
                "scrollX": true,
                "scrollCollapse": true,
                "autoWidth": false
            };

            $("table.data-table").DataTable(tableDefaults);

            $("#expireds").DataTable($.extend({}, tableDefaults, {
                "order":[
                    [3, "asc"]
                ]
            }));

            $("#expireds-jelly").DataTable($.extend({}, tableDefaults, {
                "order":[
                    [3, "asc"]
                ]
            }));

            $("#expireds-emby").DataTable($.extend({}, tableDefaults, {
                "order":[
                    [3, "asc"]
                ]
            }));

            $("#movements-table").DataTable($.extend({}, tableDefaults, {
                "order":[
                    [0,"desc"]
                ]
            }));

            // Cards design for sessions - no DataTable needed

            $("#table-customersbyserver").DataTable($.extend({}, tableDefaults, {
                "order":[
                    [2,"desc"]
                ]
            }));

            $("#table-customersbyserver-jelly").DataTable($.extend({}, tableDefaults, {
                "order":[
                    [2,"desc"]
                ]
            }));

            $("#table-customersbyserver-emby").DataTable($.extend({}, tableDefaults, {
                "order":[
                    [2,"desc"]
                ]
            }));

            $("#table-customersbyresellers").DataTable($.extend({}, tableDefaults, {
                "order":[
                    [1,"desc"]
                ]
            }));

            $("#table-customersbyresellers-jelly").DataTable($.extend({}, tableDefaults, {
                "order":[
                    [1,"desc"]
                ]
            }));

            $("#table-customersbyresellers-emby").DataTable($.extend({}, tableDefaults, {
                "order":[
                    [1,"desc"]
                ]
            }));

            setTimeout(adjustVisibleTables, 50);

            $("#select-servers").change(function(){
                let server_id = $(this).val();

                $("#load-sessions").html('<div class="col-md-12 text-center"><div class="spinner-border text-primary" role="status"><span class="sr-only">Cargando...</span></div><p class="mt-2">Cargando sesiones activas...</p></div>');
                $("#no-sessions-message").hide();
                
                $.get("/api/get-active-sessions/"+server_id+"/{{Auth::user()->id}}", function(response){
                    let sessions = response;
                    if(parseInt(sessions.length) > 0){
                        let html = "";
                        for(let i=0;i < sessions.length;i++){
                            let session = sessions[i];
                            let hasCover = session.media.cover && session.media.cover.length > 0;
                            let imgStyle = hasCover ? '' : 'display:none;';
                            let placeholderStyle = hasCover ? 'display:none;' : 'display:flex;';
                            html += '<div class="col-lg-3 col-md-4 col-sm-6 mb-3">' +
                                    '<div class="card session-card h-100">' +
                                        '<div class="card-header">' +
                                            '<div style="display:flex;align-items:center;gap:8px">' +
                                                '<img src="/images/logos/plex_icon.png" style="height:18px;width:auto;">' +
                                                '<span class="badge badge-warning">En Reproducción</span>' +
                                            '</div>' +
                                        '</div>' +
                                        '<div class="session-cover-wrapper">' +
                                            '<img src="' + session.media.cover + '" class="session-cover" alt="' + session.media.title + '" style="' + imgStyle + '" onerror="this.style.display=\'none\'; this.nextElementSibling.style.display=\'flex\';">' +
                                            '<div class="no-image-placeholder" style="' + placeholderStyle + ' height: 100%; width: 100%; background: linear-gradient(135deg, #2c3e50, #4ca1af); flex-direction: column; justify-content: center; align-items: center; color: white; position: absolute; top:0; left:0;">' +
                                                '<i class="voyager-film" style="font-size: 3rem; margin-bottom: 10px; opacity: 0.7;"></i>' +
                                                '<span style="font-weight: 600; opacity: 0.9;">Sin Imagen</span>' +
                                            '</div>' +
                                            '<div class="session-overlay"></div>' +
                                            '<div class="session-media-info">' +
                                                '<h5 class="media-title" title="' + session.media.title + '">' + session.media.title + '</h5>' +
                                                '<div class="media-subtitle">Viendo ahora</div>' +
                                            '</div>' +
                                        '</div>' +
                                        '<div class="card-body">' +
                                            '<div class="user-profile-section">' +
                                                '<img src="' + session.user.avatar + '" class="user-avatar-large" alt="' + session.user.name + '" onerror="this.onerror=null;this.src=\'{{ asset("images/default-avatar.png") }}\';">' +
                                                '<h4 class="user-name">' + session.user.name + '</h4>' +
                                                '<span class="user-role">Usuario</span>' +
                                            '</div>' +
                                            '<hr style="margin: 25px 0; border-top: 1px solid #f1f1f1;">' +
                                            '<div class="session-details row">' +
                                                '<div class="col-xs-6 detail-col" style="border-right: 1px solid #eee;">' +
                                                    '<span class="detail-label">Dispositivo</span>' +
                                                    '<i class="voyager-tv detail-icon text-primary-custom"></i>' +
                                                    '<span class="detail-value" title="' + session.player.device + '">' + session.player.device + '</span>' +
                                                '</div>' +
                                                '<div class="col-xs-6 detail-col">' +
                                                    '<span class="detail-label">IP Address</span>' +
                                                    '<i class="voyager-world detail-icon text-info-custom"></i>' +
                                                    '<span class="detail-value">' + session.player.ip + '</span>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>';
                        }
                        $("#load-sessions").html(html);
                    }else{
                        $("#load-sessions").html("");
                        $("#no-sessions-message").show();
                    }
                }).fail(function(){
                    $("#load-sessions").html("");
                    $("#no-sessions-message").show();
                });

            });

            $("#select-servers-emby").change(function(){
                let server_id = $(this).val();

                $("#load-sessions-emby").html('<div class="col-md-12 text-center"><div class="spinner-border text-primary" role="status"><span class="sr-only">Cargando...</span></div><p class="mt-2">Cargando sesiones activas...</p></div>');
                $("#no-sessions-message-emby").hide();
                
                $.get("/api/get-emby-active-sessions/"+server_id, function(response){
                    let sessions = response;
                    if(parseInt(sessions.length) > 0){
                        let html = "";
                        for(let i=0;i < sessions.length;i++){
                            let session = sessions[i];
                            let hasCover = session.media.cover && session.media.cover.length > 0;
                            let imgStyle = hasCover ? '' : 'display:none;';
                            let placeholderStyle = hasCover ? 'display:none;' : 'display:flex;';

                            // We need the session ID for the message function. 
                            // Assuming the API now returns 'id' in the session object or we need to update the API to return it.
                            // The current get_emby_active_sessions implementation in ApiController (from previous turns) 
                            // constructs the response but might have missed passing the raw session ID explicitly in the top level 
                            // or inside 'user'/'player'. Let's verify ApiController logic.
                            // Looking at the ApiController code I wrote earlier:
                            // $data[$cont]['session_id'] = $session['Id']; // This needs to be added to ApiController first if not present.
                            // I will assume I will update ApiController to return 'session_id'.
                            
                            html += '<div class="col-lg-3 col-md-4 col-sm-6 mb-3">' +
                                    '<div class="card session-card h-100">' +
                                        '<div class="card-header">' +
                                            '<div style="display:flex;align-items:center;gap:8px">' +
                                                '<img src="/images/logos/emby_icon.png" style="height:18px;width:auto;">' +
                                                '<span class="badge badge-warning">En Reproducción</span>' +
                                            '</div>' +
                                        '</div>' +
                                        '<div class="session-cover-wrapper">' +
                                            '<img src="' + session.media.cover + '" class="session-cover" alt="' + session.media.title + '" style="' + imgStyle + '" onerror="this.style.display=\'none\'; this.nextElementSibling.style.display=\'flex\';">' +
                                            '<div class="no-image-placeholder" style="' + placeholderStyle + ' height: 100%; width: 100%; background: linear-gradient(135deg, #2c3e50, #4ca1af); flex-direction: column; justify-content: center; align-items: center; color: white; position: absolute; top:0; left:0;">' +
                                                '<i class="voyager-film" style="font-size: 3rem; margin-bottom: 10px; opacity: 0.7;"></i>' +
                                                '<span style="font-weight: 600; opacity: 0.9;">Sin Imagen</span>' +
                                            '</div>' +
                                            '<div class="session-overlay"></div>' +
                                            '<div class="session-media-info">' +
                                                '<h5 class="media-title" title="' + session.media.title + '">' + session.media.title + '</h5>' +
                                                '<div class="media-subtitle">Viendo ahora</div>' +
                                            '</div>' +
                                        '</div>' +
                                        '<div class="card-body">' +
                                            '<div class="user-profile-section">' +
                                                '<img src="' + session.user.avatar + '" class="user-avatar-large" alt="' + session.user.name + '" onerror="this.onerror=null;this.src=\'{{ asset("images/default-avatar.png") }}\';">' +
                                                '<h4 class="user-name">' + session.user.name + '</h4>' +
                                                '<span class="user-role">Usuario</span>' +
                                            '</div>' +
                                            '<hr style="margin: 25px 0; border-top: 1px solid #f1f1f1;">' +
                                            '<div class="session-details row">' +
                                                '<div class="col-xs-6 detail-col" style="border-right: 1px solid #eee;">' +
                                                    '<span class="detail-label">Dispositivo</span>' +
                                                    '<i class="voyager-tv detail-icon text-primary-custom"></i>' +
                                                    '<span class="detail-value" title="' + session.player.device + '">' + session.player.device + '</span>' +
                                                '</div>' +
                                                '<div class="col-xs-6 detail-col">' +
                                                    '<span class="detail-label">IP Address</span>' +
                                                    '<i class="voyager-world detail-icon text-info-custom"></i>' +
                                                    '<span class="detail-value">' + session.player.ip + '</span>' +
                                                '</div>' +
                                            '</div>' +
                                            '<div class="row" style="margin-top: 15px; padding: 0 15px;">' +
                                                '<button class="btn btn-info btn-block btn-open-message-modal" data-session-id="' + session.session_id + '" data-server-id="' + server_id + '">' +
                                                    '<i class="voyager-mail"></i> Enviar Mensaje' +
                                                '</button>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>';
                        }
                        $("#load-sessions-emby").html(html);
                    }else{
                        $("#load-sessions-emby").html("");
                        $("#no-sessions-message-emby").show();
                    }
                }).fail(function(){
                    $("#load-sessions-emby").html("");
                    $("#no-sessions-message-emby").show();
                });
            });

            // Handler for opening the message modal
            $(document).on('click', '.btn-open-message-modal', function() {
                var sessionId = $(this).data('session-id');
                var serverId = $(this).data('server-id');
                
                $('#message-session-id').val(sessionId);
                $('#message-server-id').val(serverId);
                $('#message-text').val(''); // Clear previous message
                
                $('#send-message-modal').modal('show');
            });

            // Handler for sending the message
            $('#btn-send-message').click(function() {
                var btn = $(this);
                var form = $('#send-message-form');
                var data = form.serialize(); // Serialize form data
                
                btn.prop('disabled', true).text('Enviando...');
                
                $.post('/api/send-message-to-session', data)
                    .done(function(response) {
                        if(response.success) {
                            toastr.success(response.message);
                            $('#send-message-modal').modal('hide');
                        } else {
                            toastr.error(response.message);
                        }
                    })
                    .fail(function(xhr) {
                        toastr.error('Error al enviar el mensaje: ' + (xhr.responseJSON ? xhr.responseJSON.message : 'Error desconocido'));
                    })
                    .always(function() {
                        btn.prop('disabled', false).text('Enviar');
                    });
            });
        });
    </script>
    @if(isset($google_analytics_client_id) && !empty($google_analytics_client_id))
        <script>
            (function (w, d, s, g, js, fs) {
                g = w.gapi || (w.gapi = {});
                g.analytics = {
                    q: [], ready: function (f) {
                        this.q.push(f);
                    }
                };
                js = d.createElement(s);
                fs = d.getElementsByTagName(s)[0];
                js.src = 'https://apis.google.com/js/platform.js';
                fs.parentNode.insertBefore(js, fs);
                js.onload = function () {
                    g.load('analytics');
                };
            }(window, document, 'script'));
        </script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
        <script>
            // View Selector 2 JS
            !function(e){function t(r){if(i[r])return i[r].exports;var o=i[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}var o=i(1),s=r(o);gapi.analytics.ready(function(){function e(e,t,i){e.innerHTML=t.map(function(e){var t=e.id==i?"selected ":" ";return"<option "+t+'value="'+e.id+'">'+e.name+"</option>"}).join("")}function t(e){return e.ids||e.viewId?{prop:"viewId",value:e.viewId||e.ids&&e.ids.replace(/^ga:/,"")}:e.propertyId?{prop:"propertyId",value:e.propertyId}:e.accountId?{prop:"accountId",value:e.accountId}:void 0}gapi.analytics.createComponent("ViewSelector2",{execute:function(){return this.setup_(function(){this.updateAccounts_(),this.changed_&&(this.render_(),this.onChange_())}.bind(this)),this},set:function(e){if(!!e.ids+!!e.viewId+!!e.propertyId+!!e.accountId>1)throw new Error('You cannot specify more than one of the following options: "ids", "viewId", "accountId", "propertyId"');if(e.container&&this.container)throw new Error("You cannot change containers once a view selector has been rendered on the page.");var t=this.get();return(t.ids!=e.ids||t.viewId!=e.viewId||t.propertyId!=e.propertyId||t.accountId!=e.accountId)&&(t.ids=null,t.viewId=null,t.propertyId=null,t.accountId=null),gapi.analytics.Component.prototype.set.call(this,e)},setup_:function(e){function t(){s["default"].get().then(function(t){i.summaries=t,i.accounts=i.summaries.all(),e()},function(e){i.emit("error",e)})}var i=this;gapi.analytics.auth.isAuthorized()?t():gapi.analytics.auth.on("signIn",t)},updateAccounts_:function(){var e=this.get(),i=t(e),r=void 0,o=void 0,s=void 0;if(!this.summaries.all().length)return this.emit("error",new Error('This user does not have any Google Analytics accounts. You can sign up at "www.google.com/analytics".'));if(i)switch(i.prop){case"viewId":r=this.summaries.getProfile(i.value),o=this.summaries.getAccountByProfileId(i.value),s=this.summaries.getWebPropertyByProfileId(i.value);break;case"propertyId":s=this.summaries.getWebProperty(i.value),o=this.summaries.getAccountByWebPropertyId(i.value),r=s&&s.views&&s.views[0];break;case"accountId":o=this.summaries.getAccount(i.value),s=o&&o.properties&&o.properties[0],r=s&&s.views&&s.views[0]}else o=this.accounts[0],s=o&&o.properties&&o.properties[0],r=s&&s.views&&s.views[0];o||s||r?(o!=this.account||s!=this.property||r!=this.view)&&(this.changed_={account:o&&o!=this.account,property:s&&s!=this.property,view:r&&r!=this.view},this.account=o,this.properties=o.properties,this.property=s,this.views=s&&s.views,this.view=r,this.ids=r&&"ga:"+r.id):this.emit("error",new Error("This user does not have access to "+i.prop.slice(0,-2)+" : "+i.value))},render_:function(){var t=this.get();this.container="string"==typeof t.container?document.getElementById(t.container):t.container,this.container.innerHTML=t.template||this.template;var i=this.container.querySelectorAll("select"),r=this.accounts,o=this.properties||[{name:"(Empty)",id:""}],s=this.views||[{name:"(Empty)",id:""}];e(i[0],r,this.account.id),e(i[1],o,this.property&&this.property.id),e(i[2],s,this.view&&this.view.id),i[0].onchange=this.onUserSelect_.bind(this,i[0],"accountId"),i[1].onchange=this.onUserSelect_.bind(this,i[1],"propertyId"),i[2].onchange=this.onUserSelect_.bind(this,i[2],"viewId")},onChange_:function(){var e={account:this.account,property:this.property,view:this.view,ids:this.view&&"ga:"+this.view.id};this.changed_&&(this.changed_.account&&this.emit("accountChange",e),this.changed_.property&&this.emit("propertyChange",e),this.changed_.view&&(this.emit("viewChange",e),this.emit("idsChange",e),this.emit("change",e.ids))),this.changed_=null},onUserSelect_:function(e,t){var i={};i[t]=e.value,this.set(i),this.execute()},template:'<div class="ViewSelector2">  <div class="ViewSelector2-item">    <label>Account</label>    <select class="FormField"></select>  </div>  <div class="ViewSelector2-item">    <label>Property</label>    <select class="FormField"></select>  </div>  <div class="ViewSelector2-item">    <label>View</label>    <select class="FormField"></select>  </div></div>'})})},function(e,t,i){function r(){var e=gapi.client.request({path:n}).then(function(e){return e});return new e.constructor(function(t,i){var r=[];e.then(function o(e){var c=e.result;c.items?r=r.concat(c.items):i(new Error("You do not have any Google Analytics accounts. Go to http://google.com/analytics to sign up.")),c.startIndex+c.itemsPerPage<=c.totalResults?gapi.client.request({path:n,params:{"start-index":c.startIndex+c.itemsPerPage}}).then(o):t(new s(r))}).then(null,i)})}var o,s=i(2),n="/analytics/v3/management/accountSummaries";e.exports={get:function(e){return e&&(o=null),o||(o=r())}}},function(e,t){function i(e){this.accounts_=e,this.webProperties_=[],this.profiles_=[],this.accountsById_={},this.webPropertiesById_=this.propertiesById_={},this.profilesById_=this.viewsById_={};for(var t,i=0;t=this.accounts_[i];i++)if(this.accountsById_[t.id]={self:t},t.webProperties){r(t,"webProperties","properties");for(var o,s=0;o=t.webProperties[s];s++)if(this.webProperties_.push(o),this.webPropertiesById_[o.id]={self:o,parent:t},o.profiles){r(o,"profiles","views");for(var n,c=0;n=o.profiles[c];c++)this.profiles_.push(n),this.profilesById_[n.id]={self:n,parent:o,grandParent:t}}}}function r(e,t,i){Object.defineProperty?Object.defineProperty(e,i,{get:function(){return e[t]}}):e[i]=e[t]}i.prototype.all=function(){return this.accounts_},r(i.prototype,"all","allAccounts"),i.prototype.allWebProperties=function(){return this.webProperties_},r(i.prototype,"allWebProperties","allProperties"),i.prototype.allProfiles=function(){return this.profiles_},r(i.prototype,"allProfiles","allViews"),i.prototype.get=function(e){if(!!e.accountId+!!e.webPropertyId+!!e.propertyId+!!e.profileId+!!e.viewId>1)throw new Error('get() only accepts an object with a single property: either "accountId", "webPropertyId", "propertyId", "profileId" or "viewId"');return this.getProfile(e.profileId||e.viewId)||this.getWebProperty(e.webPropertyId||e.propertyId)||this.getAccount(e.accountId)},i.prototype.getAccount=function(e){return this.accountsById_[e]&&this.accountsById_[e].self},i.prototype.getWebProperty=function(e){return this.webPropertiesById_[e]&&this.webPropertiesById_[e].self},r(i.prototype,"getWebProperty","getProperty"),i.prototype.getProfile=function(e){return this.profilesById_[e]&&this.profilesById_[e].self},r(i.prototype,"getProfile","getView"),i.prototype.getAccountByProfileId=function(e){return this.profilesById_[e]&&this.profilesById_[e].grandParent},r(i.prototype,"getAccountByProfileId","getAccountByViewId"),i.prototype.getWebPropertyByProfileId=function(e){return this.profilesById_[e]&&this.profilesById_[e].parent},r(i.prototype,"getWebPropertyByProfileId","getPropertyByViewId"),i.prototype.getAccountByWebPropertyId=function(e){return this.webPropertiesById_[e]&&this.webPropertiesById_[e].parent},r(i.prototype,"getAccountByWebPropertyId","getAccountByPropertyId"),e.exports=i}]);
            // DateRange Selector JS
            !function(t){function e(n){if(a[n])return a[n].exports;var i=a[n]={exports:{},id:n,loaded:!1};return t[n].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var a={};return e.m=t,e.c=a,e.p="",e(0)}([function(t,e){"use strict";gapi.analytics.ready(function(){function t(t){if(n.test(t))return t;var i=a.exec(t);if(i)return e(+i[1]);if("today"==t)return e(0);if("yesterday"==t)return e(1);throw new Error("Cannot convert date "+t)}function e(t){var e=new Date;e.setDate(e.getDate()-t);var a=String(e.getMonth()+1);a=1==a.length?"0"+a:a;var n=String(e.getDate());return n=1==n.length?"0"+n:n,e.getFullYear()+"-"+a+"-"+n}var a=/(\d+)daysAgo/,n=/\d{4}\-\d{2}\-\d{2}/;gapi.analytics.createComponent("DateRangeSelector",{execute:function(){var e=this.get();e["start-date"]=e["start-date"]||"7daysAgo",e["end-date"]=e["end-date"]||"yesterday",this.container="string"==typeof e.container?document.getElementById(e.container):e.container,e.template&&(this.template=e.template),this.container.innerHTML=this.template;var a=this.container.querySelectorAll("input");return this.startDateInput=a[0],this.startDateInput.value=t(e["start-date"]),this.endDateInput=a[1],this.endDateInput.value=t(e["end-date"]),this.setValues(),this.setMinMax(),this.container.onchange=this.onChange.bind(this),this},onChange:function(){this.setValues(),this.setMinMax(),this.emit("change",{"start-date":this["start-date"],"end-date":this["end-date"]})},setValues:function(){this["start-date"]=this.startDateInput.value,this["end-date"]=this.endDateInput.value},setMinMax:function(){this.startDateInput.max=this.endDateInput.value,this.endDateInput.min=this.startDateInput.value},template:'<div class="DateRangeSelector">  <div class="DateRangeSelector-item">    <label>Start Date</label>     <input type="date">  </div>  <div class="DateRangeSelector-item">    <label>End Date</label>     <input type="date">  </div></div>'})})}]);
            // Active Users JS
            !function(t){function i(s){if(e[s])return e[s].exports;var n=e[s]={exports:{},id:s,loaded:!1};return t[s].call(n.exports,n,n.exports,i),n.loaded=!0,n.exports}var e={};return i.m=t,i.c=e,i.p="",i(0)}([function(t,i){"use strict";gapi.analytics.ready(function(){gapi.analytics.createComponent("ActiveUsers",{initialize:function(){this.activeUsers=0,gapi.analytics.auth.once("signOut",this.handleSignOut_.bind(this))},execute:function(){this.polling_&&this.stop(),this.render_(),gapi.analytics.auth.isAuthorized()?this.pollActiveUsers_():gapi.analytics.auth.once("signIn",this.pollActiveUsers_.bind(this))},stop:function(){clearTimeout(this.timeout_),this.polling_=!1,this.emit("stop",{activeUsers:this.activeUsers})},render_:function(){var t=this.get();this.container="string"==typeof t.container?document.getElementById(t.container):t.container,this.container.innerHTML=t.template||this.template,this.container.querySelector("b").innerHTML=this.activeUsers},pollActiveUsers_:function(){var t=this.get(),i=1e3*(t.pollingInterval||5);if(isNaN(i)||5e3>i)throw new Error("Frequency must be 5 seconds or more.");this.polling_=!0,gapi.client.analytics.data.realtime.get({ids:t.ids,metrics:"rt:activeUsers"}).then(function(t){var e=t.result,s=e.totalResults?+e.rows[0][0]:0,n=this.activeUsers;this.emit("success",{activeUsers:this.activeUsers}),s!=n&&(this.activeUsers=s,this.onChange_(s-n)),1==this.polling_&&(this.timeout_=setTimeout(this.pollActiveUsers_.bind(this),i))}.bind(this))},onChange_:function(t){var i=this.container.querySelector("b");i&&(i.innerHTML=this.activeUsers),this.emit("change",{activeUsers:this.activeUsers,delta:t}),t>0?this.emit("increase",{activeUsers:this.activeUsers,delta:t}):this.emit("decrease",{activeUsers:this.activeUsers,delta:t})},handleSignOut_:function(){this.stop(),gapi.analytics.auth.once("signIn",this.handleSignIn_.bind(this))},handleSignIn_:function(){this.pollActiveUsers_(),gapi.analytics.auth.once("signOut",this.handleSignOut_.bind(this))},template:'<div class="ActiveUsers">Active Users: <b class="ActiveUsers-value"></b></div>'})})}]);
        </script>

        <script>
            // == NOTE ==
            // This code uses ES6 promises. If you want to use this code in a browser
            // that doesn't supporting promises natively, you'll have to include a polyfill.

            gapi.analytics.ready(function () {

                /**
                 * Authorize the user immediately if the user has already granted access.
                 * If no access has been created, render an authorize button inside the
                 * element with the ID "embed-api-auth-container".
                 */
                gapi.analytics.auth.authorize({
                    container: 'embed-api-auth-container',
                    clientid: '{{ $google_analytics_client_id }}'
                });


                /**
                 * Create a new ActiveUsers instance to be rendered inside of an
                 * element with the id "active-users-container" and poll for changes every
                 * five seconds.
                 */
                var activeUsers = new gapi.analytics.ext.ActiveUsers({
                    container: 'active-users-container',
                    pollingInterval: 5
                });


                /**
                 * Add CSS animation to visually show the when users come and go.
                 */
                activeUsers.once('success', function () {
                    var element = this.container.firstChild;
                    var timeout;

                    document.getElementById('embed-api-auth-container').style.display = 'none';
                    document.getElementById('analytics-dashboard').style.display = 'block';

                    this.on('change', function (data) {
                        var element = this.container.firstChild;
                        var animationClass = data.delta > 0 ? 'is-increasing' : 'is-decreasing';
                        element.className += (' ' + animationClass);

                        clearTimeout(timeout);
                        timeout = setTimeout(function () {
                            element.className =
                                    element.className.replace(/ is-(increasing|decreasing)/g, '');
                        }, 3000);
                    });
                });


                /**
                 * Create a new ViewSelector2 instance to be rendered inside of an
                 * element with the id "view-selector-container".
                 */
                var viewSelector = new gapi.analytics.ext.ViewSelector2({
                    container: 'view-selector-container',
                    propertyId: '{{ Voyager::setting("site.google_analytics_tracking_id")  }}'
                })
                        .execute();


                /**
                 * Update the activeUsers component, the Chartjs charts, and the dashboard
                 * title whenever the user changes the view.
                 */
                viewSelector.on('viewChange', function (data) {
                    var title = document.getElementById('view-name');
                    if (title) {
                        title.innerHTML = data.property.name + ' (' + data.view.name + ')';
                    }

                    // Start tracking active users for this view.
                    activeUsers.set(data).execute();

                    // Render all the of charts for this view.
                    renderWeekOverWeekChart(data.ids);
                    renderYearOverYearChart(data.ids);
                    renderTopBrowsersChart(data.ids);
                    renderTopCountriesChart(data.ids);
                });


                /**
                 * Draw the a chart.js line chart with data from the specified view that
                 * overlays session data for the current week over session data for the
                 * previous week.
                 */
                function renderWeekOverWeekChart(ids) {

                    // Adjust `now` to experiment with different days, for testing only...
                    var now = moment(); // .subtract(3, 'day');

                    var thisWeek = query({
                        'ids': ids,
                        'dimensions': 'ga:date,ga:nthDay',
                        'metrics': 'ga:users',
                        'start-date': moment(now).subtract(1, 'day').day(0).format('YYYY-MM-DD'),
                        'end-date': moment(now).format('YYYY-MM-DD')
                    });

                    var lastWeek = query({
                        'ids': ids,
                        'dimensions': 'ga:date,ga:nthDay',
                        'metrics': 'ga:users',
                        'start-date': moment(now).subtract(1, 'day').day(0).subtract(1, 'week')
                                .format('YYYY-MM-DD'),
                        'end-date': moment(now).subtract(1, 'day').day(6).subtract(1, 'week')
                                .format('YYYY-MM-DD')
                    });

                    Promise.all([thisWeek, lastWeek]).then(function (results) {

                        var data1 = results[0].rows.map(function (row) {
                            return +row[2];
                        });
                        var data2 = results[1].rows.map(function (row) {
                            return +row[2];
                        });
                        var labels = results[1].rows.map(function (row) {
                            return +row[0];
                        });

                        labels = labels.map(function (label) {
                            return moment(label, 'YYYYMMDD').format('ddd');
                        });

                        var data = {
                            labels: labels,
                            datasets: [
                                {
                                    label: '{{ __('voyager::date.last_week') }}',
                                    fillColor: 'rgba(220,220,220,0.5)',
                                    strokeColor: 'rgba(220,220,220,1)',
                                    pointColor: 'rgba(220,220,220,1)',
                                    pointStrokeColor: '#fff',
                                    data: data2
                                },
                                {
                                    label: '{{ __('voyager::date.this_week') }}',
                                    fillColor: 'rgba(151,187,205,0.5)',
                                    strokeColor: 'rgba(151,187,205,1)',
                                    pointColor: 'rgba(151,187,205,1)',
                                    pointStrokeColor: '#fff',
                                    data: data1
                                }
                            ]
                        };

                        new Chart(makeCanvas('chart-1-container')).Line(data);
                        generateLegend('legend-1-container', data.datasets);
                    });
                }


                /**
                 * Draw the a chart.js bar chart with data from the specified view that
                 * overlays session data for the current year over session data for the
                 * previous year, grouped by month.
                 */
                function renderYearOverYearChart(ids) {

                    // Adjust `now` to experiment with different days, for testing only...
                    var now = moment(); // .subtract(3, 'day');

                    var thisYear = query({
                        'ids': ids,
                        'dimensions': 'ga:month,ga:nthMonth',
                        'metrics': 'ga:users',
                        'start-date': moment(now).date(1).month(0).format('YYYY-MM-DD'),
                        'end-date': moment(now).format('YYYY-MM-DD')
                    });

                    var lastYear = query({
                        'ids': ids,
                        'dimensions': 'ga:month,ga:nthMonth',
                        'metrics': 'ga:users',
                        'start-date': moment(now).subtract(1, 'year').date(1).month(0)
                                .format('YYYY-MM-DD'),
                        'end-date': moment(now).date(1).month(0).subtract(1, 'day')
                                .format('YYYY-MM-DD')
                    });

                    Promise.all([thisYear, lastYear]).then(function (results) {
                        var data1 = results[0].rows.map(function (row) {
                            return +row[2];
                        });
                        var data2 = results[1].rows.map(function (row) {
                            return +row[2];
                        });
                        var labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

                        // Ensure the data arrays are at least as long as the labels array.
                        // Chart.js bar charts don't (yet) accept sparse datasets.
                        for (var i = 0, len = labels.length; i < len; i++) {
                            if (data1[i] === undefined) data1[i] = null;
                            if (data2[i] === undefined) data2[i] = null;
                        }

                        var data = {
                            labels: labels,
                            datasets: [
                                {
                                    label: '{{ __('voyager::date.last_year') }}',
                                    fillColor: 'rgba(220,220,220,0.5)',
                                    strokeColor: 'rgba(220,220,220,1)',
                                    data: data2
                                },
                                {
                                    label: '{{ __('voyager::date.this_year') }}',
                                    fillColor: 'rgba(151,187,205,0.5)',
                                    strokeColor: 'rgba(151,187,205,1)',
                                    data: data1
                                }
                            ]
                        };

                        new Chart(makeCanvas('chart-2-container')).Bar(data);
                        generateLegend('legend-2-container', data.datasets);
                    })
                            .catch(function (err) {
                                console.error(err.stack);
                            });
                }


                /**
                 * Draw the a chart.js doughnut chart with data from the specified view that
                 * show the top 5 browsers over the past seven days.
                 */
                function renderTopBrowsersChart(ids) {

                    query({
                        'ids': ids,
                        'dimensions': 'ga:browser',
                        'metrics': 'ga:pageviews',
                        'sort': '-ga:pageviews',
                        'max-results': 5
                    })
                            .then(function (response) {

                                var data = [];
                                var colors = ['#4D5360', '#949FB1', '#D4CCC5', '#E2EAE9', '#F7464A'];

                                response.rows.forEach(function (row, i) {
                                    data.push({value: +row[1], color: colors[i], label: row[0]});
                                });

                                new Chart(makeCanvas('chart-3-container')).Doughnut(data);
                                generateLegend('legend-3-container', data);
                            });
                }


                /**
                 * Draw the a chart.js doughnut chart with data from the specified view that
                 * compares sessions from mobile, desktop, and tablet over the past seven
                 * days.
                 */
                function renderTopCountriesChart(ids) {
                    query({
                        'ids': ids,
                        'dimensions': 'ga:country',
                        'metrics': 'ga:sessions',
                        'sort': '-ga:sessions',
                        'max-results': 5
                    })
                            .then(function (response) {

                                var data = [];
                                var colors = ['#4D5360', '#949FB1', '#D4CCC5', '#E2EAE9', '#F7464A'];

                                response.rows.forEach(function (row, i) {
                                    data.push({
                                        label: row[0],
                                        value: +row[1],
                                        color: colors[i]
                                    });
                                });

                                new Chart(makeCanvas('chart-4-container')).Doughnut(data);
                                generateLegend('legend-4-container', data);
                            });
                }


                /**
                 * Extend the Embed APIs `gapi.analytics.report.Data` component to
                 * return a promise the is fulfilled with the value returned by the API.
                 * @param {Object} params The request parameters.
                 * @return {Promise} A promise.
                 */
                function query(params) {
                    return new Promise(function (resolve, reject) {
                        var data = new gapi.analytics.report.Data({query: params});
                        data.once('success', function (response) {
                            resolve(response);
                        })
                                .once('error', function (response) {
                                    reject(response);
                                })
                                .execute();
                    });
                }


                /**
                 * Create a new canvas inside the specified element. Set it to be the width
                 * and height of its container.
                 * @param {string} id The id attribute of the element to host the canvas.
                 * @return {RenderingContext} The 2D canvas context.
                 */
                function makeCanvas(id) {
                    var container = document.getElementById(id);
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');

                    container.innerHTML = '';
                    canvas.width = container.offsetWidth;
                    canvas.height = container.offsetHeight;
                    container.appendChild(canvas);

                    return ctx;
                }


                /**
                 * Create a visual legend inside the specified element based off of a
                 * Chart.js dataset.
                 * @param {string} id The id attribute of the element to host the legend.
                 * @param {Array.<Object>} items A list of labels and colors for the legend.
                 */
                function generateLegend(id, items) {
                    var legend = document.getElementById(id);
                    legend.innerHTML = items.map(function (item) {
                        var color = item.color || item.fillColor;
                        var label = item.label;
                        return '<li><i style="background:' + color + '"></i>' + label + '</li>';
                    }).join('');
                }


                // Set some global Chart.js defaults.
                Chart.defaults.global.animationSteps = 60;
                Chart.defaults.global.animationEasing = 'easeInOutQuart';
                Chart.defaults.global.responsive = true;
                Chart.defaults.global.maintainAspectRatio = false;

                // resize to redraw charts
                window.dispatchEvent(new Event('resize'));

            });

        </script>

    @endif

@stop