@extends('layouts.master')
@section('content')

<style>
ul.navbar-nav {
    width: 500px !important;
}
aside#sidenav-main {
    width: 500px;
}
</style>
    <div class="container-fluid py-4">
        <div class="row mb-6">
            <div class="col-lg-12 col-md-12 mb-md-0 mb-4">
                <div class="card">
                    {!! Form::open(['route' =>'admin.dashboard', 'method' => 'post']) !!}
                    @csrf
                   
                    <div class="card-body p-3">
                        <div class="row">
                              
                              <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                                <div class="input-group input-group-outline">
                                    <select class="form-control" name="category">
                                       <option value="">Select Category</option>
                                        @foreach($category as $cat)
                                        <option value="{{$cat->id}}"> {{$cat->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                                <div class="input-group input-group-outline">
                                    <select class="select form-control " name="district">
                                        <option value="">Select District</option>
                                        @foreach($district as $districts)
                                        <option value="{{$districts->district_id}}"> {{$districts->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                           
                            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                                <div class="input-group input-group-outline">
                                    <select class="select form-control " name="facility">
                                        <option value="">Select Facility</option>
                                        <option value="1"> Awaran</option>
                                        <option value="2"> Barkhan</option>
                                        <option value="3"> Chagai</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xl-2 col-sm-6 mb-xl-0 mb-4" style="align-self: center">
                                <div class="input-group input-group-outline">
                                    <button class="btn bg-gradient-primary btn-sm mb-0" type="submit" title="Apply">Apply</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {!!! Form::close();!!}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div
                            class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                            <i class="material-icons opacity-10">person</i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">Total Users</p>
                            <h4 class="mb-0">{{$total_user}}</h4>
                        </div>
                    </div>
                    {{-- <hr class="dark horizontal my-0">
            <div class="card-footer p-3">
              <p class="mb-0"><span class="text-success text-sm font-weight-bolder">+55% </span>than last week</p>
            </div> --}}
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div
                            class="icon icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute">
                            <i class="material-icons opacity-10">person_add</i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">Register User </p>
                            <h4 class="mb-0">{{$register_user}}</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div
                            class="icon icon-lg icon-shape bg-gradient-success shadow-success text-center border-radius-xl mt-n4 position-absolute">
                            <i class="material-icons opacity-10">spellcheck</i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">Active User </p>
                            <h4 class="mb-0">{{$active_user}}</h4>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-xl-3 col-sm-6">
                <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div
                            class="icon icon-lg icon-shape bg-gradient-info shadow-info text-center border-radius-xl mt-n4 position-absolute">
                            <i class="material-icons opacity-10">verified_user</i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">Qualified User</p>
                            <h4 class="mb-0">{{$qualified_user}}</h4>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-lg-12 col-md-12 mt-4 mb-4">
                <div class="card z-index-2 ">
                    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
                        <div class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1">
                            <div class="chart">
                                <canvas id="chart-bars" class="chart-canvas" height="200"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <h6 class="mb-0 ">Quiz Response</h6>
                        <p class="text-sm ">Quiz Performance of users</p>
                    </div>
                </div>
            </div>
        </div>

    @endsection