@extends('layouts.admin')

@section('content')
@push('css')
    
@endpush
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-10">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Remarks Histories</h5>
                        </div>
                    </div>
                    
                </div>                                    
                <div class="card-body">
                    <form method="GET" action="{{ url()->current() }}">
                        <div class="row mb-3" style="border-bottom: 1px solid #e4e3e3;">
                            <div class="col-md-3">
                                <div class="form-group ">
                                    <label for="admin" class="col-form-label pt-0">Admin</label>
                                    <select id="admin" class="select2 form-control mb-3 custom-select" name="admin">
                                    <option disabled="" selected="" value="">Select One</option>
                                    {{ create_option("users","id","name",old('admin'),'WHERE user_type="Admin"','ORDER BY name ASC') }} 
                                </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group ">
                                    <label for="start_date" class="col-form-label pt-0">Start Date</label>
                                    <input class="datepicker1 form-control" type="text" name="start_date" id="start_date" placeholder="Start Date" value="{{ old('start_date')??now()->format('d-m-Y') }}" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group ">
                                    <label for="end_date" class="col-form-label pt-0">End Date</label>
                                    <input class="datepicker1 form-control" type="text" name="end_date" id="end_date" placeholder="End Date" value="{{ old('end_date') }}" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-3 mt-4">
                                <button class="btn btn-primary">Search</button>
                                <a href="{{route('admins.view_remarks_histories')}}" class="btn btn-danger">Clear</a>
                            </div>
                        </div>
                    </form>              
                </div>

                <div class="card-body"> 
                    <h5 class="mt-0">Groups</h5>
                    <table id="datatable-buttons-alllist" class="table table-bordered w-100">
                        <thead>
                            <tr>
                                <th>SL.</th>
                                <th>Group Name</th>
                                <th>Member Name</th>
                                <th>Member ID</th>
                                <th>Remarks</th> 
                            </tr>
                        </thead>
    
                        <tbody>
                            {{-- @if (count())
                                
                            @endif --}}
                            @if (isset($remarks) && count($remarks) > 0)

                            
                                @foreach ($remarks as $key => $gur)
                                    @if(count($gur)>0)
                                    <tr>
                                        <td>{{ $loop->index+1 }}</td>
                                        <td>{{ @$gur[0]->groupUser->group_data->name }}</td>
                                        <td>{{ @$gur[0]->groupUser->user_data->name }}</td>
                                        <td>{{ @$gur[0]->groupUser->user_data->user_id }}</td>
                                        <td> @foreach ( $gur as $row )
                                            
                                         <span>
                                            <b>{{$row->remarks}} 
                                                @if($row->file)
                                                    @php
                                                        $extension = pathinfo(asset('uploads/remarks/'.$row->file), PATHINFO_EXTENSION);
                                                    @endphp

                                                    @if($extension == 'mp3')
                                                        <audio id="remarksFileDiv_audio-{{$row->id}}" class="remarksAudio">
                                                            <source src="{{asset('uploads/remarks/'.$row->file)}}">
                                                        </audio>
                                                        <a href="javascript:void(0)" data-id="remarksFileDiv_audio-{{$row->id}}" data-iconid="#stateicon_div_audio-{{$row->id}}" class="playpause_audio"><i id="stateicon_div_audio-{{$row->id}}" class="fa fa-play stateicon_div"></i></a>

                                                    @elseif ($extension == 'jpg' || $extension == 'jpeg' || $extension == 'png')
                                                        <a href="{{asset('uploads/remarks/'.$row->file)}}" target="_blank"><i class="fa fa-download"></i></a>
                                                    @endif

                                                @endif 
                                            </b>
                                            <small>({{ utc_to_local('d M Y, g:i:s A',$row->created_at) }}) <u>{{$row->createdBy->name}}</u></small> </span><br/>
                                             
                                         @endforeach 
                                        </td>
                                    </tr>
                                    @endif
                                    
                                @endforeach
                            @endif
                        </tbody>
    
                    </table>
                </div>



            </div> <!-- end col -->                                                               
        </div><!--end row-->
    
    </div> <!-- container-fluid -->
@push('alljs')
<script type="text/javascript">
    $('.playpause_audio').on('click',function(){
        var myAudioID = $(this).data('id');
        console.log(myAudioID);
        var iconID = $(this).data('iconid');
        var myAudio = document.getElementById(myAudioID);
        $('.stateicon_div').addClass('fa-play');
        console.log(myAudio.paused);
        if (myAudio.paused) {
            var list, index;
            list = document.getElementsByClassName("remarksAudio");
            for (index = 0; index < list.length; ++index) {
                list[index].pause();
            }
          $(iconID).removeClass('fa-play');
          $(iconID).addClass('fa-pause');
          myAudio.play();
        } else {
          $(iconID).removeClass('fa-pause');
          $(iconID).addClass('fa-play');
          myAudio.pause();
       }
    });
</script>
@endpush
@endsection