@extends('layouts.admin_template')
@section('content')
<style>
    .modal-selector .select2-container {
        width: 100% !important;
    }
</style>
<div class="container-fluid px-3 px-xxl-5 pt-5">
    <div class="titel-head pb-2 d-flex justify-content-between align-items-center">
        <h1 class="ms-4 mb-0">@lang('translate.leads')</h1>
        <div class="me-4">
            <a type="button" href="/admin/sales/leads/addleads" class="btn btn-primary btn-xs font-15"><i class="fa fa-plus me-2" style="font-size:16px;"></i>Add</a>
        </div>
    </div>
    <div class="flash-message">
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
        @if (Session::has('alert-' . $msg))
        <div class="alert alert-{{ $msg }} alert-dismissible fade show" role="alert">
            <strong>{{ ucfirst($msg == 'danger' ? 'Error' : $msg) }}!</strong>
            {{ Session::get('alert-' . $msg) }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif
        @endforeach
    </div>
    <div class="row g-3">
        <div class="col-lg-12 mt-3 mt-lg-5">
            <div class="bg-dark pb-4 rounded-3 box-shadow">
                <div class="table-responsive-lg table-p15">
                    <table id="leads_datatable" class="table table-dark table-striped mb-0 text-center table-hover">
                        <thead>
                            <tr>
                                <th>@lang('translate.serial_no')</th>
                                <th>@lang('translate.sales_admin')</th>
                                <th>@lang('translate.name')</th>
                                <th>@lang('translate.phone')</th>
                                <th>@lang('translate.email')</th>
                                <th>@lang('translate.country')</th>
                                <th>@lang('translate.source')</th>
                                <th>@lang('translate.status')</th>
                                <th>@lang('translate.description')</th>
                                <th>@lang('translate.action')</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="modal" id="leadassignto" role="dialog" aria-labelledby="leadassigntoLabel" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content bg-dark pb-4 rounded-3 box-shadow ">
            <div class="modal-header  bg-primary">
                <h1 class="modal-title fs-5" id="leadassigntoLabel">@lang('translate.assign_to')</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="leadassigntoform" method="POST">
                @csrf
                <div class="modal-body text-start modal-selector">
                    <div class="mb-3">
                        <label for="salesid" class="form-label">@lang('translate.select_marketing') <span class="required-mark">*</span></label><br>
                        <select name="salesid" class="form-control form-control-lg bg-dark" id="select2insidemodal" id="salesid">
                            <option value=''>@lang('translate.please_choose')</option>
                            @foreach ($sales as $s)
                            <option value='{{ $s->id }}'>{{ $s->name }}</option>
                            @endforeach
                        </select>
                        @error('salesid')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-sm">@lang('translate.assign')</button>
                </div>
            </form>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
        </div>
    </div>
</div>

<script>
    $(function() {
        let table = $('#leads_datatable').DataTable({
            "autoWidth": false,
            "responsive": true,
            "order": [
                [0, "desc"]
            ],
            "processing": true,
            "serverSide": true,
            "language": {
                processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
            },
            "ajax": "{{ route('admin.sales.leads.leadslist') }}",
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'sales_name',
                    name: 'sales/admin'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'phone',
                    name: 'phone'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'country',
                    name: 'country'
                },
                {
                    data: 'source_name',
                    name: 'source'
                },
                {
                    data: 'status_name',
                    name: 'status'
                },
                {
                    data: 'description',
                    name: 'description'
                },
                {
                    data: 'action',
                    name: 'action'
                },
            ],
            dom: 'lBfrtip',
            buttons: [],
            "lengthMenu": [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, 'All']
            ]
        })
    })
</script>

<script>
    $(document).ready(function() {
        $("#select2insidemodal").select2({
            dropdownParent: $("#leadassignto"),
        });
    });

    function assignSalesTo(id) {
        let url = "{{ url('/admin/sales/leads/viewleads') }}/" + id;
        $.ajax({
            url,
            type: "GET",
            success: function(response) {
                let result = response.result;
                $("#leadassigntoform").attr("action", "/admin/sales/leads/assignto/" + id);
            },
            error: function(error) {
                console.log(error);
            }
        })
    }

    function deleteLeads(id) {
        let url = "{{ url('/admin/sales/leads/viewleads') }}/" + id;
        let name = "";
        $.ajax({
            url,
            type: "GET",
            success: function(response) {
                let result = response.result;
                name = result.name;
                let ans = confirm(`Are you sure, you want to delete "${name}"?`);
                if (ans) {
                    let url = "{{ '/admin/sales/leads/leadsdelete' }}/" + id;
                    $.ajax({
                        url,
                        type: "GET",
                        success: function(response) {
                            location.reload();
                        },
                        error: function(error) {
                            console.log(error);
                        }
                    });
                }
            },
            error: function(error) {
                console.log(error);
            }
        })
    }

    function convert(id) {
        let url = "{{ url('/admin/sales/leads/viewleads') }}/" + id;
        let name = "";
        $.ajax({
            url,
            type: "GET",
            success: function(response) {
                let result = response.result;
                name = result.name;
                let ans = confirm(`Are you sure, you want to convert "${name}" to user?`);
                if (ans) {
                    let url = "{{ url('/admin/sales/leads/convert/user') }}/" + id;
                    $.ajax({
                        url,
                        type: "GET",
                        success: function(response) {},
                        error: function(error) {
                            console.log(error);
                        }
                    });
                }
            },
            error: function(error) {
                console.log(error);
            }
        })
    }
</script>
@endsection