@extends('dashboard.layout.partials.dashboard')

@section('content')


<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
       
       <div class="content-wrapper pt-3 p-0 ">
            <div class="row">
                
              <div class="col-md-4 stretch-card grid-margin">
                <div class="card bg-gradient-danger card-img-holder text-white">
                  <div class="card-body">
                    <img src="assets/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image">
                   <h4 class="font-weight-normal mb-3"> Total Roles<i class="mdi mdi-account mdi-24px float-right"></i>
                    </h4>
                    <h2 class="mb-5">{{$total_roles}}</h2>
                    <!--<h6 class="card-text">Increased by 60%</h6>-->
                  </div>
                </div>
              </div>
              
              <div class="col-md-4 stretch-card grid-margin">
                <div class="card bg-gradient-info card-img-holder text-white">
                  <div class="card-body">
                    <img src="assets/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image">
                    <h4 class="font-weight-normal mb-3">Total Users <i class="mdi mdi-account-multiple mdi-24px float-right"></i>
                    </h4>
                    <h2 class="mb-5">{{$total_users}}</h2>
                    <!--<h6 class="card-text">Decreased by 10%</h6>-->
                  </div>
                </div>
              </div>
              
              <div class="col-md-4 stretch-card grid-margin">
                <div class="card bg-gradient-success card-img-holder text-white">
                  <div class="card-body">
                    <img src="assets/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image">
                    <h4 class="font-weight-normal mb-3">Total Products<i class="mdi mdi-pandora mdi-24px float-right"></i>
                    </h4>
                    <h2 class="mb-5">{{$total_products}}</h2>
                    <!--<h6 class="card-text">Increased by 5%</h6>-->
                  </div>
                </div>
              </div>
            </div>
            <div class="row ">
              <div class="col-md-7 grid-margin stretch-card ">
                <div class="card shadow">
                  <div class="card-body"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                    <div class="clearfix">
                      <h4 class="card-title float-left ">Visit And Sales Statistics </h4>
                      <div id="visit-sale-chart-legend" class="rounded-legend legend-horizontal legend-top-right float-right"><ul><li><span class="legend-dots" style="background:linear-gradient(to right, rgba(218, 140, 255, 1), rgba(154, 85, 255, 1))"></span>CHN</li><li><span class="legend-dots" style="background:linear-gradient(to right, rgba(255, 191, 150, 1), rgba(254, 112, 150, 1))"></span>USA</li><li><span class="legend-dots" style="background:linear-gradient(to right, rgba(54, 215, 232, 1), rgba(177, 148, 250, 1))"></span>UK</li></ul></div>
                    </div>
                    <canvas id="visit-sale-chart" class="mt-4 chartjs-render-monitor" style="display: block; width: 372px; height: 186px;" width="372" height="186"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-md-5 grid-margin stretch-cardv ">
                <div class="card shadow">
                  <div class="card-body"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                    <h4 class="card-title">Traffic Sources</h4>
                    <canvas id="traffic-chart" width="231" height="115" style="display: block; width: 231px; height: 115px;" class="chartjs-render-monitor"></canvas>
                    <div id="traffic-chart-legend" class="rounded-legend legend-vertical legend-bottom-left pt-4"><ul><li><span class="legend-dots" style="background:linear-gradient(to right, rgba(54, 215, 232, 1), rgba(177, 148, 250, 1))"></span>Search Engines<span class="float-right">30%</span></li><li><span class="legend-dots" style="background:linear-gradient(to right, rgba(6, 185, 157, 1), rgba(132, 217, 210, 1))"></span>Direct Click<span class="float-right">30%</span></li><li><span class="legend-dots" style="background:linear-gradient(to right, rgba(255, 191, 150, 1), rgba(254, 112, 150, 1))"></span>Bookmarks Click<span class="float-right">40%</span></li></ul></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 grid-margin">
                <div class="card shadow">
                  <div class="card-body">
                    <h4 class="card-title">Recently added Products</h4>
                    <div class="table-responsive">
                      <table class="table">
                        <thead>
                          <tr>
                            <th> Assignee </th>
                            <th> Subject </th>
                            <th> Status </th>
                            <th> Last Update </th>
                            <th> Tracking ID </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>
                              <img src="assets/images/faces/face1.jpg" class="me-2" alt="image"> David Grey
                            </td>
                            <td> Fund is not recieved </td>
                            <td>
                              <label class="badge badge-gradient-success">DONE</label>
                            </td>
                            <td> Dec 5, 2017 </td>
                            <td> WD-12345 </td>
                          </tr>
                          <tr>
                            <td>
                              <img src="assets/images/faces/face2.jpg" class="me-2" alt="image"> Stella Johnson
                            </td>
                            <td> High loading time </td>
                            <td>
                              <label class="badge badge-gradient-warning">PROGRESS</label>
                            </td>
                            <td> Dec 12, 2017 </td>
                            <td> WD-12346 </td>
                          </tr>
                          <tr>
                            <td>
                              <img src="assets/images/faces/face3.jpg" class="me-2" alt="image"> Marina Michel
                            </td>
                            <td> Website down for one week </td>
                            <td>
                              <label class="badge badge-gradient-info">ON HOLD</label>
                            </td>
                            <td> Dec 16, 2017 </td>
                            <td> WD-12347 </td>
                          </tr>
                          <tr>
                            <td>
                              <img src="assets/images/faces/face4.jpg" class="me-2" alt="image"> John Doe
                            </td>
                            <td> Loosing control on server </td>
                            <td>
                              <label class="badge badge-gradient-danger">REJECTED</label>
                            </td>
                            <td> Dec 3, 2017 </td>
                            <td> WD-12348 </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
           
       </div>
           <div class="card shadow">
               <div class="card-body">
                <div class="row pb-5">
                    <div class="col-md-2 mb-2">
                        Filter:
                    </div>  
                    <div class="col-md-3 mb-4">  
                        <select class="form-select form-select-lg js-example-basic-single" aria-label="Default select example" id="region" name="region" required>
                            <option selected disabled value=""> Select Region</option>
                            @php
                                $regions = \App\Models\Region::get();
                            @endphp
                            @foreach($regions as $region)
                                <option value="{{$region->id}}"> {{$region->region_name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mb-4">  
                        <select class="form-select form-select-lg js-example-basic-single" aria-label="Default select example" id="city" name="city" required>
                            <option selected disabled value=""> Select City</option>
                            
                        </select>
                    </div>
                    <div class="col-md-3 ">
                        <button type="button" id="FilterDatabtn" class="btn btn-success ">Filter Data</button>
                    </div>  
                     
                </div>
                <div class="table-responsive">
               <table class="table table-striped myTable mt-3">
                      <thead>
                        <tr>
                          <th> sno </th>
                          <th> Mechanic Name </th>
                          <th> Shop Name</th>
                          <th> Category </th>
                          <th> Contact No </th>
                          <th> Status </th>
                        </tr>
                      </thead>
                      <tbody>
                       @foreach($FilteredUsersData as $i=>$user)
                        <tr>
                         <td> {{$i+1}} </td>
                          <td> {{$user->name}}</td>
                          <td> {{$user->shop_name}}</td>
                          <td> {{$user->sub_role_name}}</td>
                          <td> {{$user->contact}} </td>
                          <td>
                          @if($user->activation==1)
                           <label class="badge badge-gradient-success">Active</label>
                           @else
                           <label class="badge badge-gradient-danger">Non-Active</label>
                           @endif
                          </td>
                        </tr>
                        @endforeach
                      </tbody>
                    </table>
              </div>      
                </div>    
                    
           </div>

@endsection

@section('javascript')
<script>
$(document).ready(function(){
    $('.myTable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'csv',
                text: 'Download Excel File'
            }
        ]
    });

    $(".js-example-basic-single").select2();

    $("#region").change(function(){
        var region = $("#region").val();
        var token = $('meta[name="csrf-token"]').attr('content');
        
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "{{ url('/FilteredCities') }}",
            data: {
                region: region,
                _token: token
            },
            success: function(response) {
                console.log(response);
                $("#city").empty(); // Clear existing options
                response.forEach(city => {
                    var id = city['id'];
                    $("#city").append("<option value='" + id + "'>" + city['city_name'] + "</option>");
                });
            },
            error: function (request, status, error) {
                console.log(error);
                alert("Couldn't retrieve cities. Please try again later.");
            }
        });
    });

    $('#FilterDatabtn').click(function(){
        var region = $("#region").val();
        var city = $("#city").val();
        var token = $('meta[name="csrf-token"]').attr('content');
        
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "{{ url('/FilterDataUsers') }}",
            data: {
                region: region,
                city: city,
                _token: token
            },
            success: function(response) {
                console.log(response);
                var table = $('.myTable').DataTable();
                table.clear().draw(); // Clear existing data in table
                response.forEach(item => {
                  
                    table.row.add([
                        item.id,
                        item.name,
                        item.shop_name,
                        item.sub_role_name,
                        item.contact,
                        item.activation == "1" ? "<label class='badge badge-gradient-success'>Active</label>" : "<label class='badge badge-gradient-danger'>Non Active</label>"
                    ]).draw();
                });
            },
            error: function (request, status, error) {
                console.log(error);
                alert("Couldn't retrieve filtered data. Please try again later.");
            }
        });
    });
});
</script>

@endsection