@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" />
@endpush

@section('content')
@include('layouts.conversion.sections.shuffleSearch')
<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 fs-6">{{$total}}</span></h6>
        @include('layouts.conversion.sections.shuffle')
    </div>
    <div class="table-responsive text-nowrap">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th class="text-center">Select</th>
                    <th class="text-center">CID</th>
                    <th class="text-center">first name</th>
                    <th class="text-center">last name</th>
                    <th class="text-center">phone</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>
                        <td>
                            <div class="d-flex justify-content-center align-center flex-wrap">
                                <div class="form-check form-check-success col-12 mb-2 text-center">
                                    <input class="form-check-input float-none leadItemCheck" type="checkbox" value="{{$lead->id}}" id="checkLead{{$lead->id}}">
                                    <label class="form-check-label ms-2" for="checkLead{{$lead->id}}">Select</label>
                                </div>
                            </div>
                        </td>
                        <td class="text-center">{{$lead->id}}</td>
                        <td class="text-center">{{$lead->first_name}}</td>
                        <td class="text-center">{{$lead->last_name}}</td>
                        <td class="text-center">{{$lead->phone}}</td>
                        <td class="text-center">{{$lead->email}}</td>
                        <td class="text-center">
                            <x-icon name="flag-country-{{$lead->country}}" data-bs-toggle="tooltip" data-bs-placement="top" title="{{countryName($lead->country)}}"/>
                        </td>
                        @can('seeAgentColumn')
                                <td class="text-center">
                                    {{$lead->conversion ? $lead->conversion->name : 'No Agent'}}
                                </td>
                        @endcan
                        <td class="text-center">
                            {{$lead->status ? $lead->status->name : 'No Status'}}
                        </td>
                        <td class="text-center">{{$lead->affiliate->affiliate_name}}</td>
                        <td class="text-center">{{$lead->source->name}}</td>
                        <td class="text-center">
                            @if(!empty($lead->comment))
                            <button type="button" class="btn btn-sm btn-icon btn-danger waves-effect waves-light" 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->links('layouts.components.pagination') }} --}}
</div>
@include('layouts.conversion.sections.comments')
@include('layouts.conversion.sections.copy')
@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>
    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();
    $("#checkAllLeads").change(function () {
            $(".leadsCheck .leadItemCheck:checkbox").prop('checked', $(this).prop("checked"));
        });
        $('.leadsCheck .leadItemCheck:checkbox').change(function () {
            if ($('#checkAllLeads').prop("checked")) {
                $("#checkAllLeads").prop('checked', false);
            }
            if ($('.leadsCheck .leadItemCheck:checkbox').length == $('.leadsCheck .leadItemCheck:checkbox:checked').length) {
                $('#checkAllLeads').trigger('click');
            }
        });
        var leadsToShuffle = $('#leadsToShuffle');

        $('.leadItemCheck').change(function(e){
            leadsToShuffle.val(getSelectedLeads());
        });

        $("#checkAllLeads").change(function () {
            leadsToShuffle.val(getSelectedLeads());
        });

        function getSelectedLeads(){
            var leadsToShuffle = "";
            $('.leadItemCheck').each(function(i,cb){
                if($(this).is(":checked")){
                    $('#countCheckedLeads').text($('input.leadItemCheck:checked').length);
                    leadsToShuffle += $(this).val() + ",";
                }
                $('#countCheckedLeads').text($('input.leadItemCheck:checked').length);
            });
            return leadsToShuffle.slice(0, -1);
        }
</script>
@endpush