@extends('layouts.admin')

@section('content')
@push('css')
<style>
    .user-documents {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.user-documents p {
    margin-bottom: 0;
}
</style>
@endpush
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Member View</h5>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="{{ route('members.list') }}" class="btn btn-secondary btn-sm">Member Lists</a>
                            <a href="{{ route('members.edit',$member->id) }}" class="btn btn-info btn-sm">Member Edit</a>
                            <a href="{{ route('members.create') }}" class="btn btn-primary btn-sm">Member Create</a>
                        </div>
                    </div>

                </div>
            </div>
        </div> <!-- end col -->
    </div><!--end row-->

    <div class="row">
        <div class="col-xl-3">
            <div class="card profile">
                <div class="card-body">
                    <div>
                        <div class="text-center">
                            <img src="{{ $member->picture ? asset('uploads/users/'.$member->picture) : default_image()}}" alt="" class="rounded-circle img-thumbnail avatar-xl">
                            <h4 class="mt-3">{{ $member->name }}</h4>
                        </div>


                        {{-- <a href="#" class="btn btn-pink btn-round px-5">Follow Me</a>
                        <ul class="list-unstyled list-inline mt-3 text-muted">
                            <li class="list-inline-item font-size-13 mr-3">
                                <b class="text-dark">754</b> Followers
                            </li>
                            <li class="list-inline-item font-size-13">
                                <b class="text-dark">24</b> Following
                            </li>
                        </ul> --}}

                        {{-- <ul class="list-unstyled list-inline mt-3">
                            <li class="list-inline-item ">
                                <a href="#">
                                    <img src="assets/images/users/user-2.jpg" alt="" class="rounded-circle avatar-xs" data-toggle="tooltip" title="" data-original-title="Anna Black">
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#">
                                    <img src="assets/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs" data-toggle="tooltip" title="" data-original-title="Milton Ault">
                                </a>
                            </li>
                            <li class="list-inline-item ">
                                <a href="#">
                                    <img src="assets/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs" data-toggle="tooltip" title="" data-original-title="Joseph Sims">
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#">
                                    <img src="assets/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs" data-toggle="tooltip" title="" data-original-title="Kurt Watson">
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="">
                                    <span class="avatar-xs font-size-13">99+</span>
                                </a>
                            </li>
                        </ul>                                         --}}
                        <ul class="list-unstyled mb-0">
                            <li class="mt-2"><b> User ID </b> : {{ $member->user_id }}</li>
                            <li class="mt-2"> <b>Refer Name</b> : {{ @$member->refer_data->name }}</li>
                            <li class="mt-2"> <b>Refer ID</b> : <a href="{{ route('members.view',$member->refer_data->id) }}">{{ @$member->refer_data->user_id }}</a></li>
                            <li class="mt-2"> <b> Email </b> : {{ $member->email }}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="mt-0">About :</h5>
                    <p class="card-title-desc">{!!$member->biodata!!}</p>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3">Contact
                        {{-- <button type="button" >
                            <i class="far fa-sticky-note"></i>
                            {{ route('groups.remarks',$member->id) }}
                        </button> --}}
                        <span class="float-right open_phone_modal_page" data-url="{{ route('members.phone', $member->id) }}" data-title="Add Phone Number" style="cursor: pointer"><i class="fas fa-plus-circle" ></i></span>
                    </h5>
                    <hr>
                    @if(count($member->userPhones)>0)
                    <ul class="list-unstyled mb-0">
                        @foreach ($member->userPhones as $member_phone)
                            <li>
                                <i class="mdi mdi-phone mr-2 text-success font-size-18"></i> <b> {{ @$member_phone->type_data->name }} </b> : {{ $member_phone->phone_number }}<br/>
                                @if(count($member_phone->phone_account_data)>0)
                                    @foreach($member_phone->phone_account_data as $row)
                                    <label class="badge badge-boxed  badge-primary font-size-11">{{ @$row->account_type_data->name }}</label>
                                    @endforeach
                                @endif
                            </li>
                        @endforeach
                    </ul>
                    @endif
                </div>
            </div>
            <div class="card">
                <div class="card-body">

                    <form action="{{ route('members.update_team', $member->id) }}" method="post">
                        @csrf
                        <div class="form-group ">
                            <h5 class="card-title mb-3">Team</h5>
                            <select name="team_id" class="select2 form-control mb-3 custom-select">
                                <option selected value="">Select One</option>
                                @foreach ($teams as $team)
                                    <option {{ $member->team_id == $team->id ? 'selected' : '' }} value="{{ $team->id }}" >{{ $team->name }}</option>
                                @endforeach
                            </select>

                        </div>
                        <button style="float: right" class="btn btn-sm btn-success" type="submit">Update</button>
                    </form>

                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="mt-0">Member Relatives
                        <span class="float-right open_relative_modal_page" data-url="{{ route('members.relatives', $member->id) }}" data-title="Add Relative" style="cursor: pointer"><i class="fas fa-plus-circle" ></i></span>
                    </h5>
                    <hr>

                    @if(count($member->userRelatives)>0)
                    <div class="button-list btn-social-icon">
                        @foreach ($member->userRelatives as $user_relative)
                        <p>{{ @$user_relative->user->name }}({{ @$user_relative->user->id }}), {{ @$user_relative->user->phone_number }}</p>
                        @endforeach

                    </div>
                    @endif
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="mt-0">Social Profile
                        <span class="float-right open_social_modal_page" data-url="{{ route('members.social', $member->id) }}" data-title="Add Social Profile" style="cursor: pointer"><i class="fas fa-plus-circle" ></i></span>
                    </h5>
                    <hr>

                    @if(count($member->userProfiles)>0)
                    <div class="button-list btn-social-icon">
                        @foreach ($member->userProfiles as $user_profile)
                        <a href="{{ $user_profile->profile_url }}" target="_blank">
                            <button type="button" class="btn btn-{{ @$user_profile->profile_type_data->name }} rounded-circle">
                                <i class="fab fa-{{ @$user_profile->profile_type_data->name }}"></i>
                            </button>
                        </a>
                        @endforeach

                    </div>
                    @endif
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="mt-0">Documents Submit
                        <span class="float-right open_member_documents_modal_page" data-url="{{ route('members.documents', $member->id) }}" data-title="Submit Member Document" style="cursor: pointer"><i class="fas fa-plus-circle" ></i></span>
                    </h5>
                    <hr>

                    @if(count($member->userDocuments)>0)
                        @foreach ($member->userDocuments as $user_document)
                        <div class="user-documents">
                            <p class="document-type">{{ @$user_document->document_type_data->name }}</p>
                            <a class="btn btn-success btn-sm" href="{{ asset('/uploads/users/documents/'.$user_document->file) }}" download>Download</a>
                        </div>
                        @endforeach
                    @endif
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="mt-0">Bank Details
                        <span class="float-right open_modal_page" data-url="{{ route('members.bank_details', $member->id) }}" data-title="Submit Bank Details" style="cursor: pointer"><i class="fas fa-plus-circle" ></i></span>
                    </h5>
                    <hr>

                    {{-- @if(count($member->userDocuments)>0)
                        @foreach ($member->userDocuments as $user_document)
                        <div class="user-documents">
                            <p class="document-type">{{ @$user_document->document_type_data->name }}</p>
                            <a class="btn btn-success btn-sm" href="{{ asset('/uploads/users/documents/'.$user_document->file) }}" download>Download</a>
                        </div>
                        @endforeach
                    @endif --}}
                </div>
            </div>

            {{-- <div class="card">
                <div class="card-body">
                    <h5 class="mt-0">My Top Skills</h5>
                    <ul class="list-unstyled list-inline language-skill mb-0">
                        <li class="list-inline-item"><span>java</span></li>
                        <li class="list-inline-item"><span>Javascript</span></li>
                        <li class="list-inline-item"><span>laravel</span></li>
                        <li class="list-inline-item"><span>HTML5</span></li>
                        <li class="list-inline-item"><span>android</span></li>
                        <li class="list-inline-item"><span>zengo</span></li>
                        <li class="list-inline-item"><span>python</span></li>
                        <li class="list-inline-item"><span>react</span></li>
                        <li class="list-inline-item"><span>php</span></li>
                    </ul>
                </div>
            </div> --}}

        </div>
        <div class="col-xl-9">
            <div class="">
                <div class="custom-tab tab-profile">

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link pb-3 pt-0 active" data-toggle="tab" href="#overview" role="tab" aria-selected="false"><i class="fab fa-product-hunt mr-2"></i>Overview</a>
                        </li>
                        <!-- <li class="nav-item">
                            <a class="nav-link pb-3 pt-0" data-toggle="tab" href="#activity" role="tab" aria-selected="true"><i class="fas fa-suitcase mr-2"></i>Activity</a>
                        </li>  -->
                        {{-- <li class="nav-item">
                            <a class="nav-link pb-3 pt-0" data-toggle="tab" href="#settings" role="tab"><i class="fas fa-cog mr-2"></i>Settings</a>
                        </li> --}}
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content pt-4">
                        <div class="tab-pane active" id="overview" role="tabpanel">
                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="card">
                                        <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 class="text-center">Group Name</th>
                                                        <th>Remarks</th>
                                                    </tr>
                                                </thead>

                                                <tbody>
                                                    @foreach($groups as $key => $group)
                                                        <tr>
                                                            <td>{{++$key}}</td>
                                                            <td>{{@$group->group_data->name}}</td>
                                                            <td>
                                                                @if(count($group->all_remarks)>0)
                                                                    @foreach($group->all_remarks 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) }})</small> </span><br/>
                                                                    @endforeach
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>

                                            </table>
                                        </div>
                                    </div>
                                </div>
                                {{-- <div class="col-xl-9">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title">Payments</h5>
                                            <div class="table-responsive">
                                                <table class="table table-centered table-nowrap table-hover mb-0">
                                                    <thead>
                                                        <tr class="align-self-center">
                                                            <th>Project Name</th>
                                                            <th>Client Name</th>
                                                            <th>Payment Type</th>
                                                            <th>Paid Date</th>
                                                            <th>Amount</th>
                                                            <th>Transaction</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>Product Devlopment</td>
                                                            <td>
                                                                <img src="assets/images/users/user-2.jpg" alt="" class="avatar-xs rounded-circle mr-2">
                                                                Kevin Heal
                                                            </td>
                                                            <td>Paypal</td>
                                                            <td>5/8/2018</td>
                                                            <td>$15,000</td>
                                                            <td><span class="badge badge-boxed  badge-warning">panding</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>New Office Building</td>
                                                            <td>
                                                                <img src="assets/images/users/user-3.jpg" alt="" class="avatar-xs rounded-circle mr-2">
                                                                Frank M. Lyons
                                                            </td>
                                                            <td>Paypal</td>
                                                            <td>15/7/2018</td>
                                                            <td>$35,000</td>
                                                            <td><span class="badge badge-boxed  badge-primary">Success</span></td>
                                                        </tr>

                                                        <tr>
                                                            <td>Market Research</td>
                                                            <td>
                                                                <img src="assets/images/users/user-4.jpg" alt="" class="avatar-xs rounded-circle mr-2">
                                                                Angelo Butler
                                                            </td>
                                                            <td>Pioneer</td>
                                                            <td>30/9/2018</td>
                                                            <td>$45,000</td>
                                                            <td><span class="badge badge-boxed  badge-warning">Panding</span></td>
                                                        </tr>

                                                        <tr>
                                                            <td>Website &amp; Blog</td>
                                                            <td>
                                                                <img src="assets/images/users/user-5.jpg" alt="" class="avatar-xs rounded-circle mr-2">
                                                                Phillip Morse
                                                            </td>
                                                            <td>Paypal</td>
                                                            <td>2/6/2018</td>
                                                            <td>$70,000</td>
                                                            <td><span class="badge badge-boxed  badge-primary">Success</span></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div><!--end table-responsive-->
                                            <div class="pt-3 border-top text-right">
                                                <a href="#" class="text-primary">View all <i class="mdi mdi-arrow-right"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-3">
                                    <div class="card">
                                        <img src="assets/images/trophy.svg" alt="" class="img-fluid">
                                        <div class="card-body text-center bg-dark">
                                            <h4 class="text-primary">" Congratulations For Your New Record "</h4>
                                        </div>
                                    </div>
                                </div>     --}}
                            </div>
                            {{-- <div class="row">

                                <div class="col-xl-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="float-right">
                                                <p class="font-size-13 mb-0 peity-data">75%</p>
                                                <p class="data-attributes mb-0">
                                                    <span data-peity="{ &quot;fill&quot;: [&quot;#4accb1&quot;, &quot;#eeeeee&quot;],   &quot;innerRadius&quot;: 20, &quot;radius&quot;: 24 }" style="display: none;">5/7</span><svg class="peity" height="48" width="48"><path d="M 24 0 A 24 24 0 1 1 0.6017301076362322 29.340502414951548 L 4.501441756363526 28.45041867912629 A 20 20 0 1 0 24 4" data-value="5" fill="#4accb1"></path><path d="M 0.6017301076362322 29.340502414951548 A 24 24 0 0 1 23.999999999999996 0 L 23.999999999999996 4 A 20 20 0 0 0 4.501441756363526 28.45041867912629" data-value="2" fill="#eeeeee"></path></svg>
                                                </p>
                                                <span class="font-12 text-muted">Complete</span>
                                            </div>
                                            <div class="media">
                                                <a href="#">
                                                    <img src="assets/images/project-logo/project2.jpg" alt="" class="avatar-sm  rounded-circle mr-2" data-toggle="tooltip" title="" data-original-title="school project">
                                                </a>
                                                <div class="media-body">
                                                    <h5 class="mb-0">School Project</h5>
                                                    <small class="text-muted">Created by bhaffada</small>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <p class="mb-0 font-size-13">Last Update : <span class="text-muted">20 mins ago</span> </p>
                                                <p class="mb-0 font-size-13">Deadline : <span class="text-muted">5 Aug, 2018</span> </p>
                                            </div>
                                            <div class="mt-3">
                                                <p class="font-12 text-muted mb-2">Team Leader</p>
                                                <a href="#">
                                                    <img src="assets/images/users/user-2.jpg" alt="" class="avatar-xs rounded-circle" data-toggle="tooltip" title="" data-original-title="Kurty Watson">
                                                </a>
                                                <span class="font-size-13 mb-2">Kurty Watson</span>
                                                <div class="mt-3">
                                                    <ul class="list-unstyled list-inline mb-0">
                                                        <li class="list-inline-item">
                                                            <p class="text-muted font-size-13 mb-0">Tags :</p>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="badge badge-success">Design</span>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="badge badge-warning">Programming</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="float-right">
                                                <p class="font-size-13 mb-0 peity-data">75%</p>
                                                <p class="data-attributes mb-0">
                                                    <span data-peity="{ &quot;fill&quot;: [&quot;#089de3&quot;, &quot;#eeeeee&quot;],   &quot;innerRadius&quot;: 20, &quot;radius&quot;: 24 }" style="display: none;">5/7</span><svg class="peity" height="48" width="48"><path d="M 24 0 A 24 24 0 1 1 0.6017301076362322 29.340502414951548 L 4.501441756363526 28.45041867912629 A 20 20 0 1 0 24 4" data-value="5" fill="#089de3"></path><path d="M 0.6017301076362322 29.340502414951548 A 24 24 0 0 1 23.999999999999996 0 L 23.999999999999996 4 A 20 20 0 0 0 4.501441756363526 28.45041867912629" data-value="2" fill="#eeeeee"></path></svg>
                                                </p>
                                                <span class="font-12 text-muted">Complete</span>
                                            </div>
                                            <div class="media">
                                                <a href="#">
                                                    <img src="assets/images/project-logo/project3.jpg" alt="" class="avatar-sm  rounded-circle mr-2" data-toggle="tooltip" title="" data-original-title="Crypto Wallet">
                                                </a>
                                                <div class="media-body">
                                                    <h5 class="mb-0">Crypto Wallet</h5>
                                                    <small class="text-muted">Created by bhaffada</small>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <p class="mb-0 font-size-13">Last Update : <span class="text-muted">20 mins ago</span> </p>
                                                <p class="mb-0 font-size-13">Deadline : <span class="text-muted">5 Aug, 2018</span> </p>
                                            </div>
                                            <div class="mt-3">
                                                <p class="font-12 text-muted mb-2">Team Leader</p>
                                                <a href="#">
                                                    <img src="assets/images/users/user-3.jpg" alt="" class="avatar-xs  rounded-circle" data-toggle="tooltip" title="" data-original-title="Diane Ward">
                                                </a>
                                                <span class="font-size-13 mb-2">Diane Ward</span>
                                                <div class="mt-3">
                                                    <ul class="list-unstyled list-inline mb-0">
                                                        <li class="list-inline-item">
                                                            <p class="text-muted font-size-13 mb-0">Tags :</p>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="badge badge-dark">UI &amp; UX</span>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="badge badge-danger">IOS</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="float-right">
                                                <p class="font-size-13 mb-0 peity-data">75%</p>
                                                <p class="data-attributes mb-0">
                                                    <span data-peity="{ &quot;fill&quot;: [&quot;#4accb1 &quot;, &quot;#eeeeee&quot;],   &quot;innerRadius&quot;: 20, &quot;radius&quot;: 24 }" style="display: none;">5/7</span><svg class="peity" height="48" width="48"><path d="M 24 0 A 24 24 0 1 1 0.6017301076362322 29.340502414951548 L 4.501441756363526 28.45041867912629 A 20 20 0 1 0 24 4" data-value="5" fill="#4accb1 "></path><path d="M 0.6017301076362322 29.340502414951548 A 24 24 0 0 1 23.999999999999996 0 L 23.999999999999996 4 A 20 20 0 0 0 4.501441756363526 28.45041867912629" data-value="2" fill="#eeeeee"></path></svg>
                                                </p>
                                                <span class="font-12 text-muted">Complete</span>
                                            </div>
                                            <div class="media">
                                                <a href="#">
                                                    <img src="assets/images/project-logo/project1.jpg" alt="" class="avatar-sm  rounded-circle mr-2" data-toggle="tooltip" title="" data-original-title="Finance App">
                                                </a>
                                                <div class="media-body">
                                                    <h5 class="mb-0">Finance App</h5>
                                                    <small class="text-muted">Created by bhaffada</small>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <p class="mb-0 font-size-13">Last Update : <span class="text-muted">20 mins ago</span> </p>
                                                <p class="mb-0 font-size-13">Deadline : <span class="text-muted">5 Aug, 2018</span> </p>
                                            </div>
                                            <div class="mt-3">
                                                <p class="font-12 text-muted mb-2">Team Leader</p>
                                                <a href="#">
                                                    <img src="assets/images/users/user-4.jpg" alt="" class="avatar-xs  rounded-circle" data-toggle="tooltip" title="" data-original-title="Heidi Hogan">
                                                </a>
                                                <span class="font-size-13 mb-2">Heidi Hogan</span>
                                                <div class="mt-3">
                                                    <ul class="list-unstyled list-inline mb-0">
                                                        <li class="list-inline-item">
                                                            <p class="text-muted font-size-13 mb-0">Tags :</p>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="badge badge-info">Programming</span>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="badge badge-success">Java</span>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="badge badge-secondary">Android</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                        </div>
                        <div class="tab-pane" id="activity" role="tabpanel">
                            <div class="row">
                                <div class="col-xl-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title mb-3">Activity</h5>
                                            <div class="activity">
                                                <i class="mdi mdi-check text-primary"></i>
                                                <div class="time-item">
                                                    <div class="item-info">
                                                        <div class="text-muted float-right font-size-10">5 mins ago</div>
                                                        <h5 class="mt-0 mb-1">Task finished</h5>
                                                        <p class="text-muted font-size-13">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                                            <a href="#" class="text-info">[more info]</a>
                                                        </p>
                                                    </div>
                                                </div>
                                                <img src="assets/images/users/user-8.jpg" alt="" class="img-activity">
                                                <div class="time-item">
                                                    <div class="item-info">
                                                        <div class="text-muted float-right font-size-10">30 mins ago</div>
                                                        <h5 class="mt-0 mb-1">Task Overdue</h5>
                                                        <p class="text-muted font-size-13">Lorem ipsum dolor sit amet.
                                                            <a href="#" class="text-info">[more info]</a>
                                                        </p>
                                                    </div>
                                                </div>
                                                <i class="mdi mdi-alert-outline text-danger"></i>
                                                <div class="time-item ">
                                                    <div class="item-info">
                                                        <div class="text-muted float-right font-size-10">50 mins ago</div>
                                                        <h5 class="mt-0 mb-1">Task finished</h5>
                                                        <p class="text-muted font-size-13">There are many variations of passages of Lorem Ipsum available.
                                                            <a href="#" class="text-info">[more info]</a>
                                                        </p>
                                                    </div>
                                                </div>
                                                <img src="assets/images/users/user-6.jpg" alt="" class="img-activity">
                                                <div class="time-item ">
                                                    <div class="item-info">
                                                        <div class="text-muted float-right font-size-10">1 Day ago</div>
                                                        <h5 class="mt-0 mb-1">New Comment</h5>
                                                        <p class="text-muted font-size-13">Lorem ipsum dolor sit amet.
                                                            <a href="#" class="text-info">[more info]</a>
                                                        </p>
                                                    </div>
                                                </div>
                                                <img src="assets/images/users/user-8.jpg" alt="" class="img-activity">
                                                <div class="time-item">
                                                    <div class="item-info">
                                                        <div class="text-muted float-right font-size-10">3 Day ago</div>
                                                        <h5 class="mt-0 mb-1">Task finished</h5>
                                                        <p class="text-muted font-size-13 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                                            <a href="#" class="text-info">[more info]</a>
                                                        </p>
                                                    </div>
                                                </div>
                                                <i class="mdi mdi-comment-outline text-info"></i>
                                                <div class="time-item">
                                                    <div class="item-info">
                                                        <div class="text-muted float-right font-size-10">5 mins ago</div>
                                                        <h5 class="mt-0 mb-1">Task finished</h5>
                                                        <p class="text-muted font-size-13">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                                            <a href="#" class="text-info">[more info]</a>
                                                        </p>
                                                    </div>
                                                </div>
                                                <img src="assets/images/users/user-8.jpg" alt="" class="img-activity">
                                                <div class="time-item">
                                                    <div class="item-info">
                                                        <div class="text-muted float-right font-size-10">30 mins ago</div>
                                                        <h5 class="mt-0 mb-1">Task Overdue</h5>
                                                        <p class="text-muted font-size-13">Lorem ipsum dolor sit amet.
                                                            <a href="#" class="text-info">[more info]</a>
                                                        </p>
                                                    </div>
                                                </div>
                                                <i class="mdi mdi-check text-primary"></i>
                                                <div class="time-item">
                                                    <div class="item-info">
                                                        <div class="text-muted float-right font-size-10">5 mins ago</div>
                                                        <h5 class="mt-0 mb-1">Task finished</h5>
                                                        <p class="text-muted font-size-13">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                                            <a href="#" class="text-info">[more info]</a>
                                                        </p>
                                                    </div>
                                                </div>
                                                <img src="assets/images/users/user-8.jpg" alt="" class="img-activity">
                                                <div class="time-item">
                                                    <div class="item-info">
                                                        <div class="text-muted float-right font-size-10">30 mins ago</div>
                                                        <h5 class="mt-0 mb-1">Task Overdue</h5>
                                                        <p class="text-muted font-size-13">Lorem ipsum dolor sit amet.
                                                            <a href="#" class="text-info">[more info]</a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-8">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title">Photos</h5>
                                            <p class="card-title-desc">
                                                It is a long established fact that a reader will
                                                be distracted by the readable content of a page
                                                when looking at its layout. The point of using
                                                Lorem Ipsum is that it has a more-or-less normal
                                                distribution.
                                            </p>
                                            <div class="row px-3">
                                                <div class="col-4 p-0">
                                                    <a class="mfp-image" href="assets/images/small/img-4.jpg" title="30 min ago">
                                                        <img src="assets/images/small/img-4.jpg" alt="" class="img-fluid">
                                                    </a>
                                                </div>
                                                <div class="col-4 p-0">
                                                    <a class="mfp-image" href="assets/images/small/img-6.jpg" title="yesterday">
                                                        <img src="assets/images/small/img-6.jpg" alt="" class="img-fluid">
                                                    </a>
                                                </div>
                                                <div class="col-4 p-0">
                                                    <a class="mfp-image" href="assets/images/small/img-7.jpg" title="2 day ago">
                                                        <img src="assets/images/small/img-7.jpg" alt="" class="img-fluid">
                                                    </a>
                                                </div>
                                                <div class="col-4 p-0">
                                                    <a class="mfp-image" href="assets/images/small/img-3.jpg" title="last week">
                                                        <img src="assets/images/small/img-3.jpg" alt="" class="img-fluid">
                                                    </a>
                                                </div>
                                                <div class="col-4 p-0">
                                                    <a class="mfp-image" href="assets/images/small/img-2.jpg" title="last month">
                                                        <img src="assets/images/small/img-2.jpg" alt="" class="img-fluid">
                                                    </a>
                                                </div>
                                                <div class="col-4 p-0">
                                                    <a class="mfp-image" href="assets/images/small/img-5.jpg" title="2 month ago">
                                                        <img src="assets/images/small/img-5.jpg" alt="" class="img-fluid">
                                                    </a>
                                                </div>
                                                <div class="col-4 p-0">
                                                    <a class="mfp-image" href="assets/images/small/img-8.jpg" title="3 month ago">
                                                        <img src="assets/images/small/img-8.jpg" alt="" class="img-fluid">
                                                    </a>
                                                </div>
                                                <div class="col-4 p-0">
                                                    <a class="mfp-image" href="assets/images/small/img-1.jpg" title="6 month ago">
                                                        <img src="assets/images/small/img-1.jpg" alt="" class="img-fluid">
                                                    </a>
                                                </div>
                                                <div class="col-4 p-0">
                                                    <a class="mfp-image" href="assets/images/small/img-6.jpg" title="last year">
                                                        <img src="assets/images/small/img-6.jpg" alt="" class="img-fluid">
                                                    </a>
                                                </div>
                                                <div class="col-4 p-0">
                                                    <a class="mfp-image" href="assets/images/small/img-4.jpg" title="last year">
                                                        <img src="assets/images/small/img-4.jpg" alt="" class="img-fluid">
                                                    </a>
                                                </div>
                                                <div class="col-4 p-0">
                                                    <a class="mfp-image" href="assets/images/small/img-6.jpg" title="last year">
                                                        <img src="assets/images/small/img-6.jpg" alt="" class="img-fluid">
                                                    </a>
                                                </div>
                                                <div class="col-4 p-0">
                                                    <a class="mfp-image" href="assets/images/small/img-7.jpg" title="last year">
                                                        <img src="assets/images/small/img-7.jpg" alt="" class="img-fluid">
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="pt-3 text-right">
                                                <a href="#" class="text-primary">View all <i class="mdi mdi-arrow-right"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- <div class="tab-pane" id="settings" role="tabpanel">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <form method="post" class="card-box">
                                                <div class="dropify-wrapper has-preview"><div class="dropify-message"><span class="file-icon"> <p>Drag and drop a file here or click</p></span><p class="dropify-error">Ooops, something wrong appended.</p></div><div class="dropify-loader" style="display: none;"></div><div class="dropify-errors-container"><ul></ul></div><input type="file" id="input-file-now-custom-1" class="dropify" data-default-file="assets/images/users/user-3.jpg"><button type="button" class="dropify-clear">Remove</button><div class="dropify-preview" style="display: block;"><span class="dropify-render"><img src="assets/images/users/user-3.jpg"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner">user-3.jpg</span></p><p class="dropify-infos-message">Drag and drop or click to replace</p></div></div></div></div>
                                                <span class="input-icon icon-right">
                                                    <textarea rows="4" class="form-control" placeholder="Post a new message"></textarea>
                                                </span>
                                                <div class="float-right my-3">
                                                    <a class="btn btn-sm btn-primary text-light px-4 mb-0">Send</a>
                                                </div>
                                                <ul class="nav nav-pills profile-pills mt-1">

                                                    <li>
                                                        <a href="#"><i class=" fas fa-video mx-2 text-primary"></i></a>
                                                    </li>
                                                    <li>
                                                        <a href="#"><i class="fas fa-camera mx-2 text-primary"></i></a>
                                                    </li>
                                                </ul>
                                            </form>

                                            <div class="">
                                                <form class="form-horizontal form-material mb-0">
                                                    <div class="form-group">
                                                        <input type="text" placeholder="Full Name" class="form-control">
                                                    </div>

                                                    <div class="form-group row">
                                                        <div class="col-md-4">
                                                            <input type="email" placeholder="Email" class="form-control" name="example-email" id="example-email">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <input type="password" placeholder="password" class="form-control">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <input type="password" placeholder="Re-password" class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <div class="col-md-6">
                                                            <input type="text" placeholder="Phone No" class="form-control">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <select class="form-control">
                                                                <option>London</option>
                                                                <option>India</option>
                                                                <option>Usa</option>
                                                                <option>Canada</option>
                                                                <option>Thailand</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <textarea rows="5" placeholder="Message" class="form-control"></textarea>
                                                        <button class="btn btn-primary btn-sm text-light px-4 mt-3 float-right mb-0">Update Profile</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

</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