@extends('user.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">
                            @foreach ($show_location_list as $key => $c)
                                <div class="prtone">
                                    <h4 onclick="setMarkerMap('{!! $c->latitude !!}','{!! $c->longitude !!}')">Dump Truck</h4>
                                    <p>{!! ucwords($c->identification_number) !!}</p>
                                    <h6>{!! ucwords($c->addre_line_one) !!}</h6>
                                </div>                                
                            @endforeach
                        </div>


                    </div>
                </div>
                <div class="col-sm-8">
                    <div id="map" style="height:340px"></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>

    @include('user.layout.map')
    <script>
        function setMarkerMap(lat, long) {
            location = {
                lat: lat,
                lng: long
            };
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                id: 'marker '
                // id:'marker'+location.lat()+location.lng()
            });
            deleteMarkers();
            markers.push(marker);
            markers_latlng.push({
                lat: lat,
                lng: long
            });
        }

        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