@extends('layouts.app')
@section('body_content')

<style>
    tr td{
        font-size: 13px;
    }
</style>
<!-- Page Content -->
<div class="content">
    <div class="block block-rounded">
        <input type="hidden" name="" id="toggle_yes" value='1'>
        <div class="block-content">
            <div class="row p-2">
                <div class="col-md-6"><h4 id="transaction_type_title">All Leads Info</h4></div>
            </div>
            <div class="table-responsive">
            <table class="table table-bordered data-table" id="lead_table">
                <thead>
                    <tr>
                        <th>SN.</th>
                        <th>Name</th>
                        <th>Phone</th>
                        <th width="35%">Query & Others Info</th>
                        <th width="20%">Last Note</th>
                        <th>Status</th>
                        <th width="25%">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($leads as $key=>$lead)
                    @php 
                        $lead_note = DB::table('lead_notes')->where('lead_id', $lead->id)->orderBy('id', 'DESC')->first(['created_at', 'note']);
                        $lead_source = DB::table('lead_sources')->where('id', optional($lead)->source)->first('name');
                    @endphp
                    <tr>
                        <td>{{$key + $leads->firstItem()}}</td>
                        <td>{{optional($lead)->name}}</td>
                        <td>{{optional($lead)->phone}}</td>
                        <td><p><b>Query: </b>{{$lead->lead_query}}<br /><b>Source: </b>{{$lead_source->name}}<br><b>Lead Received Date: </b>{{date("d-m-Y h:i:s a", strtotime($lead->lead_created_date))}}<br /><b>Latest Note Date: </b>@if(optional($lead_note)->created_at <> ''){{date("d-m-Y h:i:s a", strtotime(optional($lead_note)->created_at))}} @else Not Set @endif<br /></p></td>
                        <td class="LN{{optional($lead)->id}}"><span class="lead-note" id="last_note_{{optional($lead)->id}}">{{optional($lead_note)->note}}</span></td>
                        <td><span id="status_{{optional($lead)->id}}">@if(optional($lead)->status == 'new')<span class="btn btn-danger btn-sm btn-rounded">New</span> @else {{optional($lead)->status}} @endif</span></td>
                        <td>
						@if($user->checkPermission('lead.make.note'))
							<button title="Set Note" data-toggle="modal" onclick="set_lead_note('{{$lead->id}}', '{{$lead->name}}')" data-target="#lead_note_modal" class="btn btn-primary btn-sm btn-rounded"><i class="fab fa-neos"></i></button> 
						@endif
						@if($user->checkPermission('lead.set.note.view'))
							<a title="View" @tooltip(top) target="_blank" href="{{route('admin.view.lead', ['id'=>$lead->id, 'status'=>$status])}}" class="btn btn-info btn-sm btn-rounded"><i class="fas fa-eye"></i></a> 
						@endif
						@if($user->checkPermission('lead.update'))
							<a title="Edit" @tooltip(top) href="{{ route('admin.edit.lead', ['id'=>$lead->id, 'status'=>$status]) }}" class="btn btn-warning btn-sm btn-rounded"><i class="fa fa-fw fa-pencil-alt"></i></a>
							{{--<button data-toggle="modal" onclick="change_status('{{$lead->id}}')" data-target="#change_status_modal" class="btn btn-success btn-sm btn-rounded">Status</button> --}}
						@endif
						@if($user->checkPermission('set.appointment'))
							<a title="Set Appoinment" @tooltip(top) target="_blank" type="button" href="{{route('admin.set.appiontment', ['id'=>$lead->id, 'status'=>$status])}}" class="btn btn-success btn-sm btn-rounded">App</a>
						@endif
						<br><br>
						<span class="btn btn-danger btn-sm btn-rounded">{{ $lead->user_info->name }}</span>
						</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            </div>
            <div class="row">
                <div class="d-flex justify-content-center col-md-7">
                    {!! $leads->appends(['status' => $status])->links() !!}
                </div>
                <div class="d-flex justify-content-center col-md-5">
                    <p class="text-bold">Showing {{$leads->firstItem()}} to {{$leads->lastItem()}} of {{$leads->total()}} results</p>
                </div>
            </div>
            
        </div>
    </div>
</div>

<!-- Lead Note Modal -->
<div class="modal fade" id="lead_note_modal" tabindex="-1" role="dialog" aria-labelledby="lead_note_modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-dark">
        <h5 class="modal-title text-light" id="lead_note_modalLabel">Set Note</h5>
        <button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <form action="javascript:void(0)" id="set_note_form" method="post">
        @csrf
        <div class="form-group">
            <h4><b class="text-success">Client Name: </b> <span id="lead_note_client_name"></span></h4>
        </div>
        
        <div class="form-group">
            <label for="example-text-input">Status</label>
            <select class="form-control" name="status">
              <option value="">-- Select --</option>
              <option value="Number Off">Number Off</option>
              <option value="Call Not Received">Call Not Received</option>
              <option value="Decision Pending - good">Decision Pending - good</option>
              <option value="Decision Pending - bad">Decision Pending - bad</option>
              <option value="Not interested">Not interested</option>
              <option value="Call cut / busy">Call cut / busy</option>
              <option value="Digital marketing / others service">Digital marketing / others service</option>
              <option value="Software service">Software service</option>
              <option value="Bad">Bad</option>
              <option value="Meeting">Meeting</option>
            </select>
        </div>

        <div class="form-group">
            <label for="example-text-input">Note</label>
            <textarea class="form-control" name="note" id="note" cols="30" rows="4"></textarea>
            <input type="hidden" name="lead_id_for_lead_note" value="" id="lead_id_for_lead_note">
        </div>
        <div class="block-content block-content-full text-right border-top">
            <button type="button" class="btn btn-alt-primary mr-1" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
        <div class="form-group" id="set_lead_note_loading"></div>
        </form>
      </div>
      
    </div>
  </div>
</div>


<!-- END Page Content -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script type="text/javascript">
    
$(document).ready(function () {

    
    var single_day_date = $('#single_day_date').val();
    //get_data('cash_and_banks');

    var toggle_yes = $('#toggle_yes').val();
    if (typeof (toggle_yes) != 'undefined' && toggle_yes != null) {
        SidebarColpase();
    }
    
    lead_body_color();
    

});

$('#single_day_date').change(function() {
    var date = $(this).val();
    console.log(date)
});

function lead_body_color() {
    var spans = document.getElementsByClassName("lead-note");

    for (var i = 0; i < spans.length; i++) {
        let note = spans[i].innerText;
        let className = spans[i].parentNode.className;
        check_lead_note(note, className);
    }
}

function check_lead_note(note, className) {
    if((note.indexOf('Number Off') !== -1) || (note.indexOf('Call Not Received') !== -1) || (note.indexOf('Decision Pending - bad') !== -1) || (note.indexOf('Call cut / busy') !== -1) || (note.indexOf('Software service') !== -1)) {
        //$('.'+className).addClass('bg-warning text-light');
        $('.'+className).css({
          'background-color': '#E5AE67',
          'color': '#ffffff'
        });
    }
    else if((note.indexOf('Decision Pending - good') !== -1) || (note.indexOf('Meeting') !== -1)) {
        //$('.'+className).addClass('bg-success text-light');
        $('.'+className).css({
          'background-color': '#30C78D',
          'color': '#ffffff'
        });
    }
    else if((note.indexOf('Not interested') !== -1) || (note.indexOf('Digital marketing / others service') !== -1) || (note.indexOf('Bad') !== -1)) {
        // $('.'+className).addClass('bg-danger text-light');
        $('.'+className).css({
          'background-color': '#E56767',
          'color': '#ffffff'
        });
    }
    
}

function set_lead_note(id, name) {
    $('#lead_id_for_lead_note').val(id);
    $('#lead_note_client_name').text(name);
    $('#note').val('');
}

$(document).ready(function (e) {
    $('#set_note_form').on('submit',(function(e) {
        if (document.getElementById("set_note_form").checkValidity(e)) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            e.preventDefault();
            var formData = new FormData(this);

            $.ajax({
                type:'POST',
                url: "{{ route('store.lead.note.by.ajax') }}",
                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $('#set_lead_note_loading').html('<div style="padding: 10px; text-align: center;">Submitting...<div>');
                },
                success:function(response){
                    if(response['status'] == 'yes') {
                        $('#last_note_'+response['id']).html('<span>'+response['note']+'</span>');
                        let parentClassName = 'LN'+response.id;
                        check_lead_note(response.note, parentClassName);
                        $('#note').val('');
                        Toastify({
                            text: 'Note Set Successfully.',
                            backgroundColor: "linear-gradient(to right, #3F8C14, #3F8C14)",
                            className: "error",
                        }).showToast();
                        var play = document.getElementById('success').play();
                    }
                    else {
                         Toastify({
                            text: response['reason'],
                            backgroundColor: "linear-gradient(to right, #F50057, #2F2E41)",
                            className: "error",
                        }).showToast();
                        var play = document.getElementById('error').play();
                    }
                    $('#set_lead_note_loading').html('');
                },
                error: function(data){
                    //console.log(data);
                    $('#set_lead_note_loading').html('');
                }
            });
        }
        else {
            Toastify({
                text: "Error Occoured!",
                backgroundColor: "linear-gradient(to right, #F50057, #2F2E41)",
                className: "error",
            }).showToast();
            var play = document.getElementById('error').play(); 
        }
        
    }));
});


function change_status(id) {
    alert('This feture is coming soon!');
}



</script>
@endsection