{% extends 'base.html.twig' %}

{% block title %}Network – Insight Center{% endblock %}

{% block body %}
<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a href="{{ path('homepage') }}">Accueil</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <span>Network</span>
        </li>
    </ul>
</div>

<h1 class="page-title"></h1>

<div class="row">
    <div class="col-md-12">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-filter font-dark"></i>
                    <span class="caption-subject font-dark sbold uppercase">Insight Center</span>
                </div>
            </div>
            <div class="portlet-body">
                <div class="ka-toolbar">
                    <div class="toolbar-left" style="flex:1 1 320px; min-width:280px;">
                        <div class="input-icon" style="width:100%;">
                            <i class="fa fa-building font-red"></i>
                            <select id="network" name="network" class="form-control">
                                <option value="">Tous les garages</option>
                                {% for magasin in networkMagasins %}
                                    <option value="{{ magasin.id }}">
                                        {{ magasin.titre }}{% if magasin.networkMaster %} (Master){% endif %}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="toolbar-right" style="flex:1 1 320px; min-width:280px;">
                        <div class="input-icon" style="width:100%;">
                            <i class="fa fa-calendar font-red"></i>
                            <input type="text" class="form-control" name="date_range" id="date_range" value="{{ 'now'|date('d/m/Y') }} au {{ 'now'|date('d/m/Y') }}" autocomplete="off">
                            <input type="hidden" id="start" name="start" value="{{ 'now'|date('Y-m-d') }}">
                            <input type="hidden" id="end" name="end" value="{{ 'now'|date('Y-m-d') }}">
                        </div>
                    </div>
                </div>

                <div class="ka-filter-quick" aria-label="Périodes rapides" style="margin-top:10px;">
                    <a href="javascript:;" class="btn btn-default btn-xs dates" data-value="{{ 'now'|date('d/m/Y') }} au {{ 'now'|date('d/m/Y') }}">Aujourd'hui</a>
                    <a href="javascript:;" class="btn btn-default btn-xs dates" data-value="{{ 'now'|date_modify('-6 day')|date('d/m/Y') }} au {{ 'now'|date('d/m/Y') }}">7 jours</a>
                    <a href="javascript:;" class="btn btn-default btn-xs dates" data-value="{{ 'now'|date('01/m/Y') }} au {{ 'now'|date('t/m/Y') }}">Ce mois</a>
                    <a href="javascript:;" class="btn btn-default btn-xs dates hidden-xs" data-value="{{ 'now'|date_modify('first day of last month')|date('d/m/Y') }} au {{ 'now'|date_modify('last day of last month')|date('d/m/Y') }}">Mois dernier</a>
                    <a href="javascript:;" class="btn btn-default btn-xs dates" data-value="{{ 'now'|date_modify('first day of january')|date('d/m/Y') }} au {{ 'now'|date_modify('last day of december')|date('d/m/Y') }}">Cette année</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-4">
        <div class="dashboard-stat blue" id="achats-stat" style="cursor: default;">
            <div class="visual"><i class="fa fa-shopping-cart"></i></div>
            <div class="details">
                <div class="number" id="metric-total-purchases">0</div>
                <div class="desc">Montant total des achats</div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="dashboard-stat green" id="network-purchases-stat" style="cursor: default;">
            <div class="visual"><i class="fa fa-share-alt"></i></div>
            <div class="details">
                <div class="number" id="metric-network-purchases">0</div>
                <div class="desc">Montant d'achats {{magasin.network|capitalize}}</div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="dashboard-stat yellow">
            <div class="visual"><i class="fa fa-pie-chart"></i></div>
            <div class="details">
                <div class="number" id="metric-purchase-ratio">0%</div>
                <div class="desc">Ratio achats {{magasin.network|capitalize}} vs autre</div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-4">
        <div class="dashboard-stat purple">
            <div class="visual"><i class="fa fa-users"></i></div>
            <div class="details">
                <div class="number" id="metric-clients-count">0</div>
                <div class="desc">Nombre de clients</div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="dashboard-stat red" id="vehicules-stat" style="cursor: default;">
            <div class="visual"><i class="fa fa-car"></i></div>
            <div class="details">
                <div class="number" id="metric-vehicules-count">0</div>
                <div class="desc">Nombre de véhicules</div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="dashboard-stat default">
            <div class="visual"><i class="fa fa-wrench"></i></div>
            <div class="details">
                <div class="number" id="metric-reparations-count">0</div>
                <div class="desc">Nombre de réparations</div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
<script type="text/javascript">
$(document).ready(function() {
    // Initialize with saved range from localStorage if available, else fall back to hidden fields
    var savedInsightsRange = null;
    try { savedInsightsRange = JSON.parse(localStorage.getItem('ka_daterange_insights') || 'null'); } catch(e) { savedInsightsRange = null; }
    
    // Restore saved network filter
    var savedInsightsFilters = null;
    try { savedInsightsFilters = JSON.parse(localStorage.getItem('ka_filters_insights') || 'null'); } catch(e) { savedInsightsFilters = null; }
    if (savedInsightsFilters && typeof savedInsightsFilters.network === 'string') {
        $('#network').val(savedInsightsFilters.network);
    }
    
    var initialStart = savedInsightsRange && savedInsightsRange.start ? moment(savedInsightsRange.start, 'YYYY-MM-DD') : moment($('#start').val(), 'YYYY-MM-DD');
    var initialEnd = savedInsightsRange && savedInsightsRange.end ? moment(savedInsightsRange.end, 'YYYY-MM-DD') : moment($('#end').val(), 'YYYY-MM-DD');
    if (initialStart.isValid()) { $('#start').val(initialStart.format('YYYY-MM-DD')); }
    if (initialEnd.isValid()) { $('#end').val(initialEnd.format('YYYY-MM-DD')); }
    
    // Initialize date range picker with configuration matching devis.js
    $('#date_range').daterangepicker({
        opens: 'left',
        startDate: initialStart.isValid() ? initialStart : moment(),
        endDate: initialEnd.isValid() ? initialEnd : moment(),
        ranges: {
            "Aujourd'hui": [moment(), moment()],
            "Hier": [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            "7 Jours": [moment().subtract(6, 'days'), moment()],
            "Ce mois": [moment().startOf('month'), moment().endOf('month')],
            "Le mois dernier": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            "Cette année": [moment().startOf('year'), moment().endOf('year')],
            "L'année dernière": [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
        },
        autoUpdateInput: true,
        locale: {
            format: "DD/MM/YYYY",
            separator: " au ",
            applyLabel: "Appliquer",
            cancelLabel: "Annuler",
            fromLabel: "Depuis",
            toLabel: "Jusqu'au",
            customRangeLabel: "Choisir",
            daysOfWeek: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
            monthNames: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
            firstDay: 1
        }
    }, function(start, end, label) {
        $('#start').val(start.format('YYYY-MM-DD'));
        $('#end').val(end.format('YYYY-MM-DD'));
        // Persist date range selection
        try { localStorage.setItem('ka_daterange_insights', JSON.stringify({ start: start.format('YYYY-MM-DD'), end: end.format('YYYY-MM-DD') })); } catch(e) {}
        loadMetrics();
    });

    // Quick date filter buttons
    $('.dates').on('click', function(e) {
        e.preventDefault();
        var dateValue = $(this).data('value');
        $('#date_range').val(dateValue);
        
        // Parse and set hidden fields
        var parts = dateValue.split(' au ');
        if (parts.length === 2) {
            var startParts = parts[0].split('/');
            var endParts = parts[1].split('/');
            if (startParts.length === 3 && endParts.length === 3) {
                var start = moment(startParts[2] + '-' + startParts[1] + '-' + startParts[0], 'YYYY-MM-DD');
                var end = moment(endParts[2] + '-' + endParts[1] + '-' + endParts[0], 'YYYY-MM-DD');
                $('#start').val(start.format('YYYY-MM-DD'));
                $('#end').val(end.format('YYYY-MM-DD'));
                
                // Sync the daterangepicker instance
                var drp = $('#date_range').data('daterangepicker');
                if (drp && start.isValid() && end.isValid()) {
                    drp.setStartDate(start);
                    drp.setEndDate(end);
                }
                
                // Persist date range selection
                try { localStorage.setItem('ka_daterange_insights', JSON.stringify({ start: start.format('YYYY-MM-DD'), end: end.format('YYYY-MM-DD') })); } catch(e) {}
            }
        }
        loadMetrics();
    });

    // Network dropdown change
    $('#network').on('change', function() {
        // Persist network selection
        try { localStorage.setItem('ka_filters_insights', JSON.stringify({ network: $('#network').val() })); } catch(e) {}
        loadMetrics();
        updateVehiculesClickability();
        updateAchatsClickability();
    });

    function updateVehiculesClickability() {
        var selectedMagasin = $('#network').val();
        var $vehiculesStat = $('#vehicules-stat');
        
        if (selectedMagasin) {
            $vehiculesStat.css('cursor', 'pointer').addClass('clickable-stat');
            $vehiculesStat.off('click').on('click', function() {
                window.location.href = '{{ path('network_vehicules', {'magasinId': '__MAGASIN_ID__'}) }}'.replace('__MAGASIN_ID__', selectedMagasin);
            });
        } else {
            $vehiculesStat.css('cursor', 'default').removeClass('clickable-stat');
            $vehiculesStat.off('click');
        }
    }

    function updateAchatsClickability() {
        var selectedMagasin = $('#network').val();
        var totalPurchases = parseFloat($('#metric-total-purchases').text().replace(/\s/g, '').replace(',', '.')) || 0;
        var networkPurchases = parseFloat($('#metric-network-purchases').text().replace(/\s/g, '').replace(',', '.')) || 0;
        var $achatsStat = $('#achats-stat');
        var $networkPurchasesStat = $('#network-purchases-stat');
        
        if (selectedMagasin && totalPurchases > 0) {
            $achatsStat.css('cursor', 'pointer').addClass('clickable-stat');
            $achatsStat.off('click').on('click', function() {
                window.location.href = '{{ path('network_achats', {'magasinId': '__MAGASIN_ID__'}) }}'.replace('__MAGASIN_ID__', selectedMagasin);
            });
        } else {
            $achatsStat.css('cursor', 'default').removeClass('clickable-stat');
            $achatsStat.off('click');
        }
        
        if (selectedMagasin && networkPurchases > 0) {
            $networkPurchasesStat.css('cursor', 'pointer').addClass('clickable-stat');
            $networkPurchasesStat.off('click').on('click', function() {
                window.location.href = '{{ path('network_achats', {'magasinId': '__MAGASIN_ID__'}) }}'.replace('__MAGASIN_ID__', selectedMagasin);
            });
        } else {
            $networkPurchasesStat.css('cursor', 'default').removeClass('clickable-stat');
            $networkPurchasesStat.off('click');
        }
    }

    function loadMetrics() {
        var params = {
            start: $('#start').val(),
            end: $('#end').val(),
            network: $('#network').val()
        };

        $.ajax({
            url: '{{ path('network_metrics') }}',
            type: 'GET',
            data: params,
            dataType: 'json',
            beforeSend: function() {
                // Show loading state
                $('.dashboard-stat .number').html('<i class="fa fa-spinner fa-spin"></i>');
            },
            success: function(data) {
                // Update metrics
                $('#metric-total-purchases').text((data.totalPurchases || 0).toLocaleString('fr-FR', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                $('#metric-network-purchases').text((data.networkPurchases || 0).toLocaleString('fr-FR', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                $('#metric-purchase-ratio').text((data.purchaseRatio || 0) + '%');
                $('#metric-clients-count').text(data.clientsCount || 0);
                $('#metric-vehicules-count').text(data.vehiculesCount || 0);
                $('#metric-reparations-count').text(data.reparationsCount || 0);
                
                // Update clickability after metrics are loaded
                updateAchatsClickability();
            },
            error: function() {
                // Show error state
                $('.dashboard-stat .number').text('–');
            }
        });
    }

    // Load initial metrics
    loadMetrics();
    updateVehiculesClickability();
    updateAchatsClickability();
});
</script>
<style>
.clickable-stat:hover {
    opacity: 0.85;
    transition: opacity 0.2s;
}
</style>
{% endblock %}