@extends('admin.layouts.admin')

@section('content')
    <!-- Page Content-->
    <div class="page-content-tab">
        <div class="container-fluid">
            
            <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                                        
                                    </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-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">Approved Positions</h4>
                                                            <h3 class="my-1 font-20 font-weight-bold">{{ $approve[0] ?? '' }}</h3>
                                                        </div>                                                        
                                                    </div>
                                                    <!--end row-->
                                                </div>
                                                <!--end card-body-->
                                            </div>
                                            <!--end card-->
                                        </div>
                                        <!--end col-lg--->
                                        <div class="col-lg-2">
                                            <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">Active</h4>
                                                            <h3 class="my-1 font-20 font-weight-bold">{{ $active_list[0] ?? '' }}</h3>
                                                        </div>
                                                    </div>
                                                    <!--end row-->
                                                </div>
                                                <!--end card-body-->
                                            </div>
                                            <!--end card-->
                                        </div>
                                        <div class="col-lg-2">
                                            <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">Required</h4>
                                                            
                                                            <h3 class="my-1 font-20 font-weight-bold">{{ $required_list[0] ?? '' }}</h3>
                                                        </div>
                                                    </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">Training Pool</h4>
                                                            <h3 class="my-1 font-20 font-weight-bold">{{ $trainee_pool[0] ?? 0 }}</h3>
                                                        </div>
                                                    </div>
                                                    <!--end row-->
                                                </div>
                                                <!--end card-body-->
                                            </div>
                                            <!--end card-->
                                        </div>
                                        <div class="col-lg-2">
                                            <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">Deficiency</h4>
                                                            <h3 class="my-1 font-20 font-weight-bold">
                                                                {{ $deficiency_list[0] ?? 0 }}
                                                            </h3>
                                                        </div>
                                                    </div>
                                                    <!--end row-->
                                                </div>
                                                <!--end card-body-->
                                            </div>
                                            <!--end card-->
                                        </div>
                                    </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">Recruitment Chart</h4>
                                </div>

                                <!--end col-lg--->
                            </div>
                            <hr>
                            <div class="text-center">
                                <canvas id="myChart8" 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="get"
                                  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">
                                    @php
                                        if(request()->zone_id){
                                            $zone = App\Modules\RecruitmentModule\Models\JobArea::where('id', request()->zone_id)->first();
                                    @endphp
                                        <h4 class="mt-0 mb-0 page-title text-dark">Gap Report ({{ $zone->name ?? ''}})</h4>
                                    @php
                                        } else{
                                    @endphp
                                        <h4 class="mt-0 mb-0 page-title text-dark">Gap Report (Dhaka Zone)</h4>
                                    @php                                     
                                        }
                                    @endphp
                                    
                                </div>
                                <div class ="col-lg-4 col-sm-4">                                
                                    <div class="form-group">
                                        <label class="text-bold-600 text-uppercase" for="serialno"> </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('dashboard')}}"
                                            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">