@extends('layouts.dashboardnew')

@section('content')


{{-- ===================== HEADER + BOTÓN FILTRO ===================== --}}
<div class="card border-0 shadow-sm rounded-4 mb-3 overflow-hidden">
    <div class="card-body p-4 bg-primary bg-gradient text-white position-relative">
        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3">
                <div class="bg-white bg-opacity-25 rounded-3 d-inline-flex align-items-center justify-content-center border border-light border-opacity-25"
                     style="width:52px;height:52px;">
                    <i class="fa-solid fa-earth-americas fs-4"></i>
                </div>
                <div>
                    <h4 class="fw-bold mb-1 text-white">Reporte por país</h4>
                    <p class="mb-0 small text-white text-opacity-75">
                        Distribución de ventas por territorio, con gráficos comparativos y desglose tabular.
                    </p>
                </div>
            </div>

            <div class="d-flex flex-column flex-sm-row gap-2 align-self-start align-self-md-center">
                <span class="badge bg-white text-primary rounded-pill fw-semibold px-3 py-2 align-self-start">
                    <i class="fa-solid fa-flag me-1"></i> {{ count($graficas) }} países
                </span>

                <button class="btn bg-white fw-semibold rounded-pill px-3 py-1 text-primary shadow-sm align-self-start"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#filtroIdPanel"
                        aria-expanded="false"
                        aria-controls="filtroIdPanel">
                    <i class="fa-solid fa-filter me-1"></i> Filtro
                    <i class="fa-solid fa-chevron-down ms-1 small"></i>
                </button>
            </div>
        </div>
    </div>
</div>


{{-- ===================== PANEL COLAPSABLE DE FILTRO ===================== --}}
<div class="collapse mb-3" id="filtroIdPanel">
    @include('usuario.componentes.filtrounificado', ['ruta' => 'reporte-paises', 'tipo1' => '1'])
</div>


{{-- ===================== GRÁFICOS ===================== --}}
<div class="row g-3 mb-3">

    {{-- Gráfico de torta --}}
    <div class="col-12 col-lg-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
                    <div class="bg-primary-subtle text-primary-emphasis rounded-3 d-inline-flex align-items-center justify-content-center"
                         style="width:36px;height:36px;">
                        <i class="fa-solid fa-chart-pie"></i>
                    </div>
                    <h6 class="fw-bold mb-0 text-dark">Distribución por país</h6>
                </div>
                <div id="pieChart"></div>
            </div>
        </div>
    </div>

    {{-- Gráfico de barras --}}
    <div class="col-12 col-lg-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
                    <div class="bg-primary-subtle text-primary-emphasis rounded-3 d-inline-flex align-items-center justify-content-center"
                         style="width:36px;height:36px;">
                        <i class="fa-solid fa-chart-column"></i>
                    </div>
                    <h6 class="fw-bold mb-0 text-dark">Comparativo de ventas</h6>
                </div>
                <div id="areaChart"></div>
            </div>
        </div>
    </div>

</div>


{{-- ===================== TABLA ===================== --}}
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-3 p-md-4">

                <div class="d-flex align-items-center gap-2 mb-3">
                    <div class="bg-primary-subtle text-primary-emphasis rounded-3 d-inline-flex align-items-center justify-content-center"
                         style="width:36px;height:36px;">
                        <i class="fa-solid fa-list-ol"></i>
                    </div>
                    <h5 class="fw-bold mb-0 text-dark">Desglose por país</h5>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle zero-configuration mb-0">
                        <thead>
                            <tr>
                                <th class="text-uppercase small fw-semibold text-secondary">País</th>
                                <th class="text-center text-uppercase small fw-semibold text-secondary">Cantidad de ventas</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($graficas as $graf)
                            <tr>
                                {{-- País --}}
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="bg-primary-subtle text-primary-emphasis rounded-3 d-inline-flex align-items-center justify-content-center flex-shrink-0"
                                             style="width:32px;height:32px;">
                                            <i class="fa-solid fa-flag"></i>
                                        </div>
                                        <span class="fw-semibold">{{ $graf->paises->nombre }}</span>
                                    </div>
                                </td>

                                {{-- Cantidad --}}
                                <td class="text-center">
                                    <span class="badge bg-success-subtle text-success-emphasis rounded-pill px-3 py-2 fw-bold font-monospace">
                                        <i class="fa-solid fa-cart-shopping me-1"></i> {{ $graf->totales }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>


@endsection

@include('usuario.componentes.scripBotones')

@push('script')

<script src="{{ asset('assets/plugins/apexcharts/apexcharts.js') }}"></script>

<script type="text/javascript">

    var options = {
        series: [@foreach($graficas as $graf) {{$graf->totales}}, @endforeach],
        labels: [@foreach($graficas as $graf) '{{$graf->paises->nombre}}', @endforeach],
        chart: {
            width: '100%',
            height: '260',
            type: 'donut',
        },
        plotOptions: {
            pie: { startAngle: -90, endAngle: 270 }
        },
        dataLabels: { enabled: false },
        legend: {
            position: 'bottom',
            labels: { colors: '#6c757d', useSeriesColors: false },
            formatter: function(val, opts) {
                return val + " — " + opts.w.globals.series[opts.seriesIndex]
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: { width: '100%' },
                legend: { position: 'bottom', width: '100%' }
            }
        }]
    };

    var chart = new ApexCharts(document.querySelector("#pieChart"), options);
    chart.render();


    var options = {
        series: [{
            name: 'Total Compras',
            data: [@foreach($graficas as $graf) '{{$graf->totales}}', @endforeach]
        }],
        chart: {
            width: '100%',
            height: '260',
            type: 'bar',
            toolbar: { show: false }
        },
        plotOptions: {
            bar: { borderRadius: 8, columnWidth: '50%' }
        },
        dataLabels: { enabled: false },
        stroke: { width: 2 },
        grid: {
            borderColor: '#eef0f3',
            row: { colors: ['transparent'] }
        },
        xaxis: {
            labels: { rotate: -45, style: { colors: '#6c757d' } },
            categories: [@foreach($graficas as $graf) '{{$graf->paises->nombre}}', @endforeach],
        },
        yaxis: { labels: { style: { colors: '#6c757d' } } },
        fill: {
            type: 'gradient',
            gradient: {
                shade: 'light',
                type: "horizontal",
                shadeIntensity: 0.25,
                gradientToColors: undefined,
                inverseColors: true,
                opacityFrom: 0.85,
                opacityTo: 0.85,
                stops: [50, 0, 100]
            }
        }
    };

    var chart = new ApexCharts(document.querySelector("#areaChart"), options);
    chart.render();

</script>
@endpush