@extends('layouts.default_module')
@section('module_name')
Vendor
@stop


@section('table-properties')
width="400px" style="table-layout:fixed;"
@endsection
@section('add_btn')

{!! Form::open(['method' => 'get', 'route' => ['vendor.create'], 'files'=>true]) !!}
<span>{!! Form::submit('Add', ['class' => 'btn btn-success pull-right']) !!}</span>
{!! Form::close() !!}
@stop

<style>
	td {
		white-space: nowrap;
		overflow: hidden;
		width: 30px;
		height: 30px;
		text-overflow: ellipsis;
	}
</style>
@section('table')
<table id="vendorTableAppend" style="opacity: 0">
<thead>
	<tr>


        <th>Name</th>
        <th>Email</th>
        <th>Phone Number</th>
        <th>Address</th>
        <th>package</th>
        <th>Image</th>
        <th>Edit</th>
        <th>Delete</th>


	</tr>
</thead>
<tbody>
</tbody>
</table>

@stop
@section('app_jquery')

<script>

$(document).ready(function(){

    fetchRecords();

    function fetchRecords(){

       $.ajax({
         url: '{!!asset("admin/getvendor/{id}")!!}',
         type: 'get',
         dataType: 'json',
         success: function(response){
            $("#vendorTableAppend").css("opacity",1);
           var len = response['data'].length;

           console.log(response);

              for(var i=0; i<len; i++){
                  var id =  response['data'][i].id;
                  var name =  response['data'][i].user.name;
                  var email =  response['data'][i].user.email;
                  var phone_no =  response['data'][i].user.phone_no;
                  var adderss =  response['data'][i].user.adderss;
                  var package_id =  response['data'][i].package.name;
                  var avatar  = response['data'][i].avatar;
                //   var deleted_at   = response['data'][i].deleted_at;
                console.log('data');

                if(!avatar){
                    avatar = "{!!asset('images/logo.png')!!}"
                }

		        var image_col = `<img width="100px" src="`+avatar+`" class="show-product-img imgshow">`
                var edit = `<a class="btn btn-info" href="{!!asset('admin/vendor_list/edit/` + id + `')!!}">Edit</a>`;
                       createModal({
                            id: 'vendor_' + response['data'][i].id,
                            header: '<h4>Delete</h4>',
                            body: 'Do you want to continue ?',
                            footer: `
                                <button class="btn btn-danger" onclick="delete_request(` + response['data'][i].id + `)"
                                data-dismiss="modal">
                                    Delete
                                </button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                `,
                        });

                        var delete_btn = `<a class="btn btn-info" data-toggle="modal" data-target="#` + 'vendor_' + response['data'][i].id + `">Delete</a>`;

                        var tr_str = "<tr id='row_"+response['data'][i].id+"'>" +

                    "<td>" +name+ "</td>" +
                    "<td>" +email+ "</td>" +
                    "<td>" +phone_no+ "</td>" +
                    "<td>" +adderss+ "</td>" +
                    "<td>" +package_id+ "</td>" +
                    "<td>" + image_col + "</td>" +
                    "<td>" + edit + "</td>" +
                    "<td>" + delete_btn + "</td>" +

                "</tr>";


                $("#vendorTableAppend tbody").append(tr_str);
                }
                $('#vendorTableAppend').DataTable({
                    dom: '<"top_datatable"B>lftipr',
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ],
                });
        }
       });
    }

});

function set_msg_modal(msg){
        $('.set_msg_modal').html(msg);
    }


function delete_request(id) {
        $.ajax({

            url: "{!!asset('admin/vendor/delete')!!}/" + id,
            type: 'POST',
            dataType: 'json',
            data: {
                _token: '{!!@csrf_token()!!}'
            },
            success: function(response) {
                console.log(response);
                if(response.status){
                    var myTable = $('#vendorTableAppend').DataTable();
                    myTable.row('#row_'+id).remove().draw();
                }
            }
        });
    }
</script>
@endsection