@extends('admin.layouts.admin')

@section('content')
    <!-- Page Content-->
    <div class="page-content-tab">
        <div class="container-fluid">
            <!-- Page-Title -->
            <!-- <div class="row mt-4 mb-4">
               <div class="col-lg--sm-12">
                 <h4 class="mt-0 mb-0 page-title">Complain Details </h4>
               </div>
               </div>  -->
            <!--end row--><!-- end page title end breadcrumb -->
            <div class="row mt-4">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row align-items-center mb-0 mt-2">
                                <div class="col-lg-4 col-sm-12  mb-2">
                                    <h4 class="mt-0 page-title text-dark mb-0">Recruitment Status</h4>
                                </div>
                                <div class="col-lg-8 col-sm-12  align-items-center mob-block">
                                    <form method="POST" action="{{ url()->route('dashboard') }}"
                                          class="form-horizontal form-wizard-wrapper">
                                        @csrf
                                        <div class="row">
                                            {{-- <div class="col-md-2 col-sm-12">
                                               <div class="form-group mb-0">
                                                  <select class="select2 form-control mb-3 custom-select" name="job_category" id="job_category">
                                                     <option selected disabled value="">Select Job Category</option>
                                                     <option value="Field Force">Field Force</option>
                                                     <option value="Deskjob">Desk Job</option>
                                                  </select>
                                               </div>
                                            </div> --}}
                                            <div class="col-md-4 col-sm-12  mb-2">
                                                <div class="form-group mb-0">
                                                    <select class="select2 form-control mb-3 custom-select"
                                                            name="area_id" id="questype">
                                                        <option selected disabled value="">Select Area</option>
                                                        @foreach($jobArea as $area)
                                                            <option
                                                                {{ (Request::get('area_id') == $area->id) ? 'selected="selected"' : '' }} value="{{ $area->id ?? '' }}">{{ $area->name ?? '' }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-12  mb-2">
                                                <div class="form-group mb-0">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" id="datetimepicker" name="daterangedash"
                                                               value="{{ request('daterangedash') ?? $daterange }}">
                                                        <div class="input-group-append"><span
                                                                class="input-group-text"><i
                                                                    class="dripicons-calendar open-datetimepicker"></i></span></div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-4 col-sm-12 text-right mb-2">
                                               
                                                <div class="btn-group" role="group" aria-label="Basic example">
                                                    <a href="{{route('dashboard')}}" class="mr-1">
                                                    <button type="button" class="btn btn-danger waves-effect waves-light px-2"> <i
                                                        class="ti-reload mr-1"></i>Clear</button>
                                                    </a>  
                                                        <button type="submit" class="btn btn-primary waves-effect waves-light px-2"> <i
                                                        class="ti-search mr-1"></i>Filter</button>
                                                </div> 
                                            </div>
                                            {{-- <div class="col-sm-2  mb-2">
                                                <button type="submit"
                                                class="btn btn-primary waves-effect waves-light btn-block">
                                                 <span class="btn-text"><i class="ti-search mr-2"></i>Filter</span>
                                                </button>
                                            </div> --}}
                                            {{-- <div class="col-md-4 col-sm-12 pl-0 text-right">
                                                <div class="row">
                                                    <div class="form-group mb-0">
                                                        <a href="{{route('dashboard')}}"
                                                           class="btn btn-danger waves-effect waves-light col-sm-6"><i
                                                                class="ti-reload mr-2"></i>Clear</a>
                                                        <button type="submit"
                                                                class="btn btn-primary waves-effect waves-light col-sm-6">
                                                            <span class="btn-text"><i class="ti-search mr-2"></i>Filter</span>
                                                        </button>

                                                    </div>
                                                </div>


                                            </div> --}}
                                        </div>
                                    </form>
                                </div>
                                <!--end col-lg--->
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="row">
                                    {{-- <div class="col-lg-3">
                                       <div class="card bg-soft-success">
                                          <div class="card-body py-2">
                                             <div class="row d-flex justify-content-center">
                                                <div class="col-lg-9 mob-text-center">
                                                   <h4 class="text-dark mb-0 font-13">
                                                   Total</h3>
                                                   <h3 class="my-1 font-20 font-weight-bold">0</h3>
                                                </div>
                                                <!--end col-lg--->
                                                <div class="col-lg-3 align-self-center">
                                                   <div class="d-flex justify-content-center align-items-center thumb-md rounded-circle mx-auto">
                                                      <i data-feather="layers" class="align-self-center icon-lg icon-dual-success"></i>
                                                   </div>
                                                </div>
                                                <!--end col-lg--->
                                             </div>
                                             <!--end row-->
                                          </div>
                                          <!--end card-body-->
                                       </div>
                                       <!--end card-->
                                    </div> --}}
                                    <!--end col-lg--->
                                        <div class="col-lg-3">
                                            <div class="card bg-soft-warning">
                                                <div class="card-body py-2">
                                                    <div class="row d-flex justify-content-center">
                                                        <div class="col-lg-9 mob-text-center">
                                                            <h4 class="text-dark mb-0 font-16">Required</h4>
                                                            {{-- <h3 class="my-1 font-20 font-weight-bold">{{ $required ?? ''}}</h3> --}}
                                                            <h3 class="my-1 font-20 font-weight-bold">44</h3>
                                                        </div>
                                                        <!--end col-lg--->
                                                        <div class="col-lg-3 align-self-center">
                                                            <div
                                                                class="d-flex justify-content-center align-items-center thumb-md rounded-circle mx-auto">
                                                                <i data-feather="alert-circle"
                                                                   class="align-self-center icon-lg icon-dual-warning"></i>
                                                            </div>
                                                        </div>
                                                        <!--end col-lg--->
                                                    </div>
                                                    <!--end row-->
                                                </div>
                                                <!--end card-body-->
                                            </div>
                                            <!--end card-->
                                        </div>
                                        <!--end col-lg--->
                                        <div class="col-lg-3">
                                            <div class="card bg-soft-primary">
                                                <div class="card-body py-2">
                                                    <div class="row d-flex justify-content-center">
                                                        <div class="col-lg-9 mob-text-center">
                                                            <h4 class="text-dark mb-0 font-16">Target</h4>
                                                            {{-- <h3 class="my-1 font-20 font-weight-bold">{{ $target ?? ''}}</h3> --}}
                                                            <h3 class="my-1 font-20 font-weight-bold">132</h3>
                                                        </div>
                                                        <!--end col-lg--->
                                                        <div class="col-lg-3 align-self-center">
                                                            <div
                                                                class="d-flex justify-content-center align-items-center thumb-md rounded-circle mx-auto">
                                                                <i data-feather="crosshair"
                                                                   class="align-self-center icon-lg icon-dual-primary"></i>
                                                            </div>
                                                        </div>
                                                        <!--end col-lg--->
                                                    </div>
                                                    <!--end row-->
                                                </div>
                                                <!--end card-body-->
                                            </div>
                                            <!--end card-->
                                        </div>
                                        <!--end col-lg--->
                                    {{-- <div class="col-lg-3">
                                        <div class="card bg-soft-info">
                                            <div class="card-body py-2">
                                                <div class="row d-flex justify-content-center">
                                                    <div class="col-lg-9 mob-text-center">
                                                        <h4 class="text-dark mb-0 font-16">Remaining</h4>
                                                        <h3 class="my-1 font-20 font-weight-bold">{{ ($target - $required)}}</h3>
                                                    </div>
                                                    <!--end col-lg--->
                                                    <div class="col-lg-3 align-self-center">
                                                        <div
                                                            class="d-flex justify-content-center align-items-center thumb-md rounded-circle mx-auto">
                                                            <i data-feather="crosshair"
                                                               class="align-self-center icon-lg icon-dual-info"></i>
                                                        </div>
                                                    </div>
                                                    <!--end col-lg--->
                                                </div>
                                                <!--end row-->
                                            </div>
                                            <!--end card-body-->
                                        </div>
                                        <!--end card-->
                                    </div> --}}
                                    <!--end col-lg--->
                                        <div class="col-lg-3">
                                            <div class="card bg-soft-custom-success">
                                                <div class="card-body py-2">
                                                    <div class="row d-flex justify-content-center">
                                                        <div class="col-lg-9 mob-text-center">
                                                            <h4 class="text-dark mb-0 font-16">Active</h4>
                                                            <h3 class="my-1 font-20 font-weight-bold">227</h3>
                                                        </div>
                                                        <!--end col-lg--->
                                                        <div class="col-lg-3 align-self-center">
                                                            <div
                                                                class="d-flex justify-content-center align-items-center thumb-md rounded-circle mx-auto">
                                                                <i data-feather="activity"
                                                                   class="align-self-center icon-lg custom-success-color"></i>
                                                            </div>
                                                        </div>
                                                        <!--end col-lg--->
                                                    </div>
                                                    <!--end row-->
                                                </div>
                                                <!--end card-body-->
                                            </div>
                                            <!--end card-->
                                        </div>
                                        <!--end col-lg--->
                                        <div class="col-lg-3">
                                            <div class="card bg-soft-secondary">
                                                <div class="card-body py-2">
                                                    <div class="row d-flex justify-content-center">
                                                        <div class="col-lg-9 mob-text-center">
                                                            <h4 class="text-dark mb-0 font-16">In Training</h4>
                                                            {{-- <h3 class="my-1 font-20 font-weight-bold">{{$trainingCount}}</h3> --}}
                                                            <h3 class="my-1 font-20 font-weight-bold">2</h3>
                                                        </div>
                                                        <!--end col-lg--->
                                                        <div class="col-lg-3 align-self-center">
                                                            <div
                                                                class="d-flex justify-content-center align-items-center thumb-md rounded-circle mx-auto">
                                                                <i data-feather="clipboard"
                                                                   class="align-self-center icon-lg icon-dual-secondary"></i>
                                                            </div>
                                                        </div>
                                                        <!--end col-lg--->
                                                    </div>
                                                    <!--end row-->
                                                </div>
                                                <!--end card-body-->
                                            </div>
                                            <!--end card-->
                                        </div>
                                        <!--end col-lg--->
                                        <div class="col-lg-3">
                                            <div class="card bg-soft-purplee">
                                                <div class="card-body py-2">
                                                    <div class="row d-flex justify-content-center">
                                                        <div class="col-lg-9 mob-text-center">
                                                            <h4 class="text-dark mb-0 font-16">Current Pool</h4>
                                                            <h3 class="my-1 font-20 font-weight-bold">0</h3>
                                                            {{-- <h3 class="my-1 font-20 font-weight-bold">{{$current_pool}}</h3> --}}
                                                        </div>
                                                        <!--end col-lg--->
                                                        <div class="col-lg-3 align-self-center">
                                                            <div
                                                                class="d-flex justify-content-center align-items-center thumb-md rounded-circle mx-auto">
                                                                <i data-feather="bookmark"
                                                                   class="align-self-center icon-lg icon-dual-purple"></i>
                                                            </div>
                                                        </div>
                                                        <!--end col-lg--->
                                                    </div>
                                                    <!--end row-->
                                                </div>
                                                <!--end card-body-->
                                            </div>
                                            <!--end card-->
                                        </div>
                                        <!--end col-lg--->
                                        <div class="col-lg-3">
                                            <div class="card bg-soft-danger">
                                                <div class="card-body py-2">
                                                    <div class="row d-flex justify-content-center">
                                                        <div class="col-lg-9 mob-text-center">
                                                            <h4 class="text-dark mb-0 font-16">Deficiency</h4>
                                                            {{-- <h3 class="my-1 font-20 font-weight-bold">{{$target-(0+$trainingCount)}}</h3> --}}
                                                            <h3 class="my-1 font-20 font-weight-bold">44</h3>
                                                        </div>
                                                        <!--end col-lg--->
                                                        <div class="col-lg-3 align-self-center">
                                                            <div
                                                                class="d-flex justify-content-center align-items-center thumb-md rounded-circle mx-auto">
                                                                <i data-feather="user-x"
                                                                   class="align-self-center icon-lg icon-dual-danger"></i>
                                                            </div>
                                                        </div>
                                                        <!--end col-lg--->
                                                    </div>
                                                    <!--end row-->
                                                </div>
                                                <!--end card-body-->
                                            </div>
                                            <!--end card-->
                                        </div>
                                        <!--end col-lg--->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end card -->
                </div>
                <!--end col-lg--->
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="row align-items-center mb-0">
                                <div class="col-lg-12 col-sm-12">
                                    <h4 class="mt-0 mb-0 page-title text-dark">Job Post Analytics (Field Force)</h4>
                                </div>

                                <!--end col-lg--->
                            </div>
                            <hr>
                            <div class="text-center">
                                <canvas id="myChart4" width="100%" height="300"></canvas>
                            </div>
                            <!--end /div-->
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end card-->
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-lg-12">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="row align-items-center mb-0">
                                <div class="col-lg-12 col-sm-12">
                                    <h4 class="mt-0 mb-0 page-title text-dark">Job Post Analytics (Desk Job)</h4>
                                </div>

                                <!--end col-lg--->
                            </div>
                            <hr>
                            <div class="text-center">
                                <canvas id="myChart4D" width="100%" height="300"></canvas>
                            </div>
                            <!--end /div-->
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end card-->
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="card h-100">
                        <div class="card-body">
                        <form class="form-horizontal form-wizard-wrapper" method="post"
                                  class="form-horizontal form-wizard-wrapper"
                                  action="{{ url()->route('dashboard') }}">
                                @csrf
                            <div class="row align-items-center mb-0">
                                <div class="col-lg-4 col-sm-4">
                                    <h4 class="mt-0 mb-0 page-title text-dark">Gap Report (Dhaka Zone)</h4>
                                </div>
                                <div class ="col-lg-4 col-sm-4">                                
                                    <div class="form-group">
                                        <label class="text-bold-600 text-uppercase" for="serialno">Zone</label>
                                        <select class="form-control" id="zone_id" name="zone_id"  >
                                            <option value="">Select Zone</option>
                                            @foreach($zonename as $zone)
                                            <option value="{{ $zone->id }}" @if( request()->zone_id == $zone->id) selected="selected" @else disable="disable" @endif>{{ $zone->name ?? '' }}</option>
                                            @endforeach
                                        </select> 
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <a href="{{route('admin.recruitment-report')}}"
                                            class="btn btn-danger waves-effect waves-light mt-4 mr-2"><i
                                                class="ti-reload mr-2"></i>Clear</a>
                                        <button type="submit" class="btn btn-primary waves-effect waves-light mt-4">
                                            <i
                                                class="ti-search mr-2"></i>Filter Now
                                        </button>
                                    </div>
                                </div>

                                <!--end col-lg--->
                            </div>
                        </form>
                            <hr>
                            <div class="text-center">
                                <canvas id="myChart3" width="100%" height="300"></canvas>
                            </div>
                            <!--end /div-->
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end card-->
                </div>
            </div>
            <!-- end row -->
            <div class="row mt-4">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row align-items-center mb-0">
                                <div class="col-lg-5 col-sm-12 ">
                                    <h4 class="mt-0 mb-0 page-title text-dark"> Statistics of job posts </h4>
                                </div>
                            {{-- <div class="col-lg-7 d-flex align-items-center mob-block pl-0">
                                <div class="col-md-4 col-sm-12">
                                    <div class="form-group mb-0">
                                        <select class="select2 form-control mb-3 custom-select" id="questype">
                                            <option selected value="FF">Field Force</option>
                                            <option value="CO">Telesales</option>
                                            <option value="ID">Merchant Support</option>
                                            <option value="ED">Scribe</option>
                                            <option value="ED">Intern</option>
                                            <option value="ED">Others</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-12">
                                    <div class="form-group mb-0">
                                        <select class="select2 form-control mb-3 custom-select" id="questype">
                                            <option selected disabled value="">Location</option>
                                            <option value="AZ">Multiple Choice</option>
                                            <option value="CO">Direct Answer</option>
                                            <option value="ID">Yes/No</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-12 pr-0">
                                    <div class="form-group mb-0">
                                        <div class="input-group">
                                            <input type="text" class="form-control" name="daterange">
                                            <div class="input-group-append"><span class="input-group-text"><i
                                                        class="dripicons-calendar"></i></span></div>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                            <!--end col-lg--->
                            </div>
                            <hr>
                            <div class="row mt-4">
                                <div class="col-lg-12">
                                    <div id="accordion" role="tablist" aria-multiselectable="true" class="acc-header">
                                        <!-- Accordion Item 1 -->

                                        @foreach($datas as $data)
                                            <div class="card">
                                                <div class="card-header" role="tab"
                                                     id="accordionHeading_{{ $loop->iteration ?? '' }}">
                                                    <div class="mb-0 row">
                                                        <div class="col-lg-12 accordion-head">
                                                            <a data-toggle="collapse" data-parent="#accordion"
                                                               href="#accordionBody_{{ $loop->iteration ?? '' }}"
                                                               aria-expanded="false" aria-controls="accordionBodyOne"
                                                               class="collapsed ">
                                                                <i class="fa fa-angle-down" aria-hidden="true"></i>
                                                                <h4 class="mt-0 mb-0 header-title">{{ $data['title'] ?? '' }}</h4>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="accordionBody_{{ $loop->iteration ?? '' }}"
                                                     class="collapse {{ ($loop->iteration == 1) ? 'show' : '' }}"
                                                     role="tabpanel" aria-labelledby="accordionHeadingOne"
                                                     aria-expanded="false">
                                                    <div class="col-lg-12">
                                                        {{-- <div class="text-center">
                                                           <h6 class="bg-light-alt py-3 px-2 mb-0">
                                                              <i data-feather="calendar" class="align-self-center icon-xs me-1"></i>
                                                              01 January 2021 to 31 December 2021
                                                           </h6>
                                                        </div> --}}
                                                        <div class="table-responsive mt-2 mb-3">
                                                            <table id="ovijogtable2"
                                                                   class="table border-dashed table-bordered mb-0">
                                                                <thead>
                                                                <tr>
                                                                    <th>SL.</th>
                                                                    <th class="text-center">Area</th>
                                                                    <th class="text-center">Required</th>
                                                                    <th class="text-center">Recruitment Target</th>
                                                                    <th class="text-center">Active</th>
                                                                    <th class="text-center">In Training</th>
                                                                    <th class="text-center">Deficiency</th>

                                                                </tr>
                                                                </thead>
                                                                <tbody>
                                                                                                                                @foreach($data['details'] as $value)
                                                                    <tr>
                                                                        <td>{{ $ii }}</td>
                                                                        <td class="text-center">{{ $value->jobArea->name ?? '' }}</td>
                                                                        <td class="text-center">{{ $value->no_of_vacancy ?? '' }}</td>
                                                                        <td class="text-center">{{ $value->target_recruitment ?? '' }}</td>
                                                                        <td class="text-center">0</td>
                                                                        <td class="text-center">