@extends('layouts.master')
@section('content')
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" integrity="sha512-ARJR74swou2y0Q2V9k0GbzQ/5vJ2RBSoCWokg4zkfM29Fb3vZEQyv0iWBMW/yvKgyHSR/7D64pFMmU8nYmbRkg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
#print {
    margin-top: 0;
    margin-left: 12px;
    width: 25%;
}

button.btn.bg-gradient-primary.btn-sm.mb-0 {
    margin-top: 0;
}

.input-group.input-group-outline {
    display: flex;
    gap: 6px;
}

#print_report {
    margin-top: 0;
}
.icon-lg {
    width: 47px;
    height: 47px;
}
</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">
                    <div class="card-body p-3">
                            <form action='{{ route("printReport") }}' method='post'>
    @csrf
    <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 select-district" name="district[]" multiple id='district' onchange="update_subscategories_div(Array.from(this.selectedOptions).map(option => option.value))">
            <option value="">Select District</option>
            @foreach($total_district as $data)
                <option value="{{ $data->district_id }}">{{ $data->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 multi_select" multiple name="facility_id[]" id='facility-dropdown'>
                    <option value=""  disabled>Select Facility</option>
                </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 multi_select_category" multiple name="category_id[]" id='category-dropdown'>
            <option value="" >Select Category</option>
            @foreach($category as $item)
            <option value="{{ $item->id }}">{{ $item->name }}</option>
            @endforeach
            </select>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4" style="align-self: center;">
            <div class="input-group input-group-outline" style='display:flex; align-items:center;'>
                <small>Start Date</small>
                <input type='date' class='form-control' name='start_date'>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4" style="align-self: center; margin-top:10px;">
            <div class="input-group input-group-outline" style='display:flex; align-items:center;'>
                <small>End Date</small>
                <input type='date' class='form-control' name='end_date'>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4" style='margin-left:699px; margin-top:10px;'>
            <div class="input-group input-group-outline">
                <a class="btn bg-gradient-primary btn-sm mb-0" id='apply' title="Apply">Apply</a>
                <button class="btn bg-gradient-primary btn-sm mb-0" type='submit' id='print_report' title="Print">Print</button>
                <!--<a class="btn bg-gradient-primary btn-sm mb-0"  id='filter_facilities' title="Filter Facilities">Filter Facilities</a>-->
            </div>
        </div>
    </div>
</form>

                        
                    </div>
                   
                </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-4">
                             <br>
                            
                            <p class="text-sm mb-0 text-capitalize">Total Users</p>
                            <h4 class="mb-0">{{$Totaluser}}</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-4">
                        <br>
                            <p class="text-sm mb-0 text-capitalize">Inactive Users</p>
                            <h4 class="mb-0">{{$inactive_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-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-4">
                            <p class="text-sm mb-0 text-capitalize">Beginer Level Users <br> (In-Progress )</p>
                            <h4 class="mb-0" id='first_level'>{{$first_level}}</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-4">
                            <p class="text-sm mb-0 text-capitalize">Intermediate Level Users <br> (In-Progress)</p>
                            <h4 class="mb-0" id='second_level'>{{$second_level}}</h4>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 my-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-4">
                            <p class="text-sm mb-0 text-capitalize ">Advance Level Users <br> (In-Progress)</p>
                            <h4 class="mb-0" id='third_level'>{{$third_level}}</h4>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 my-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-4">
                            <br>
                            <p class="text-sm mb-0 text-capitalize">Beginer Level Users (Passed) </p>
                            <h4 class="mb-0" id='pass_users'>{{$first_level_pass_users}}</h4>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 my-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-4">
                            <br>
                            <p class="text-sm mb-0 text-capitalize">Second Level Users (Passed)</p>
                            <h4 class="mb-0" id='pass_users'>{{$second_level_pass_users}}</h4>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 my-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-4">
                            <br>
                            <p class="text-sm mb-0 text-capitalize">Third Level Users (Passed) </p>
                            <h4 class="mb-0" id='pass_users'>{{$third_level_pass_users}}</h4>
                        </div>
                    </div>

                </div>
            </div>  
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 my-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-4">
                            <p class="text-sm mb-0 text-capitalize">Fail Users In First Level </p>
                            <h4 class="mb-0" id='pass_users'>{{$first_level_fail_users}}</h4>
                        </div>
                    </div>

                </div>
            </div>  
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 my-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-4">
                            <p class="text-sm mb-0 text-capitalize">Fail Users In Second Level </p>
                            <h4 class="mb-0" id='pass_users'>{{$second_level_fail_users}}</h4>
                        </div>
                    </div>

                </div>
            </div>  
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 my-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-4">
                            <p class="text-sm mb-0 text-capitalize ">Fail Users In Third Level</p>
                            <h4 class="mb-0" id='fial'>{{$third_level_fail_users}}</h4>
                        </div>
                    </div>

                </div>
            </div>
            
        </div>

        <script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
<script>
    
function update_subscategories_div(id) {
            $("#facility-dropdown").html('');
            var district = id;
            var csrfToken = '{{ csrf_token() }}';
            var requestData = {
            district: district,
        };
            $.ajax({
                url: '/bhcip/filter/facility',
                type: 'POST',
                data: requestData,
                  headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    console.log(response);

                      $('#facility-dropdown').html('<option value="">Select Facility</option>');
                        $.each(response.facility, function (key, value) {
                            $("#facility-dropdown").append('<option value="' + value
                                .id + '">' + value.name +'('+value
                                .id+')'+ '</option>');
                    });
                     $('.multi_select').selectpicker('refresh');
                }
                ,
                error: function(xhr, status, error) {
                    console.error('Something went wrong:', error);
                }
        }); 
}

    $(document).ready( function () {        
    $('.select-district').selectpicker();
    $('.multi_select').selectpicker();
    $('.multi_select_category').selectpicker();
    $('.multi_select_district').selectpicker();
    $("#submit").click(function() {
            var district = $('#district').val();
            var facility_id = $('#facility-dropdown').val();
            var csrfToken = '{{ csrf_token() }}';
            var requestData = {
            district: district,
            facility_id: facility_id,
        };
            if(district==''){
                alert('You must select District then filter data!');
            }
            else{
            $.ajax({
                url: '/bhcip/filter/reporting',
                type: 'POST',
                data: requestData,
                  headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    console.log(response);
                    $('#first_level').html(response.first_level);
                    $('#second_level').html(response.second_level);
                    $('#third_level').html(response.third_level);
                    $('#pass_users').html(response.pass);
                    $('#fial').html(response.fial);
                },
                error: function(xhr, status, error) {
                    console.error('Something went wrong:', error);
                }
        });
            }
        });
        
        
        
        
        
        
    


        
        
    
    $("#print").click(function() {
            var district = $('#district').val();
            var facility_id = $('#facility-dropdown').val();
            var csrfToken = '{{ csrf_token() }}';
            var requestData = {
            district: district,
            facility_id: facility_id,
        };
            
            $.ajax({
                url: '/bhcip/print/report',
                type: 'POST',
                data: requestData,
                  headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    console.error('Something went wrong:', error);
                }
        });
            
        });
   })
</script>
       

    @endsection