<div class="table-responsive">
    <table class="table table-striped" id="datatbl1">
        <thead>
            <tr>
                <th style="text-align: center;" class="align-middle">Message</th>
                <th style="text-align: left;" class="align-middle">Msg User</th>
                <th style="text-align: left;" class="align-middle">User By</th>
                <th style="text-align: left;" class="align-middle">Notes</th>
        </thead>
        <tbody>
            <?php $i = 0 ?>
            @foreach($flags as $flag)
            <tr>
                <?php 
                $i = $i + 1;
                $msg=$flag->msg;
                $userBy=$flag->userBy;
                $msgUser=$flag->msgUser;
                ?>
                <td style="text-align: center;" class="align-middle">
                    <audio controls src="{{$msg->msg}}"></audio>
                </td>
                <td style="text-align: left;" class="align-middle">
                    <p class="mb-0">{!! $msgUser->fname !!}</p><small>{{$msgUser->unique_id}}</small>
                </td>
                <td style="text-align: left;" class="align-middle">
                    <p class="mb-0">{!! $userBy->fname !!}</p><small>{{$userBy->unique_id}}</small>
                    <a href="javascript:void(0);" class="msgToUserBy" data-msgflag="{{$flag->mf_id}}" 
                       data-userBy="{{$userBy->fname}}">
                        <i class="fa fa-bell ml-2"></i></a>
                </td>
                <td style="text-align: left;" class="align-middle">
                    <a href="javascript:void(0)" title="{{$flag->notes}}" class="text-black">
                        {{ strlen($flag->notes)>50?substr($flag->notes,0,49).'...':$flag->notes }}</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
<div class="modal fade" id="flagMsgModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{route('flags.userNotify')}}" method="post">
            @csrf
        <div class="modal-content">
           <div class="modal-header">
               <h5 class="modal-title">Notify to <b><span id="userName"></span></b></h5>
           </div>
           <div class="modal-body">
               <input type="hidden" name="mf_id" id="msgFlagId">
               <textarea class="form-control" name="notify_msg" id="msgFlagNotes" placeholder="Enter notify message"></textarea>
           </div>
           <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
               <button type="submit" class="btn btn-primary">Send</button>
           </div>
        </div>
        </form>
    </div>
</div>
@push('page_scripts')
    <script>
        $(document).on('click', '.msgToUserBy', function (){
            $('#msgFlagId').val($(this).attr('data-msgflag'))
            $('#userName').html($(this).attr('data-userBy'))
            $('#msgFlagNotes').val('')
            $('#flagMsgModal').modal('show')
        })
    </script>
@endpush

