@extends('users.layout.header_footer')
@section('content')
    <title>Dashboard</title>
    <link href="{!! asset('theme/user_theme/css/sb-admin-2.min.css') !!}" rel="stylesheet">
    <link href="{!! asset('theme/user_theme/css/main.css') !!}" rel="stylesheet">
        
  


<style>
  .fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
  }

  @keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }

    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  @-webkit-keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }

    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  .modal-dialog {
    /* margin: 0; */
    margin: -10px;
    float: right;
    width: 300px;
  }

  .animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .modal-header {
    border-radius: 0;
    background-color: #f7f7f7;
    border-color: #d4d2d2;
    align-items: center;
    padding: 1.2rem;
  }

  .modal-content {
    border-radius: 0;
    border: 0;
    -webkit-box-shadow: -12px 0 38px -14px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: -12px 0 38px -14px rgba(0, 0, 0, 0.25);
    box-shadow: -12px 0 6px -14px rgba(0, 0, 0, 0.25);
    background-clip: padding-box;
    border-color: #d7d7d7;
  }

  .modal-backdrop {
    background-color: transparent;
  }

  .modal-button-container {
    margin: 0 auto;
    width: 90%;
    max-width: 500px;
  }

  .btn {
    border-radius: 0;
  }

  .autosidemodalarea {
    float: right;
  }

  h5.redsback {
    background: #ee4049;
    color: white;
    text-align: center;
    font-size: 11px;
    padding: 2px;
    border-radius: 5px;
    /* margin-bottom: -5px; */
  }

  h6.greensback {
    background: #8dbd5c;
    color: white;
    text-align: center;
    font-size: 10px;
    padding: 2px;
    border-radius: 5px;
  }

  .mobbord {
    border: 1px solid #d7d7d7;
    width: inherit;
  }

  .col-sm-12.mobbordarea {
    display: flex;
    text-align: center;
  }

  .mobinp {
    width: 115%;
    border: 1px solid #d7d7d7;
    border-radius: 1px;
  }

  .entnumb {
    width: 100%;
    border: 1px solid #d7d7d7;
    border-radius: 1px;
    margin-top: 11px;
    padding: 12px;
  }

  .mobbord span {
    color: #8dbd5c;
    font-size: 12px;
  }

  .mobbord {
    font-size: 18px;
    padding-top: 2px;
  }

  .calldialclick {
    background: #8dbd5c;
    border-color: #8dbd5c;
    width: 107%;
  }

  .backdialclick {
    float: right;
    border-color: #d7d7d7;
    background: transparent;
    color: #ababab;
    width: 50px;
  }

  .sidemodallastcli {
    margin-top: 10px;
  }

  .modalopclick {
    background: #515252;
    color: white !important;
    border: 0px solid;
    /* margin-top: 125%; */
    padding: 0px 7px;
  }

  .modalopclick a {
    color: white;
    font-size: 14px;
    font-weight: 800;
    background: #515252;
    border: none;
    padding-top: 0px;
  }

  .mobbord:hover {
    background: #00000008;
    cursor: pointer;
  }

  .calldialclick:hover {
    background: #8dbd5cc2;
    border-color: #8dbd5cc2;
  }

  .backdialclick:hover {
    background: #8dbd5c;
    border-color: #8dbd5c;
    color: white;
  }

  .mobilmodabod {
    margin-top: 168px;
  }

  .crossmobile {
    float: left;
    background: #383838;
    height: 25px;
    width: 22px;
    color: #ffffff !important;
  }
  .daboxdata i {
    color: white;
    font-size: 30px;
  }
</style>

    <div id="content">
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
            <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                <i class="fa fa-bars"></i>
            </button>

            <div class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
                <h1 class="pegheading">Dashboard</h1>
            </div>
        </nav>

        <div class="container-fluid">
            <div class="d-sm-flex align-items-center justify-content-between mb-4">            
                <div class="maintpsmall"></div>               
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <form>
                        <div class="row">
                            <div class="col-sm-8 fghfle">
                                <form action="/action_page.php">
                                    <label for="birthday">KPI Filters:</label>
                                    <input type="date" id="birthday" name="birthday" class="fgh"
                                        placeholder="last7days">
                                    <select class="form-control fgh" id="exampleFormControlSelect1">
                                        <option>Location</option>
                                        <option>Location 1</option>
                                        <option>Location 2</option>
                                        <option>Location 3</option>
                                    </select>
                                </form>
                            </div>
                            <div class="col-sm-4">
                                <button type="button" class="btn btn-primary dite"><i class="fa fa-pencil"
                                        aria-hidden="true"></i>
                                    Edit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="row carcol">
                <div class="col-xl-4 col-md-4 mb-4">
                    <div class="card shadow h-100 py-2 yellowcard">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center daboxdata">
                                <div class="col-auto">
                                  <i class="fa fa-link" aria-hidden="true"></i>
                                </div>
                                <div class="col mr-2">
                                    <div class="h3 mt-3 font-weight-bold text-white -800">
                                        Total Assets
                                    </div>
                                    <div class="h3 mt-3 font-weight-bold text-white -800">
                                        Checked out
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-4 mb-4">
                    <div class="card shadow h-100 py-2 greencard">
                        <a href="#" class="dashlnk">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center daboxdata">
                                    <div class="col-auto">
                                      <i class="fa fa-envelope" aria-hidden="true"></i>
                                    </div>
                                    <div class="col mr-2">
                                        <div class="h3 mt-3 font-weight-bold text-white -800">
                                            Assets In 
                                        </div>
                                        <div class="h3 mt-3 font-weight-bold text-white -800">
                                            Maintenance
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-xl-4 col-md-4 mb-4">
                    <div class="card shadow h-100 py-2 bluecard">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center daboxdata">
                                <div class="col-auto">
                                  <i class="fa fa-tasks" aria-hidden="true"></i>
                                </div>
                                <div class="col mr-2">
                                    <div class="h3 mt-3 font-weight-bold text-white -800">
                                        Assets Reservation
                                    </div>
                                    <div class="h3 mt-3 font-weight-bold text-white -800">
                                        Starting
                                    </div>
                                    <div class="h3 mt-3 font-weight-bold text-white -800">
                                        Today
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row middash">
                <div class="col-sm-4">
                    <div class="quickdrup">
                        <h3>Quick Actions</h3>

                        <div class="form-group">
                            <select class="form-control qusel" id="exampleFormControlSelect1">
                                <option>Add Asset (To check-IN/OUT)</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <select class="form-control qusel" id="exampleFormControlSelect1">
                                <option>Add Inventory (Consumbles)</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <select class="form-control qusel" id="exampleFormControlSelect1">
                                <option>Add Location</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <select class="form-control qusel" id="exampleFormControlSelect1">
                                <option>Add Member</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="valu">
                        {{-- <h5 class="lute">Assets Value</h5> --}}
                        <canvas id="myChart" class="dtar" style="width:100%;max-width:100%;height:335px"></canvas>
                    </div>
                </div>
            </div>

            <div class="row locatinarea">
                <div class="col-sm-4">
                    <div class="scrolarea">
                        <h5>Locations:</h5>

                        <div class="puyt">
                            <div class="prtone">
                                <h4>Dump Truck</h4>
                                <p>#1</p>
                                <h6>Steinway Construction Site</h6>
                            </div>
                            <div class="prtone">
                                <h4>Dump Truck</h4>
                                <p>#1</p>
                                <h6>Steinway Construction Site</h6>
                            </div>
                            <div class="prtone">
                                <h4>Dump Truck</h4>
                                <p>#1</p>
                                <h6>Steinway Construction Site</h6>
                            </div>
                            <div class="prtone">
                                <h4>Dump Truck</h4>
                                <p>#1</p>
                                <h6>Steinway Construction Site</h6>
                            </div>
                            <div class="prtone">
                                <h4>Dump Truck</h4>
                                <p>#1</p>
                                <h6>Steinway Construction Site</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="mupare">
                        <iframe class="mymap"
                            src="https://www.google.com/maps/embed?pb=!1m26!1m12!1m3!1d3345.712307257376!2d-96.89063833449865!3d33.01135952930609!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m11!3e6!4m3!3m2!1d33.0115239!2d-96.8884185!4m5!1s0x864c25b073155697%3A0xe0cc7600d38f7c5c!2s1846%20E%20Rosemeade%20Pkwy%20%23117%2C%20Carrollton%2C%20TX%2075007!3m2!1d33.0111907!2d-96.8883966!5e0!3m2!1sen!2s!4v1603357904648!5m2!1sen!2s"
                            class="mapcss" width="500" height="300" frameborder="0" style="border:0;"
                            allowfullscreen="" aria-hidden="false" tabindex="0">
                        </iframe>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="tabonweback">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card shadow mb-4">
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-bordered" id="dataTable" width="100%"
                                                cellspacing="0">

                                                <tbody>
                                                    <h5 class="lute">Latest Events</h5>
                                                    <tr class="tablismall">
                                                        <td class="bnumm">
                                                            <button type="button"
                                                                class="btn btn-primary grye">Document</button>
                                                        </td>
                                                        <td>
                                                            <h6>Uploaded</h6>
                                                        </td>
                                                        <td>
                                                            <h6>Jul 22,2022</h6>
                                                            <p>Less then a min..</p>
                                                        </td>
                                                        <td>
                                                            <div class="mifsbox">
                                                                <div class="mifs">
                                                                    <i class="fa fa-users" aria-hidden="true"></i>
                                                                </div>
                                                                <div class="mifs">
                                                                    <h6>Ali Mian</h6>
                                                                    <p>Administrator</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="mifsbox">
                                                                <div class="mifs">
                                                                    <i class="fa fa-users" aria-hidden="true"></i>
                                                                </div>
                                                                <div class="mifs">
                                                                    <p>Administrator</p>
                                                                    <h6>Ali Mian</h6>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <p>436383</p>
                                                            <p>22-7-2022</p>
                                                        </td>
                                                    </tr>
                                                    <tr class="tablismall">
                                                        <td class="bnumm">
                                                            <button type="button"
                                                                class="btn btn-primary grye">Document</button>
                                                        </td>
                                                        <td>
                                                            <h6>Uploaded</h6>
                                                        </td>
                                                        <td>
                                                            <h6>Jul 22,2022</h6>
                                                            <p>Less then a min..</p>
                                                        </td>
                                                        <td>
                                                            <div class="mifsbox">
                                                                <div class="mifs">
                                                                    <i class="fa fa-users" aria-hidden="true"></i>
                                                                </div>
                                                                <div class="mifs">
                                                                    <h6>Ali Mian</h6>
                                                                    <p>Administrator</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="mifsbox">
                                                                <div class="mifs">
                                                                    <i class="fa fa-users" aria-hidden="true"></i>
                                                                </div>
                                                                <div class="mifs">
                                                                    <p>Administrator</p>
                                                                    <h6>Ali Mian</h6>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <p>436383</p>
                                                            <p>22-7-2022</p>
                                                        </td>
                                                    </tr>
                                                    <tr class="tablismall">
                                                        <td class="bnumm">
                                                            <button type="button"
                                                                class="btn btn-primary gryed">Document</button>
                                                        </td>
                                                        <td>
                                                            <h6>Uploaded</h6>
                                                        </td>
                                                        <td>
                                                            <h6>Jul 22,2022</h6>
                                                            <p>Less then a min..</p>
                                                        </td>
                                                        <td>
                                                            <div class="mifsbox">
                                                                <div class="mifs">
                                                                    <i class="fa fa-users" aria-hidden="true"></i>
                                                                </div>
                                                                <div class="mifs">
                                                                    <h6>Ali Mian</h6>
                                                                    <p>Administrator</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="mifsbox">
                                                                <div class="mifs">
                                                                    <i class="fa fa-users" aria-hidden="true"></i>
                                                                </div>
                                                                <div class="mifs">
                                                                    <p>Administrator</p>
                                                                    <h6>Ali Mian</h6>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <p>436383</p>
                                                            <p>22-7-2022</p>
                                                        </td>
                                                    </tr>
                                                    <tr class="tablismall">
                                                        <td class="bnumm">
                                                            <button type="button"
                                                                class="btn btn-primary grye">Document</button>
                                                        </td>
                                                        <td>
                                                            <h6>Uploaded</h6>
                                                        </td>
                                                        <td>
                                                            <h6>Jul 22,2022</h6>
                                                            <p>Less then a min..</p>
                                                        </td>
                                                        <td>
                                                            <div class="mifsbox">
                                                                <div class="mifs">
                                                                    <i class="fa fa-users" aria-hidden="true"></i>
                                                                </div>
                                                                <div class="mifs">
                                                                    <h6>Ali Mian</h6>
                                                                    <p>Administrator</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="mifsbox">
                                                                <div class="mifs">
                                                                    <i class="fa fa-users" aria-hidden="true"></i>
                                                                </div>
                                                                <div class="mifs">
                                                                    <p>Administrator</p>
                                                                    <h6>Ali Mian</h6>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <p>436383</p>
                                                            <p>22-7-2022</p>
                                                        </td>
                                                    </tr>
                                                    <tr class="tablismall">
                                                        <td class="bnumm">
                                                            <button type="button"
                                                                class="btn btn-primary gye">Document</button>
                                                        </td>
                                                        <td>
                                                            <h6>Uploaded</h6>
                                                        </td>
                                                        <td>
                                                            <h6>Jul 22,2022</h6>
                                                            <p>Less then a min..</p>
                                                        </td>
                                                        <td>
                                                            <div class="mifsbox">
                                                                <div class="mifs">
                                                                    <i class="fa fa-users" aria-hidden="true"></i>
                                                                </div>
                                                                <div class="mifs">
                                                                    <h6>Ali Mian</h6>
                                                                    <p>Administrator</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="mifsbox">
                                                                <div class="mifs">
                                                                    <i class="fa fa-users" aria-hidden="true"></i>
                                                                </div>
                                                                <div class="mifs">
                                                                    <p>Administrator</p>
                                                                    <h6>Ali Mian</h6>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <p>436383</p>
                                                            <p>22-7-2022</p>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- <div class="row">
                <div class="col-sm-6">
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h5 class="m-0 font-weight-bold lute">Top Items</h5>   
                        </div>
                        <div class="card-body">
                            <div class="chart-bar">
                                <canvas id="myBarChart"></canvas>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card shadow mb-4">
                        <div
                            class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                            <h5 class="m-0 font-weight-bold lute">Items Distribution</h5>                            
                        </div>
                        <div class="card-body">
                            <div class="chart-pie pt-4 pb-2">
                                <canvas id="myPieChart"></canvas>
                            </div>
                            <div class="mt-4 text-center small">
                                <span class="mr-2">
                                    <i class="fas fa-circle text-primary"></i> Assets
                                </span>
                                <span class="mr-2">
                                    <i class="fas fa-circle text-success"></i> Assets Stock
                                </span>
                                <span class="mr-2">
                                    <i class="fas fa-circle text-info"></i> Inventory
                                </span>
                            </div>
                        </div>
                    </div>
                </div>                
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="culnd">

                    </div>
                </div>
            </div> --}}
        </div>
    </div>


    <script>
      var xyValues = [
        { x: 50, y: 7 },
        { x: 60, y: 8 },
        { x: 70, y: 8 },
        { x: 80, y: 9 },
        { x: 90, y: 9 },
        { x: 100, y: 9 },
        { x: 110, y: 10 },
        { x: 120, y: 11 },
        { x: 130, y: 14 },
        { x: 140, y: 14 },
        { x: 150, y: 15 }
      ];
  
      new Chart("myChart", {
        type: "scatter",
        data: {
          datasets: [{
            pointRadius: 4,
            pointBackgroundColor: "rgb(0,0,255)",
            data: xyValues
          }]
        },
        options: {
          legend: { display: false },
          scales: {
            xAxes: [{ ticks: { min: 40, max: 160 } }],
            yAxes: [{ ticks: { min: 6, max: 16 } }],
          }
        }
      });
    </script>
    

@endsection