@extends('../layout/' . $layout)

@section('subhead')
<title>Dashboard - Usuario - SIMEP</title>
<link href="https://sim-ep.com/build/assets/jquery-jvectormap-2.0.5.css" rel="stylesheet">
<style>
    table.dataTable tr.dtrg-group.dtrg-level-0 td {
    font-weight: bold;
}
table.dataTable tr.dtrg-group td {
    background-color: #e0e0e0;
}
table.dataTable tr.dtrg-group.dtrg-level-1 td:first-child{
    padding-left: 2em;
}
table.dataTable tr.dtrg-group.dtrg-level-1 td{
    background-color: #f0f0f0;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}
table.dataTable tr.dtrg-group.dtrg-level-2 td:first-child {
    padding-left: 3em;
}
table.dataTable tr.dtrg-group.dtrg-level-2 td {
    background-color: #fff0f0;
}
table.dataTable.compact tbody tr td.order_id {
    padding-left: 4em;
}
</style>
@endsection

@section('subcontent')
<div class="grid grid-cols-12 gap-6 xl:mt-8">
    <div class="col-span-12 2xl:col-span-12">
        <div class="grid grid-cols-12 gap-6">
        
            <!-- END: General Report -->
            <!-- BEGIN: Sales Report -->
            <div class="col-span-12 md:col-span-12 mt-8">
                <div class="intro-y items-center ">
                    <h2 class="text-xl font-bold truncate mr-5 w-full title-section">Mercado Local</h2>

                    <div class="col-span-12">
                        <div class=" mt-8">
                            <div class="px-2">
                                <div class="h-full  rounded-md">

                                    <p>Información Local de ventas, márgenes y avances del plan operativo. Ventas por región y categorías.</p>
                                </div>
                            </div>


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



            </div>
           
            <!-- <div class="col-span-12 lg:col-span-12 mt-8">
                <div class="intro-y block sm:flex items-center h-10">
                    <h2 class="text-3xl font-bold xl:truncate mr-5">Datos Socio - Económicos</h2>
                </div>
            </div> -->
 
            
            <div class="col-span-12 lg:col-span-12 mt-8">
                <div class="grid grid-cols-3 intro-y box p-5 mt-12 sm:mt-5 h-full">
                    <div class="col-span-12">
                        <div class="w-full xl:h-10">
                            <div class="intro-y block items-center  xl:h-10 overflow-auto lg:overflow-visible">
                                <h2 class="text-lg font-medium truncate mr-5">Margen</h2>

                                <table class="table mt-4 col-span-12" id="table-margen">
                        <thead>
                            <tr>
                                <th class="whitespace-nowrap">Categoría</th>
                                <th class="whitespace-nowrap">Volumen</th>
                                <th class=" whitespace-nowrap">Ventas</th>
                                <th class=" whitespace-nowrap">Margen</th>
                                
                            </tr>
                        </thead>
                        <tbody>

                            @if(count($data["ventas_8"]) > 0)
                                @foreach($data["ventas_8"] as $value)


                                <tr class="intro-x">
                                <td class="">{{$value->name}}</td>
                                <td class="">{{$value->volumen}}</td>
                                <td class="">{{$value->ventas}}</td>
                                <td class="">{{$value->valor*100}}</td>
                               
                              
                            </tr>

                                @endforeach

                                @endif



                        </tbody>
                    </table>
                            </div>
                        </div>
                        
                    </div>
                    <div class="col-span-6 md:col-span-2 report-chart ">
                        
                    </div>
              
                </div>
            </div>


        <div class="col-span-12 md:col-span-12 mt-8 box">
            <div class="grid grid-cols-1 intro-y box p-5 mt-12 sm:mt-5 h-full">

            <ul class="nav nav-boxed-tabs overflow-auto mt-8 md:mt-8" role="tablist">
                    <li id="example-3-tab" class="nav-item flex-1" role="presentation">
                        <button class="nav-link w-full py-2 active" data-tw-toggle="pill"
                            data-tw-target="#example-tab-3" type="button" role="tab" aria-controls="example-tab-3"
                            aria-selected="true">
                            Total Pais
                        </button>
                    </li>
                    <li id="example-4-tab" class="nav-item flex-1" role="presentation">
                        <button class="nav-link w-full py-2" data-tw-toggle="pill" data-tw-target="#example-tab-4"
                            type="button" role="tab" aria-controls="example-tab-4" aria-selected="false">
                            Regiones
                        </button>
                    </li>


            </ul>

            <div class="tab-content mt-14">
                <div id="example-tab-3" class="tab-pane leading-relaxed active" role="tabpanel"
                    aria-labelledby="example-3-tab">

                    <div class="col-span-12 flex flex-col md:flex-row">
                        <div class="flex">
                            <div class="intro-y block sm:flex items-center h-10">
                                <h2 class="text-lg font-medium truncate mr-5">Volumen Ventas  EP </h2>
                            </div>
                        </div>
                    </div>

                      <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">

                                <div class="grid grid-cols-12 gap-2 mt-4  mb-4">
                                    <select id="filter-periodo-1" class="form-select form-select-lg sm:mt-2 sm:mr-2 col-span-6 sm:col-span-3 xl:col-span-3"
                                        aria-label=".form-select-lg example">
                                        <option value="">Periodo</option>
                                        @if(count($data['ventas_3_periodo']) > 0)
                                            @foreach($data['ventas_3_periodo'] as $key => $value)

                                                <option @if($data['ventas_3_periodo_selected'] == $value->periodo) selected @endif value="{{$value->periodo}}">{{$value->periodo}}</option>
                                            @endforeach
                                            @endif
                                    </select>
                                </div>

                                <table class="table table-report mt-4 col-span-6" id="table-total-pais">
                                    <thead>
                                        <tr>
                                            <th class="text-center whitespace-nowrap">Categoria</th>
                                            <th class="text-center whitespace-nowrap">Volumen (Ton)</th>
                                            <th class="text-center whitespace-nowrap">Valor(COP)</th>
                                            <th class="text-center whitespace-nowrap">$COP/KG</th>
                                        </tr>
                                    </thead>
                                    <tbody id="table-total-pais-content">

                                    @if(count($data['ventas_3']) > 0)
                            @foreach($data['ventas_3'] as $key => $value)
                            <tr class="intro-x">
                                <td class="text-center">{{$value->categoria}}</td>
                                <td class="text-center">{{number_format($value->volumen,"2",",",".")}}</td>
                                <td class="text-center">{{number_format($value->valor,"2",",",".")}}</td>
                                <td class="text-center">{{number_format($value->valor_2,"2",",",".")}}</td>
    
                            </tr>
                            @endforeach
                        @endif
                                       
                                      
                                      
                                       



                                    </tbody>
                                </table>
                            </div>

                    
                    



                </div>
                <div id="example-tab-4" class="tab-pane leading-relaxed" role="tabpanel"
                    aria-labelledby="example-4-tab">
                    
                        <div class="col-span-12 lg:col-span-12 mt-8">
                            <div class="grid grid-cols-12 intro-y box p-5 mt-12 sm:mt-5 h-full">
                            <div class="col-span-12 flex flex-col md:flex-row">
                        <div class="flex">
                            <div class="intro-y block sm:flex items-center h-10">
                                <h2 class="text-lg font-medium truncate mr-5">Volumen Ventas  EP </h2>
                            </div>
                        </div>
                        </div>
                        <div class="col-span-12 md:col-span-6">

                            <div class="intro-y block sm:flex items-center h-10">
                                <h2 class="text-lg font-medium truncate mr-5">Categorias Vs Regiones </h2>
                            </div>
                            <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">

<div class="grid grid-cols-12 gap-2 mt-4  mb-4">
    <select id="filter-year-1" class="form-select form-select-lg sm:mt-2 sm:mr-2 col-span-6 sm:col-span-3 xl:col-span-3"
        aria-label=".form-select-lg example">
        <option value="">Año</option>
        @if(count($data['ventas_2_ano']) > 0)
            @foreach($data['ventas_2_ano'] as $key => $value)

                <option @if($data['ventas_2_ano_selected'] == $value->ano) selected @endif value="{{$value->ano}}">{{$value->ano}}</option>
            @endforeach
            @endif
    </select>
</div>

            <div id="faq-accordion-2" class="accordion accordion-boxed mt-8" id="regiones-content">
                   
                        @if(count($data['ventas_2_regiones_data']) > 0)
                        @foreach($data['ventas_2_regiones_data'] as $key => $value)

                      


                        
                        <div class="accordion-item" style="padding: 0px;min-height: 54px;">
                            <div id="faq-accordion-content-{{ $key }}" data-color="{{$data['ventas_2_regiones_data'][$key]['color']}}" class="accordion-header">
                                <button style="background-color:{{$data['ventas_2_regiones_data'][$key]['color']}};padding: 1rem;" class="accordion-button collapsed" type="button" data-tw-toggle="collapse"
                                    data-tw-target="#faq-accordion-collapse-{{ $key }}" aria-expanded="false"
                                    aria-controls="faq-accordion-collapse-{{ $key }}">
                                    {{ $key }}
                                </button>
                            </div>
                            <div id="faq-accordion-collapse-{{ $key }}" class="accordion-collapse collapse"
                                aria-labelledby="faq-accordion-content-{{ $key }}" data-tw-parent="#faq-accordion-2">
                                <div class="accordion-body text-slate-600 dark:text-slate-500 leading-relaxed">

                                        <div id="faq-accordion-{{ $key }}" class="accordion accordion-boxed">



                                        
                                @if(is_array($value))
                                    @if(count($value) > 0)
                                        @foreach($value as $key2 => $value2)
                                        @if($key2 != 'color')

                                        


                                        <div class="accordion-item">
                            <div id="inside-accordion-content-{{ $key2 }}" class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-tw-toggle="collapse"
                                    data-tw-target="#inside-accordion-collapse-{{ $key2 }}" aria-expanded="false"
                                    aria-controls="inside-accordion-collapse-{{ $key2 }}">
                                    {{ $key2 }}
                                </button>
                            </div>
                            <div id="inside-accordion-collapse-{{ $key2 }}" class="accordion-collapse collapse"
                                aria-labelledby="inside-accordion-content-{{ $key2 }}">
                                <div class="accordion-body text-slate-600 dark:text-slate-500 leading-relaxed">
<table class="table table-report mt-4 col-span-12 tabla-regiones" id="table-total-regiones" style="width:100% !important">
    <thead>
        <tr>

            <th class="text-center whitespace-nowrap">Marca</th>

            <th class="text-center whitespace-nowrap">Volumen (Ton)</th>
            <th class="text-center whitespace-nowrap">Valor</th>
        </tr>
    </thead>
    <tbody>

        @if(count($value2) > 0)
            @foreach($value2 as $key3 => $value3)
                <tr class="intro-x">
                  
                    <td class="text-center">{{ $value3->marca }}</td>
                    <td class="text-center">
                        {{ number_format($value3->toneladas_netas,"2",",",".") }}
                    </td>
                    <td class="text-center">
                        {{ number_format($value3->total_ventas,"2",",",".") }}
                    </td>
                </tr>
            @endforeach
        @endif







    </tbody>
</table>



                                       
                                    

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

                              

                        @endif
                                        @endforeach

                                    @endif

                                    @endif



                                    </div>
                                    

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

                       
                        @endforeach
                        @endif

            
               
                </div>

</div>

                        
                        
                        </div>
                        <div class="col-span-12 md:col-span-6">
                            <div class="intro-y block sm:flex items-center justify-center">

                            <img style="max-width:70%;" src="https://sim-ep.com/storage/uploads/{{ $data['pais']->mapa }}" alt="">
                                   
                            </div>
                        </div>
              
                </div>
            </div>
          

            </div>

       
            </div>

                </div>

            </div>
            
            <!-- END: Sales Report -->
            <!-- BEGIN: Weekly Top Seller -->

            




            <div class="col-span-12 lg:col-span-12 mt-8">
                <div class="intro-y block sm:block items-center h-10 w-full">
                    <h2 class="text-3xl font-bold truncate mr-5 w-full">Historico</h2>
                    <h2 class="text-sm font-light truncate mr-5 w-full mt-2">Ventas $/Kg</h2>
                </div>
            </div>

            
            <div class="col-span-12 lg:col-span-6 mt-8">
                <div class="grid grid-cols-3 intro-y box p-5 mt-12 sm:mt-5 h-full">
                    <div class="col-span-12 md:col-span-12 ">
                        <div class="col-span-12 lg:col-span-12 ">

                            <div class="intro-y block sm:block items-center h-10 w-full">
                                <h2 class="text-lg font-medium truncate mr-5 w-full">Historico </h2>
                                <h2 class="text-sm font-light truncate mr-5 w-full mt-2">Volumen</h2>
                            </div>

                        </div>

                            <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">

                                <div class="grid grid-cols-12 gap-2 mt-4 mb-4">
                                    <select id="filter-marca-1" class="form-select form-select-lg sm:mt-2 sm:mr-2 col-span-6 sm:col-span-6 xl:col-span-3"
                                        aria-label=".form-select-lg example">
                                            <option value="">Categoria</option>
                                            @if(count($data['ventas_4_categoria']) > 0)
                                                    @foreach($data['ventas_4_categoria'] as $key => $value)

                                                        <option  @if($data['ventas_4_categoria_selected'] == $value->categoria) selected @endif value="{{$value->categoria}}">{{$value->categoria}}</option>
                                                    @endforeach
                                            @endif
                                    </select>

                                    <select id="filter-periodo-2" class="form-select form-select-lg sm:mt-2 sm:mr-2 col-span-6 sm:col-span-6 xl:col-span-3"
                                        aria-label=".form-select-lg example">
                                        <option>Periodo</option>
                                        @if(count($data['ventas_4_periodo']) > 0)
                                            @foreach($data['ventas_4_periodo'] as $key => $value)

                                                <option @if($data['ventas_4_periodo_selected'] == $value->periodo) selected @endif value="{{$value->periodo}}">{{$value->periodo}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                           
                            
                     
                            </div>
                    </div>
                    <div class="col-span-12 md:col-span-12 report-chart ">
                        <div class="h-[275px]">
                            <canvas id="historico-1" class="mt-6 -mb-6"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-span-12 lg:col-span-6 mt-8">
                <div class="grid grid-cols-3 intro-y box p-5 mt-12 sm:mt-5 h-full">
                <div class="col-span-12 md:col-span-12 ">
                        <div class="col-span-12 lg:col-span-12 ">

                            <div class="intro-y block sm:block items-center h-10 w-full">
                                <h2 class="text-lg font-medium truncate mr-5 w-full">Historico </h2>
                                <h2 class="text-sm font-light truncate mr-5 w-full mt-2">$/Kg</h2>
                            </div>

                        </div>

                            <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">

                                <div class="grid grid-cols-12 gap-2 mt-4 mb-4">
                                    <select id="filter-marca-2" class="form-select form-select-lg sm:mt-2 sm:mr-2 col-span-6 sm:col-span-6 xl:col-span-3"
                                        aria-label=".form-select-lg example">
                                            <option value="">Categoria</option>
                                            @if(count($data['ventas_5_categoria']) > 0)
                                                    @foreach($data['ventas_5_categoria'] as $key => $value)

                                                        <option  @if($data['ventas_5_categoria_selected'] == $value->categoria) selected @endif value="{{$value->categoria}}">{{$value->categoria}}</option>
                                                    @endforeach
                                            @endif
                                    </select>

                                    <select id="filter-periodo-3" class="form-select form-select-lg sm:mt-2 sm:mr-2 col-span-6 sm:col-span-6 xl:col-span-3"
                                        aria-label=".form-select-lg example">
                                        <option value="">Periodo</option>
                                        @if(count($data['ventas_5_periodo']) > 0)
                                            @foreach($data['ventas_5_periodo'] as $key => $value)

                                                <option @if($data['ventas_5_periodo_selected'] == $value->periodo) selected @endif value="{{$value->periodo}}">{{$value->periodo}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                           
                            
                     
                            </div>
                    </div>
                    <div class="col-span-12 md:col-span-12 report-chart ">
                    <div class="h-[275px]">
                            <canvas id="historico-2" class="mt-6 -mb-6"></canvas>
                        </div>
                    </div>
                </div>
            </div>



            <div class="col-span-12 lg:col-span-12 mt-8">
                <div class="intro-y block sm:block items-center h-10 w-full">
                    <h2 class="text-3xl font-bold truncate mr-5 w-full">Historico Ventas EP</h2>
                    <h2 class="text-sm font-light truncate mr-5 w-full mt-2" >Ventas $/Kg</h2>
                </div>
            </div>




            <div class="col-span-12 lg:col-span-6 mt-8">
                <div class="grid grid-cols-3 intro-y box p-5 mt-12 sm:mt-5 h-full">
                    <div class="col-span-6 flex flex-col md:flex-row">
                        <div class="flex">
                            <div class="intro-y block sm:block items-center h-10 w-full">
                                <h2 class="text-lg font-medium truncate mr-5 w-full">Historico</h2>
                                <h2 class="text-sm font-light truncate mr-5 w-full mt-2">Plan Operativo vs Real</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-span-12 md:col-span-12 report-chart ">
                        <div class="h-[400px]">
                            <canvas id="historico-3"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-span-12 lg:col-span-6 mt-8">
                <div class="grid grid-cols-3 intro-y box p-5 mt-12 sm:mt-5 h-full">
                    <div class="col-span-6 flex flex-col md:flex-row">
                        <div class="flex">
                            <div class="intro-y block sm:block items-center h-10 w-full">
                                <h2 class="text-lg font-medium truncate mr-5 w-full">Comparativo HPM </h2>
                                <h2 class="text-sm font-light truncate mr-5 w-full mt-2">Mes vs Año anterior</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-span-12 md:col-span-12 report-chart ">
                        <div class="h-[400px]">
                            <canvas id="historico-4"></canvas>
                        </div>
                    </div>
                </div>
            </div>

                   
            <div class="col-span-12 lg:col-span-12 mt-8">
                <div class="intro-y block sm:flex items-center h-10">
                    <h2 class="text-3xl font-bold truncate mr-5">Información General</h2>
                </div>
            </div>
            <div class="col-span-12 sm:col-span-4 xl:col-span-3 mt-8 grid grid-cols-1">
                <div class="report-box box p-5 sm:mt-5 grid grid-cols-4">
                    <div>
                    <img alt="" class="w-10 h-10 z-10 absolute my-auto inset-y-0 ml-8 left-0" src="{{ asset('build/assets/images/icono_play.svg') }}">
                    </div>
                    <div class="col-span-3">
                        <div class="intro-y block sm:flex items-center h-10">
                            <h2 class="text-lg font-medium truncate mr-5 tooltip" title="Consumo H.P.M">Consumo H.P.M</h2>
                        </div>
                        <div class="intro-y block sm:flex items-center h-10">
                            <h2 class="text-lg font-medium truncate mr-5 ">{{$data['data']['consumo_hpm']}} <small>KG/HAB</small></h2>
                        </div>
                    </div>


                </div>

                <div class="report-box box p-5 mt-12 sm:mt-5 grid grid-cols-4">
                    <div>
                    <img alt="" class="w-10 h-10 z-10 absolute my-auto inset-y-0 ml-8 left-0" src="{{ asset('build/assets/images/icono_info.svg') }}">
                        <!-- <i data-lucide="bar-chart" class="w-10 h-10 z-10 absolute my-auto inset-y-0 ml-8 left-0"></i> -->
                    </div>
                    <div class="col-span-3">
                        <div class="intro-y block sm:flex items-center h-10">
                            <h2 class="text-lg font-medium truncate mr-5 tooltip" title="Share Volumen">Share Volumen</h2>
                        </div>
                        <div class="intro-y block sm:flex items-center h-10">
                            <h2 class="text-lg font-medium truncate mr-5">{{$data['data']['share_volumen']}}</h2>
                        </div>
                    </div>


                </div>

                <div class="report-box box p-5 mt-12 sm:mt-5 grid grid-cols-4">
                    <div>
                    <img alt="" class="w-10 h-10 z-10 absolute my-auto inset-y-0 ml-8 left-0" src="{{ asset('build/assets/images/icono_message.svg') }}">
                    </div>
                    <div class="col-span-3">
                        <div class="intro-y block sm:flex items-center h-10">
                            <h2 class="text-lg font-medium truncate mr-5 tooltip" title="Precio Compra MB-EP">Precio Compra MB-EP</h2>
                        </div>
                        <div class="intro-y block sm:flex items-center h-10">
                            <h2 class="text-lg font-medium truncate mr-5">{{$data['data']['precio_compra']}} <small>$/TONELADAS</small></h2>
                        </div>
                    </div>


                </div>

                <div class="report-box box p-5 mt-12 sm:mt-5 grid grid-cols-4">
                    <div>

                    <img alt="" class="w-10 h-10 z-10 absolute my-auto inset-y-0 ml-8 left-0" src="{{ asset('build/assets/images/icono_checkmark.svg') }}">
                    </div>
                    <div class="col-span-3">
                        <div class="intro-y block sm:flex items-center h-10">
                            <h2 class="text-lg font-medium truncate mr-5 tooltip" title="Share VALOR">Share VALOR</h2>
                        </div>
                        <div class="intro-y block sm:flex items-center h-10">
                            <h2 class="text-lg font-medium truncate mr-5">{{$data['data']['share_valor']}}</h2>
                        </div>
                    </div>


                </div>



            </div>
   
            <div class="col-span-12 sm:col-span-8 xl:col-span-9 mt-8">
                <div class="grid grid-cols-1 sm:grid-cols-3 intro-y box p-5 mt-12 sm:mt-5 h-full">
                    <div class="col-span-6 flex flex-col md:flex-row">
                        <div class="flex">
                            <div class="intro-y block sm:flex items-center h-10">
                                <h2 class="text-lg font-medium truncate mr-5">Precios Histórico H.P.M</h2>
                            </div>
                        </div>
                        <div class="sm:ml-auto mt-3 sm:mt-0 relative text-slate-500  h-10">
                            <i data-lucide="calendar" class="w-4 h-4 z-10 absolute my-auto inset-y-0 ml-3 left-0"></i>
                            <input type="text" class="datepicker form-control sm:w-64 box pl-10">
                        </div>
                    </div>
                    <div class="col-span-6 md:col-span-2 report-chart ">
                        <div class="h-[275px]">
                            <canvas id="precios-historicos" class="mt-6 -mb-6"></canvas>
                        </div>
                    </div>
                    <div class="col-span-6 md:col-span-3">
                        <div class="intro-y block sm:flex items-center h-10">
                            <h2 class="text-lg font-medium truncate mr-5">Variación H.P.M mes anterior</h2>
                        </div>


                        @if(count($data['kpi2_data']) > 0)
                            @foreach($data['kpi2_data'] as $key => $value)
                        <div class="intro-y block sm:flex items-center h-10">
                            <h2 class="text-lg font-medium truncate mr-5">{{$value->name}}</h2>
                            <div class="progress my-auto w-8">

                            <div class="progress-bar" style="background-color:{{$data['colores'][$key]}} !important" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                aria-valuemax="100"></div>
                        </div>
                        </div>
                            @endforeach
                        @endif

                    
                    </div>
                </div>
            </div>
     
            <!-- END: Sales Report -->
            <!-- BEGIN: Weekly Top Seller -->

            <div class="col-span-12 sm:col-span-6 lg:col-span-6 mt-8">

                <div class="intro-y box p-5 mt-5">
                    <div class="intro-y flex items-center h-10">
                        <h2 class="text-lg font-medium truncate mr-5">Avance Plan Operativo H.P.M</h2>
                    </div>
                    <div class="mt-3">
                        <div class="absolute top-4 left-4">Local</div>
                        <div class="h-[213px] border-b border-gray-50">
                            <canvas id="plan-operativo-local"></canvas>
                        </div>
                        <div class="grid grid-cols-12 gap-6 items-center">
                                <div class="col-span-6 sm:col-span-6">0%</div>
                                <div class="col-span-6 sm:col-span-6 text-right">100%</div>
                        </div>
                       
                    </div>
                </div>
            </div>

            <div class="col-span-12 sm:col-span-6 lg:col-span-6 mt-8">

                <div class="intro-y box p-5 mt-5">
                    <div class="intro-y flex items-center h-10">
                        <h2 class="text-lg font-medium truncate mr-5"></h2>
                    </div>
                    <div class="mt-3">
                    <div class="absolute top-4 left-4">Exportaciones</div>
                        <div class="h-[213px] border-b border-gray-50">
                            <canvas id="plan-operativo-export"></canvas>
                        </div>
                        <div class="grid grid-cols-12 gap-6 items-center">
                                <div class="col-span-6 sm:col-span-6">0%</div>
                                <div class="col-span-6 sm:col-span-6 text-right">100%</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-span-12 sm:col-span-12 lg:col-span-12 mt-8">
               

                <div class="intro-y box p-5 mt-5">

                <div class="intro-y block sm:flex items-center h-10">
                    <h2 class="text-lg font-medium truncate mr-5">Exportaciones H.P.M Principales destinos</h2>
                </div>
                @if(count($data['kpi4_data']) > 0)
                            @foreach($data['kpi4_data'] as $key => $value)
                <div class="grid grid-cols-12 gap-6 items-center mt-12">