@extends('layouts.master')
@section('content')
<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;
}
</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">
                            @if ($errors->any())
                            <div class="alert alert-danger">
                            <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                            </ul>
                            </div>
                            @endif
                        
                            <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="select form-control " name="district" id='district'>
                                        <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 " name="facility_id" id='facility-dropdown'>
                                        <option value="" selected>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 " name="category_id" id='facility-dropdown'>
                                        <option value="" selected>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="align-self: center; margin-top:10px;">
                                <div class="input-group input-group-outline">
                                    <a class="btn bg-gradient-primary btn-sm mb-0" id='submit'  title="Apply">Apply</a>
                                    <button class="btn bg-gradient-primary btn-sm mb-0"  type='submit' id='print_report'  title="Apply">Print</button>
                                    
                                </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-1">
                            <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-1">
                            <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-1">
                            <p class="text-sm mb-0 text-capitalize">Beginning level Users</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-1">
                            <p class="text-sm mb-0 text-capitalize">Intermediate level Users</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-1">
                            <p class="text-sm mb-0 text-capitalize ">Advance level Users</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-1">
                            <p class="text-sm mb-0 text-capitalize ">Pass Users</p>
                            <h4 class="mb-0" id='pass_users'>{{$pass}}</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-1">
                            <p class="text-sm mb-0 text-capitalize ">Fail Users</p>
                            <h4 class="mb-0" id='fial'>{{$fail}}</h4>
                        </div>
                    </div>

                </div>
            </div>
            
        </div>
        <script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>
        <script>
    


    
    $(document).ready( function () {
    $("#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);
                }
        });
            }
        });
    $("#district").change(function() {
            $("#facility-dropdown").html('');
            var district = $(this).val();
            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) {
                      $('#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>');
                    });
                }
                ,
                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