@extends('layouts.app')

@section('content')
<!-- end sidebar menu -->
<!-- start page content -->
<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-bar">
            <div class="page-title-breadcrumb">
                <div class=" pull-left">
                    <div class="page-title">Home</div>
                  {{--   @dump(auth()->user()->id) --}}
                </div>
                <ol class="breadcrumb page-breadcrumb pull-right">
                    <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="index.html">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i>
                    </li>
                    <li class="active">home</li>
                </ol>
            </div>
        </div>
       <!-- start widget -->
          <div class="row">
            <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="card card-box">
                     <div class="card-head">
                         <header>Ventas</header>
                     </div>
                     <div class="card-body ">
                        <div class="row">
                            <div class="col-sm-4 col-4 m-b-10">
                                <span class="text-muted">Semana</span>
                                <h5 class="m-b-0">5,286</h5>
                                <span><i class="material-icons text-success">trending_up</i>
                                    +28%</span>
                            </div>
                            <div class="col-sm-4 col-4 m-b-10">
                                <span class="text-muted">Mes</span>
                                <h5 class="m-b-0">421</h5>
                                <span><i class="material-icons text-danger">trending_down</i>
                                    -9%</span>
                            </div>
                            <div class="col-sm-4 col-4 m-b-10">
                                <span class="text-muted">Promedio</span>
                                <h5 class="m-b-0">1081</h5>
                                <span><i class="material-icons text-success">trending_up</i>
                                    +7%</span>
                            </div>
                        </div>
                        <div id="sparkline28"></div>
                    </div>
                 </div>
            </div>


            <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="card card-box">
                     <div class="card-head">
                         <header>Costos</header>
                     </div>
                     <div class="card-body ">
                        <div class="row">
                            <div class="col-sm-4 col-4 m-b-10">
                                <span class="text-muted">Semana</span>
                                <h5 class="m-b-0">1,389</h5>
                                <span><i class="material-icons text-success">trending_up</i>
                                    +21%</span>
                            </div>
                            <div class="col-sm-4 col-4 m-b-10">
                                <span class="text-muted">Mes</span>
                                <h5 class="m-b-0">591</h5>
                                <span><i class="material-icons text-danger">trending_down</i>
                                    -6.3%</span>
                            </div>
                            <div class="col-sm-4 col-4 m-b-10">
                                <span class="text-muted">Promedio</span>
                                <h5 class="m-b-0">781</h5>
                                <span><i class="material-icons text-success">trending_up</i>
                                    +6%</span>
                            </div>
                        </div>
                        <div id="sparkline29"></div>
                     </div>
                 </div>
            </div>
        </div>
        <!-- end widget -->
        <div class="row">
            <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                <div class="card card-box">
                      <div class="card-head">
                          <header>COSTOS ACADEMIA</header>
                          <div class="tools">
                            <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                            <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                            <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                         </div>
                      </div>
                      <div class="card-body no-padding height-9">
                        <div class="row">
                            <canvas id="bar-chart"></canvas>
                        </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                    <div class="card card-box">
                          <div class="card-head">
                              <header>REPORTE ANUAL ACADEMIA</header>
                              <div class="tools">
                                <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                                <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                                <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                             </div>
                          </div>
                          <div class="card-body no-padding height-9">
                            <div class="row">
                                <canvas id="canvas1"></canvas>
                            </div>
                        </div>
                      </div>
                </div>
        </div>
        <!-- start admited patient list -->
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="card  card-box">
                    <div class="card-head">
                        <header>LISTA DE ESTUDIANTES ADMITIDOS</header>
                        <div class="tools">
                            <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                            <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                            <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                        </div>
                    </div>
                    <div class="card-body ">
                      <div class="table-wrap">
                            <div class="table-responsive">
                                <table class="table display product-overview mb-30" id="support_table">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Nombre</th>
                                            <th>Usuario</th>
                                            <th>Ingreso</th>
                                            <!-- <th>Enfermedades</th>
                                            <th>Habitación</th> -->
                                            <th>Editar</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Jens Brincker</td>
                                            <td>Dr.Kenny Josh</td>
                                            <td>27/05/2016</td>
                                            <!-- <td>
                                                <span class="label label-sm label-success">Influenza</span>
                                            </td>
                                            <td>101</td> -->
                                            <td>
                                                <a href="edit_patient.html" class="btn btn-tbl-edit btn-xs">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                                <button class="btn btn-tbl-delete btn-xs">
                                                    <i class="fa fa-trash-o "></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Mark Hay</td>
                                            <td>Dr. Mark</td>
                                            <td>26/05/2017</td>
                                            <!-- <td>
                                                <span class="label label-sm label-warning"> Cholera </span>
                                            </td>
                                            <td>105</td> -->
                                            <td>
                                                <a href="edit_patient.html" class="btn btn-tbl-edit btn-xs">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                                <button class="btn btn-tbl-delete btn-xs">
                                                    <i class="fa fa-trash-o "></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Anthony Davie</td>
                                            <td>Dr.Cinnabar</td>
                                            <td>21/05/2016</td>
                                          <!--   <td>
                                                <span class="label label-sm label-success ">Amoebiasis</span>
                                            </td>
                                            <td>106</td> -->
                                            <td>
                                                <a href="edit_patient.html" class="btn btn-tbl-edit btn-xs">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                                <button class="btn btn-tbl-delete btn-xs">
                                                    <i class="fa fa-trash-o "></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>David Perry</td>
                                            <td>Dr.Felix </td>
                                            <td>20/04/2016</td>
                                            <!-- <td>
                                                <span class="label label-sm label-danger">Jaundice</span>
                                            </td>
                                            <td>105</td> -->
                                            <td>
                                                <a href="edit_patient.html" class="btn btn-tbl-edit btn-xs">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                                <button class="btn btn-tbl-delete btn-xs">
                                                    <i class="fa fa-trash-o "></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>Anthony Davie</td>
                                            <td>Dr.Beryl</td>
                                            <td>24/05/2016</td>
                                            <!-- <td>
                                                <span class="label label-sm label-success ">Leptospirosis</span>
                                            </td>
                                            <td>102</td> -->
                                            <td>
                                                <a href="edit_patient.html" class="btn btn-tbl-edit btn-xs">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                                <button class="btn btn-tbl-delete btn-xs">
                                                    <i class="fa fa-trash-o "></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>6</td>
                                            <td>Alan Gilchrist</td>
                                            <td>Dr.Joshep</td>
                                            <td>22/05/2016</td>
                                            <!-- <td>
                                                <span class="label label-sm label-warning ">Hepatitis</span>
                                            </td>
                                            <td>103</td> -->
                                            <td>
                                                <a href="edit_patient.html" class="btn btn-tbl-edit btn-xs">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                                <button class="btn btn-tbl-delete btn-xs">
                                                    <i class="fa fa-trash-o "></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>7</td>
                                            <td>Mark Hay</td>
                                            <td>Dr.Jayesh</td>
                                            <td>18/06/2016</td>
                                            <!-- <td>
                                                <span class="label label-sm label-success ">Typhoid</span>
                                            </td>
                                            <td>107</td> -->
                                            <td>
                                                <a href="edit_patient.html" class="btn btn-tbl-edit btn-xs">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                                <button class="btn btn-tbl-delete btn-xs">
                                                    <i class="fa fa-trash-o "></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>8</td>
                                            <td>Sue Woodger</td>
                                            <td>Dr.Sharma</td>
                                            <td>17/05/2016</td>
                                            <!-- <td>
                                                <span class="label label-sm label-danger">Malaria</span>
                                            </td>
                                            <td>108</td> -->
                                            <td>
                                                <a href="edit_patient.html" class="btn btn-tbl-edit btn-xs">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                                <button class="btn btn-tbl-delete btn-xs">
                                                    <i class="fa fa-trash-o "></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end admited patient list -->
        <div class="row">
            <div class="col-lg-4 col-md-12 col-sm-12 col-12">
                <div class="card  card-box">
                    <div class="card-head">
                        <header>Notificaciones</header>
                        <div class="tools">
                            <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                            <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                            <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                        </div>
                    </div>
                    <div class="card-body no-padding height-9">
                        <div class="row">
                            <div class="noti-information notification-menu">
                                <div class="notification-list mail-list not-list small-slimscroll-style">
                                    <a href="javascript:;" class="single-mail"> <span class="icon bg-b-green box-shadow-1"> <i class="fa fa-user-o"></i>
                                    </span> <span class="text-purple">Abhay Jani</span> Reservé un auto
                                        <span class="notificationtime">
                                            <small>Justo ahora</small>
                                        </span>
                                    </a>
                                    <a href="javascript:;" class="single-mail"> <span class="icon bg-b-orange box-shadow-1"> <i class="fa fa-envelope-o"></i>
                                    </span> <span class="text-purple">John Doe</span> Give review for ride
                                        <span class="notificationtime">
                                            <small>Justo ahora</small>
                                        </span>
                                    </a>
                                    <a href="javascript:;" class="single-mail"> <span class="icon bg-b-purple box-shadow-1"> <i class="fa fa-check-square-o"></i>
                                    </span> Mensaje de éxito
                                        <span class="notificationtime">
                                            <small>Hace 2 días</small>
                                        </span>
                                    </a>
                                    <a href="javascript:;" class="single-mail"> <span class="icon bg-b-black box-shadow-1"> <i class="fa fa-warning"></i>
                                    </span>Advertencia Sobrecarga en Base de Datos
                                        <span class="notificationtime">
                                            <small>Hace 1 semana</small>
                                        </span>
                                    </a>
                                    <a href="javascript:;" class="single-mail"> <span class="icon bg-b-pink box-shadow-1"> <i class="fa fa-user-o"></i>
                                    </span> <span class="text-purple">Abhay Jani</span> Te agregué como amigo
                                        <span class="notificationtime">
                                            <small>Justo ahora</small>
                                        </span>
                                    </a>
                                    <a href="javascript:;" class="single-mail"> <span class="icon bg-b-yellow box-shadow-1"> <i class="fa fa-envelope-o"></i>
                                    </span> <span class="text-purple">John Doe</span> enviarte un correo
                                        <span class="notificationtime">
                                            <small>Justo ahora</small>
                                        </span>
                                    </a>
                                    <a href="javascript:;" class="single-mail"> <span class="icon bg-success box-shadow-1"> <i class="fa fa-check-square-o"></i>
                                    </span> Mensaje de éxito
                                        <span class="notificationtime">
                                            <small> Hace 2 días</small>
                                        </span>
                                    </a>
                                    <a href="javascript:;" class="single-mail"> <span class="icon bg-warning box-shadow-1"> <i class="fa fa-warning"></i>
                                    </span> <strong>Advertencia Sobrecarga en Base de Datos</strong>
                                        <span class="notificationtime">
                                            <small>Hace 1 semana</small>
                                        </span>
                                    </a>
                                    <a href="javascript:;" class="single-mail"> <span class="icon bg-danger box-shadow-1"> <i class="fa fa-times"></i>
                                    </span> <strong>Server Error!</strong>
                                        <span class="notificationtime">
                                            <small>Hace 10 días</small>
                                        </span>
                                    </a>
                                </div>
                                <div class="full-width text-center p-t-10" >
                                    <button type="button" class="btn purple btn-outline btn-circle margin-0">Todo</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12 col-sm-12 col-12">
                <div class="card  card-box">
                    <div class="card-head">
                        <header>CHAT</header>
                        <button id = "chatlist"
                           class = "mdl-button mdl-js-button mdl-button--icon pull-right"
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                           data-mdl-for = "chatlist">
                           <li class = "mdl-menu__item"><i class="material-icons">assistant_photo</i>Action</li>
                           <li class = "mdl-menu__item"><i class="material-icons">print</i>Another action</li>
                           <li class = "mdl-menu__item"><i class="material-icons">favorite</i>Something else here</li>
                        </ul>
                    </div>
                    <div class="card-body no-padding height-9">
                        <div class="row">
                            <ul class="chat nice-chat small-slimscroll-style">
                                <li class="in"><img src="../assets/img/user/user1.jpg" class="avatar" alt="">
                                    <div class="message">
                                        <span class="arrow"></span> <a class="name" href="#">Jone
                                            Doe</a> <span class="datetime">Marzo 12, 2014 6:12</span> <span class="body"> Buenos días</span>
                                    </div>
                                </li>
                                <li class="out"><img src="" class="avatar" alt="">
                                    <div class="message">
                                        <span class="arrow"></span> <a class="name" href="#">Kiran
                                            Patel</a> <span class="datetime">Marzo 12, 2014 6:13</span> <span class="body"> Buenos días, cual es su consulta? </span>
                                    </div>
                                </li>
                                <li class="in"><img src="../assets/img/user/user1.jpg" class="avatar" alt="">
                                    <div class="message">
                                        <span class="arrow"></span> <a class="name" href="#">Jone
                                            Doe</a> <span class="datetime">Marzo 12, 2014 6:12</span> <span class="body"> Doctor presento un dolor abdominal, en la parte inferior izquierda. </span>
                                    </div>
                                </li>
                                <li class="out"><img src="bootstrap_sunrey/assets/img/julio.jpeg" class="avatar" alt="">
                                    <div class="message">
                                        <span class="arrow"></span> <a class="name" href="#">Kiran
                                            Patel</a> <span class="datetime">Marzo 12, 2014 6:13</span> <span class="body"> Disculpe, ha presentado alguno otro sintoma?.</span>
                                    </div>
                                </li>
                                <li class="in"><img src="../assets/img/user/user1.jpg" class="avatar" alt="">
                                    <div class="message">
                                        <span class="arrow"></span> <a class="name" href="#">Jone
                                            Doe</a> <span class="datetime">Marzo 12, 2014 6:12</span> <span class="body"> Bueno he tenido mareos y nauseas; a parte del dolor abdominal.</span>
                                    </div>
                                </li>
                                <li class="out"><img src="../assets/img/user/user1.jpg" class="avatar" alt="">
                                    <div class="message">
                                        <span class="arrow"></span> <a class="name" href="#">Kiran
                                            Patel</a> <span class="datetime">Marzo 12, 2014 6:13</span> <span class="body"> Le recomiendo que se presente a la menor brevedad, en algunas de nuestras sucursales; para que podamos ver su caso</span>
                                    </div>
                                </li>
                            </ul>
                            <div class="box-footer chat-box-submit">
                            <form action="#" method="post">
                              <div class="input-group">
                                <input type="text" name="message" placeholder="Mensaje" class="form-control">
                                <span class="input-group-btn">
                                <button type="submit" class="btn btn-warning btn-flat"><i class="fa fa-arrow-right"></i></button>
                                </span> </div>
                            </form>
                       </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12 col-sm-12 col-12">
                <div class="white-box border-gray">
                    <div class="user-bg">
                        <div class="overlay-box">
                            <div class="user-content">
                                <a href="javascript:void(0)"><img alt="img" class="thumb-lg img-circle" src="../assets/img/dp.jpg"></a>
                                <h4 class="text-white">Kiran Patel</h4>
                                <h5 class="text-white">info@kiranpatel.com</h5> </div>
                        </div>
                    </div>
                    <div class="user-btm-box">
                        <div class="row">
                            <div class="col-md-4 col-sm-4 text-center">
                                <p class="text-purple"><i class="fa fa-facebook"></i></p>
                                <h1>467</h1> </div>
                            <div class="col-md-4 col-sm-4 text-center">
                                <p class="text-success"><i class="fa fa-twitter"></i></p>
                                <h1>234</h1> </div>
                            <div class="col-md-4 col-sm-4 text-center">
                                <p class="text-danger"><i class="fa fa-instagram"></i></p>
                                <h1>686</h1> </div>
                        </div>
                        <div class="col-md-12  m-b-0 text-center">
                            <div class="stat-item">
                                <h6>Contacto</h6> <b><i class="ti-mobile"></i> 123-456-7890</b></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end page content -->
<!-- start chat sidebar -->
<div class="chat-sidebar-container" data-close-on-body-click="false">
    <div class="chat-sidebar">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a href="#quick_sidebar_tab_1" class="nav-link active tab-icon"  data-toggle="tab">Theme</a>
            </li>
            <li class="nav-item">
                <a href="#quick_sidebar_tab_2" class="nav-link tab-icon"  data-toggle="tab">Settings</a>
            </li>
        </ul>
        <div class="tab-content">
            <!-- Start Color Theme Sidebar -->
            <div class="tab-pane chat-sidebar-settings in show active animated shake" role="tabpanel" id="quick_sidebar_tab_1">
                <div class="chat-sidebar-slimscroll-style">
                    <div class="theme-light-dark">
                        <h6>Sidebar Theme</h6>
                        <button type="button" data-theme="white" class="btn lightColor btn-outline btn-circle m-b-10 theme-button">Light Sidebar</button>
                        <button type="button" data-theme="dark" class="btn dark btn-outline btn-circle m-b-10 theme-button">Dark Sidebar</button>
                    </div>
                    <div class="theme-light-dark">
                        <h6>Sidebar Color</h6>
                        <ul class="list-unstyled">
                            <li class="complete">
                                <div class="theme-color sidebar-theme">
                                    <a href="#" data-theme="white"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="dark"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="blue"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="indigo"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="cyan"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="green"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="red"><span class="head"></span><span class="cont"></span></a>
                                </div>
                            </li>
                        </ul>
                        <h6>Header Brand color</h6>
                        <ul class="list-unstyled">
                            <li class="theme-option">
                                <div class="theme-color logo-theme">
                                    <a href="#" data-theme="logo-white"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="logo-dark"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="logo-blue"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="logo-indigo"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="logo-cyan"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="logo-green"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="logo-red"><span class="head"></span><span class="cont"></span></a>
                                </div>
                            </li>
                        </ul>
                        <h6>Header color</h6>
                        <ul class="list-unstyled">
                            <li class="theme-option">
                                <div class="theme-color header-theme">
                                    <a href="#" data-theme="header-white"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="header-dark"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="header-blue"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="header-indigo"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="header-cyan"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="header-green"><span class="head"></span><span class="cont"></span></a>
                                    <a href="#" data-theme="header-red"><span class="head"></span><span class="cont"></span></a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- End Color Theme Sidebar -->
            <!-- Start Setting Panel -->
            <div class="tab-pane chat-sidebar-settings" role="tabpanel" id="quick_sidebar_tab_2">
               <div class="chat-sidebar-settings-list chat-sidebar-slimscroll-style">
                    <div class="chat-header"><h5 class="list-heading">Layout Settings</h5></div>
                    <div class="chatpane inner-content ">
                        <div class="settings-list">
                            <div class="setting-item">
                                <div class="setting-text">Sidebar Position</div>
                                <div class="setting-set">
                                   <select class="sidebar-pos-option form-control input-inline input-sm input-small ">
                                        <option value="left" selected="selected">Left</option>
                                        <option value="right">Right</option>
                                    </select>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Header</div>
                                <div class="setting-set">
                                   <select class="page-header-option form-control input-inline input-sm input-small ">
                                        <option value="fixed" selected="selected">Fixed</option>
                                        <option value="default">Default</option>
                                    </select>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Sidebar Menu </div>
                                <div class="setting-set">
                                   <select class="sidebar-menu-option form-control input-inline input-sm input-small ">
                                        <option value="accordion" selected="selected">Accordion</option>
                                        <option value="hover">Hover</option>
                                    </select>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Footer</div>
                                <div class="setting-set">
                                   <select class="page-footer-option form-control input-inline input-sm input-small ">
                                        <option value="fixed">Fixed</option>
                                        <option value="default" selected="selected">Default</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="chat-header"><h5 class="list-heading">Account Settings</h5></div>
                        <div class="settings-list">
                            <div class="setting-item">
                                <div class="setting-text">Notificaciones</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                          for = "switch-1">
                                          <input type = "checkbox" id = "switch-1"
                                             class = "mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Show Online</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                          for = "switch-7">
                                          <input type = "checkbox" id = "switch-7"
                                             class = "mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Status</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                          for = "switch-2">
                                          <input type = "checkbox" id = "switch-2"
                                             class = "mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">2 Steps Verification</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                          for = "switch-3">
                                          <input type = "checkbox" id = "switch-3"
                                             class = "mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chat-header"><h5 class="list-heading">General Settings</h5></div>
                        <div class="settings-list">
                            <div class="setting-item">
                                <div class="setting-text">Location</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                          for = "switch-4">
                                          <input type = "checkbox" id = "switch-4"
                                             class = "mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Save Histry</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                          for = "switch-5">
                                          <input type = "checkbox" id = "switch-5"
                                             class = "mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Auto Updates</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                          for = "switch-6">
                                          <input type = "checkbox" id = "switch-6"
                                             class = "mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection