@php
    use Carbon\Carbon;
    $date = Carbon::now();
@endphp

{{-- <div class="col-12">
    <div class="card shadow-lg">
        <div class="card-body">
            <h5 class="card-title fw-bold d-flex justify-content-between">
                <span>Leads captados en el mes</span>
                <div class="input-group w-50">
                    <div class="input-group w-100 mb-3">
                        <!-- Selectores de mes y año -->
                        <select class="form-select" id="yearLeadsSelector" onchange="refreshLeadChart()">
                            @for ($i = Carbon::now()->year; $i >= Carbon::now()->year - 5; $i--)
                                <option value="{{ $i }}">{{ $i }}</option>
                            @endfor
                        </select>
                        <select class="form-select" id="monthLeadsSelector" onchange="refreshLeadChart()">
                            @for ($i = 1; $i <= 12; $i++)
                                <option value="{{ $i }}" {{ $i == now()->month ? 'selected' : '' }}>
                                    {{ Carbon::create()->month($i)->locale('es')->monthName }}
                                </option>
                            @endfor
                        </select>
                    </div>
                </div>
            </h5>
            <div id="leadsChart">
                {!! $leadsChart->container() !!}
            </div>
        </div>
    </div>
</div> --}}

<div class="col-12"> {{-- Nuevos Leads por Mes --}}
    <div class="card shadow-lg">
        <div class="card-body">
            <h5 class="card-title fw-bold d-flex justify-content-between">
                <span>Nuevos Leads por Mes</span>
                <form id="filterForm">
                    <select class="form-select text-center" id="yearSelector" name="year" style="width: 10vw; display: inline-block;">
                        @for ($i = Carbon::now()->year; $i >= Carbon::now()->year - 5; $i--)
                            <option value="{{ $i }}" {{ $i == $actualYear ? 'selected' : '' }}>{{ $i }}</option>
                        @endfor
                    </select>
                    <select class="form-select text-center" id="monthSelector" name="month" style="width: 10vw; display: inline-block;">
                        @for ($i = 1; $i <= 12; $i++)
                            <option value="{{ $i }}" {{ $i == $actualMonth ? 'selected' : '' }}>
                                {{ Carbon::create()->month($i)->locale('es')->monthName }}
                            </option>
                        @endfor
                    </select>
                </form>
            </h5>
            <div id="newLeadsChart" style="width: 100%; height: 400px;"></div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<script>
    let chart = null;

    function initChart() {
        const chartDom = document.getElementById('newLeadsChart');
        chart = echarts.init(chartDom);
        
        const colors = ['#039BE5', '#1A237E', '#4CAF50'];
        
        // Initial chart options
        const option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Leads']
            },
            xAxis: {
                type: 'category',
                data: ['Domésticos', 'Comerciales', 'Industrial/Planta']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: 'Leads',
                type: 'bar',
                data: [],
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return colors[params.dataIndex];
                        }
                    }
                }
            }]
        };

        chart.setOption(option);
    }

    function updateChart(year, month) {
        $.ajax({
            url: '{{ route("crm.chart.newLeadsByMonth") }}',
            type: 'GET',
            data: { year: year, month: month },
            success: function(data) {
                if (chart) {
                    chart.setOption(data);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error al actualizar la gráfica:', error);
            }
        });
    }

    $(document).ready(function() {
        initChart();
        
        // Initial data load
        const initialYear = $('#yearSelector').val();
        const initialMonth = $('#monthSelector').val();
        updateChart(initialYear, initialMonth);

        // Update on select change
        $('#yearSelector, #monthSelector').change(function() {
            const year = $('#yearSelector').val();
            const month = $('#monthSelector').val();
            updateChart(year, month);
        });
    });

    // Handle window resize
    $(window).resize(function() {
        if (chart) {
            chart.resize();
        }
    });
</script>