@extends('layouts.app')
@section('content')
    <div class="container-fluid">
        <div class="card show mb-4">
            <div class="card-header">
                <h6>Search Leads</h6>
            </div>
            <div class="card-body">
                <form method="GET" action="{{route('lead.search')}}" class="mr-auto row">
                    @if(auth()->user()->role_id == 1 || auth()->user()->role_id == 2)
                        <div class="col-md-3">
                            <div class="button-container mb-1">
                                <button type="button" class="btn btn-sm btn-success" onclick="selectManagerAll()">Select All</button>
                                <button type="button" class="btn btn-sm btn-danger" onclick="deselecManagerAll()">Deselect All</button>
                            </div>
                            <select class="form-select js-select2" id="manager" name="manager_id[]" multiple="multiple" data-placeholder="Select Agents">
                                @foreach($managers as $manager)
                                    @if(request()->has('manager_id') && in_array($manager->id, request('manager_id')))
                                        <option selected value="{{$manager->id}}">{{$manager->name}}</option>
                                    @else
                                        <option value="{{$manager->id}}">{{$manager->name}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    @endif
                    <div class="col-md-3">
                        <div class="button-container mb-1">
                            <button type="button" class="btn btn-sm btn-success" onclick="selectStatusAll()">Select All</button>
                            <button type="button" class="btn btn-sm btn-danger" onclick="deselectStatusAll()">Deselect All</button>
                        </div>
                        <select class="form-select js-select2" id="status" name="status_id[]" multiple="multiple" data-placeholder="Select Statuses">
                            @foreach($status as $item)
                                @if(request()->has('status_id') && in_array($item->id, request('status_id')))
                                    <option selected value="{{$item->id}}">{{$item->name}}</option>
                                @else
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    @if(auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || Auth::user()->role_id == 3)
                        <div class="col-md-3 mb-3">
                            <div class="button-container mb-1">
                                <button type="button" class="btn btn-sm btn-success" onclick="selectCountryAll()">Select All</button>
                                <button type="button" class="btn btn-sm btn-danger" onclick="deselectCountryAll()">Deselect All</button>
                            </div>
                            <select class="form-select js-select2" id="country" name="country[]" multiple="multiple" data-placeholder="Select Countries">
                                @foreach($countries as $country)
                                    @if(request()->has('country') && in_array($country->name, request('country')))
                                        <option selected value="{{$country->name}}">{{$country->name}}</option>
                                    @else
                                        <option value="{{$country->name}}">{{$country->name}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    @endif

                    <div class="col-md-3">
                        <div class="button-container mb-1" style="opacity:0;pointer-events: none;">
                            <button type="button" class="btn btn-sm btn-success" >Select All</button>
                            <button type="button" class="btn btn-sm btn-danger">Deselect All</button>
                        </div>
                        <select class="form-control" name="affil">
                            <option value="" required="required">Select Affiliate</option>
                            @if(auth()->user()->role_id != 4)
                                @foreach($affils as $item)
                                    <option @if(request()->get('affil') && request()->get('affil') == $item['affiliates']) selected @endif value="{{$item['affiliates']}}">{{$item['affiliates']}}</option>
                                @endforeach
                            @else
                                @foreach($affils as $item)
                                    <option @if(request()->get('affil') && request()->get('affil') == $item) selected @endif value="{{$item}}">{{$item}}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        @if(auth()->user()->role_id == 3 || auth()->user()->role_id == 4)
                            <div class="button-container mb-1" style="opacity:0;pointer-events: none;">
                                <button type="button" class="btn btn-sm btn-success" >Select All</button>
                                <button type="button" class="btn btn-sm btn-danger">Deselect All</button>
                            </div>
                        @endif
                        <input type="text" class="form-control" name="first_name" @if(request()->get('fist_name')) value="{{request()->get('fist_name')}}" @endif placeholder="First Name">
                    </div>

                    <div class="col-md-3 mb-3">
                        @if(auth()->user()->role_id == 3 || auth()->user()->role_id == 4)
                            <div class="button-container mb-1" style="opacity:0;pointer-events: none;">
                                <button type="button" class="btn btn-sm btn-success" >Select All</button>
                                <button type="button" class="btn btn-sm btn-danger">Deselect All</button>
                            </div>
                        @endif
                        <input type="text" class="form-control" name="last_name" @if(request()->get('last_name')) value="{{request()->get('last_name')}}" @endif placeholder="Last name">
                    </div>

                    <div class="col-md-3 mb-3">
                        <input type="text" class="form-control" name="phone" @if(request()->get('phone')) value="{{request()->get('phone')}}" @endif placeholder="Phone">
                    </div>

                    <div class="col-md-3 mb-3">
                        <input type="text" class="form-control" name="email" @if(request()->get('email')) value="{{request()->get('email')}}" @endif placeholder="Email">
                    </div>
                    @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 2 || Auth::user()->role_id == 3)
                        <div class="col-md-3 mb-3">
                            <input type="text" class="form-control date-picker" name="dateFrom" data-date-format="yyyy-mm-dd" @if(request()->get('dateFrom')) value="{{request()->get('dateFrom')}}" @endif placeholder="Date From" autocomplete="off">
                        </div>

                        <div class="col-md-3 mb-3">
                            <input type="text" class="form-control date-picker" name="dateTo" data-date-format="yyyy-mm-dd" @if(request()->get('dateTo')) value="{{request()->get('dateTo')}}" @endif placeholder="Date To" autocomplete="off">
                        </div>

                        <div class="col-md-3 mb-3">
                            <input type="text" class="form-control" name="qty" @if(request()->get('qty')) value="{{request()->get('qty')}}" @endif placeholder="Quantity" autocomplete="off">
                        </div>
                    @endif
                    <div class="col-md-12 text-right">
                        <button type="submit" class="btn btn-sm btn-warning">Search</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <!-- DataTales Example -->
        <div class="card shadow mb-4">
            <div class="card-header">
                <h5>Shuffle</h5>
            </div>
            <div class="card-body">
                <div class="col-12">
                    @if(Auth::user() && Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                        <form action="{{route('lead.shuffle')}}" class="row"  method="POST">
                            @csrf
                            <input type="text" value="{{ implode(',', $leadIds) }}" id="leadIdsInput" hiddn name="leadIds">
                            <div class="col-md-3">
                                <select class="form-select js-select2" name="shuffleManagers[]" multiple="multiple" data-placeholder="Select Agents">
                                    @foreach($managers as $manager)
                                        <option value="{{$manager->id}}">{{$manager->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select class="form-select js-select2" name="shuffleStatus" data-placeholder="Select Status">
                                    <option value="" selected>Select Status</option>
                                    @foreach($status as $item)
                                        <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-sm btn-primary">Shuffle</button>
                            </div>
                        </form>
                    @endif
                </div>
            </div>
        </div>
        <div class="card shadow mb-4">
            <div class="card-header">
                <div class="py-3 d-flex justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Total Leads: {{$leadsCount}}</h6>
                </div>
                <div class="col-12">
                    @if(Auth::user() && Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                        <form action="{{route('lead.manager')}}" class="row"  method="POST">
                            @csrf
                            <div class="col-md-2 custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="checkAll">
                                <label class="custom-control-label" for="checkAll">Select All (Checked: <span id="countChecked"></span> items)</label>
                            </div>
                            <input type="text" id="transactionIds" hidden name="transactionIds">
                            <div class="col-md-3">
                                <select class="form-control" name="manager_id">
                                    <option value="" selected>Select Manager</option>
                                    @foreach($managers as $manager)
                                        <option value="{{$manager->id}}">{{$manager->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select class="form-control" name="status_id">
                                    <option value="" selected>Select Status</option>
                                    @foreach($status as $item)
                                        <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            @if(Auth::user()->role_id == 1)
                                <div class="col-md-2">
                                    <select class="form-control" name="delete">
                                        <option value="" selected>Action</option>
                                        <option value="true">Delete Selected</option>
                                    </select>
                                </div>
                            @endif
                            <div class="col-md-1">
                                <button class="btn btn-sm btn-success">Go</button>
                            </div>
                        </form>
                    @endif
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>Index</th>
                            @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 2 || Auth::user()->role_id == 3)
                                <th>Action</th>
                            @endif
                            <th class="text_search">First Name</th>
                            <th class="text_search">Last Name</th>
                            <th class="text_search">phone</th>
                            <th class="text_search">country</th>
                            <th class="text_search">email</th>
                            <th class="search_status">Status</th>
                            <th class="search_manager">Agent</th>
                            <th class="text_search">affiliates</th>
                            <!--<th class="text_search">language</th>-->
                            <!--<th class="text_search">deposit</th>-->
                            <!--<th class="text_search">credit</th>-->
                            <th class="text_search">source</th>
                            @if(auth()->user()->role_id == 1)
                                <th class="text_search" style="width: 200px;">Transfered At</th>
                            @endif
                            <th class="text_search" style="width: 200px;">Created At</th>
                        </tr>
                        </thead>
                        <tbody class="transactionChech">
                        @foreach($allLeads as $index => $lead)
                            <tr>
                                <td>
                                    {{$index}}
                                </td>
                                @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 2 || Auth::user()->role_id == 3)
                                    <td>
                                        @if(auth()->user() && auth()->user()->role_id == 1 || auth()->user()->role_id == 2)
                                            <div class="d-block">
                                                <input type="checkbox" style="position:relative; margin-left: 50%; transform: translateX(-50%)" class="form-check-input itemCheck" name="transactionChecks[]" value="{{$lead->id}}">
                                            </div>
                                            @if(auth()->user()->role_id == 1)
                                                <form class="d-block" action="{{route('lead.destroy', $lead->id)}}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button class="btn btn-sm btn-danger d-block text-white deleteThisLead" type="submit">Delete</button>
                                                </form>
                                            @endif
                                        @endif
                                        <div class="btn-group">
                                            <a target="_blank" href="{{route('note.index', $lead->id)}}" type="button" class="addNotes btn btn-sm btn-success">Comments</a>
                                            <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                                                <em class="icon ni ni-chevron-down"></em>
                                            </button>
                                            <div class="dropdown-menu">
                                                <ul class="link-list-opt no-bdr">
                                                    <li>
                                                        <a class="writeComment" type="button" data-lead-id="{{$lead->id}}" data-text="NA"><span>No Answer</span></a>
                                                    </li>
                                                    <li>
                                                        <a class="writeComment" type="button" data-lead-id="{{$lead->id}}" data-text="HU"><span>Hang Up</span></a>
                                                    </li>
                                                    <li>
                                                        <a class="writeComment" type="button" data-lead-id="{{$lead->id}}" data-text="NI HU"><span>Not Interested - Hang Up</span></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        @if(Auth::user() && Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                                            <form class="d-block" action="{{route('lead.transfer', $lead->id)}}" method="GET">
                                                <button type="submit" class="btn btn-sm btn-warning transferLead">Transfer</button>
                                            </form>
                                        @endif
                                    </td>
                                @endif
                                <td style="cursor: pointer;">{{$lead->first_name}}</td>
                                <td style="cursor: pointer;">{{$lead->last_name}}</td>
                                <td class="d-flex">
                                    @php
                                        $pref = App\Models\Prefix::where('country', 'like', '%'.$lead->country.'%')->first();
                                        if($pref != null){
                                        $prefix = $pref->prefix;
                                        } else {
                                            $prefix = '*22';
                                        }
                                        $agentId = 2011;
                                        if($lead->user == null){
                                        $agentId = 2011;
                                        } else {
                                        $agentId = $lead->user->agent_id;
                                        }
                                    @endphp
                                    <a class="d-inline btn btn-sm btn-primary clickToCall" href="{{route('lead.c2c', $lead->id)}}" data-id="{{$lead->id}}"  data-href="https://click2call.pbx.commpeak.com/call/76/800/{{$agentId}}/{{str_replace("+", "", $lead->phone)}}/{{$prefix}}">+{{$lead->phone}}</a>
                                    <button class="d-inline btn btn-sm btn-success" data-clipboard-text="{{ $lead->phone }}"><em class="icon ni ni-copy-fill"></em></button>
                                </td>
                                <td style="cursor: pointer;">{{$lead->country}}</td>
                                <td style="cursor: pointer;">
                                    {{$lead->email}}
                                    <button class="btn btn-sm btn-success" data-clipboard-text="{{ $lead->email }}"><em class="icon ni ni-copy-fill"></em></button>
                                </td>

                                <td data-search="@if(isset($lead->status->id)) {{$lead->status->name}} @endif" data-order="@if(isset($lead->status->id)) {{$lead->status->name}} @endif">
                                    @if(auth()->user() && auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3)
                                        @if(isset($lead->status_id))
                                            <select class="StatusChange" data-token="{{ csrf_token() }}"  data-lead="{{$lead->id}}">
                                                <option value="">Select Status</option>
                                                @foreach($status as $item)
                                                    <option value="{{$item->id}}" @if($item->id == $lead->status_id) selected @endif>{{$item->name}}</option>
                                                @endforeach
                                            </select>
                                        @else
                                            <select class="StatusChange" data-token="{{ csrf_token() }}"  data-lead="{{$lead->id}}">
                                                <option value="">Select Status</option>
                                                @foreach($status as $item)
                                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                                @endforeach
                                            </select>
                                        @endif
                                    @else
                                        {{ $lead->status->name }}
                                    @endif
                                </td>
                                <td data-search="@if(isset($lead->user->id)) {{$lead->user->name}} @endif" data-order="@if(isset($lead->user->id)) {{$lead->user->name}} @endif">
                                    @if(auth()->user() && auth()->user()->role_id == 1 || auth()->user()->role_id == 2)
                                        @if(isset($lead->user->id))
                                            <select class="ManagerChange" class="form-control" data-token="{{ csrf_token() }}"  data-lead="{{$lead->id}}">
                                                <option value="">Select  Manager</option>
                                                @foreach($managers as $manager)
                                                    <option value="{{$manager->id}}" @if($manager->id == $lead->user_id) selected @endif><span style="background: #222; width: 15px; height: 15px;"></span>{{$manager->name}}</option>
                                                @endforeach
                                            </select>
                                        @else
                                            <select class="ManagerChange" class="form-control" data-token="{{ csrf_token() }}"  data-lead="{{$lead->id}}">
                                                <option value="">Select  Manager</option>
                                                @foreach($managers as $manager)
                                                    <option value="{{$manager->id}}">{{$manager->name}}</option>
                                                @endforeach
                                            </select>
                                        @endif
                                    @else
                                        @if(isset($lead->user->id)) {{$lead->user->name}} @endif
                                    @endif
                                </td>
                                <td style="cursor: pointer;">{{$lead->affiliates}}</td>
                                <!--<td style="cursor: pointer;">{{$lead->language}}</td>-->
                                <!--<td style="cursor: pointer;">{{$lead->deposit}}</td>-->
                                <!--<td style="cursor: pointer;">{{$lead->credit}}</td>-->
                                <td style="cursor: pointer;">{{$lead->source}}</td>
                                @if(auth()->user()->role_id == 1)
                                    <td style="cursor: pointer; width: 200px;">
                                        {{$lead->updated_at}}
                                    </td>
                                @endif
                                <td data-search="{{$lead->created_at}}" style="cursor: pointer; width: 200px;">
                                    @if(auth()->user()->role_id == 1)
                                        <input type="text" class="form-control date-picker changeCreated" data-id="{{$lead->id}}" name="dateTo" style="width: 200px;" data-date-format="yyyy-mm-dd" value="{{$lead->created_at}}" placeholder="Date To" autocomplete="off">
                                    @else
                                        {{$lead->created_at}}
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                        <tfoot>
                        <tr>
                            <th>Index</th>
                            @if(Auth::user()->role_id == 1 || Auth::user()->role_id == 2 || Auth::user()->role_id == 3)
                                <th>Action</th>
                            @endif
                            <th class="text_search">First Name</th>
                            <th class="text_search">Last Name</th>
                            <th class="text_search">phone</th>
                            <th class="text_search">country</th>
                            <th class="text_search">email</th>
                            <th class="search_status">Status</th>
                            <th class="search_manager">Agent</th>
                            <th class="text_search">affiliates</th>
                            <!--<th class="text_search">language</th>-->
                            <!--<th class="text_search">deposit</th>-->
                            <!--<th class="text_search">credit</th>-->
                            <th class="text_search">source</th>
                            @if(auth()->user()->role_id == 1)
                                <th class="text_search" style="width: 200px;">Transfered At</th>
                            @endif
                            <th class="text_search">Created</th>
                        </tr>
                        </tfoot>
                    </table>
                </div>
                @if($allLeads instanceof Illuminate\Pagination\LengthAwarePaginator)
                    {{$allLeads->links('dashboard.pagination')}}
                @endif
            </div>
        </div>
    </div>
    @if(auth()->user()->role_id == 1)
        @include('dashboard.index.create')
    @endif
@endsection
@push('scripts')
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
    <!--    @if(auth()->user()->role_id == 1)
        <script>
             $(document).ready(function () {
            $('#example').DataTable({
                "orderable": true,
            });
        });
        </script>
        @endif-->
        <script>
            function selectManagerAll() {
                $("#manager > option").prop("selected", true);
                $("#manager").trigger("change");
            }

            function deselecManagerAll() {
                $("#manager > option").prop("selected", false);
                $("#manager").trigger("change");
            }

            function selectStatusAll() {
                $("#status > option").prop("selected", true);
                $("#status").trigger("change");
            }

            function deselectStatusAll() {
                $("#status > option").prop("selected", false);
                $("#status").trigger("change");
            }

            function selectCountryAll() {
                $("#country > option").prop("selected", true);
                $("#country").trigger("change");
            }

            function deselectCountryAll() {
                $("#country > option").prop("selected", false);
                $("#country").trigger("change");
            }

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('.clickToCall').on('click', function (){
                var href = $(this).data('href');
                //alert(href);


                console.log(req(href));
                //var id = $(this).data('id');
                // $.get(href, function( data ) {
                //     //$( ".result" ).html( data );
                //     alert( data );
                // });
            })

            async function req(url){
                const response = await fetch(url);

                const text = await response.text();

                return text;
            }


                $('.writeComment').on('click', function (){
                var leadId = $(this).data('lead-id');
                var note = $(this).data('text');
                $.ajax({
                    url: '{{route('note.write')}}',
                    type: 'POST',
                    data: {leadId: leadId, note:note},
                    success: function (msg) {
                        if(msg){
                            new Notify ({
                                title: msg.title,
                                text: msg.message,
                                status: msg.status,
                                effect: 'slide',
                                autoclose: true,
                                type: 2,
                                autotimeout: 3500
                            })
                        }
                    }
                });
            });

            $('.changeCreated').on('change', function (){
                var lead_id = $(this).data('id');
                var created_at = $(this).val();
                $.ajax({
                    url: '{{route('lead.updateCreated')}}',
                    type: 'GET',
                    data: {lead_id: lead_id, created_at:created_at},
                    success: function (msg) {
                        if(msg.result == 1){
                            new Notify ({
                                title: 'Success',
                                text: 'Date changed',
                                status: 'status',
                                effect: 'slide',
                                autoclose: true,
                                type: 2,
                                autotimeout: 3500
                            })
                        }
                    }
                });
            });

            $("document").ready(function () {

                $('.ManagerChange').on('change', function () {
                    var manager_id = $(this).val();
                    var token = $(this).data('token');
                    var lead_id = $(this).data('lead');
                    console.log(manager_id);
                    $.ajax({
                        url: '{{route('updateManager')}}',
                        type: 'POST',
                        data: {_token: token, manager_id: manager_id, lead_id: lead_id},
                        success: function (msg) {
                            new Notify ({
                                title: msg['title'],
                                text: msg['message'],
                                status: msg['status'],
                                effect: 'slide',
                                autoclose: true,
                                type: 2,
                                autotimeout: 3500
                            })
                        }
                    });
                });

                $('.StatusChange').on('change', function () {
                    var status_id = $(this).val();
                    var token = $(this).data('token');
                    var lead_id = $(this).data('lead');
                    console.log(status_id);
                    $.ajax({
                        url: '{{route('updateStatus')}}',
                        type: 'POST',
                        data: {_token: token, status_id: status_id, lead_id: lead_id},
                        success: function (msg) {
                            new Notify ({
                                title: msg['title'],
                                text: msg['message'],
                                status: msg['status'],
                                effect: 'slide',
                                autoclose: true,
                                type: 2,
                                autotimeout: 3500
                            })
                        }
                    });
                });
            });
            $("#checkAll").change(function () {
                $(".transactionChech .itemCheck:checkbox").prop('checked', $(this).prop("checked"));
            });
            $('.transactionChech .itemCheck:checkbox').change(function () {
                if ($('#checkAll').prop("checked")) {
                    $("#checkAll").prop('checked', false);
                }
                if ($('.transactionChech .itemCheck:checkbox').length == $('.transactionChech .itemCheck:checkbox:checked').length) {
                    $('#checkAll').trigger('click');
                }
            });
            var fruit = $('#leadIdsInput');
            var transactionIds = $('#transactionIds');

            $('.itemCheck').change(function(e){
                fruit.val(getSelectedFruits());
                transactionIds.val(getSelectedFruits());
            });
            $("#checkAll").change(function () {
                fruit.val(getSelectedFruits());
                transactionIds.val(getSelectedFruits());
            });

            function getSelectedFruits(){
                var userIds = [];
                var fruits = "";
                $('.itemCheck').each(function(i,cb){
                    if($(this).is(":checked")){
                        $('#countChecked').text($('input.itemCheck:checked').length);
                        userIds.push($(this).val());
                    }else {
                        var index = userIds.indexOf($(this).val());
                        if (index !== -1) {
                            userIds.splice(index, 1);
                        }
                    }
                    $('#countChecked').text($('input.itemCheck:checked').length);
                });
                return userIds;
            }
        </script>
        @endpush