@extends('layouts.index', ['subHeader' => 'Dashboard'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard / home</a>
@endsection

@section('css')
    <style>
        .tablasScroll {
            max-height: 300px !important;
        }
    </style>
@endsection

@section('content')
    <!--begin::Main wrapper-->
    {{-- <div id="kt_docs_search" data-kt-search-keypress="true" data-kt-search-min-length="2" data-kt-search-enter="true"
        data-kt-search-layout="inline">

        <!--begin::Input Form-->
        <form data-kt-search-element="form" class="w-100 position-relative mb-5" autocomplete="off">
            <!--begin::Hidden input(Added to disable form autocomplete)-->
            <input type="hidden" />
            <!--end::Hidden input-->

            <!--begin::Icon-->
            <!--begin::Svg Icon | path: magnifier-->
            <!--end::Icon-->

            <!--begin::Input-->
            <input type="text" class="form-control form-control-lg form-control-solid px-15" name="search"
                value="" placeholder="Search by username, full name or email..." data-kt-search-element="input" />
            <!--end::Input-->

            <!--begin::Spinner-->
            <span class="position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-5"
                data-kt-search-element="spinner">
                <span class="spinner-border h-15px w-15px align-middle text-gray-500"></span>
            </span>
            <!--end::Spinner-->

            <!--begin::Reset-->
            <span
                class="btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 me-5 d-none"
                data-kt-search-element="clear">

                <!--begin::Svg Icon | path: cross-->
            </span>
            <!--end::Reset-->
        </form>
        <!--end::Form-->

        <!--begin::Wrapper-->
        <div class="py-5">
            <!--being::Search suggestion-->
            <div data-kt-search-element="suggestions">
                ...
            </div>
            <!--end::Suggestion wrapper-->

            <!--begin::Search results-->
            <div data-kt-search-element="results" class="d-none">
                <div class="mh-300px scroll-y me-n5 pe-5">
                    <!--begin::User-->
                    <div class="d-flex align-items-center p-3 rounded-3 border-hover border border-dashed border-gray-300 cursor-pointer mb-1"
                        data-kt-search-element="customer">
                        <!--begin::Avatar-->
                        <div class="symbol symbol-35px symbol-circle me-5">
                            <img alt="Pic" src="/html/jet-html-pro/docs/assets/media/avatars/300-6.jpg">
                        </div>
                        <!--end::Avatar-->

                        <!--begin::Info-->
                        <div class="fw-semibold">
                            <span class="fs-6 text-gray-800 me-2">Emma Smith</span>
                            <span class="badge badge-light">Art Director</span>
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::User-->
                    <!--begin::User-->
                    <div class="d-flex align-items-center p-3 rounded-3 border-hover border border-dashed border-gray-300 cursor-pointer mb-1"
                        data-kt-search-element="customer">
                        <!--begin::Avatar-->
                        <div class="symbol symbol-35px symbol-circle me-5">
                            <span class="symbol-label bg-light-danger text-danger fw-semibold">
                                M </span>
                        </div>
                        <!--end::Avatar-->

                        <!--begin::Info-->
                        <div class="fw-semibold">
                            <span class="fs-6 text-gray-800 me-2">Melody Macy</span>
                            <span class="badge badge-light">Marketing Analytic</span>
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::User-->
                    <!--begin::User-->
                    <div class="d-flex align-items-center p-3 rounded-3 border-hover border border-dashed border-gray-300 cursor-pointer mb-1"
                        data-kt-search-element="customer">
                        <!--begin::Avatar-->
                        <div class="symbol symbol-35px symbol-circle me-5">
                            <img alt="Pic" src="/html/jet-html-pro/docs/assets/media/avatars/300-1.jpg">
                        </div>
                        <!--end::Avatar-->

                        <!--begin::Info-->
                        <div class="fw-semibold">
                            <span class="fs-6 text-gray-800 me-2">Max Smith</span>
                            <span class="badge badge-light">Software Enginer</span>
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::User-->
                    <!--begin::User-->
                    <div class="d-flex align-items-center p-3 rounded-3 border-hover border border-dashed border-gray-300 cursor-pointer mb-1"
                        data-kt-search-element="customer">
                        <!--begin::Avatar-->
                        <div class="symbol symbol-35px symbol-circle me-5">
                            <img alt="Pic" src="/html/jet-html-pro/docs/assets/media/avatars/300-5.jpg">
                        </div>
                        <!--end::Avatar-->

                        <!--begin::Info-->
                        <div class="fw-semibold">
                            <span class="fs-6 text-gray-800 me-2">Sean Bean</span>
                            <span class="badge badge-light">Web Developer</span>
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::User-->
                    <!--begin::User-->
                    <div class="d-flex align-items-center p-3 rounded-3 border-hover border border-dashed border-gray-300 cursor-pointer mb-1"
                        data-kt-search-element="customer">
                        <!--begin::Avatar-->
                        <div class="symbol symbol-35px symbol-circle me-5">
                            <img alt="Pic" src="/html/jet-html-pro/docs/assets/media/avatars/300-25.jpg">
                        </div>
                        <!--end::Avatar-->

                        <!--begin::Info-->
                        <div class="fw-semibold">
                            <span class="fs-6 text-gray-800 me-2">Brian Cox</span>
                            <span class="badge badge-light">UI/UX Designer</span>
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::User-->
                    <!--begin::User-->
                    <div class="d-flex align-items-center p-3 rounded-3 border-hover border border-dashed border-gray-300 cursor-pointer mb-1"
                        data-kt-search-element="customer">
                        <!--begin::Avatar-->
                        <div class="symbol symbol-35px symbol-circle me-5">
                            <span class="symbol-label bg-light-warning text-warning fw-semibold">
                                C </span>
                        </div>
                        <!--end::Avatar-->

                        <!--begin::Info-->
                        <div class="fw-semibold">
                            <span class="fs-6 text-gray-800 me-2">Mikaela Collins</span>
                            <span class="badge badge-light">Head Of Marketing</span>
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::User-->
                    <!--begin::User-->
                    <div class="d-flex align-items-center p-3 rounded-3 border-hover border border-dashed border-gray-300 cursor-pointer mb-1"
                        data-kt-search-element="customer">
                        <!--begin::Avatar-->
                        <div class="symbol symbol-35px symbol-circle me-5">
                            <img alt="Pic" src="/html/jet-html-pro/docs/assets/media/avatars/300-9.jpg">
                        </div>
                        <!--end::Avatar-->

                        <!--begin::Info-->
                        <div class="fw-semibold">
                            <span class="fs-6 text-gray-800 me-2">Francis Mitcham</span>
                            <span class="badge badge-light">Software Arcitect</span>
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::User-->
                    <!--begin::User-->
                    <div class="d-flex align-items-center p-3 rounded-3 border-hover border border-dashed border-gray-300 cursor-pointer mb-1"
                        data-kt-search-element="customer">
                        <!--begin::Avatar-->
                        <div class="symbol symbol-35px symbol-circle me-5">
                            <span class="symbol-label bg-light-danger text-danger fw-semibold">
                                O </span>
                        </div>
                        <!--end::Avatar-->

                        <!--begin::Info-->
                        <div class="fw-semibold">
                            <span class="fs-6 text-gray-800 me-2">Olivia Wild</span>
                            <span class="badge badge-light">System Admin</span>
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::User-->
                    <!--begin::User-->
                    <div class="d-flex align-items-center p-3 rounded-3 border-hover border border-dashed border-gray-300 cursor-pointer mb-1"
                        data-kt-search-element="customer">
                        <!--begin::Avatar-->
                        <div class="symbol symbol-35px symbol-circle me-5">
                            <span class="symbol-label bg-light-primary text-primary fw-semibold">
                                N </span>
                        </div>
                        <!--end::Avatar-->

                        <!--begin::Info-->
                        <div class="fw-semibold">
                            <span class="fs-6 text-gray-800 me-2">Neil Owen</span>
                            <span class="badge badge-light">Account Manager</span>
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::User-->
                    <!--begin::User-->
                    <div class="d-flex align-items-center p-3 rounded-3 border-hover border border-dashed border-gray-300 cursor-pointer mb-1"
                        data-kt-search-element="customer">
                        <!--begin::Avatar-->
                        <div class="symbol symbol-35px symbol-circle me-5">
                            <img alt="Pic" src="/html/jet-html-pro/docs/assets/media/avatars/300-23.jpg">
                        </div>
                        <!--end::Avatar-->

                        <!--begin::Info-->
                        <div class="fw-semibold">
                            <span class="fs-6 text-gray-800 me-2">Dan Wilson</span>
                            <span class="badge badge-light">Web Desinger</span>
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::User-->
                </div>
            </div>
            <!--end::Search results-->

            <!--begin::Empty search-->
            <div data-kt-search-element="empty" class="text-center d-none">
                <!--begin::Message-->
                <div class="fw-semibold py-0 mb-10">
                    <div class="text-gray-600 fs-3 mb-2">No users found</div>

                    <div class="text-gray-500 fs-6">Try to search by username, full name or email...</div>
                </div>
                <!--end::Message-->

                <!--begin::Illustration-->
                <div class="text-center px-4">
                    <img class="mw-100 mh-200px" alt="image"
                        src="/html/jet-html-pro/docs/assets/media/illustrations/sigma-1/2.png">
                </div>
                <!--end::Illustration-->
            </div>
            <!--end::Empty search-->
        </div>
        <!--end::Wrapper-->
    </div> --}}
    <!--end::Main wrapper-->
    <div class="seccion">
        @component('componentes.index')
            @slot('paises', $paises)
            @slot('countrys', $countrys)
            @slot('viajes', $viajes)
            @slot('recursos', $recursos)
            @slot('recursos_nombre_estado', $recursos_nombre_estado)
            @slot('itinerarios', $itinerarios)
        @endcomponent
    </div>

    {{-- Graficas --}}
    <div class="container-fluid">
        <div class="row g-4 mb-2 mt-1">
            <div class="col-xl-6">
                <div class="p-4 shadow-s cardh">
                    <span class="fs-4 fw-bolder ">Evolución de valor de carga crítica</span>
                    <div id="evaluadorDeCargas" style="height: 350px;"></div>
                    {{-- <img src="{{asset('img/Line_Chart.svg')}}" class="mt-3 w-100" alt=""> --}}
                </div>
            </div>
            <div class="col-xl-6">
                <div class="p-4 shadow-s cardh">
                    <span class="fs-4 fw-bolder ">Recursos Solicitados por Ciudad y Tipo</span>
                    {{-- <img src="{{asset('img/Lateral_Bar_Chart_02.svg')}}" class="mt-3 w-100" alt=""> --}}
                    <div id="recursosTipoCiudad" style="height: 350px;"></div>
                </div>
            </div>
        </div>
        <div class="row g-4 mb-3 mt-2">
            <div class="col-xl-6">
                <div class="p-4 shadow-s cardh">
                    <span class="fs-4 fw-bolder ">Seguimiento de Servicios</span>
                    {{-- <img src="{{asset('img/Vertical_Bar_Chart.svg')}}" class="mt-3 w-100" alt=""> --}}
                    <div id="seguimientoServicios" style="height: 350px;"></div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="p-4 shadow-s cardh">
                    <span class="fs-4 fw-bolder ">Carga Crítica por Mes</span>
                    {{-- <img src="{{asset('img/Bar_Chart.svg')}}" class=" mt-3 w-100" alt=""> --}}
                    <div id="cargasCriticasMes" style="height: 350px;"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ mix('js/home.js') }}"></script>
    <script src="{{asset('js/viajeros/viajeros.js')}}"></script>
    {{-- <script src="{{ asset('assets/js/custom/documentation/search/search.js') }}"></script> --}}
@endsection