@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/bootstrap-multiselect.js')}}"></script>
    <link rel="stylesheet" href="{{ asset('css/bootstrap-multiselect.css')}}"/>
@endsection

@section('content')
@section('page_title')
    Lead Panel
@endsection
<div class="container-fluid">
    <div class="card">
        <div class="row ml-0 mr-0 mt-4 mb-n2">
            <div class="form-group col-md-2">@include('sales_menu') </div>
            <div class="ml-auto p-2 mr-4">
                <a href="{{url('createleadaccount')}}" class="btn btn-sm btn-dark pull-right">Create Client Account</a>
            </div>
        </div>
        <div class="card-body table-responsive">
                <table class="table-bordered table-hover text-center" id="leaddetails">
                    <thead>
                        <tr>
                            <th>Sl.No</th>
                            <th>Client Name</th>
                            <th>City</th>
                            <th>State</th>
                            <th>Contact Person </th>
                            <th>Mobile</th>
                            <th>Email</th>
                            <th>Website</th>
                            @canany(['isSales','isSalesManager','isSuperAdmin','isAdmin'])
                            <th>Client Created By</th>
                            @endcanany
                            <th>Created Date</th>
                            <th>Number Of Days</th>
                            <th>Product Pitched</th>
                            <!-- <th>Message Type</th> -->
                            <th style="min-width:110px;">Status</th>
                        </tr>
                    </thead>
                </table>
        </div>
    </div>
</div>
<script src="{{asset('js/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
<script>
$(document).ready(function() {
    leaddetails_list();
});
    //    fetch all data in data-table
    function leaddetails_list() {
        $("#leaddetails").DataTable().clear().destroy();
        $('#leaddetails').DataTable({
            "processing": true,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "ordering": true,
            "scrollX": true,
            "scrollCollapse": true,
            "scrollY":  400,
            "order": [
                [0, "desc"]
            ],
            "language": {
                search: '',
                searchPlaceholder: "Search...",
            },
            "ajax": {
                "url": "{{ url('getleadReport') }}",
                "dataType": "json",
                "type": "POST",
                "data": {
                    _token: "{{csrf_token()}}",
                },
            },
            aoColumns: [
                {
                    data: "id",
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { 
                    data: "username",
                    render: function(data, type, row, meta){
                    return ((row.username)  ? row.username :  "NA")
                    }
                },
                { 
                    data: "city",
                    render: function(data, type, row, meta){
                    return ((row.city)  ? row.city :  "NA")
                    }
                },
                { 
                    data: "state",
                    render: function(data, type, row, meta){
                    return ((row.state)  ? row.state :  "NA")
                    }
                },
                {
                    data: "contact_person",
                    render: function(data, type, row, meta){
                    return ((row.contact_person)  ? row.contact_person :  "NA")
                    }
                },
                { 
                    data: "mobile",
                    render: function(data, type, row, meta){
                    return ((row.mobile)  ? row.mobile :  "NA")
                    }
                },
                {
                    data: "email",
                    render: function(data, type, row, meta){
                    return ((row.email)  ? row.email :  "NA")
                    }
                },
                {
                    data: "web_url",
                    render: function(data, type, row, meta){
                    return ((row.web_url)  ? row.web_url :  "NA")
                    }
                },
                @canany(['isSales','isSalesManager','isSuperAdmin','isAdmin'])
                { 
                    data: "lead_created_by",
                    render: function(data, type, row, meta){
                    return ((row.lead_created_by)  ? row.lead_created_by :  "NA")
                    }
                },
                @endcanany
                { 
                    data: "created_on",
                    render: function(data, type, row, meta){
                    return ((row.created_on)  ? row.created_on :  "NA")
                    }
                },
                {
                    data: "days_since_creation",
                    render: function(data, type, row, meta){
                    return ((row.days_since_creation)  ? row.days_since_creation :  "NA")
                    }
                },
                { 
                    data: "chanel",
                    render: function(data, type, row, meta){
                    return ((row.chanel)  ? row.chanel :  "NA")
                    }
                },
                // { 
                //     data: "chanel_type",
                //     render: function(data, type, row, meta){
                //     return ((row.chanel_type)  ? row.chanel_type :  "NA")
                //     }
                // },
                {
                    data: "status",
                    render: function(data, type, row, meta){
                        var isAuthenticated = "{{ auth()->check() ? addslashes(auth()->user()->name) : '' }}";
                        var dropdownDisabled = row.status == 6 || (isAuthenticated !== row.lead_created_by) ? 'disabled' : '';
                        return '<select data-status="' + row.status + '" data-info="' + row.id + '" class="status-toggle custom-select" ' + (dropdownDisabled ? 'disabled' : '') + '>\
                            <option value="1"' + (row.status == 1 ? ' selected' : '') + '>Prospect</option>\
                            <option value="2"' + (row.status == 2 ? ' selected' : '') + '>Lead</option>\
                            <option value="3"' + (row.status == 3 ? ' selected' : '') + '>Demo</option>\
                            <option value="4"' + (row.status == 4 ? ' selected' : '') + '>Proposal</option>\
                            <option value="5"' + (row.status == 5 ? ' selected' : '') + '>Negotiation</option>\
                            <option value="6"' + (row.status == 6 ? ' selected' : '') + '>Closure</option>\
                        </select>';
                    }
                }
            ],
        });
    }

    $(document).on('change', '.status-toggle', function (e) {
            let click_val = $(this).val();
            let acc_id = $(this).attr('data-info');
            let status_val = $(this).attr('data-status');

            if(click_val == 1){
                $message = "Are you sure you want to change the  Status to Prospect ";
            }else if (click_val == 2){
                $message = "Are you sure you want to change the Status to Lead ";
            }else if (click_val == 3){
                $message = "Are you sure you want to change the Status to Demo ";
            }else if (click_val == 4){
                $message= "Are you sure you want to change the Status to Proposal ";
            }else if (click_val == 5){
                $message= "Are you sure you want to change the Status to Negotiation ";
            }else if (click_val == 6){
                $message= "Are you sure you want to change the Status to Closure ";
            }

            if (confirm($message)) {
                $('.loading').css('display','block');
                $.ajax({
                    type: "POST",
                    url: "{{ url('/usersStatus') }}",
                    data: {
                        "_token" : "{{ csrf_token() }}",
                        "click_val" : click_val,
                        "acc_id" :acc_id
                    },
                    dataType:'json',
                    success: function(data) {
                        $('.loading').css('display','none'); 
                        if(data == 1){
                            if(click_val == 1){
                                toastr.success('Switched to Prospect');
                            }else if (click_val == 2){
                                toastr.success('Switched to Lead');
                            }else if (click_val == 3){
                                toastr.success('Switched to Demo');
                            }else if (click_val == 4){
                                toastr.success('Switched to Proposal');
                            }else if (click_val == 5){
                                toastr.success('Switched to Negotiation');
                            }else if (click_val == 6){
                                toastr.success('Switched to Closure');
                            }
                            leaddetails_list();
                        }else{
                            toastr.error(data.message);
                        }
                    }
                });
            } else {
                $(this).val(status_val);
            }
    })
</script>
@endsection