@extends('backend.layouts.app')

@section('content')

<div class="p-3">
    <div class="card">
        <div class="card-header font-weight-bold">
          <span class="fw-bold">User Members</span>&emsp;
        </div>
        <div class="card-body">
            <table class="table table-striped" style="width:100%">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Member</th>
                    <th>Profession</th>
                    <th>Date Created</th>
                    <th>Action</th>
                  </tr>
                </thead>
                
                <tbody>
                    @foreach ($members as $items)
                <tr>
                    <td>{{ $items->id }}</td>
                    <td>{{ $items->first_name }} {{ $items->last_name }}</td>
                    <td>{{ $items->profession }}</td>
                    <td>{{ date('F j, Y', strtotime($items->created_at)) }}</td>
                    <td>
                        <a role="button" data-toggle="modal" data-target="#modal{{ $items->id }}" class="btn btn-success btn-block mb-1"> View</button>
                        <a href="{{ asset('cv/' . $items->cv) }}" target="_blank" class="btn btn-info btn-block mb-1"> View Resume/CV </button>
                        <a href="{{ url('admin/user-members/' .$items->id) }}/edit" class="btn btn-primary btn-block">
                          Edit Password
                        </a>
                        {{-- <form action="{{ url('admin/user-members/' . $items->id ) }}" method="POST"> @csrf @method('delete')
                        <button class="btn btn-danger btn-block" type="submit">Delete</button>
                        </form> --}}
                    </td>

                          <div class="modal fade" id="modal{{$items->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
                              <div class="modal-content">
                                <div class="modal-body">
                                  <div  class="modal-title" id="exampleModalLabel">
                                    <div class="mb-2">
                                        <span class="font-weight-bold">Personal Information</span><br>
                                        <span>Member Name:&nbsp; {{ $items->first_name }} {{ $items->last_name }} {{ $items->last_name }} {{ $items->suffix }}</span><br>
                                        <span>Sex:&nbsp; {{ $items->sex }}</span><br>
                                        <span>Email Address:&nbsp; {{ $items->email }}</span><br>
                                        <span>Phone No.:&nbsp; {{ $items->phone }}</span><br>
                                        <span>Address:&nbsp; {{ $items->address }}</span><br>
                                        <span>City:&nbsp; {{ $items->city }}</span><br>
                                        <span>Province / Zip:&nbsp; {{ $items->rovince }}</span><br>
                                        <span>Region:&nbsp; {{ $items->region }}</span><br>
                                        <span>Date Created:&nbsp; {{ date('F d, Y', strtotime($items->created_at)) }} </span><br>
                                    </div>    
                                    <div class="mb-2">
                                        <span class="font-weight-bold">Educational Background</span><br>
                                        @foreach ($items->educations as $education)
                                          <span>Highest Educational Attainment:&nbsp; {{ $education->education }}</span><br>
                                          <span>Degree:&nbsp; {{ $education->degree }}</span><br>
                                          <hr>
                                        @endforeach
                                    </div>    
                                  </div>
                                </div>
            
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                </div>
            
                              </div>
                            </div>
                          </div>
                </tr>
                @endforeach
                </tbody>
              </table>
        </div>
    </div>
</div>


@endsection

@section('js')
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
<script>
  $(document).ready(function() {
      $('.table').DataTable({
          order: [[0, 'desc']]
      });
  });
</script>
@endsection