@extends('layouts.app')

@section('title', 'Analytics')

@section('content')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<style>
    /* Container principal calendar */
    .daterangepicker {
        font-family: 'Inter', sans-serif;
        border: 1px solid #e5e7eb;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        padding: 0;
        margin-top: 10px;
    }
    
    /* Header Calendar */
    .daterangepicker .calendar-table th {
        color: #6b7280;
        font-weight: 600;
        font-size: 12px;
    }

    /* Meniu Lateral (Ranges) */
    .daterangepicker .ranges {
        background-color: #fff;
        border-radius: 12px 0 0 12px;
        border-right: 1px solid #f3f4f6;
        padding: 8px;
        min-width: 160px;
    }
    .daterangepicker .ranges li {
        font-size: 13px;
        color: #374151;
        padding: 10px 12px;
        border-radius: 8px;
        font-weight: 500;
    }
    .daterangepicker .ranges li:hover {
        background-color: #fff7ed; /* Orange foarte deschis */
        color: #FF6900;
    }
    .daterangepicker .ranges li.active {
        background-color: #FF6900;
        color: #fff;
    }

    /* Celule Calendar */
    .daterangepicker td.active, .daterangepicker td.active:hover {
        background-color: #FF6900;
        color: #fff;
    }
    .daterangepicker td.in-range {
        background-color: #fff7ed;
        color: #FF6900;
    }
    
    /* Butoane Jos */
    .daterangepicker .drp-buttons {
        border-top: 1px solid #f3f4f6;
        padding: 12px;
    }
    .daterangepicker .applyBtn {
        background-color: #FF6900;
        border-color: #FF6900;
        font-weight: bold;
    }
    .daterangepicker .applyBtn:hover {
        background-color: #e65e00;
    }
    
    /* Custom Scrollbar pentru Dropdown Pagini */
    .custom-scrollbar::-webkit-scrollbar { width: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #999; }
</style>

<div class="flex h-full -m-8"> 
    
    <div class="w-64 bg-white border-r border-gray-200 flex-shrink-0 flex flex-col pt-6">
        <div class="px-6 mb-6">
            <h3 class="text-[#FF6900] font-bold text-lg uppercase tracking-wider text-xs mb-1">Analytics Suite</h3>
            <div class="h-1 w-10 bg-gray-100 rounded"></div>
        </div>
        
        <nav class="space-y-1 px-3">
            <a href="?tab=overview&page_id={{ $selectedPage->id }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition {{ $activeTab == 'overview' ? 'bg-orange-50 text-[#FF6900]' : 'text-gray-600 hover:bg-gray-50' }}">
                <i class="fas fa-chart-pie w-5"></i> Analytics Overview
            </a>
            <a href="?tab=posts&page_id={{ $selectedPage->id }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition {{ $activeTab == 'posts' ? 'bg-orange-50 text-[#FF6900]' : 'text-gray-600 hover:bg-gray-50' }}">
                <i class="fas fa-th-list w-5"></i> Post Overview
            </a>
            <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-400 cursor-not-allowed">
                <i class="fas fa-users w-5"></i> Competitor Analysis <span class="text-[10px] bg-gray-100 px-1 rounded">PRO</span>
            </a>
        </nav>
    </div>

    <div class="flex-1 flex flex-col h-full overflow-hidden bg-[#F9FAFB]">
        
        <div class="bg-white border-b border-gray-200 px-8 py-4 flex justify-between items-center shadow-sm z-10">
            
            <div x-data="{ 
                open: false, 
                search: '', 
                items: {{ $allPages->map(function($p) { 
                    return [
                        'id' => $p->id, 
                        'name' => $p->name, 
                        'platform' => $p->platform, 
                        'img' => $p->profile_picture ?? 'https://ui-avatars.com/api/?name='.urlencode($p->name)
                    ]; 
                }) }}
            }" @click.away="open = false" class="relative w-72">
                
                <button @click="open = !open" class="flex items-center gap-3 bg-white hover:bg-gray-50 border border-gray-300 px-4 py-2.5 rounded-lg transition w-full shadow-sm">
                    <img src="{{ $selectedPage->profile_picture ?? 'https://ui-avatars.com/api/?name='.$selectedPage->name }}" class="w-8 h-8 rounded-full border border-gray-200 object-cover">
                    <div class="text-left flex-1 min-w-0">
                        <div class="text-sm font-bold text-gray-800 truncate">{{ $selectedPage->name }}</div>
                        <div class="text-[10px] text-gray-500 uppercase font-bold flex items-center gap-1">
                            @if(($selectedPage->platform ?? 'facebook') == 'instagram') 
                                <i class="fab fa-instagram text-pink-500"></i> Instagram 
                            @else 
                                <i class="fab fa-facebook text-blue-600"></i> Facebook 
                            @endif
                        </div>
                    </div>
                    <i class="fas fa-chevron-down text-gray-400 text-xs transition-transform duration-200" :class="{'rotate-180': open}"></i>
                </button>

                <div x-show="open" class="absolute top-full left-0 mt-2 w-full bg-white rounded-xl shadow-2xl border border-gray-100 p-2 z-50 origin-top-left" style="display: none;">
                    <div class="px-2 pb-2 border-b border-gray-50 mb-2">
                        <div class="relative">
                            <i class="fas fa-search absolute left-3 top-3 text-gray-400 text-xs"></i>
                            <input x-model="search" @click.stop type="text" placeholder="Caută pagină..." class="w-full pl-8 pr-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-[#FF6900] focus:ring-1 focus:ring-[#FF6900]">
                        </div>
                    </div>
                    <div class="max-h-60 overflow-y-auto space-y-1 custom-scrollbar">
                        <template x-for="item in items.filter(i => i.name.toLowerCase().includes(search.toLowerCase()))" :key="item.id">
                            <a :href="'?tab={{ $activeTab }}&page_id=' + item.id + '&start_date={{ $startDate }}&end_date={{ $endDate }}'" class="flex items-center gap-3 px-3 py-2 hover:bg-orange-50 rounded-lg transition cursor-pointer group">
                                <img :src="item.img" class="w-8 h-8 rounded-full object-cover border border-gray-100">
                                <div class="flex-1 min-w-0">
                                    <div class="text-sm font-bold text-gray-700 group-hover:text-[#FF6900]" x-text="item.name"></div>
                                    <div class="text-[10px] text-gray-400 uppercase" x-text="item.platform"></div>
                                </div>
                                <div x-show="item.id == {{ $selectedPage->id }}"><i class="fas fa-check text-green-500 text-xs"></i></div>
                            </a>
                        </template>
                        <div x-show="items.filter(i => i.name.toLowerCase().includes(search.toLowerCase())).length === 0" class="text-center py-4 text-xs text-gray-400">Nu am găsit pagini.</div>
                    </div>
                </div>
            </div>

            <div class="flex items-center gap-3">
                <div id="reportrange" class="flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium text-gray-600 hover:border-[#FF6900] transition cursor-pointer shadow-sm">
                    <i class="far fa-calendar-alt text-[#FF6900]"></i>&nbsp;
                    <span id="reportrange-span"></span> 
                    <i class="fas fa-chevron-down text-xs ml-2 text-gray-400"></i>
                </div>
                
                <button onclick="location.reload()" class="bg-[#FF6900] text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-[#e65e00] shadow-sm flex items-center gap-2">
                    <i class="fas fa-sync-alt"></i>
                </button>
            </div>
        </div>

        <div class="flex-1 overflow-y-auto p-8">
            @if($activeTab == 'overview')
                @include('dashboard.analytics.tabs.overview')
            @elseif($activeTab == 'posts')
                @include('dashboard.analytics.tabs.posts')
            @endif
        </div>
    </div>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script type="text/javascript">
$(function() {
    // Preluăm datele din PHP (AM CORECTAT VARIABILELE AICI)
    var start = moment("{{ $startDate }}");
    var end = moment("{{ $endDate }}");

    // Funcție callback (când se alege o dată)
    function cb(start, end) {
        // Actualizăm textul din buton
        $('#reportrange-span').html(start.format('D MMM, YYYY') + ' - ' + end.format('D MMM, YYYY'));
        
        // Dacă data s-a schimbat față de ce avem în URL, facem redirect
        // Verificăm doar dacă pagina s-a încărcat deja
        if (window.location.search.indexOf('start_date') === -1 || 
            start.format('YYYY-MM-DD') !== "{{ $startDate }}" || 
            end.format('YYYY-MM-DD') !== "{{ $endDate }}") {
            
            // Redirect cu parametrii noi (AM CORECTAT PARAMETRII AICI)
            window.location.href = `?tab={{ $activeTab }}&page_id={{ $selectedPage->id }}&start_date=${start.format('YYYY-MM-DD')}&end_date=${end.format('YYYY-MM-DD')}`;
        }
    }

    // Initializare DateRangePicker
    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        opens: 'left',
        showDropdowns: true, 
        ranges: {
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 14 Days': [moment().subtract(13, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'Last 6 Months': [moment().subtract(6, 'month'), moment()],
           'Last One Year': [moment().subtract(1, 'year'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        locale: {
            format: 'YYYY-MM-DD',
            applyLabel: "Set",
            cancelLabel: "Clear",
            customRangeLabel: "Custom Range"
        }
    }, cb);

    // Setăm textul inițial
    $('#reportrange-span').html(start.format('D MMM, YYYY') + ' - ' + end.format('D MMM, YYYY'));
});
</script>
@endsection