@extends('admin.layouts.admin')
@section('style')
    <link href="{{ asset('assets/admin/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet"
          type="text/css"/>
@endsection
@section('content')
    <!-- Page Content-->
    <div class="page-content-tab">
        <div class="container-fluid">
            <!-- Page-Title -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <h4 class="page-title">Candidates Status</h4>
                    </div>
                    <!--end page-title-box-->
                </div>
                <!--end col-->
            </div>
            <!--end row-->

            <!-- end page title end breadcrumb -->


            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 mb-0 header-title">Filter</h4>
                            <p class="text-muted mb-3">Search Candidate</p>
                            <form class="form-horizontal form-wizard-wrapper">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="text-bold-600 text-uppercase" for="questype">Job Title</label>
                                            <select name="title_id" id="title_id" class="select2 form-control mb-3 custom-select">
                                                <option selected disabled value="">Select</option>
                                                @foreach($jobTitles as $key=> $title)
                                                <option value="{{ $title->id }}" {{ request('title_id') == $title->id ? 'selected' : '' }}>
                                                    {{$title->name}}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="text-bold-600 text-uppercase" for="questype">Job Area</label>
                                            <select name="area_id" class="select2 form-control mb-3 custom-select">
                                                <option selected disabled value="">Select</option>
                                                @foreach($jobAreas as $key=> $area)
                                                    <option value="{{ $area->id }}" {{ request('area_id') == $area->id ? 'selected' : '' }}>
                                                        {{$area->name}}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="text-bold-600 text-uppercase" for="questype">Status</label>
                                            <select name="status" class="select2 form-control mb-3 custom-select">
                                                <option selected disabled value="">Select</option>
                                                <option value="Preliminary" {{ request('status') == 'Preliminary' ? 'selected' : '' }}>Preliminary</option>
                                                <option value="Shortlisted" {{ request('status') == 'Shortlisted' ? 'selected' : '' }}>Written</option>
                                                <option value="Viva" {{ request('status') == 'Viva' ? 'selected' : '' }}>Viva</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="text-bold-600 text-uppercase" for="questype">Batch</label>
                                            <div id="batch-data">
                                                <select name="batch_id" class="form-control mb-3 custom-select">
                                                <option selected disabled value="">Select Job First</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <a href="{{route('admin.candidates.status')}}"
                                               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 mr-2">
                                                <span class="btn-text"><i class="ti-search mr-2"></i>Filter Now</span>
                                            </button>
                                            <input type="text" id="csv_ids" name="csv_ids" value class="ids_on_click" hidden>
                                            <input type="text" name="filter_batch_id" value={{ request('batch_id') > 0 ? request('batch_id') : 0 }} hidden>
                                            <button id="csvDownload" type="submit" name="download" value="1"
                                                    class="btn btn-success waves-effect waves-light mt-4"><i
                                                    class="fas fa-download"></i> Download as Excel
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <!--end form-->
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end card-->
                </div>
                <!--end col-->
            </div>
            <!--end row-->
            @if(session('alert-green'))
                <div class="alert alert-success mt-3 text-center">
                    {{ session('alert-green') }}
                </div>
            @endif

            @if(session('alert-danger'))
                <div class="alert alert-danger mt-3 text-center">
                    {{ session('alert-danger') }}
                </div>
            @endif
            @if($errors->any())
                <div class="row">
                    <div class="col-md-12 mb-5">
                        @foreach ($errors->all() as $error)
                            <div class="text-danger small mb-1">* {{$error}}</div>
                        @endforeach
                    </div>
                </div>
            @endif


            {{ session('message') }}
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">

                        <div class="card-body">

                            <div class="row">
                                <div class="col-lg-8 col-sm-8">
                                    <h4 class="mt-0 mb-0 header-title">Lists </h4>
                                </div>
                            </div>
                            <!-- end row -->


                            {{--<button type="submit" class="btn btn-danger  btn-sm mt-0 mb-3 deleteMultiple" data-toggle="modal" data-target="#ModalMultipleDelete"> <i class="fa fa-trash mr-2"></i>Delete Selected</button>
                      <button type="submit" class="btn btn-info  btn-sm mt-0 mb-3 inactiveMultiple" data-toggle="modal" data-target="#ModalMultipleInactive"> <i class="fa fa-ban mr-2"></i>Inactive Selected</button>
                      <button type="submit" class="btn btn-info  btn-sm mt-0 mb-3 activeMultiple" data-toggle="modal" data-target="#ModalMultipleActive"> <i class="fa fa-thumbs-up mr-2"></i>Active Selected</button> --}}


                            <div class="row">
                                <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
{{--                                <!-- <h4 class="mt-0 mb-0 header-title">Candidate List (<span--}}
{{--                                        class="text-primary">{{$candidates_total}}</span>) </h4> -->--}}
{{--                                    --}}{{-- <p class="text-muted mb-3">Application Pay As You Go Low Risk</p> --}}
                                </div>
                                <div style="display: none;" class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
                                    <form action="{{ url('/admin/candidates/import_csv') }}" method="POST"
                                          enctype="multipart/form-data">
                                        @csrf
                                        <div class="form-group">
                                            <label for="validationCustom01" class="mb-2 text-bold-600 text-uppercase">Import
                                                CSV<span class="text-danger">*</span> </label>
                                            <div class="input-group">
                                                <input type="file" class="form-control" name="csv_file">
                                                <button class="btn btn-primary ml-2" type="submit">Import</button>
                                            </div>
                                        </div>
                                        <!--end form-group-->
                                    </form>
                                </div>
                            </div>


                            <div class="table-responsive">
                                <table id="datatable" class="table table-bordered dt-responsive nowrap w-100">
                                    <thead>
                                    <tr>
                                        {{--                                        <th><input type="checkbox" class="selectAll"></th>--}}
                                        <th></th>
                                        <th>Candidate Name</th>
                                        <th>Mobile Number</th>
                                        <th>Job Title</th>
                                        {{-- <th>Job Area</th> --}}
                                        <th>Batch</th>
                                        <th>Status</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                                                            <td colspan="7" class="text-center">No Records Found !!</td>
                                    
                                    </tbody>
                                </table>

                            </div>


                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end card-->
                </div>
                <!--end col-->
            </div>
            <!--end row-->


        </div>
        <!-- container -->
    @include('admin.sections.footer')
    <!--end footer-->
    </div>
    <!-- end page content -->
    <!---Active Data Section Ends Here----->
@endsection

@section('script')
    <script src="{{ asset('assets/admin/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/admin/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            // $("#datatable").DataTable({
            //     "scrollX": true
            // });

            $('input[name="from_date"]').daterangepicker({
                autoUpdateInput: true,
                singleDatePicker: true,
                showDropdowns: true,
                minYear: 1971,
                maxYear: parseInt(moment().format('YYYY'), 10),
                autoUpdateInput: false
            });

            $('input[name="from_date"]').on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY'));
            });

            $('input[name="to_date"]').daterangepicker({
                autoUpdateInput: false,
                singleDatePicker: true,
                showDropdowns: true,
                minYear: 1971,
                maxYear: parseInt(moment().format('YYYY'), 10),
                autoUpdateInput: false
            });

            $('input[name="to_date"]').on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY'));
            });
        });
    </script>

<script type="text/javascript">
    $( document ).ready(function() {
    
        $('#title_id').on('change', function() {
            let id =  $(this).val();
            
            if(id != '0')
            {
                $.ajax({
                    type: 'GET',
                    url: '{{ route('admin.candidates.batches')}}',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        id: id
                    },
                    success: function(data){
                        $("#batch-data").html(data);
                    }
                });
            }
            else
            {
                $("#batch-data").html('');
            }

        });


       
    });
    </script>
@endsection