@extends('layouts.app')

@section('content')
    <div>
        <div class="container-fluid">
            <!-- DataTales Example -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Comments</h6>
                </div>
                <div class="card-body row">
                    <div class="col-5">
                        <div class="card card-bordered">
                            <div class="card-inner">
                                <div class="team">
                                    <div class="user-card user-card-s2" style="flex-direction: row; justify-content: space-between;">
                                        <div class="d-flex justify-content-start" style="align-items: center;">
                                            <div class="user-avatar md bg-primary mr-3" style="margin:0;">
                                                <span>{{substr($lead->first_name, 0, 1) . substr($lead->last_name, 0, 1)}}</span>
                                            </div>
                                            <div class="user-info mt-0" style="margin-top: 0 !important;">
                                                <h6>{{$lead->first_name." ".$lead->last_name}}</h6>
                                                <span class="sub-text">{{$lead->email}}</span>
                                            </div>
                                        </div>
                                        <ul class="team-statistics">
                                            <li><span>{{'+'.$lead->phone}}<button data-href="{{route('lead.c2c', $lead->id)}}"  class="C2CAjax btn btn-round btn-icon btn-sm btn-info" ><em class="icon ni ni-call-alt-fill"></em></button></span><span>{{$lead->country}}</span></li>
                                        </ul>
                                        <ul class="team-statistics">
                                            <li><span>{{$lead->status->name}}</span>@if($lead->user)<span>{{$lead->user->name}}</span>@endif</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="row">
                                    @if(auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3)
                                        @if(isset($lead->status_id))
                                            <div class="col-12 col-md-6">
                                                <select class="StatusChange form-select js-select2" data-token="{{ csrf_token() }}"  data-lead="{{$lead->id}}">
                                                    <option value="">Select Status</option>
                                                    @foreach($statuses as $item)
                                                        @if($item->can_see == 1 && in_array(auth()->user()->role_id, [1,2]))
                                                            <option value="{{$item->id}}" @if($item->id == $lead->status_id) selected @endif >{{$item->name}}</option>
                                                        @elseif($item->can_see == 0)
                                                            <option value="{{$item->id}}" @if($item->id == $lead->status_id) selected @endif >{{$item->name}}</option>
                                                        @endif
                                                     @endforeach
                                                </select>
                                            </div>
                                        @endif
                                    @endif
                                    @if(auth()->user() && auth()->user()->role_id == 1 || auth()->user()->role_id == 2)
                                        @if(isset($lead->user->id))
                                        <div class="col-12 col-md-6">
                                            <select class="ManagerChange form-select js-select2" 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>
                                        </div>
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <ul class="notes col-7">
                        @foreach($notes as $note)
                            <div style="display: flex;flex-direction: column;border: 1px solid;padding: 20px;margin-bottom: 20px;">
                                @if(auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3)
                                    <label style="display:flex; justify-content:space-between;">
                                    @if($note->user)
                                    <span style="font-weight: bolder; font-size: 16px;">{{$note->user->name}}</span>
                                    @else
                                    <span style="font-weight: bolder; font-size: 16px;">Deleted user</span>
                                    @endif
                                    <span style="font-weight: bolder; font-size: 16px;">{{$note->created_at}}</span>
                                    </label>
                                @endif
                                <span style="float: right; background: #4e73df; color: #fff; list-style: none; width: auto !important;" class="rounded p-3 mb-2">
                                    {!! $note->note !!}
                                </span>
                            </div>
                        @endforeach
                    </ul>
                    @if(Auth::user()->role_id < 4)
                        <form action="{{route('note.create', $lead->id)}}" method="POST" class="col-12 p-0">
                            @csrf
                            <div class="d-flex align-items-center">
                                <div class="form-group col-sm-11">
                                    <textarea class="form-control" name="note" rows="7"></textarea>
                                </div>
                                <div class="form-group col-sm-1">
                                    <button type="submit" class="btn btn-sm btn-success">Add Comment</button>
                                </div>
                            </div>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $('.C2CAjax').on('click', function() {
            let href = $(this).data('href');
            $.ajax({
                url: href,
                type: 'GET',
                success: function(data) {
                    new Notify({
                        title: data.title,
                        text: data.message,
                        status: data.status,
                        effect: 'slide',
                        autoclose: true,
                        type: 2,
                        autotimeout: 3500
                    })
                }
            });
        });

        $('.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
                    })
                }
            });
        });
    </script>
@endpush