@extends('layouts.app')
@push('style')    



    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    
 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.dataTables.css" />
    <link rel="stylesheet" type="text/css" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css"/> 
 

    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.3/css/fixedHeader.dataTables.min.css"> 
  
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.css"/>
    <style>
  
        
        .daterangepicker .calendar-table th, .daterangepicker .calendar-table td, .daterangepicker .ranges li,.daterangepicker .drp-selected, .daterangepicker .drp-buttons .btn {
            font-size: inherit !important;
        }
        .daterangepicker .form-control{
            font-size: 0.8em;
        }

         input#dates {
            text-align: end;
            font-size: 0.9em !important;
        
        }
        

        span#basic-addon1 {
            width: fit-content;
            min-width: 10%;
        }

        .input-group.mb-0.me-0 {
            width: 340px;
            min-width: fit-content;
        }
        input#dates {
            text-align: end;
        }




        div.dt-container div.dt-search input {
          /*  width: 440px;  Set your desired width */
            display: block;
            padding: .375rem .75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--bs-body-color);
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: var(--bs-body-bg);
            background-clip: padding-box;
            border: var(--bs-border-width) solid var(--bs-border-color);
            border-radius: var(--bs-border-radius);
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            width: 340px;
        }

        @media (min-width: 2400px) {
            
            div.dt-container div.dt-search input {
                width: 430px; /* Set your desired width */
            }
            .input-group.mb-0.me-0 {
                width: 430px;
            }
        }
    </style>

@endpush

@section('content')
 
<div class="container-fluid my-1  bg-light border shadow-lg rounded-3">
       
  
    <div class="row flex-nowrap p-2" id="2nd-row">
        @include('insights.components.leftpanel')
        <div class="col-md-10 flex-grow-1 mt-2" id="rightPanel">
             
            <div class="row px-2 pb-0   rounded-3 border shadow-lg">
                <div class="text-dark px-0">
                        <div id="info-message" class="mr-4 alert alert-danger 
                            @if (session('error')) 
                                    " >{{session('error')}}  
                            @else  
                                    d-none"> 
                            @endif  
                        </div>
                </div>
                <div id="ProductPanel" class="flex-row px-2 pb-2 pt-2 justify-content-between">                                
                    <div class="d-flex mb-0 ms-auto mt-3 flex-row-reverse py-2 d-none">
                            <div class=" ">                            
                                <div class="input-group mb-0 me-0">
                                    <span class="input-group-text" id="basic-addon1">  <i class="fa fa-calendar"></i> </span> 
                                    <input class="form-control  px-2 py-1 me-0" type="text"  name="dates" id="dates"  aria-describedby="basic-addon1">
                                </div>
                        
                                    
                             </div>                                                
                    </div><!-- filter section -->
 
                    
                   <div id="dynamicContent">
                        @include('insights.facebook.pages-list')
                    </div>

                     
            
                    <div class="card-footer bg-transparent">
                        <input type="hidden" name="afterID" id="afterID" value="" />
                        <input type="hidden" name="beforeID" id="beforeID" value="" />
                        <small class="px-4">
                            
                        </small>
                    </div>
                        
                </div>
            </div>
    </div>
</div> 
 
@include('components.modal-delete-confirm')

@push('scripts')

@include('includes.datatablesjs')

<script type="text/javascript">
$(document).ready(function () {

    /** ------------------------------
     * 1️⃣  Initialize on first load
     * ------------------------------ */
    initDateRangePicker();
    initPagesTable();

    /** ------------------------------
     * 2️⃣  Bind sidebar navigation
     * ------------------------------ */
    $('#insigthsPages').on('click', function () {
        loadContent('pages', initPagesTable);
    });

    $('#insightsPosts').on('click', function () {
        loadContent('posts', initPostsTable);
    });

    /** ------------------------------
     * 3️⃣  Style Datatables search input
     * ------------------------------ */
    $('[type=search]')
        .attr("placeholder", "{{ __('applabels.datatable Search') }}")
        .removeClass('form-control-sm')
        .addClass('input w-60');
});


/** ------------------------------
 * 🔁 Load partials dynamically
 * ------------------------------ */

function loadContent(type, callback = null, pageId = null, pageName = '', igApiPageId = null, pageTye = 'facebook') {
    $('#dynamicContent').html(`
        <div class="text-center p-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading ${type}...</p>
        </div>
    `);

    let url = '';

    switch (type) {
        case 'pages':
            url = `{{ route('insights.load', 'pages') }}`;
            break;
        case 'posts':
            url = `{{ route('insights.load', 'posts') }}`;
            break;
        case 'dashboard':
            // ✅ Correct way to pass pageId dynamically
            url = `{{ route('insights.load', ['type' => 'dashboard', 'pageId' => 'PAGE_ID_REPLACE']) }}`.replace('PAGE_ID_REPLACE', pageId);
            break;
        default:
            $('#dynamicContent').html('<p class="text-danger p-3">Invalid content type.</p>');
            return;
    }

    $.get(url, function (response) {
        $('#dynamicContent').html(response);

        // Reinitialize shared scripts (like date range picker)
        if (typeof initDateRangePicker === 'function') initDateRangePicker();

        // Initialize specific components based on content type
        if (type === 'pages' && typeof initPagesTable === 'function') initPagesTable();
        if (type === 'posts' && typeof initPostsTable === 'function') initPostsTable();
        if (type === 'dashboard' && typeof initDashboardWithPlatformSwitch === 'function') {
            initDashboardWithPlatformSwitch(pageId, pageName, igApiPageId, pageTye);
        }

        if (typeof callback === 'function') callback();
    }).fail(function () {
        $('#dynamicContent').html('<p class="text-danger p-3">Failed to load content.</p>');
    });
}

/** ------------------------------
 * 📅 Initialize Date Range Picker
 * ------------------------------ */
function initDateRangePicker() {

    console.log ('initDateRangePicker called!');
    if (!$('#dates').length) return;
    console.log ($('#dates'));
    $('#dates').daterangepicker({
        ranges: {
            'Today': [moment(), moment()],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'),
                           moment().subtract(1, 'month').endOf('month')],
            'This Year': [moment().startOf('year'), moment().endOf('year')]
        },
        locale: { format: 'DD/MM/YYYY' },
        alwaysShowCalendars: true,
        startDate: moment().subtract(29, 'days'),
        endDate: moment()
    });

    // Reload DataTable when range changes
    $('#dates').on('apply.daterangepicker', function () {
        const dt = $('#pagesTable').data('tableInstance');
        if (dt) dt.ajax.reload(null, false);
    });
}


/** ------------------------------
 * 📊 Initialize Pages DataTable
 * ------------------------------ */
function initPagesTable() {
    if (!$('#pagesTable').length) return;

    // Destroy any previous instance
    if ($.fn.DataTable.isDataTable('#pagesTable')) {
        $('#pagesTable').DataTable().destroy();
    }

    const datatableDataUrl = "{{ route('facebook.pages.data') }}";
    const fetchInsightsRouteTemplate = "{{ route('facebook.fetchinsights.data', ['pageId' => 'PAGE_ID_REPLACE']) }}";
    const viewInsightsRouteTemplate = "{{ route('facebook.insights.dashboard', ['page' => 'PAGE_ID_REPLACE']) }}";

    const table = $('#pagesTable').DataTable({
        responsive: true,
        ajax: datatableDataUrl,
        pageLength: 10,
        columns: [
            { data: 'socialmedia'},
            { data: 'image', orderable: false },
            { data: 'name' },
            { data: 'api_page_id' },
            { data: 'ig_api_page_id' },
            { data: 'insight_date' },
            //{ data: 'created_at' },
            { data: 'view', orderable: false },
            //{ data: 'fetch', orderable: false },
        ],
        columnDefs: [
            {
                targets: '_all',
                className: 'text-center'
            }
        ],
        paging: false,          // ❌ disable pagination
        searching: false,       // ❌ disable search box
        info: false,            // ❌ hide “showing X of Y entries”
        lengthChange: false,    // ❌ hide “show X entries” dropdown
        ordering: false,        // ❌  keep ordering if you want
    });

    // Save reference for global access
    $('#pagesTable').data('tableInstance', table);

    /** ------------------------------
     *  🧲 Bind actions
     * ------------------------------ */
    $('#pagesTable tbody')
        .off('click', '.fetch-insights') // avoid duplicate binding
        .on('click', '.fetch-insights', async function () {
            const pageId = $(this).data('id');
            const picker = $('#dates').data('daterangepicker');
            const start = picker.startDate.format('YYYY-MM-DD');
            const end = picker.endDate.format('YYYY-MM-DD');
            const container = $('#fetch-btn-' + pageId);

            container.html(`
                <div class="spinner-border spinner-border-sm text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            `);

            const url = fetchInsightsRouteTemplate.replace('PAGE_ID_REPLACE', pageId);
            console.log(url);
            try {
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ start_date: start, end_date: end })
                });

                const data = await response.json();
                container.html('<i class="fa fa-check text-success"></i> <small>Fetched!</small>');
                table.ajax.reload(null, false);
            } catch (error) {
                console.error('Fetch error:', error);
                container.html('<i class="fa fa-times text-danger"></i> <small>Error</small>');
            }
        });

    $('#pagesTable tbody')
        .off('click', '.view-insights')
        .on('click', '.view-insights', function () {
            // Get the DataTable instance
            const table = $('#pagesTable').DataTable();
            const pageId = $(this).data('id'); // or however you get it
            const rowData = table.row($(this).closest('tr')).data();
            

            if (!rowData) {
                console.error('⚠️ Could not get DataTable row data.');
                return;
            }
            // Extract info (adjust these depending on your column names or indexes)            
            const pageName = rowData.name || rowData.page_name || rowData[1];
            const igApiPageId = rowData.ig_api_page_id || null;
            const pageType = rowData.socialmedia; 
            loadContent('dashboard', null, pageId, pageName, igApiPageId, pageType);
                    
             
            // const pageId = $(this).data('id');
            //const url = viewInsightsRouteTemplate.replace('PAGE_ID_REPLACE', pageId);
            //window.location.href = url;
        });
}



function initPostsTable() {
    // Destroy existing instance if it exists
    if ($.fn.DataTable.isDataTable('#postsTable')) {
        $('#postsTable').DataTable().destroy();
    }

    const datatableDataUrl = "{{ route('facebook.posts.data') }}";
    const fetchInsightsRouteTemplate = "{{ route('facebook.fetchpostinsights.data', ['postId' => 'POST_ID_REPLACE']) }}";
    const viewPostsInsightsRouteTemplate = "{{ route('facebook.postsinsights.dashboard', ['page' => 'PAGE_ID_REPLACE']) }}";
    const table = $('#postsTable').DataTable({
        responsive: true,
        ajax: datatableDataUrl,
        pageLength: 10,
        columns: [
            { data: 'post', orderable: false },
            { data: 'message' },
            { data: 'created_at' },
            { data: 'likes' },
            { data: 'comments' },
            { data: 'shares' },
            { data: 'insight_date' },
            { data: 'actions', orderable: false },
        ],
        order: [[2, 'desc']],
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search posts..."
        }
    });

    // Handle Fetch Insights click
    $('#postsTable tbody').on('click', '.fetch-post-insights', async function () {
        const postId = $(this).data('id');
        const picker = $('#dates').data('daterangepicker');
        const start = picker.startDate.format('YYYY-MM-DD');
        const end = picker.endDate.format('YYYY-MM-DD');
        const container = $('#fetch-post-' + postId);

        container.html('<div class="spinner-border spinner-border-sm text-light" role="status"></div>');

        const url = fetchInsightsRouteTemplate.replace('POST_ID_REPLACE', postId);
        try {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ start_date: start, end_date: end })
            });
            const data = await response.json();
            container.html('<i class="fa fa-check text-success"></i>');
            table.ajax.reload(null, false);
        } catch (error) {
            console.error('Error fetching post insights:', error);
            container.html('<i class="fa fa-times text-danger"></i>');
        }
    });

    // Handle View Post
    $('#postsTable tbody').on('click', '.view-post', function () {
        const postId = $(this).data('id');
        const url = viewPostsInsightsRouteTemplate.replace('POST_ID_REPLACE', postId);
        window.location.href = url;
    });
}

</script>
@endpush

@endsection