@extends('layouts.index')

@section('aside')
    @component('adium::componentes.aside')
    @endcomponent
@endsection

@section('css')
    <link href="{{ mix('css/home.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .apexcharts-datalabels text {
            font-size: x-large !important;
        }

        .apexcharts-datalabels.apexcharts-hidden-element-shown text {
            color: #000;
            font-size: 1rem !important;
        }

        .select2-container--bootstrap5 .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg) {
            background: #fff !important;
        }

        .tablasScroll {
            max-height: 715px !important;
        }

        .box {
            max-height: 800px;
        }
    </style>
    <style>
        #chartdiv {
            width: 100%;
            height: 250px;
        }

        #chartRepresentante {
            width: 100%;
            height: 430px;
        }

        #chartdiv {
            width: 100%;
            height: 430px;
        }
    </style>
@endsection

@section('tutorial')
    @component('layouts.componentes.header.tutorial')
    @endcomponent
@endsection

@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="contenedor" id="kt_content_container">
            <div class="d-flex flex-column flex-lg-row">
                <div class="flex-column flex-lg-row-auto w-100 mb-10 mb-lg-0">
                    <div class="card card-flush">
                        <div class="card-header pt-7" id="kt_chat_contacts_header">
                            <h1 class="text-verdoso mulish">Metricas</h1>
                        </div>
                        <div class="card-body pt-5" id="">
                            <div class="container-fluid">
                                <div class="main">
                                    <div class="d-flex align-items-center" id="tutorialFiltros">
                                        <div class="m-2">
                                            <input class="form-control" placeholder="Fechas" id="inputFechas" />
                                        </div>
                                        <div class="m-2">
                                            <select name="" class="form-control" id="selectRepresentante"
                                                data-control="select2" data-placeholder="Representantes"
                                                data-allow-clear="true" multiple>
                                                @if ($representantes)
                                                    @foreach ($representantes as $representante)
                                                        <option value='{{ $representante->id }}'>
                                                            {{ ($representante?->zona ?? 'Sin Zona') . ' - ' . $representante->identificacion . ' - ' . $representante->nombre_completo }}
                                                        </option>
                                                    @endforeach
                                                @else
                                                    <option value='' selected>Sin Representantes</option>
                                                @endif
                                            </select>
                                        </div>
                                        <div class="m-2">
                                            <select name="" class="form-control" id="selectMedico"
                                                data-control="select2" data-placeholder="Medicos" data-allow-clear="true"
                                                multiple>
                                                @if ($medicos)
                                                    @foreach ($medicos as $medico)
                                                        <option value='{{ $medico->identificacion }}'>
                                                            {{ $medico->identificacion . ' - ' . $medico->nombre_completo }}
                                                        </option>
                                                    @endforeach
                                                @else
                                                    <option value='' selected>Sin Medicos</option>
                                                @endif
                                            </select>
                                        </div>
                                        <div class="m-2">
                                            <select name="" class="form-control" id="selectEspecialidad"
                                                data-control="select2" data-placeholder="Especialidades"
                                                data-allow-clear="true" multiple>
                                                @if ($especialidades)
                                                    @foreach ($especialidades as $especialidad)
                                                        <option value='{{ $especialidad->nombre }}'>
                                                            {{ $especialidad->nombre }}
                                                        </option>
                                                    @endforeach
                                                @else
                                                    <option value='' selected>Sin Especialidades</option>
                                                @endif
                                            </select>
                                            </select>
                                        </div>
                                        <div class="m-2">
                                            <select name="" class="form-control" id="selectLinea"
                                                data-control="select2" data-placeholder="Lineas" data-allow-clear="true"
                                                multiple>
                                                @if ($lineas)
                                                    @foreach ($lineas as $linea)
                                                        <option value='{{ $linea->id }}'>{{ $linea->nombre }}</option>
                                                    @endforeach
                                                @else
                                                    <option value='' selected>SinLineas</option>
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row sparkboxes mt-4 mb-4">
                                        <div class="box p-5">
                                            <div class="scroll-y me-n5 pe-5 h-200px h-lg-auto tablasScroll"
                                                data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}"
                                                data-kt-scroll-max-height="auto"
                                                data-kt-scroll-dependencies="#kt_header, #kt_toolbar, #kt_footer, #kt_chat_contacts_header"
                                                data-kt-scroll-wrappers="#kt_content, #kt_chat_contacts_body"
                                                data-kt-scroll-offset="5px" style="max-height: 410px;">
                                                <div class="table-responsive" id="tutorialTablaCampanas">
                                                    <table border="1" class="table table-striped table-bordered"
                                                        id="tablaDetalle">
                                                        <thead>
                                                            <tr>
                                                                <th width="10%" class="text-center all">Fecha</th>
                                                                <th width="40%" class="text-center all">Campaña</th>
                                                                <th width="10%" class="text-center all">Envios</th>
                                                                <th width="10%" class="text-center all">Aperturas</th>
                                                                <th width="10%" class="text-center all">Respuestas</th>
                                                                <th width="10%" class="text-center all">Fallos</th>
                                                                <th width="10%" class="text-center all">Reporte</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody></tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-5 mb-4">
                                        <div class="col-md-4">
                                            <div class="box h-300px">
                                                <div id="line"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="box h-300px">
                                                <div id="donut"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="box h-300px">
                                                <div id="chartdiv"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-4 mb-4 d-none">
                                        <div class="col-md-12 col-lg-12">
                                            <div class="box">
                                                <div id="bar"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-5 mb-4">
                                        <div class="col-md-6">
                                            <div class="box h-500px">
                                                <div class="seccionDias">
                                                    @component('adium::componentes.dias')
                                                    @endcomponent
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="box h-500px">
                                                <h1 class="fs-2x">Ranking Representantes</h1>
                                                <div id="chartRepresentante"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content d-flex flex-column flex-column-fluid d-none" id="kt_content">
        <div class="contenedor" id="kt_content_container">
            <div class="d-flex flex-column flex-lg-row">
                <div class="flex-column flex-lg-row-auto w-100 mb-10 mb-lg-0">
                    <div class="card card-flush">
                        <div class="card-header pt-7" id="kt_chat_contacts_header">
                            <h1 class="text-verdoso mulish">Detalles</h1>
                        </div>
                        <div class="card-body pt-5" id="tutorialDetalleCampana">
                            <div class="scroll-y me-n5 pe-5 h-200px h-lg-auto tablasScroll" data-kt-scroll="true"
                                data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto"
                                data-kt-scroll-dependencies="#kt_header, #kt_toolbar, #kt_footer, #kt_chat_contacts_header"
                                data-kt-scroll-wrappers="#kt_content, #kt_chat_contacts_body" data-kt-scroll-offset="5px"
                                style="max-height: 410px;">
                                <div class="container py-2" id="tutorialSelectCampana">
                                    <select name="" class="form-control" id="selectCampanas"
                                        data-control="select2" data-placeholder="Seleccione la campaña"
                                        data-allow-clear="true">
                                        <option></option>
                                        @if ($campanas)
                                            @foreach ($campanas as $cam)
                                                @php
                                                    $fecha = strftime('%d de %B de %Y', strtotime($cam->fecha_evento));
                                                    $selected = $cam->cod_evento == $cam->cod_evento ? true : false;
                                                @endphp
                                                <option value='{{ $cam->cod_evento }}'>{{ $cam->marca . ' - ' . $fecha }}
                                                </option>
                                            @endforeach
                                        @else
                                            <option value='' selected>Sin Campañas</option>
                                        @endif
                                    </select>
                                </div>
                                <div class="table-responsive" id="tutorialTablaDetalle">
                                    <table border="1" class="table table-striped table-bordered" id="tablaCampanas">
                                        <thead>
                                            <tr>
                                                <th width="5%" class="text-center all">#</th>
                                                <th width="10%" class="text-center all">Representante</th>
                                                <th width="10%" class="text-center all">Nombre Medico</th>
                                                <th width="10%" class="text-center all">Marca</th>
                                                <th width="10%" class="text-center all">Especialidad</th>
                                                <th width="10%" class="text-center all">Sub linea</th>
                                                <th width="10%" class="text-center all">Panel</th>
                                                <th width="10%" class="text-center all">Abierto</th>
                                                <th width="10%" class="text-center all">Click (Respuestas)</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ mix('/js/adium/home.js') }}"></script>
@endsection