@extends('admin.layouts.master')
@section('content')
    <style>
        .toggle {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: 0.75rem;
    bottom: -100px;
    padding-bottom: 20px;
    width: 60%;
    background-color: #4c61ac;
    border-radius: 10px;
    border: none;
    position: relative;
    margin-bottom: 30px;
    box-shadow: 10px 10px 10px 10px gray;
}
        .toggle-heading {
            color: black;
            margin-top: 20%;
        }

        .off {
            font-size: 20px;
            margin-right: 10px;
            font-weight: bold;
            color: black;
            position: relative;
            top: 8px;
        }

        .on {
            font-size: 20px;
            margin-left: 10px;
            font-weight: bold;
            color: black;
            position: relative;
            top: 8px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: #5065b1;
        }

        input:focus+.slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border: 2px solid black;
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </style>
    <section class="section">
        <ul class="breadcrumb breadcrumb-style ">

            <li class="breadcrumb-item">
                <a href="javascript:void(0)">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-home">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
                    </svg></a>
            </li>
            <li class="breadcrumb-item active">Dashboard</li>
        </ul>
        <div class="row ">
            <div class="col-xl-3 col-lg-6">
                <div class="card l-bg-style2">
                    <div class="card-statistic-3">
                        <div class="card-icon card-icon-large"><i class="fa fa-file"></i></div>
                        <div class="card-content">
                            <h4 class="card-title">Reported</h4>
                            <span>{{ $reportCount }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6">
                <div class="card l-bg-style2">
                    <div class="card-statistic-3">
                        <div class="card-icon card-icon-large"><i class="fa fa-donate"></i></div>
                        <div class="card-content">
                            <h4 class="card-title">General Inquiry</h4>
                            <span>{{ $inquiry_count }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6">
                <div class="card l-bg-style2">
                    <div class="card-statistic-3">
                        <div class="card-icon card-icon-large"><i class="fa fa-user"></i></div>
                        <div class="card-content">
                            <h4 class="card-title">Offender Removal</h4>
                            <span>{{ $offender_count }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6">
                <div class="card l-bg-style2">
                    <div class="card-statistic-3">
                        <div class="card-icon card-icon-large"><i class="fa fa-user"></i></div>
                        <div class="card-content">
                            <h4 class="card-title">Trusted Seller</h4>
                            <span>{{ $trusted_count }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container toggle">
                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-6 ">
                        <h3 class="toggle-heading">User Side Report</h3>
                    </div>
                    <div class="col-md-2"></div>

                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <form action="{{route('admin.toggle.process')}}" method="post">
                        @csrf
                    <input type="hidden" name="id" @if(!empty($togg))  value="{{$togg->id}}" @endif> 


                    <span class="off">OFF</span><label class="switch">
                            <input type="checkbox" name="status" id="" value="on"
                            @if (!empty($togg) && $togg->status == 'on') checked @endif>

                            




                        <span class="slider round"></span>
                    </label><span class="on">ON</span>
                    <button type="submit" class="btn btn-primary offset-3">Submit</button>

                </form>

                </div>
                <div class="col-md-4"></div>
            </div>
                </div>
            

            

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

        <!--<div class="row">-->
        <!--    <div class="col-12 col-sm-12 col-lg-4">-->
        <!--        <div class="card">-->
        <!--            <div class="card-header">-->
        <!--                <h4>Chart</h4>-->
        <!--            </div>-->
        <!--            <div class="card-body">-->
        <!--                <div id="schart1"></div>-->
        <!--                <div class="row">-->
        <!--                    <div class="col-4">-->
        <!--                        <p class="text-muted font-15 text-truncate">Target</p>-->
        <!--                        <h5>-->
        <!--                            <i class="fas fa-arrow-circle-up col-green m-r-5"></i>$15.3k-->
        <!--                        </h5>-->
        <!--                    </div>-->
        <!--                    <div class="col-4">-->
        <!--                        <p class="text-muted font-15 text-truncate">Last-->
        <!--                            week</p>-->
        <!--                        <h5>-->
        <!--                            <i class="fas fa-arrow-circle-down col-red m-r-5"></i>$2.8k-->
        <!--                        </h5>-->
        <!--                    </div>-->
        <!--                    <div class="col-4">-->
        <!--                        <p class="text-muted text-truncate">Last-->
        <!--                            Month</p>-->
        <!--                        <h5>-->
        <!--                            <i class="fas fa-arrow-circle-up col-green m-r-5"></i>$12.5k-->
        <!--                        </h5>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--    <div class="col-12 col-sm-12 col-lg-4">-->
        <!--        <div class="card">-->
        <!--            <div class="card-header">-->
        <!--                <h4>Chart</h4>-->
        <!--            </div>-->
        <!--            <div class="card-body">-->
        <!--                <div id="schart2"></div>-->
        <!--                <div class="row">-->
        <!--                    <div class="col-4">-->
        <!--                        <p class="text-muted font-15 text-truncate">Target</p>-->
        <!--                        <h5>-->
        <!--                            <i class="fas fa-arrow-circle-up col-green m-r-5"></i>$15.3k-->
        <!--                        </h5>-->
        <!--                    </div>-->
        <!--                    <div class="col-4">-->
        <!--                        <p class="text-muted font-15 text-truncate">Last-->
        <!--                            week</p>-->
        <!--                        <h5>-->
        <!--                            <i class="fas fa-arrow-circle-down col-red m-r-5"></i>$2.8k-->
        <!--                        </h5>-->
        <!--                    </div>-->
        <!--                    <div class="col-4">-->
        <!--                        <p class="text-muted text-truncate">Last-->
        <!--                            Month</p>-->
        <!--                        <h5>-->
        <!--                            <i class="fas fa-arrow-circle-up col-green m-r-5"></i>$12.5k-->
        <!--                        </h5>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--    <div class="col-12 col-sm-12 col-lg-4">-->
        <!--        <div class="card">-->
        <!--            <div class="card-header">-->
        <!--                <h4>Chart</h4>-->
        <!--            </div>-->
        <!--            <div class="card-body">-->
        <!--                <div id="schart3"></div>-->
        <!--                <div class="row">-->
        <!--                    <div class="col-4">-->
        <!--                        <p class="text-muted font-15 text-truncate">Target</p>-->
        <!--                        <h5>-->
        <!--                            <i class="fas fa-arrow-circle-up col-green m-r-5"></i>$15.3k-->
        <!--                        </h5>-->
        <!--                    </div>-->
        <!--                    <div class="col-4">-->
        <!--                        <p class="text-muted font-15 text-truncate">Last-->
        <!--                            week</p>-->
        <!--                        <h5>-->
        <!--                            <i class="fas fa-arrow-circle-down col-red m-r-5"></i>$2.8k-->
        <!--                        </h5>-->
        <!--                    </div>-->
        <!--                    <div class="col-4">-->
        <!--                        <p class="text-muted text-truncate">Last-->
        <!--                            Month</p>-->
        <!--                        <h5>-->
        <!--                            <i class="fas fa-arrow-circle-up col-green m-r-5"></i>$12.5k-->
        <!--                        </h5>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->
    </section>
    {{-- <section>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>
                </div>
            </div>
        </div>
    </section> --}}
@endsection