@extends('layouts.default', ['appTopMenu' => true])
@section('title', 'User Details')
@push('head')
<link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="/assets/plugins/select2/dist/js/select2.min.js" defer></script>
<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>
<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>



<script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js" defer></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js" defer></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js" defer></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js" defer></script>
@endpush


@section('content')
<section class="mb-4 bg-white">
    <script>
@if(Session::has('success'))
swal("{{Session::get('success')}}").then(function() {
//    window.location = "/invite_vc";
});
@endif


</script>
    <h3 class="h3-responsive font-weight-bold text-center p-3">History</h3>
    <div class="row align-items-center">
        <div class="col-md-12 mb-5">
            
            
            
            @if(!empty($msg_record)) 
@if(count($msg_record)>0)
<div class="panel panel-inverse">
  <div class="panel-heading">
    <h4 class="panel-title">History Message</h4>
    <div class="panel-heading-btn">
      <a href="#" class="btn btn-xs btn-icon btn-circle btn-default" data-toggle="panel-expand">
        <i class="fa fa-expand"></i>
      </a>
      <a href="#" class="btn btn-xs btn-icon btn-circle btn-success" data-toggle="panel-reload">
        <i class="fa fa-repeat"></i>
      </a>
      <a href="#" class="btn btn-xs btn-icon btn-circle btn-warning" data-toggle="panel-collapse">
        <i class="fa fa-minus"></i>
      </a>
      <a href="#" class="btn btn-xs btn-icon btn-circle btn-danger" data-toggle="panel-remove">
        <i class="fa fa-times"></i>
      </a>
    </div>
  </div>
  <div class="panel-body">
<div class="row"><div class="col-sm-12">
<table id='data-table-default' class='table table-striped table-bordered align-middle'>
<thead>
<tr>
<th width="1%" data-orderable="false">S.No.</th>
<th>To</th>   
</tr>
</thead>
<tbody>

@foreach($msg_record as $item) 

<tr>
<td class="text-center">{{$loop->iteration}}</td>

<td><a href='#' id="{{$item->from_user}}" class="user">{{$item->name}}<a/></td>
</tr>

@endforeach

</tbody>
</table>
</div></div></div></div>
@endif
@endif
            
        </div>
    </div>
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog" style="width:1000px;">
            <div class="modal-content" style="width:1000px;">
                <div class="modal-header" style="width:1000px;">
                    <h5 class="modal-title"></h5>                  
                </div>
                <div class="modal-body" style="width:1000px;">
                    
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>-->
                    <button id='closeModal' type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
@push('scripts')
<script type="text/javascript">
$(document).ready(function(){
    $("#myModal").modal('hide');
    $(".user").click(function () {
        var id = this.id;
         var districtUrl = "{{ url('getMsgName')}}";
        $.post(districtUrl,
                {id: id, "_token": "{{ csrf_token() }}"},
                function (data) {
                    $(".modal-title").html(data);
                }
        );
        var districtUrl = "{{ url('getMsgHistory')}}";
        $.post(districtUrl,
                {id: id, "_token": "{{ csrf_token() }}"},
                function (data) {
                    // alert(data);
                    var model = $('.modal-body');
                    model.empty();
                    var html = "<div id='history'>";
                    var result = (data[0]);
                    var columns = String(Object.keys(result[0])).split(',');
                    $.each(result, function (k, v) {
                        html += "<tr>";
                        j = 0;
                        if(eval("v." + columns[4]) == id){
                            var align = "style='width:100%;height:auto;padding:5px;float:left'";
                            var msgalign = "style='float:left;text-transform:capitalize'";
                        }else {
                            var align = "style='width:100%;height:auto;padding:5px;float:left'";
                            var msgalign = "style='float:right;text-transform:capitalize'";
                        }
                        
                        html+="<div "+ align+"><span "+ msgalign+">" + eval("v." + columns[0]) + "<br/><label class='text' style='color:blue'>" + eval("v." + columns[1]) + "</label></span></div>";
//                        alert(align);
//                        $.each(columns, function (k1, v1) {
                               
                        j++;
                        

//                       
                        
                    });

                    html += "</div>";

                    model.append(html);
                }
        );
        
        $("#myModal").modal('show');
    });
});

</script>
@endpush