@extends('zendesk.layouts.app')
    @section('title')
        {{ __('customer_list') }}
    @endsection
    @section('content')
    @if (session('success'))
    <div class="alert alert-success" id="flash-message">
        {{ session('success') }}
    </div>
    @endif
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-12 col-md-2 p-1">
                                <h3 class="card-title line-height-36">{{ __('customer_list') }}</h3>
                            </div>
                            <div class="col align-self-end p-1">
                                <a href="{{ route('zendesk.candidateCreates') }}"
                                    class="btn bg-primary float-right d-flex align-items-center justify-content-center"><i
                                        class="fas fa-plus mr-1"></i> {{ __('create') }}
                                </a>
                            


                                <span class="float-right d-flex align-items-center mx-1 justify-content-center">
                                    <span class="mx-2">Sort By: </span>
                                    <form id="formSubmit" action="{{ route('zendesk.candidateIndex') }}" method="GET"
                                        onchange="this.submit();">

                                        {{-- <div class="col-4">
                                            <label>{{ __('search') }}</label>
                                            <input name="keyword" type="text" placeholder="{{ __('search') }}" class="form-control"
                                                value="{{ request('keyword') }}">
                                        </div> --}}

                                        <select name="sort_by" class="form-control w-100-p">
                                            <option
                                                {{ !request('sort_by') || request('sort_by') == 'latest' ? 'selected' : '' }}
                                                value="latest" selected>
                                                {{ __('latest') }}
                                            </option>
                                            <option {{ request('sort_by') == 'last_activity_date' ? 'selected' : '' }}
                                                value="last_activity_date">
                                                {{ __('latest') }} {{ __('last') }} {{ __('activity') }}
                                            </option>
                                            {{-- <option {{ request('sort_by') == 'oldest' ? 'selected' : '' }} value="oldest">
                                                {{ __('oldest') }}
                                            </option>

                                            <option {{ request('sort_by') == 'oldestUpdate' ? 'selected' : '' }} value="oldestUpdate">
                                                {{ __('oldest') }} {{ __('last') }} {{ __('activity') }}
                                            </option> --}}
                                        </select>

                                    </form>
                                </span>


                            </div>
                        </div>
                    </div>



                    {{-- Table  --}}
                    <div class="card-body table-responsive p-0">
                        <table class="ll-table table table-hover text-nowrap">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('student') }}</th>
                                    {{-- <th>{{ __('role') }}/{{ __('position') }}</th> --}}
                                    {{-- <th>{{ __('applied_jobs') }}</th> --}}
                                    <th>{{ __('country') }}</th>
                                    <th>{{ __('phone') }}</th>
                                    <th>{{ __('Source') }}</th>
                                    <th>{{ __('Stage') }}</th>

                                    {{-- <th>{{ __('joined_date') }}</th> --}}
                                    <th>{{ __('create') }} {{ __('date') }}</th>
                                    <th>{{ __('last') }} {{ __('activity') }}</th>
                                    {{-- @if (userCan('admin.assign')) --}}
                                    <th width="10%">Assign To</th>
                                    {{-- @endif --}}
                                    <th>Follow up</th>
                                    <th width="12%">{{ __('action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <form id="formSubmit" action="{{ route('zendesk.candidateIndex') }}" method="GET">
                                        <td></td>
                                        <td>
                                            <input name="name" id="name" type="text"
                                                placeholder="{{ __('name') }}" class="form-control"
                                                value="{{ request('name') }}">

                                        </td>

                                        <td>
                                            <input id="country" name="country" type="text"
                                                placeholder="{{ __('country') }}" class="form-control"
                                                value="{{ request('country') }}">
                                        </td>
                                        <td>
                                            <input name="phone" id="phone" type="text"
                                                placeholder="{{ __('phone') }}" class="form-control"
                                                value="{{ request('phone') }}">
                                        </td>
                                        <td>
                                            <select name="source" id="source" class="form-control mr-3">
                                                <option class="d-none" value="">Select</option>
                                                @foreach ($sourcesData as $sd)
                                                <optgroup label="{{ $sd->name }}"> 
                                                    @foreach ($sd->source as $ssd)
                                                    <option
                                                    {{ request('source') == $ssd->name ? 'selected' : '' }}
                                                    value="{{ $ssd->name }}"> {{ $ssd->name }}</option>
                                                    @endforeach
                                                </optgroup>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select name="stages"
                                                class="form-control @error('stages') is-invalid @enderror w-100-p select2bs4"
                                                id="stageSelect">
                                                <option class="d-none">Select</option>
                                            </select>
                                        </td>

                                        <td>
                                            <input type="text" id="daterange" name="daterange"
                                                value="{{ request('daterange') }}" class="form-control" autocomplete="off"
                                                id="my_txtbox" placeholder="select date range" />
                                            @error('start_date')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </td>

                                        <td>
                                            <input type="text" id="daterange_activity" name="daterange_activity"
                                                value="{{ request('daterange_activity') }}" class="form-control"
                                                autocomplete="off" id="my_txtbox_activity"
                                                placeholder="select activity date " />
                                            @error('start_date')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </td>
                                        <td>
                                            <select name="assign_to" id="assign_to" class="form-control mr-3">
                                                <option class="d-none" value="">Select</option>
                                                @foreach ($admin_list as $option)
                                                    @if (!@empty($option))
                                                        <option value="{{ $option['id'] }}"
                                                            {{ old('assign_to') === $option['id'] ? 'selected' : '' }}>
                                                            {{ $option['name'] }}
                                                        </option>
                                                        {{-- <option value="{{ $option['id'] }}"
                                                            {{ old('assign_to', auth('admin')->user()->id) === $option['id'] ? 'selected' : '' }}>
                                                            {{ $option['name'] }}
                                                        </option> --}}
                                                    @endif
                                                @endforeach
                                            </select>
                                        </td>

                                        <td>
                                            <select name="followUp" id="followUp" class="form-control mr-3">
                                                <option value="">Select</option>
                                                <option value="all">ALL FollowUp</option>
                                                <option value="no_followUp">Not FollowUp</option>
                                            </select>
                                        </td>
                                        @if (request('name') ||
                                                request('email') ||
                                                request('source') ||
                                                request('phone') ||
                                                request('daterange') ||
                                                request('country') ||
                                                request('daterange_activity') ||
                                                request('stages') ||
                                                request('followUp'))
                                            <td width="10%">
                                                @if (request('name') ||
                                                        request('email') ||
                                                        request('source') ||
                                                        request('phone') ||
                                                        request('daterange') ||
                                                        request('daterange_activity') ||
                                                        request('stages') ||
                                                        request('followUp') ||
                                                        request('country'))
                                                    <a href="{{ route('zendesk.candidateIndex') }}"
                                                        class="btn btn-danger align-items-center justify-content-center"><i
                                                            class="fas fa-times"></i>
                                                    </a>
                                                @endif
                                                <button type="submit" class="btn btn-primary"><i
                                                        class="fas fa-search"></i></button>


                                            </td>
                                        @else
                                            <td width="10%">
                                                <button type="submit" class="btn btn-primary"
                                                    style="width:-webkit-fill-available;"><i
                                                        class="fas fa-search mr-2"></i>{{ __('search') }}</button>
                                                </a>
                                            </td>
                                        @endif
                                    </form>
                                </tr>
                                @if ($candidates->count() > 0)
                                    @foreach ($candidates as $candidate)
                                        <tr>
                                            <td>{{ $candidate->user_id }}</td>
                                            <td tabindex="0">
                                                <a href="{{ route('zendesk.candidatEdit', $candidate->id) }}" class="company">
                                                    <img src="{{ $candidate->photo }}" alt="image">
                                                    <div>
                                                        <h2>{{ $candidate->user->name }} {{ @$candidate->user->middle_name }} {{ @$candidate->user->last_name }}</h2>
                                                        <p>{{ $candidate->user->email }}</p>
                                                    </div>
                                                </a>
                                            </td>
                                            <td tabindex="0">
                                                {{ @$candidate->user->country }}
                                            </td>
                                            <td tabindex="0">
                                                @if (!empty($candidate->user->country_code))
                                                    + {{ @$candidate->user->country_code }}
                                                @endif
                                                {{ @$candidate->user->phone }}
                                            </td>
                                            <td>
                                                {{ @$candidate->user->source }}
                                            </td>
                                            <td>
                                                {{ @$candidate->user->stages }}
                                            </td>
                                            <td>
                                                @if (!empty($candidate->user->created_at))
                                                    {{ dateMonthTimeFormat($candidate->user->created_at) }}
                                                @endif
                                            </td>
                                            <td>
                                                @if (!empty($candidate->user->last_activity_date))
                                                    {{ dateMonthTimeFormat($candidate->user->last_activity_date) }}
                                                @endif
                                            </td>

                                            <td>
                                                @if (!empty($candidate->user->assign_to))
                                                    {{ ucwords(adminIdToNameGet($candidate->user->assign_to)) }}
                                                @endif
                                            </td>
                                            {{-- @endif --}}
                                            <td>

                                                @if (!$candidate->followup->isEmpty())
                                                    @if ($candidate->followup->count() > 0)
                                                        @foreach ($candidate->followup as $key => $followup)
                                                            @if ($key == 4)
                                                            @break
                                                        @endif
                                                        @if ($followup->follow_up_status == 'Not Connected')
                                                            <span class="badge badge-danger " data-bs-toggle="popover"
                                                                title="{{ dateMonthTimeFormat(@$followup->datetime) }}"
                                                                data-content="{!! @$followup->comment !!}"
                                                                data-trigger="hover focus" data-placement="top">
                                                                @if (!empty($followup->datetime))
                                                                    {{ dateMonthTimeFormatOne(@$followup->datetime) }}
                                                                @else
                                                                    {{ dateMonthTimeFormatOne(@$followup->created_at) }}
                                                                @endif
                                                            </span>
                                                        @else
                                                            <span class="badge badge-info " data-bs-toggle="popover"
                                                                title="{{ dateMonthTimeFormat(@$followup->datetime) }}"
                                                                data-content="{!! @$followup->comment !!}"
                                                                data-trigger="hover focus" data-placement="top">
                                                                @if (!empty($followup->datetime))
                                                                    {{ dateMonthTimeFormatOne(@$followup->datetime) }}
                                                                @else
                                                                    {{ dateMonthTimeFormatOne(@$followup->created_at) }}
                                                                @endif
                                                            </span>
                                                        @endif
                                                    @endforeach
                                                @endif
                                            @else
                                                <span class="badge badge-danger">Not Followed</span>
                                            @endif

                                        </td>
                                        <td>
                                            <a href="{{ route('zendesk.candidatEdit', $candidate->id) }}"
                                                class="btn ll-mr-4 ll-p-0">
                                                <x-svg.table-edit />
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="8">
                                        {{ __('no_data_found') }}
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                    @if ($candidates->count())
                        <div class="mt-3 d-flex justify-content-center">
                            {{ $candidates->onEachSide(1)->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    </div>
    @endsection

    @section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 35px;
            height: 19px;
        }

        /* Hide default HTML checkbox */
        .switch input {
            display: none;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 15px;
            width: 15px;
            left: 3px;
            bottom: 2px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input.success:checked+.slider {
            background-color: #28a745;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(15px);
            -ms-transform: translateX(15px);
            transform: translateX(15px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </style>
    @endsection
    @section('script')
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.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>
        $(document).ready(function() {

            $('#flash-message').fadeIn().delay(5000).fadeOut();

            var stages_name = "{{ request('stages') }}";
            $.ajax({
                url: "{{ url('stageArray.php') }}?t=" + stages_name,
                success: function(res) {
                    console.log(res);
                    $("#stageSelect").html(res);
                }
            });


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

            $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
            // date picker end
            $("#my_txtbox").keypress(function(event) {
                event.preventDefault();
            });


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

            $('input[name="daterange_activity"]').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
            // date picker end
            $("#my_txtbox_activity").keypress(function(event) {
                event.preventDefault();
            });
        });

        function validate() {
            if (
                $('#title').val().length > 0) {
                $('#crossB').removeClass('d-none');
            } else {
                $('#crossB').addClass('d-none');
            }
        }

        $('#formSubmit').on('change', function() {
            $(this).submit();
        });


        function RemoveFilter(id) {
            $('#' + id).val('');
            $('#formSubmit').submit();
        }

        // $(".popover").popover({ trigger: "hover" });
        $(document).ready(function() {
            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
            var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
                return new bootstrap.Popover(popoverTriggerEl)
            });
        });

        // $('table').on('click','.assign_to_show',function(){
        //     // alert($(this).hide());
        //     // alert();
        //     let data_id = $(this).data('id');
        //       alert(data_id);
        //     $('.assign_to_hide, #'+data_id+').removeClass('d-none');
        //     $('.assign_to_show, #'+data_id+').addClass('d-none');
        //     // $('assign_to_hide'+data_id).hide();
        // });

        $('table').on('click', '.assign_to_show', function() {
            let data_id = $(this).data('id');
            // alert(data_id);
            $('.assign_to_hide' + data_id).removeClass('d-none');
            $('.assign_to_show' + data_id).addClass('d-none');
            // $('.assign_to_hide, #' + data_id).removeClass('d-none');
            // $('.assign_to_show, #' + data_id).addClass('d-none');
        });


        function assignToChange(id, assign_to) {
            if (confirm("Are you sure you want to assign this User?")) {
                $.ajax({
                    url: "{{ route('candidate.assignToChange') }}",
                    type: "POST",
                    data: {
                        id: id,
                        assign_to: assign_to,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(result) {
                        //  console.log(result)
                        if (result.status == "1") {
                            toastr.success("Assign User Successfully");
                        } else {
                            toastr.error("something went wrong");
                        }

                    }
                });
            }
        }
    </script>
    @endsection