@extends('layouts.index')

@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: 300px !important;
        }

        .box {
          max-height: 800px;
        }
      </style>
@endsection

@section('aside')
    @component('bausch.componentes.aside')
    @endcomponent
@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="row" id="tutorialFiltros">
                                        <div class="col-lg-3 col-md-3 col-sm-12">
                                            <input class="form-control" placeholder="Fechas" id="inputFechas"/>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-12">
                                            <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['identificacion'].' - '.$representante['nombre_completo']}}</option>
                                                    @endforeach
                                                @else
                                                    <option value='' selected>Sin Representantes</option>
                                                @endif
                                            </select>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-12">
                                            <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="col-lg-3 col-md-3 col-sm-12">
                                            <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>
                                        </div>
                                    </div>
                                    <div class="row sparkboxes mt-4 mb-4">
                                        <div class="box p-5" id="tutorialTablaCampanas">
                                            <div class="table-responsive">
                                                <table border="1" class="table table-striped table-bordered" id="tablaDetalle">
                                                    <thead>
                                                    <tr>
                                                        <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>
                                                    </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                    
                                    {{-- <div class="row mt-5 mb-4 d-none">
                                        <div class="col-md-6">
                                            <div class="box h-500px">
                                                <div id="line"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="box h-500px">
                                                <div id="donut"></div>
                                            </div>
                                        </div>
                                    </div>
                    
                                    <div class="row mt-4 mb-4">
                                        <div class="col-md-12 col-lg-12">
                                            <div class="box">
                                                <div id="bar"></div>
                                            </div>
                                        </div>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <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" id="tutorialDetalleCampana">
                        <div class="card-header pt-7" id="kt_chat_contacts_header_detalle">
                            <h1 class="text-verdoso mulish">Detalles</h1>
                        </div>
                        <div class="card-body pt-5" id="">
                            <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}}'>{{$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">Especialidad</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/bausch/home.js') }}" ></script>
@endsection