@extends('admin.layouts.app')

@section('breadcrumb')
	<li class="breadcrumb-item"><a href="javascript:void(0);">Inicio</a></li>
    <!--<li class="breadcrumb-item active" aria-current="page"><span>Nombre Hotel</span></li>-->
@endsection

@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('css/widgets/modules-widgets.css')}}">
@endsection

@section('content')
    @if(Auth::user()->rol_id == 1)

        <br><br>
        <div class="row analytics">
            <div class="col">
                <div class="row widget-statistic">
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                        <div class="widget widget-one_hybrid widget-followers">
                            <div class="widget-heading">
                                <div class="w-icon">
                                    <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="building" class="svg-inline--fa fa-building fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"></path></svg>
                                </div>
                                <p class="w-value">{{$hoteles}}</p>
                                <h5 class="">Hoteles Publicados</h5>
                            </div>
                            <div class="widget-content">
                                <div class="w-chart">
                                    <div id="hybrid_followers"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                        <div class="widget widget-one_hybrid widget-referral">
                            <div class="widget-heading">
                                <div class="w-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                                </div>
                                <p class="w-value">{{$clientes}}</p>
                                <h5 class="">Usuarios Registrados</h5>
                            </div>
                            <div class="widget-content">
                                <div class="w-chart">
                                    <div id="hybrid_followers1"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                        <div class="widget widget-one_hybrid widget-engagement">
                            <div class="widget-heading">
                                <div class="w-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
                                </div>
                                <p class="w-value">{{$habitaciones}}</p>
                                <h5 class="">Habitaciones Publicadas</h5>
                            </div>
                            <div class="widget-content">
                                <div class="w-chart">
                                    <div id="hybrid_followers3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row sales layout-top-spacing">
            <div class="col-md-3">
                <div class="widget widget-chart-two">
                    <div class="widget-heading">
                        <h5 class="">Hoteles</h5>
                    </div>
                    <div class="widget-content">
                        <div id="chart-hoteles" class=""></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="widget widget-chart-two">
                    <div class="widget-heading">
                        <h5 class="">Hoteles por estrellas </h5>
                    </div>
                    <div class="widget-content">
                        <div id="chart-estrellas" class=""></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="widget-three">
                    <div class="widget-heading">
                        <h5 class="">Usuarios por roles</h5>
                    </div>
                    <div class="widget-content">

                        <div class="order-summary">

                            <div class="summary-list">
                                <div class="w-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                                </div>
                                <div class="w-summary-details">

                                    <div class="w-summary-info">
                                        <h6>Hotel</h6>
                                        <p class="summary-count">{{$roles[0]}}</p>
                                    </div>

                                    <div class="w-summary-stats">
                                        <div class="progress">
                                            <div class="progress-bar bg-gradient-secondary" role="progressbar" style="width: {{$porcentaje[0]}}%" aria-valuenow="0" aria-valuemin="{{$porcentaje[0]}}" aria-valuemax="100"></div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                            <!--
                            <div class="summary-list">
                                <div class="w-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                                </div>
                                <div class="w-summary-details">

                                    <div class="w-summary-info">
                                        <h6>Agencias de viajes</h6>
                                        <p class="summary-count">{{$roles[2]}}</p>
                                    </div>

                                    <div class="w-summary-stats">
                                        <div class="progress">
                                            <div class="progress-bar bg-gradient-success" role="progressbar" style="width: {{$porcentaje[2]}}%" aria-valuenow="0" aria-valuemin="{{$porcentaje[2]}}" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="summary-list">
                                <div class="w-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                                </div>
                                <div class="w-summary-details">

                                    <div class="w-summary-info">
                                        <h6>Guía de viajes</h6>
                                        <p class="summary-count">{{$roles[3]}}</p>
                                    </div>

                                    <div class="w-summary-stats">
                                        <div class="progress">
                                            <div class="progress-bar bg-gradient-primary" role="progressbar" style="width: {{$porcentaje[3]}}%" aria-valuenow="{{$porcentaje[3]}}" aria-valuemin="{{$porcentaje[3]}}" aria-valuemax="100"></div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                            -->

                            <div class="summary-list">
                                <div class="w-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                                </div>
                                <div class="w-summary-details">

                                    <div class="w-summary-info">
                                        <h6>Clientes</h6>
                                        <p class="summary-count">{{$roles[1]}}</p>
                                    </div>

                                    <div class="w-summary-stats">
                                        <div class="progress">
                                            <div class="progress-bar bg-gradient-warning" role="progressbar" style="width: {{$porcentaje[1]}}%" aria-valuenow="0" aria-valuemin="{{$porcentaje[1]}}" aria-valuemax="100"></div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    @else
        <center>
            <br>
            <img src="{{asset('img/guatehoteles.png')}}" style="height: 340px;">
            <h1>Bienvenido a GuateHoteles</h1>
        </center>
    @endif
@endsection

@section('script')
	<script src="{{asset('js/widgets/modules-widgets.js')}}"></script>

    <script type="text/javascript">
        var options = {
                chart: {
                    type: 'donut',
                    width: 380
                },
                colors: ['#fdb716', '#28b6e9'],
                dataLabels: {
                  enabled: false
                },
                legend: {
                    position: 'bottom',
                    horizontalAlign: 'center',
                    fontSize: '14px',
                    markers: {
                      width: 10,
                      height: 10,
                    },
                    itemMargin: {
                      horizontal: 0,
                      vertical: 8
                    }
                },
                plotOptions: {
                  pie: {
                    donut: {
                      size: '65%',
                      background: 'transparent',
                      labels: {
                        show: true,
                        name: {
                          show: true,
                          fontSize: '29px',
                          fontFamily: 'Nunito, sans-serif',
                          color: undefined,
                          offsetY: -10
                        },
                        value: {
                          show: true,
                          fontSize: '26px',
                          fontFamily: 'Nunito, sans-serif',
                          color: '20',
                          offsetY: 16,
                          formatter: function (val) {
                            return val
                          }
                        },
                        total: {
                          show: true,
                          showAlways: true,
                          label: 'Total',
                          color: '#888ea8',
                          formatter: function (w) {
                            return w.globals.seriesTotals.reduce( function(a, b) {
                              return a + b
                            }, 0)
                          }
                        }
                      }
                    }
                  }
                },
                stroke: {
                  show: true,
                  width: 25,
                },
                series: [,],
                labels: ['Hoteles sin reclamar', 'Hoteles reclamados'],
                responsive: [{
                    breakpoint: 1599,
                    options: {
                        chart: {
                            width: '350px',
                            height: '400px'
                        },
                        legend: {
                            position: 'bottom'
                        }
                    },

                    breakpoint: 1439,
                    options: {
                        chart: {
                            width: '250px',
                            height: '390px'
                        },
                        legend: {
                            position: 'bottom'
                        },
                        plotOptions: {
                          pie: {
                            donut: {
                              size: '65%',
                            }
                          }
                        }
                    },
                }]
        }

        var chart = new ApexCharts(
            document.querySelector("#chart-hoteles"),
            options
        );

        chart.render();


        var options1 = {
                chart: {
                    type: 'donut',
                    width: 380
                },
                colors: ['#20ad75','#2a61e5','#ed737a','#fdb716', '#f8733c','#b224ef'],
                dataLabels: {
                  enabled: false
                },
                legend: {
                    position: 'bottom',
                    horizontalAlign: 'center',
                    fontSize: '14px',
                    markers: {
                      width: 10,
                      height: 10,
                    },
                    itemMargin: {
                      horizontal: 0,
                      vertical: 8
                    }
                },
                plotOptions: {
                  pie: {
                    donut: {
                      size: '80%',
                      background: 'transparent',
                      labels: {
                        show: true,
                        name: {
                          show: true,
                          fontSize: '29px',
                          fontFamily: 'Nunito, sans-serif',
                          color: undefined,
                          offsetY: -10
                        },
                        value: {
                          show: true,
                          fontSize: '26px',
                          fontFamily: 'Nunito, sans-serif',
                          color: '20',
                          offsetY: 16,
                          formatter: function (val) {
                            return val
                          }
                        },
                        total: {
                          show: true,
                          showAlways: true,
                          label: 'Total',
                          color: '#888ea8',
                          formatter: function (w) {
                            return w.globals.seriesTotals.reduce( function(a, b) {
                              return a + b
                            }, 0)
                          }
                        }
                      }
                    }
                  }
                },
                stroke: {
                  show: true,
                  width: 25,
                },
                series: [,,,,,],
                labels: ['0 estrellas', '1 estrella','2 estrellas','3 estrellas','4 estrellas','5 estrellas'],
                responsive: [{
                    breakpoint: 1599,
                    options: {
                        chart: {
                            width: '350px',
                            height: '400px'
                        },
                        legend: {
                            position: 'bottom'
                        }
                    },

                    breakpoint: 1439,
                    options: {
                        chart: {
                            width: '250px',
                            height: '390px'
                        },
                        legend: {
                            position: 'bottom'
                        },
                        plotOptions: {
                          pie: {
                            donut: {
                              size: '60%',
                            }
                          }
                        }
                    },
                }]
        }

        var chart = new ApexCharts(
            document.querySelector("#chart-estrellas"),
            options1
        );

        chart.render();

    </script>
@endsection