@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<div class="page-content">
    <div class="container-fluid">
        @include('../reachassuree_agent/master/comman/header')

        <div class="row" id="card">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="datatable" class="table table-striped align-middle table-nowrap display nowrap w-100">
                            <thead class="table-light">
                                <tr>
                                    <th>Action</th>
                                    <th>Status</th>
                                    <th>Id<br><input type="text" class="form-control" name="id" placeholder="Search" autocomplete="off" style="width: 50px; height: 25px"></th>
                                    <th class="text-center">App <br>Tracker</th>
                                    <th>Group<br><input type="text" class="form-control" name="group" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Full Name<br><input type="text" class="form-control" name="full_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Relation<br><input type="text" class="form-control" name="relation" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Gender<br><input type="text" class="form-control" name="gender" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>DOB<br><input type="text" class="form-control" name="dob" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Anniversary<br><input type="text" class="form-control" name="anniversary_date" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Mobile No.<br><input type="text" class="form-control" name="mobile_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Whatsapp No.<br><input type="text" class="form-control" name="whatsapp_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Email<br><input type="text" class="form-control" name="email" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Client Status<br><input type="text" class="form-control" name="client_status" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Marriage Status<br><input type="text" class="form-control" name="marriage_status" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Business<br><input type="text" class="form-control" name="business" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>City<br><input type="text" class="form-control" name="city" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Area<br><input type="text" class="form-control" name="area" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Address<br><input type="text" class="form-control" name="address1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Address 2<br><input type="text" class="form-control" name="address2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Join With Us<br><input type="text" class="form-control" name="join_with_us" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Pan No.<br><input type="text" class="form-control" name="pan_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Aadhar No.<br><input type="text" class="form-control" name="aadhaar_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Gst No.<br><input type="text" class="form-control" name="gst_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Reference<br><input type="text" class="form-control" name="reference_by" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Created By<br><input type="text" class="form-control" name="created_by" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Created date<br><input type="text" class="form-control" name="crated_at" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Modified By<br><input type="text" class="form-control" name="modify_by" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Modified date<br><input type="text" class="form-control" name="updated_at" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom-scripts')
<script type="text/javascript">
    var ajaxURLGetClients = "{{ route('clients.ajax') }}";
    var csrfToken = $("[name=_token").val();

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]}],
        "order": [[1, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "scrollY": function() {return $(window).height() - 300;},
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetClients,
            "type": "POST",
            "data": { "_token": csrfToken, "is_deleted": 0, "is_new":1 }
        },
        "aoColumns": [
            {"mData": "action", "bSortable": false},
            {"mData": "status", "bSortable": false},
            {"mData": "id", "bVisible": false},
            {"mData": "is_app_user", "bVisible": false},
            {"mData": "group"},
            {"mData": "full_name"},
            {"mData": "relation"},
            {"mData": "gender"},
            {"mData": "dob"},
            {"mData": "anniversary_date"},
            {"mData": "mobile_number"},
            {"mData": "whatsapp_number"},
            {"mData": "email"},
            {"mData": "client_status"},
            {"mData": "marriage_status"},
            {"mData": "business"},
            {"mData": "city"},
            {"mData": "area"},
            {"mData": "address1"},
            {"mData": "address2"},
            {"mData": "join_with_us"},
            {"mData": "pan_number"},
            {"mData": "aadhaar_number"},
            {"mData": "gst_number"},
            {"mData": "reference_by",  "bVisible": false},
            {"mData": "created_by"},
            {"mData": "created_at"},
            {"mData": "modified_by"},
            {"mData": "updated_at"},
        ]
    });

    function approve(id){
        swal.fire({
            title: "Are you sure want to approve this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, approved it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                complete(id);
            }
        });
    }

    function complete(id) {
        $.ajax({
            type: 'POST',
            url: "{{ route('new.client.save') }}",
            data: {
                "_token": csrfToken,
                "id": id,
            },
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function clientDelete(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                remove(id);
            }
        });
    }

    var deleteClient = "{{ route('delete.client') }}";

    function remove(id) {
        $.ajax({
            type: 'GET',
            url: deleteClient + "?client_id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }
</script>
@endsection