@extends('layouts.default_module')


@section('module_name')
Parhwalo Inquiry
@stop

@section('css')
<link rel="stylesheet" href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
@endsection




@section('table')

{{-- <input type="text" name="search" id="search" required class="pull-right" placeholder="Search Here"> --}}
<table id="userTable" style="opacity: 0">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>City</th>
            <th>Phone</th>
            <th>Status</th>
            <th>Message</th>
            <th>Message</th>
        </tr>
    </thead>
    <tbody>
    </tbody>

</table>


@section('pagination')

<div class="col-md-3 pull-left">
    <div class="form-group text-center" style="display: flex;  margin-top:4v %">
		<div>
            {!! Form::open(['method' => 'get', 'route' => ['dashboard']]) !!}
            {!! Form::submit('Cancel', ['class' => 'btn btn-default btn-block btn-lg btn-parsley']) !!}
			{!! Form::close() !!}
		</div>
	</div>
</div>
@endsection

<div class="modal modal_msg_detail" tabindex="-1" role="dialog" aria-hidden="false">
    <div class="modal-dialog modal-mg ">
        <div class="modal-content" id="confirm">
            <div class="modal-header">
                <h4 class="modal-title">Message</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12 set_msg_modal">

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@stop


@section('app_jquery')

<script>

$(document).ready(function(){

    fetchRecords();

    function fetchRecords(){

       $.ajax({

         url: '{!!asset("public/admin/parhwalo_inquiry/get_users/0")!!}',
         type: 'get',
         dataType: 'json',
         success: function(response){
        $("#userTable").css("opacity",1);

           var len = response['data'].length;;


              for(var i=0; i<len; i++){

                var id = response['data'][i].id;
                var name = response['data'][i].name;
                var email = response['data'][i].email;
                var city = response['data'][i].city;
                var phone = response['data'][i].phone;
                var status = response['data'][i].status;
                var message = response['data'][i].message;

                var button = `<button onclick="set_msg_modal('`+message+`')" class="btn btn-info modal_msg"  data-toggle="modal" data-target=".modal_msg_detail">Message</button>`;

                var confirm = `<button onclick="confirming_status(`+id+`)" style = "margin-right:2%; margin-left:2%" class="btn-success">Confirm</button>`;

                var reject = `<button  onclick="rejecting_status(`+id+`)" style = "margin-right:2%" class="btn-danger">Reject</button>`;

                if(status == 'Confirmed' || status == 'Rejected'){
                    confirm = '';
                    reject = '';
                }

                var tr_str = "<tr>" +
                    "<td>" + name + "</td>" +
                    "<td>" + email + "</td>" +
                    "<td>" + city + "</td>" +
                    "<td>" + phone + "</td>" +
                    "<td id='status"+id+"'>" + status + confirm + reject + "</td>" +
                    "<td>" + message + "</td>" +
                    "<td>" + button + "</td>" +
                "</tr>";

                 $("#userTable tbody").append(tr_str);
                }
                $('#userTable').DataTable({
                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ],
                });
        }
       });
    }

});

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


// function confirming_status(id){
//     var _token = '{{ csrf_token() }}'

//     // var connection = connection_id;

//     var url = "{!!url('admin/parhwalo_inquiry/status/confirm')!!}/"+id;

//     $.ajax({
//     url:   url,
//     type: 'POST',
//     data: {
//             _token : _token
//         },
//     success:function(response){
//         // $("#status_button_"+response.id)[0].childNodes[0].data = response['status'];
//         // $('#status_button_'+response.id).html(`<p class="text-success bg-light">Confirmed</p>`);
//         console.log('working aladi');
//     }
//     })
// }

function confirming_status(id){
    var url = "{!!url('admin/parhwalo_inquiry/status/confirm')!!}/"+id;
    console.log(url);
    $.ajax({
                url: url,
                method: 'POST',
                data: {
                    _token: '{!! csrf_token() !!}',
                },
                success: function(data) {
                    console.log(data);
                    $('#status'+data.id+'').html(`
                    "<td class='text-success'>`+data.status+`</td>"
                    `);
                },
                error: function(errordata) {
                    console.log(errordata)
                }
            })
}

function rejecting_status(id){
    var url = "{!!url('admin/parhwalo_inquiry/status/reject')!!}/"+id;
    console.log(url);
    $.ajax({
                url: url,
                method: 'POST',
                data: {
                    _token: '{!! csrf_token() !!}',
                },
                success: function(data) {
                    console.log(data);
                    $('#status'+data.id+'').html(`
                    "<td class='text-danger'>`+data.status+`</td>"
                    `);
                },
                error: function(errordata) {
                    console.log(errordata)
                }
            })
}

</script>
@endsection