@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">{{ __('followup_list') }}({{@$count}})</h3>
                        <div>
                            @if (userCan('admin.assign'))
                                @if (request('assign_to'))
                                    <a href="{{ route('candidate.index', ['assign_to' => request('assign_to'), 'followUp' => 'no_followUp']) }}" class="ml-1 text-light btn bg-info d-flex align-items-center justify-content-center">
                                        Today's Assigned Customer
                                    </a>   
                                @else
                                    <a href="{{ route('candidate.index', ['assign_to' => Auth::user()->id, 'followUp' => 'no_followUp']) }}" class="ml-1 text-light btn bg-info d-flex align-items-center justify-content-center">
                                        Today's Assigned Customer
                                    </a>  
                                @endif
                            @else
                            <a href="{{ route('candidate.index', ['assign_to' => Auth::user()->id, 'followUp' => 'no_followUp']) }}" class="ml-1 text-light btn bg-info d-flex align-items-center justify-content-center">
                                Today's Assigned Customer
                            </a>                            
                            @endif
                        </div>
                    </div>
                </div>

                        {{-- Search  --}}
                <div>
                    <button id="toggleFilterButton" class="btn btn-primary m-3">Filters</button>
                    @if(request('created_by') || request('created_by') || request('created_by') || request('created_by') || request('created_by') || request('created_by') || request('created_by')|| request('created_by') || request('created_by'))
                    <form id="formSubmit" action="{{ route('candidate.getFollowup') }}" method="GET">
                    @else
                    <form id="formSubmit" action="{{ route('candidate.getFollowup') }}" method="GET" style="display: none;">
                    @endif
                  
                        <div class="card-body border-bottom row">
                            <div class="col-2">
                                <label>{{ __('search') }}</label>
                                <input name="searchName" type="text" placeholder="{{ __('customer') }} {{ __('name') }}" class="form-control"
                                    value="{{ request('searchName') }}">
                            </div>
                        
                            @if (userCan('admin.assign'))
                            <div class="col-2">
                                <label>Created By</label>
                                <select name="created_by" id="created_by" class="form-control mr-3">
                                    <option value="NULL" {{ (request('created_by') == null || request('created_by') == '' || request('created_by') == 'NULL') ? 'selected' : '' }}>Select created By</option>
                                    
                                    @foreach ($admin_list as $option)
                                    
                                        @if (!@empty($option))
                                            <option value="{{ $option['id'] }}"
                                                {{ request('created_by') == $option['id'] ? 'selected' : '' }}>
                                                {{ $option['name'] }}  
                                                @if ($option && $option->roles)
                                                    @foreach ($option->roles as $role)
                                                        --{{ $role->name }}--
                                                    @endforeach
                                                @endif  
                                                
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-2">
                                <label>Assign To</label>
                                <select name="assign_to" id="assign_to" class="form-control mr-3">
                                    <option value="">Select Assign To</option>
                                    @foreach ($admin_list_assign as $option)
                                        @if (!@empty($option))
                                            <option value="{{ $option['id'] }}"
                                                {{ request('assign_to',Auth::user()->id) == $option['id'] ? 'selected' : '' }}>
                                                {{ $option['name'] }}
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            @else
                            <input type="hidden" name="created_by" id="created_by"  value="NUll">
                            <input type="hidden" name="assign_to" id="assign_to"  value="{{ Auth::user()->id }}">
                            @endif
                            <div class="col-2">
                                <label>{{ __('status') }}</label>
                                <select name="statusFollowup" class="form-control mr-3">
                                    <option value="">Select Status</option>
                                    <option value="Not Connected" {{ request('statusFollowup') == "Not Connected" ? 'selected' : '' }}>Not Connected</option>
                                    <option value="Connected" {{ request('statusFollowup') == "Connected" ? 'selected' : '' }}>Connected</option>
                                </select>
                            </div>
                            
                            <div class="col-2">
                                <label>{{ __('type') }}</label>
                                <select name="type" class="form-control mr-3">
                                    <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>
                            </div>
                            <div class="col-2">
                                <label>{{ __('priority') }}</label>
                                <select name="priority" class="form-control mr-3">
                                    <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>
                            </div>
                            <div class="col-2">
                                <label>Close {{ __('status') }}</label>
                                <select name="closeStatus" class="form-control mr-3">
                                    <option value="">Select Close Status</option>
                                    <option value="1" {{ request('closeStatus') == "1" ? 'selected' : '' }}>Completed</option>
                                    <option value="0" {{ request('closeStatus') == "0" ? 'selected' : '' }}>Pending</option>
                                </select>
                            </div>
                            <div class="col-2">
                                <label>{{ __('created_date') }}</label>
                                <input type="text" id="daterange" name="daterange" value="{{ request('daterange') }}" class="form-control" autocomplete="off" id="my_txtbox" placeholder="Select Date Range" readonly/> 
                            </div>
                            <div class="col-2">
                                <label data-error="wrong" data-success="right" for="form29"
                                class="float-left mr-3">Followup Date & Time</label>
                                <div>
                            
                                    <input type="text" id="datetimeD" name="datetimeD" value="{{ request('datetimeD') }}" class="form-control" autocomplete="off" id="my_txtbox" placeholder="Select Date Range" readonly/> 
                                                                    
                                </div>
                            </div>
                            <div class="col-2 d-flex align-items-end">
                                <button type="submit" class="btn btn-success"><i class="fas fa-search"></i></button>
                                <a href="{{ route('candidate.getFollowup') }}" class="ml-1 btn btn-danger align-items-center justify-content-center"><i class="fas fa-times"></i></a>
                            </div>
                        </div>
                    </form>
                </div>
                       
                
                
               
                {{-- 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>{{ __('customer') }}</th>
                                <th>Followup Time</th>
                                <th>{{ __('priority') }}</th>
                                <th>Current Followup Status</th>
                                <th>Channel</th>
                                <th>Followup Status</th>
                                <th>{{ __('comment') }}</th>
                                <th>Created</th>
                                <th>Created by</th>
                                <th>Assignee</th>
                                <!-- <th>{{ __('action') }}</th> -->
                            </tr>
                        </thead>
                        <tbody>
                       
                            @if ($followups->count() > 0)
                                @foreach ($followups as $followup)
                                    <tr>
                                        <td tabindex="0">{{@$followup->user->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->datetime ? \Carbon\Carbon::parse($followup->datetime)->format('d-M-Y h:m A') : '' }}</td>
                                        <td tabindex="0">{{@$followup->priority}}</td>
                                        <td tabindex="0">
                                            @if(@$followup->close_status == '1')
                                            <span style="color: green;">Completed</span>
                                            @else
                                            <span style="color: red;">Pending</span>
                                           @endif
                                        </td>

                                        <td tabindex="0">{{@$followup->type}}</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" @if(strlen($followup->comment) > 40) 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">{{@$followup->created_at->format('d-M-Y h:m A')}}</td>
                                        <td tabindex="0">
                                            @if (!empty($followup->admin->name))
                                            {{$followup->admin->name}}
                                            @endif
                                        </td>
                                        <td tabindex="0">
                                            @if (!empty($followup->assign_to))
                                            {{ ucwords(adminIdToNameGet($followup->assign_to)) }}
                                            @endif
                                        </td>
                                        <!-- <td></td> -->
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="12">
                                        {{ __('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() {

               // When the "Toggle Filter" button is clicked
                $("#toggleFilterButton").click(function() {
                    // Toggle the visibility of the filter form
                    $("#formSubmit").toggle();
                });

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

            $('input[name="datetimeD"]').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });

            $('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('');
            });

        });


    </script>
@endsection