@extends('admin.layouts.app')
@section('title')
Candidate Applications
@endsection
@section('content')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title line-height-36">Candidate Applications MappIng List
                        <span class="ml-1 badge bg-primary">
                            {{ $allCandidateApplication}}
                        </span>
                    </h3>
                    <div class="align-items-center  ml-auto">
                        @if (userCan('candidateApplication.view'))
                        <a href="{{ route('candidateApplication.index') }}"
                            class="btn bg-primary float-right d-flex align-items-center justify-content-center">
                            <i class="fas fa-arrow-left"></i>&nbsp; {{ __('back') }}
                        </a>
                        @endif
                        {{-- @if (userCan('candidateApplication.mapListCreate'))
                        <button id="mapListCreate" onclick="MapListCreate()" data-toggle="tooltip" data-placement="top"
                            title="MappIng Selected Candidate Applications"
                            class="d-none mr-3 btn bg-danger float-right align-items-center justify-content-center">
                            <img src="{{ asset('backend/image/maping_image.png') }}" alt="MappIng List" width="20px" height="20px">
                            <span class="ml-1">
                                MappIng
                                <span id="selectedCount"
                                    class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">
                                </span>
                            </span>
                        </button>
                        @endif --}}
               
                    </div>
                
                </div>
            
                <form id="formSubmit" action="{{ route('candidateApplication.mappIngList') }}" method="GET">
                    <div class="row p-1 mt-2 mx-2">
                        <div class="col-md-2 dropdown">
                            {{-- <x-forms.input type="date" name="created_at" placeholder="Enter Created Date"
                                value="{{ old('created_at', request('created_at')) }}" /> --}}
                            <input type="text" id="created_at" name="created_at" value="{{ request('created_at') }}"
                                class="form-control" autocomplete="off" id="my_txtbox" placeholder="Date Range"
                                readonly />
                            <x-forms.error name="created_at" />
                        </div>
                
                        <div class="col-md-2 dropdown">
                            @php
                            $months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
                            @endphp
                            
                            <select name="intake_months[]"
                                    class="form-control select2bs4months @error('intake_months') is-invalid @enderror"
                                    id="intake_months" multiple>
                            
                                @foreach ($months as $month)
                                    <option 
                                    @if (!empty(request('intake_months'))) 
                                    @foreach (request('intake_months') as $key => $intake_months)
                                        {{ $month == $intake_months ? 'selected' : '' }}   
                                    @endforeach 
                                @endif
                                    value="{{ $month }}">
                                    {{ $month }}
                                  </option>
                                @endforeach
                            
                            </select>
                        </div>

                        <div class="col-md-2 dropdown">
                            <select class="form-control  select2bs4years" name="intake_years[]" id="" multiple>
                                @for ($i = 2022; $i <=  date('Y')+3; $i++)
                                    <option
                                    @if (!empty(request('intake_years'))) 
                                        @foreach (request('intake_years') as $key => $intake_year)
                                            {{ $i == $intake_year ? 'selected' : '' }}   
                                        @endforeach 
                                    @endif
                                        value="{{ $i }}">
                                        {{ $i }}
                                    </option>
                                @endfor

                            </select>
                        </div>

                        <div class="col-md-2 dropdown">
                            <select name="university_id" id="university_id" class="form-control select2university">
                                <option value="">{{ __('select_university') }}</option>
                            </select> 
                        </div>

                    
                        <div class="col-md-2 dropdown">
                            <select name="status" class="form-control select2bs4" id="status">
                                <option value="" class="d-none">
                                    Select Status
                                </option>
                                @foreach(get_candidateApplicationStatus_array() as $status)
                                <option {!! request('status')==$status['name'] ? 'selected' : '' !!}
                                    value="{{ $status['name'] }}">{{ $status['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                     


                    </div>
                    <div class="row p-1 my-2 mx-2">
                        <div class="col-md-2 dropdown">
                            <select name="partner"
                                class="select2bs44 form-control {{ error('partner') }}"
                                id="partner">
                                <option value="" class="d-none">
                                    Select Partner
                                </option>
                                @if(isset($partner_find) && !is_null($partner_find))
                                @foreach(@$partner_find as $partner)
                                <option {!! request('partner') == $partner['name'] ? 'selected' : '' !!}
                                    value="{{ $partner['name'] }}">{{ $partner['name'] }}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-4">
                            <input type="text" @if (request('Keyword')) value="{{ request('Keyword') }}" @endif
                                id="Keyword" class="form-control mr-2"
                                placeholder="{{ __('search') }}..." name="Keyword" aria-label="">
                        </div>

                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary float-right"><i class="fas fa-search"></i> {{
                                __('search') }}</button>
                            @if (request('Keyword') || request('status') || request('intake') || request('intake_months') || request('intake_years') ||
                            request('university_id') || request('country') || request('candidate_id') ||
                            request('created_at'))
                            <a href="{{ route('candidateApplication.mappIngList') }}"
                                class="mr-1 float-right btn btn-danger align-items-center justify-content-center"><i
                                    class="fas fa-times"></i></a>
                            @endif

                        </div>
                    </div>
                </form>
            
                <div id="example1_wrapper" class="">
                    <div class="row">
                        <div class="col-sm-12">
                            <table class="table table-hover responsive table-bordered rounded-2">
                                <thead>
                                    <tr class="text-left">
                                        @if ($candidateApplications->count() > 1)
                                        <th width="4%">
                                            <div class="icheck-primary ml-1">
                                                <input type="checkbox" id="checkboxAll">
                                                <label for="checkboxAll">
                                                </label>
                                            </div>
                                        </th>
                                        @endif
                                        <th width="5%">ID</th>
                                        <th >Partner Application ID</th>
                                        {{-- <th>ID</th> --}}
                                        <th>Created Date </th>
                                        {{-- <th>Candidate </th> --}}
                                        <th>University</th>
                                        <th>Course</th>
                                        <th>Intake</th>
                                        <th>Partner</th>
                                        <th>Status</th>
                                      

                                        @if (userCan('candidateApplication.mapListCreate'))
                                        <th>{{ __('action') }}</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($candidateApplications->count() > 0)
                                    @foreach ($candidateApplications as $candidateApplication)
                                    <tr role="row" class="text-left items-center">
                                        @if ($candidateApplications->count() > 1)
                                        <td>
                                            <div class="icheck-primary ml-1">
                                                <input type="checkbox" data-id={{ $candidateApplication->id }}
                                                class="sub_chk" id="checkbox{{ $candidateApplication->id }}">
                                                <label for="checkbox{{ $candidateApplication->id }}">
                                                </label>
                                            </div>
                                        </td>
                                        @endif
                                        <td class="" tabindex="0">
                                            {{ $candidateApplication->id }}

                                        </td>
                                        <td class="">
                                            {{ $candidateApplication->partner_application_id }}
                                        </td>

                                        <td>
                                            <div>
                                              
                                                <span class="badge badge-primary p-1" data-bs-toggle="popover"
                                                    title="{{ dateMonthTimeFormat(@$candidateApplication->created_at) }}"
                                                    data-content="{!! @$candidateApplication->created_at !!}"
                                                    data-trigger="hover focus" data-placement="top">
                                                    {{ dateMonthFormat(@$candidateApplication->created_at)}}

                                                </span>
                                            </div>
                                        </td>
                                       
                                        @if(@$candidateApplication->university->name)
                                        <td class="sorting_1 ">
                                            <span>
                                                {{ @$candidateApplication->university->name}}  @if(@$candidateApplication->university->id)({{ @$candidateApplication->university->id}}) @endif
                                            </span>
                                        </td>
                                        @elseif ($candidateApplication->university_name !== null && ($candidateApplication->university_id === null || $candidateApplication->university_id == 0))
                                         <td class="sorting_1 ">
                                            <span>
                                                {{ @$candidateApplication->university_name}}
                                            </span>
                                        </td>
                                        @else
                                        <td class="sorting_1 ">
                                            <span>
                                               --
                                            </span>
                                        </td>
                                        @endif
                                      
                                        {{-- <td class="course">
                                            @php
                                            $text = @$candidateApplication->courses->name;
                                            $words = str_word_count($text, 1);
                                            @endphp
                                            <div>
                                                @if($words > 0)
                                                @foreach (array_chunk($words, 2) as $wordChunk)
                                                {{ implode(' ', $wordChunk) }}<br>
                                                @endforeach
                                                @else
                                                -NA-
                                                @endif
                                            </div>
                                        </td> --}}

                                        @if(@$candidateApplication->courses->name)
                                        <td class="sorting_1 ">
                                            <span>
                                               {{ @$candidateApplication->courses->name}}  @if(@$candidateApplication->courses->id)({{ @$candidateApplication->courses->id}}) @endif
                                            </span>
                                        </td>
                                        
                                        @elseif ($candidateApplication->course_name !== null && ($candidateApplication->course === null || $candidateApplication->course == 0))
                                         <td class="sorting_1 ">
                                            <span>
                                                {{ @$candidateApplication->course_name}} 
                                            </span>
                                        </td>
                                        @else
                                        <td class="sorting_1 ">
                                            <span>
                                               --
                                            </span>
                                        </td>
                                        @endif
                                        
                                        <td>
                                            <span>
                                                @if(@$candidateApplication->intake_months && @$candidateApplication->intake_years)
                                                   {{ @$candidateApplication->intake_months}} - {{ @$candidateApplication->intake_years}}
                                                @elseif(@$candidateApplication->intake_months)
                                                   {{ @$candidateApplication->intake_months}}
                                                @elseif(@$candidateApplication->intake_years)
                                                   {{ @$candidateApplication->intake_years}}
                                                @else
                                                    --
                                                @endif
                                            </span>
                                        </td>
                                        <td>
                                            <div>
                                                {{ @$candidateApplication->partner}}
                                            </div>
                                        </td>
                                        <td>
                                            <span>
                                                {{ @$candidateApplication->status}}
                                            </span>
                                        </td>
                                      
                                       


                                        @if (userCan('candidateApplication.mapListCreate'))
                                        <td class="sorting_1 d-flex justify-content-center" tabindex="0">
                                            @if (userCan('candidateApplication.mapListCreate'))
                                            <form
                                                action="{{ route('candidateApplication.mapListCreate', $candidateApplication->id) }}"
                                                method="POST" class="d-inline">
                                                @method('POST')
                                                @csrf
                                                <button data-toggle="tooltip" data-placement="top"
                                                    title="Mapping List"
                                                    onclick="return confirm('Are you sure you want to MappIng this item ?');"
                                                    class="btn"><img src="{{ asset('backend/image/maping_image.png') }}" alt="MappIng List" width="20px" height="20px"></button>
                                            </form>
                                            @endif
                                        </td>
                                        @endif
                                    </tr>
                                    @endforeach
                                    @else
                                    <tr>
                                        <td class="text-center" colspan="9">
                                            {{ __('no_data_found') }}
                                        </td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @if (request('perpage') != 'all' && $candidateApplications->total() >
                    $candidateApplications->count())
                    <div class="mt-3 d-flex justify-content-center">
                        {{ $candidateApplications->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('style')
<!-- Custom Link -->
<link rel="stylesheet" href="{{ asset('backend/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('backend/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<style>
    .table {
        margin: 16px 20px;
        overflow:auto;
        display: block;
        width: 98%;
    }

    .course{
        width: 18%;
    }

    .course p{
        margin-bottom: 0;
    }

    td br{
        display: none;
    }

    .table thead th {
        background: #F5F7F9;
        vertical-align: top;
        border-bottom:0 !important;
    }
    .table td, .table th{
        border-top: 0;
        padding: 10px;
    }

    .table>:not(caption)>*>*{
        border-bottom-width:0;
    }

    .table tbody tr:nth-last-of-type(1){
        border-bottom:none;
    }

    td .btn{
        padding: 0px 10px;
    }

    .table thead tr:nth-of-type(1){
        border-top:none;
    }

    .table-bordered td:nth-of-type(1), .table-bordered th:nth-of-type(1),.table-bordered th:nth-last-of-type(1)
    ,.table-bordered tr td:nth-last-of-type(1){
        border:none;
    }

    .select2-container{
        width: 100% !important;
    }
    

    @media screen and (max-width: 1700px){
        table{
            width: 97% !important;
        }
    }

    @media screen and (max-width: 1024px){
        table{
            width: 94% !important;
        }
    }

    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
        .customRow1 {
            margin-top: 10px;
        }

        .customRow2 {
            margin-top: 10px;
            padding-left: 15px;
            padding-right: 15px;
        }

        .customdiv1 {
            margin-top: 5px;
            margin-right: .5rem !important;
        }

        .customdiv2 {
            margin-top: 5px;
            margin-right: .5rem !important;
        }

        .customdiv3 {
            margin-top: 5px;
            margin-bottom: 5px;
            margin-right: .5rem !important;
        }
    }

    .ck-editor__editable_inline {
        min-height: 300px;
    }

    .select2-results__option[aria-selected=true] {
        display: none;
    }

    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
        color: #fff;
        border: 1px solid #fff;
        background: #007bff;
        border-radius: 30px;
    }

    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
        color: #fff;
    }

    body {
        font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    .loader2 {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 2s linear infinite;
        display: none;
        margin-left: 10px;
        /* Adjust the margin as per your layout */
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

@endsection

@section('script')
{{--
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> --}}
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="{{ asset('frontend/secondary-theme/assets/js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{ asset('backend/plugins/select2/js/select2.full.min.js') }}"></script>


<script>
    $(document).ready(function () {
        $('.select2bs4').select2({
            theme: 'bootstrap4',
            minimumResultsForSearch: 20,
        })

        $('.select2bs4months').select2({
        theme: 'bootstrap4',
        multiple: true,
        tags: true,
        placeholder: 'Select Intake Month'
        
        })

        $('.select2bs4years').select2({
        theme: 'bootstrap4',
        multiple: true,
        tags: true,
        placeholder: 'Select Intake years'
        
        })


        var universityId = '{{ request("university_id") }}';

        $('.select2university').select2({
            theme: 'bootstrap4',
            ajax: {
                url: "{{ route('candidateApplication.universityListByName') }}",
                dataType: 'json',
                type: "POST",
                delay: 250,
                data: function (params) {
                    return {
                        term: params.term,
                        _token: '{{ csrf_token() }}'
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.map(function(item) {
                            console.log(item);
                            return {
                                id: item.id,
                                text: `${item.name} (${item.id})`
                            };
                        })
                    };
                },
                cache: true
            },
            minimumInputLength: 1,
            placeholder: 'Search for universities',
            escapeMarkup: function (markup) {
                return markup;
            },
            templateSelection: function (data) {
                return data.text;
            }
        });

        if (universityId) {
            $.ajax({
                url: "{{ route('candidateApplication.universityListByName') }}", // Change this to your route to get university details by ID
                type: 'POST',
                dataType: 'json',
                data: { id: universityId, _token: '{{ csrf_token() }}' },
                success: function (item) {
                    console.log(item);
                    $('.select2university').append(new Option(`${item.name} (${item.id})`, item.id, true, true)).trigger('change');
                }
            });
        }



    });

    $('input[name="created_at"]').daterangepicker({
        autoUpdateInput: false,
        // maxDate: new Date(),
        locale: {
            cancelLabel: 'Clear'
        }
    });
    $('input[name="created_at"]').on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
            'MM/DD/YYYY'));
    });

    $('input[name="created_at"]').on('cancel.daterangepicker', function (ev, picker) {
        $(this).val('');
    });
    $("#checkboxAll").on('click', function () {
        $('input:checkbox').not(this).prop('checked', this.checked);
        SelectIds();
    });
    $(".sub_chk").on('click', function () {
        SelectIds();
    });


    function SelectIds() {

        var Ids = [];
        $(".sub_chk:checked").each(function () {
            Ids.push($(this).attr('data-id'));
        });
        $('#selectedCount').html(parseInt(Ids.length));
        if (Ids != 0) {
            // Show Delete Button
            $('#mapListCreate').removeClass('d-none');
        } else {
            // Hide Delete Button
            $('#mapListCreate').addClass('d-none');
        }
    }

    function MapListCreate() {

        var Ids = [];
        $(".sub_chk:checked").each(function () {
            Ids.push($(this).attr('data-id'));
        });

        if (Ids != 0) {
            
            if (confirm("Are you sure you want to MappIng this item ?") == true) {
                AjaxCall(Ids);
            } else {
                return false;
            }

        } else {
            alert('Please Select First');
        }
    }

    function AjaxCall(value) {
        $.ajax({
            url: "{{ route('candidateApplication.multiple.mapListCreate') }}",
            type: "POST",
            data: {
                ids: value,
                _token: '{{ csrf_token() }}'
            },
            dataType: 'json',
            success: function (result) {
                location.reload();
            }
        });
    };

</script>

@endsection