@extends('layouts.app')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="page-header">
    <div>
        <h1>Site Spoc <small>List & Management</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">SPOC List</li>
        </ol>
    </div>
    <div class="float-end">
        <a class="btn btn-primary" id="createNewProduct"><i class="fa fa-plus"></i> Add New SPOC</a>
    </div>
</div>

<div class="content mt-3">
    <div class="card shadow mb-4">

        <div class="card-body">
            <div class="table-responsive">
                <table
                    class="table table-design table-bordered text-nowrap border-bottom dt-responsive no-footer data-table"
                    id="dataTable" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>S.No.</th>
                            <th>Name</th>
                            <th>Designation</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@include('view-modals/spoc_addedit')

@stop

@section('scripting')

<script type="text/javascript">
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var lead_id = "{{ $lead_id ?? '' }}";

        $(".standardSelect").selectpicker();

        $('.standardSelect').on('change', function() {
            $(this).valid();
            $('.standardSelect').selectpicker('refresh');
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ url('getLeadSpocsData') }}/{{ $lead_id }}",

                type: "GET",
                data: {
                    _token: "{{ csrf_token() }}",
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'designation',
                    name: 'designation'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'phone',
                    name: 'phone'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search SPOC records",
            }
        });



        $('#createNewProduct').click(function() {
            reset_modal();
            $('#saveBtn').val("Create");
            $('#status').val('').trigger("chosen:updated");
            $('#dataForm').trigger("reset");
            $('#modelHeading').html("Create New SPOC");
            $('#ajaxModel').modal('show');
        });

        $('body').on('click', '.editLeadSpoc', function() {
            var spoc_id = $(this).data('id');
            reset_modal();
            $.get("{{ url('lead/spoc/edit') }}" + '/' + spoc_id, function(data) {
                $('#modelHeading').html("Edit SPOC");
                $('#saveBtn').val("Save Changes");
                $('#ajaxModel').modal('show');
                $('#id').val(data.id);
                $('#name').val(data.name);
                $('#designation').val(data.designation);
                $('#email').val(data.email);
                $('#phone').val(data.phone);
                $('#status').val(data.status);
                $('.standardSelect').selectpicker('refresh');
            })
        });

        $('#saveBtn').click(function(e) {
            e.preventDefault();
            $(this).html('Sending..');

            $.ajax({
                data: $('#dataForm').serialize(),
                url: "{{ url('lead/spocs/store') }}/" + lead_id,
                type: "POST",
                dataType: 'json',

                success: function(data) {
                    $('#dataForm').trigger("reset");
                    $('#ajaxModel').modal('hide');
                    table.draw();
                    swal({
                        title: "Good job!",
                        text: data.msg,
                        icon: "success",
                    });
                },
                error: function(data) {
                    if (data.status == 422) {
                        var x = data.responseJSON;
                        $.each(x.errors, function(index, value) {
                            $("#" + index).addClass("is-invalid");
                            $("#" + index + "-error").html(value[0]);
                        });
                    }
                    $('#saveBtn').html('Save Changes');
                }
            });
        });

        $('body').on('click', '.deleteLeadSpoc', function() {
            var spoc_id = $(this).data("id");

            swal({
                    title: "Are you sure?",
                    text: "Once deleted, you will not be able to recover this SPOC!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        $.ajax({
                            type: "DELETE",
                            url: "{{ url('lead/spoc/delete') }}" + '/' + spoc_id,
                            success: function(data) {
                                table.draw();
                                swal("SPOC has been deleted!", {
                                    icon: "success",
                                });
                            },
                            error: function(data) {
                                console.log('Error:', data);
                            }
                        });
                    } else {
                        swal("SPOC delete request cancelled!");
                    }
                })
        });

        $('.standardSelect').selectpicker('refresh');

    });

    function reset_modal() {
        $("#id").val("");
        $("#name").val("");
        $("#phone").val("");
        $("#email").val("");
        $('#status').val("");
        $('.standardSelect').selectpicker('refresh');

        $("#name").removeClass("is-invalid");
        $("#email").removeClass("is-invalid");
        $("#phone").removeClass("is-invalid");

        $("#name-error").html("");
        $("#phone-error").html("");
        $("#email-error").html("");
        $("#status-error").html("");

        $('#saveBtn').html('Save Changes');
    }


    $(document).on('click', '.createUser', function(e) {
        e.preventDefault();

        var name = $(this).data('name');
        var email = $(this).data('email');
        var password = $(this).data('password');

        $.ajax({
            url: '/user/store',
            type: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                name: name,
                email: email,
                password: password
            },
            success: function(response) {
                swal({
                    title: "Success!",
                    text: response.msg,
                    icon: "success",
                }).then(() => {
                    table.draw();
                });
            },
            error: function(xhr) {
                if (xhr.status == 422) {
                    var errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        $("#" + key).addClass("is-invalid");
                        $("#" + key + "-error").html(value[0]);
                        $('.standardSelect').selectpicker('refresh');
                    });
                }
            }
        });
    });
</script>

@endsection