@extends('layouts.conversion.app')
@push('style')
    <link rel="stylesheet" href="/assets/vendor/libs/select2/select2.css" />
    <link rel="stylesheet" href="/assets/vendor/libs/bootstrap-select/bootstrap-select.css" />
    <link rel="stylesheet" href="/assets/vendor/libs/flatpickr/flatpickr.css" />
    <style>
        .dragged {
  position: absolute;
  opacity: 0.7;
  left: 0;
  z-index: 2000;
}

#tableColumnsList li.placeholder {
  position: relative;
  /** More li styles **/
}
#tableColumnsList li.placeholder:before {
  position: absolute;
  /** Define arrowhead **/
}
    </style>
@endpush

@section('content')
@include('layouts.conversion.sections.search')
<div class="card">
    <div class="card-header d-flex justify-content-between">
        <h6 class="col-3 card-title">Leads<span class=" ms-2 badge bg-success bg-glow">{{$total}}</span></h6>
        @include('layouts.conversion.sections.bulkActions')
    </div>
    <div class="table-responsive text-nowrap">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    @can('seeActionsColumn')
                        <th class="text-center">Actions</th>
                    @endcan
                    <th class="text-center">CID</th>
                    <th class="text-center">Name</th>
                    <th class="text-center">phone</th>
                    <th class="text-center">Last Comment</th>
                    <th class="text-center">email</th>
                    <th class="text-center">country</th>
                    @can('seeAgentColumn')
                        <th class="text-center">agent</th>
                    @endcan
                    <th class="text-center">status</th>
                    <th class="text-center">affiliate</th>
                    <th class="text-center">source</th>
                    <th class="text-center">comment</th>
                    <th class="text-center">time</th>
                </tr>
            </thead>
            <tbody class="table-border-bottom-0 leadsCheck">
                @foreach ($leads as $lead)
                    <tr>
                        @can('seeActionsColumn')
                            <td class="text-center" style="width: 100px;">@include('layouts.conversion.datatable.actions', ['lead' => $lead])</td>
                        @endcan
                        <td class="text-center">{{$lead->id}}</td>
                        <td class="text-center">{{$lead->name}}</td>
                        <td class="text-center">@include('layouts.conversion.datatable.phone', ['phone' => $lead->phone])</td>
                        <td class="text-center">{!!lastComment($lead->lastNote ? $lead->lastNote : null)!!}</td>
                        <td class="text-center">@include('layouts.conversion.datatable.email', ['email' => $lead->email])</td>
                        <td class="text-center">
                            <img src="{{asset('vendor/blade-flags/country-'.strtolower($lead->country).'.svg')}}" width="26" height="26" data-bs-toggle="tooltip" data-bs-placement="top" title="{{countryName($lead->country)}}">
                        </td>

                        @can('seeAgentColumn')
                            <td style="width: 205px;">
                                <div class="d-flex align-items-center justify-content-center">
                                    @include('layouts.conversion.datatable.agent')
                                </div>
                            </td>
                        @endcan
                        <td style="width: 160px;">
                            <div class="d-flex align-items-center justify-content-center">
                                @include('layouts.conversion.datatable.status')
                            </div>
                        </td>
                        <td class="text-center">{{$lead->affiliate ? $lead->affiliate->affiliate_name : NULL}}</td>
                        <td class="text-center">{{$lead->source ? $lead->source->name : NULL}}</td>
                        <td class="text-center">
                            @if(!empty($lead->comment))
                            <button type="button" class="btn btn-sm btn-icon btn-danger waves-effect waves-light copyButton" data-clipboard-text="{{$lead->comment}}"  data-bs-toggle="tooltip" data-bs-placement="top" title="{{$lead->comment}}">
                                <span class="ti ti-message"></span>
                            </button>
                            @endif
                        </td>
                        <td class="text-center">{{\Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $lead->created_at)->format('d M Y - H:i')}}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <hr>
    {{ $leads->withQueryString()->links('layouts.components.pagination') }}
</div>
@include('layouts.conversion.sections.comments')
@include('layouts.conversion.sections.copy')
@include('layouts.conversion.sections.hideFTD')
@endsection

@push('script')
<script src="/assets/vendor/libs/select2/select2.js"></script>



<script src="/assets/js/forms-selects.js"></script>
<script src="/assets/js/cards-actions.js"></script>
<script src="/assets/vendor/js/sweet.js"></script>

<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable-min.js"></script>
<script src="/assets/js/ui-popover.js"></script>
<script>
    sweetAlertConfirmationBeforeAction('.deleteLead', 'Are you sure to delete this lead?', 'api/lead/delete', 'DELETE', true);
    sweetAlertConfirmationBeforeAction('.transferLead', 'Are you sure to transfer this lead?', 'api/lead/transfer', 'GET');
    getComments();
    changeLeadAgent(false);
  </script>
@endpush