@extends('admin.layouts.app')
@section('title')
    {{ __('followup_list') }}
@endsection
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between">
                        <h3 class="card-title line-height-36">{{ __('customer_list') }}({{@$count}})</h3>
                        <div>
                        </div>
                    </div>
                </div>

                {{-- Search  --}}
                

                {{-- Table  --}}
                <div class="card-body table-responsive p-0">
                    <table class="table table-striped table-hover text-nowrap table-bordered">
                        <thead>
                            <tr>
                                <th>{{ __('id') }}</th>
                                <th>{{ __('followup_user') }}</th>
                                <th>{{ __('comment') }}</th>
                                <th>{{ __('type') }}</th>
                                <th>{{ __('followup_datetime') }}</th>
                                <th>{{ __('status') }}</th>
                                <th>{{ __('priority') }}</th>
                                <th>{{ __('created_date') }}</th>
                                <th>{{ __('Created by') }}</th>
                                <th>{{ __('action') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <form id="formSubmit" action="{{ route('candidate.getFollowup') }}" method="GET">
                                <td colspan="2"><input name="searchName" type="text" placeholder="Search Name" class="form-control"
                                    value="{{ request('searchName') }}"></td>

                                <td><input name="comment" type="text" placeholder="Search Comment" class="form-control"
                                    value="{{ request('comment') }}"></td>

                                <td><select name="type" class="form-control mr-3 w-auto">
                                    <option value="">Select Type</option>
                                    <option value="Inbound Call" {{ request('type') == "Inbound Call" ? 'selected' : '' }}>Inbound Call</option>
                                    <option value="Outbound Call" {{ request('type') == "Outbound Call" ? 'selected' : '' }}>Outbound Call</option>
                                    <option value="Chat" {{ request('type') == "Chat" ? 'selected' : '' }}>Chat</option>
                                    <option value="Email" {{ request('type') == "Email" ? 'selected' : '' }}>Email</option>
                                    <option value="Inwards" {{ request('type') == "Inwards" ? 'selected' : '' }}>Inwards</option>
                                    <option value="Outwards" {{ request('type') == "Outwards" ? 'selected' : '' }}>Outwards</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" readonly/></td>
                                
                                <td><select name="statusFollowup" class="form-control mr-3 w-auto">
                                    <option value="Not Connected" {{ request('statusFollowup') == "Not Connected" ? 'selected' : '' }}>Not Connected</option>
                                    <option value="Connected" {{ request('statusFollowup') == "Connected" ? 'selected' : '' }}>Connected</option>
                                    {{-- <option value="Both" {{ request('statusFollowup') == "Both" ? 'selected' : '' }}>Both</option> --}}
                                </select></td>
                          

                                <td><select name="priority" class="form-control mr-3 w-auto">
                                    <option value="">Select Priority</option>
                                    <option value="High" {{ request('priority') == "High" ? 'selected' : '' }}>High</option>
                                    <option value="Medium" {{ request('priority') == "Medium" ? 'selected' : '' }}>Medium</option>
                                    <option value="Low" {{ request('priority') == "Low" ? 'selected' : '' }}>Low</option>
                                </select></td>

                                <td colspan="2">
                                    <select name="other_detail" class="form-control mr-3">
                                        <option value="today" selected>Select Followup</option>
                                        <option value="my_followup" {{ request('other_detail') == "my_followup" ? 'selected' : '' }}>My Followup</option>
                                        <option value="other_followup" {{ request('other_detail') == "other_followup" ? 'selected' : '' }}>Other Followup</option>
                                    </select>
                                </td>
                                {{-- <td colspan="2">
                                    <select name="other_detail" class="form-control mr-3">
                                        <option value="today" {{ request('other_detail') == "today" ? 'selected' : '' }}>Today</option>
                                        <option value="all_time" {{ request('other_detail') == "all_time" ? 'selected' : '' }}>All Time</option>
                                        <option value="other_follow" {{ request('other_detail') == "other_follow" ? 'selected' : '' }}>Other Follow</option>
                                    </select>
                                </td> --}}

                                
                                
                                <td>
                                    <button type="submit" class="btn btn-success"><i class="fas fa-search"></i></button>
                                    
                                    {{-- @php
                                        dd(request('statusFollowup')!='Not Connected');
                                    @endphp --}}
                                    @if (request('searchName') || request('comment') || request('type') || request('daterange') || request('priority') || (request('statusFollowup')=='Connected') || (request('other_detail')=='my_followup') || (request('other_detail')=='other_followup') )
                                    {{-- @if (request('searchName') || request('comment') || request('type') || request('daterange') || request('priority') || (request('other_detail') != 'all_time ||other_follow')); --}}
                                        <a href="{{ route('candidate.getFollowup') }}" class="btn btn-danger align-items-center justify-content-center"><i class="fas fa-times"></i></a>
                                    @endif
                                
                                </td>
                                </form>
                            </tr>
                            @if ($followups->count() > 0)
                                @foreach ($followups as $followup)
                                    <tr>
                                        <td tabindex="0">{{@$followup->candidate->id}}</td>
                                        @if(isset($followup->user->id))
                                        <td tabindex="0">
                                            <a href="{{ route('candidate.edit', $followup->candidate->id) }}" class="text-primary btn ll-mr-4 ll-p-0">
                                                <p class="highlight">{{ ucwords(substr($followup->user->name, 0, 27)) }}</p>
                                            </a>
                                        </td>
                                        @else
                                        <td></td>
                                        @endif
                                        {{-- <td tabindex="0">{{@$followup->comment}}</td> --}}
                                        <td tabindex="0" @if(strlen($followup->comment) > 50) class="hoverable-cell" @endif>
                                            @if(strlen($followup->comment) > 40)
                                              {{ ucwords(substr($followup->comment, 0, 40)) }}...
                                              <span class="full-content">{{ ucwords($followup->comment) }}</span>
                                            @else
                                              {{ ucwords($followup->comment) }}
                                            @endif
                                          </td>

                                        {{-- <td tabindex="0" class="hoverable-cell">
                                            {{ substr($followup->comment, 0, 50) }}
                                            <span class="full-content">{{ $followup->comment }}</span>
                                        </td> --}}
                                        <td tabindex="0">{{@$followup->type}}</td>
                                        {{-- <td tabindex="0">{{@$followup->datetime}}</td> --}}
                                        <td tabindex="0">{{$followup->datetime ? \Carbon\Carbon::parse($followup->datetime)->format('d-M-Y h:m A') : '' }}</td>
                                        {{-- <td tabindex="0">{{@$followup->follow_up_status}}</td> --}}

                                        <td tabindex="0" @if ($followup->follow_up_status == 'Connected') style="color: green;" @elseif ($followup->follow_up_status == 'Not Connected') style="color: red;" @endif>
                                            {{ @$followup->follow_up_status }}
                                        </td>

                                        <td tabindex="0">{{@$followup->priority}}</td>
                                        <td tabindex="0">{{@$followup->created_at->format('d-M-Y h:m A')}}</td>
                                        {{-- <td tabindex="0">{{@$followup->user->name}}</td> --}}
                                        
                                        
                                        {{-- <td tabindex="0">{{@$followup->user->name}}</td> --}}
                                        <td tabindex="0">
                                            @if (!empty($followup->admin->name))
                                            {{$followup->admin->name}}
                                            @endif
                                        </td>
                                        <td></td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="10">
                                        {{ __('no_data_found') }}
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                    @if ($followups->count())
                        <div class="mt-3 d-flex justify-content-center">
                            {{ $followups->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%;
        }

    .hoverable-cell {
        position: relative;
        cursor: pointer;
    }

    .full-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        white-space: normal;
        background-color: #f9f9f9;
        padding: 5px;
        border: 1px solid #ccc;
        border-top: none;
        z-index: 1;
    }
    .hoverable-cell:hover .full-content {
        display: block;
    }

    </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>
        $(document).ready(function() {
            $('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('');
            });
        });

        // function todayFollowup() {
        // var otherValue = "today";
        // window.location.href = "{{ route('candidate.getFollowup') }}" + "?other_detail=" + encodeURIComponent(otherValue);
        // }

    </script>
@endsection