@extends('layouts.app')

@section('title', 'profile')

@section('content')

<main id="main" class="main">

    <div class="pagetitle">
      <h1>Nominees</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>          
          <li class="breadcrumb-item active">Settings</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section profile">
      <div class="row">
        <div class="col-xl-1"></div>
        

        <div class="col-xl-10">

          <div class="card" id="profile-card">
            <div class="card-body pt-3">
              <!-- Bordered Tabs -->
              <ul class="nav nav-tabs nav-tabs-bordered">

                <li class="nav-item">
                  <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#nominees-list">My Nominees</button>
                </li>

                <li class="nav-item">
                  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nominees">Add Nominee</button>
                </li>

              </ul>
              <div class="tab-content pt-2">

                <div class="tab-pane fade show active nominees-list" id="nominees-list">                  
                  
                  <div class="d-sm-flex align-items-center justify-content-between mb-4">
                    <h5 class="card-title">My Nominees</h5>
                    <a href="{{ route('member.nomineePDF') }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i
                            class="fas fa-download fa-sm text-white-50"></i> Download</a>
                </div>
                  <table class="table datatable">
                    <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Contact</th>
                        <th scope="col">Relationship</th>
                        <th scope="col">Percentage</th>
                        <th scope="col">Action</th>
                      </tr>
                    </thead>
                    <tbody>
                        @forEach($nominees as $nominee)
                        @if($nominee->user_id == Auth()->user()->id)
                          <tr>
                            <th scope="row"></th>
                            <td>{{$nominee->name}}</td>
                            <td>{{$nominee->phone}}</td>
                            <td>{{$nominee->relationship}}</td>
                            <td>{{$nominee->percentage}}%</td>
                            <td>
                              <a href="#" class="btn btn-primary btn-sm mr-1">
                                  <span class="icon text-white-50">
                                      <i class="fas fa-edit"></i>
                                  </span>
                              </a>                              
                              <a href="#" class="btn btn-danger btn-sm">
                                  <span class="icon text-white-50">
                                      <i class="fas fa-trash"></i>
                                  </span>
                              </a>
                          </td>
                          </tr> 
                        @endif                                         
                           @endforeach                 
                    </tbody>
                  </table>
                </div>
                

                <!--Nominees/Next of Kin-->
                <div class="tab-pane fade nominees pt-3" id="nominees">
                  

                  <!-- Add Nominee Form -->
                  <form class="needs-validation" action="{{ route('member.updateNominee') }}" method="post" enctype="multipart/form-data">
                    @csrf              
                    

                    <div class="row mb-3">
                      <label for="fname" class="col-md-4 col-lg-3 col-form-label">Full Name<sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
                      <div class="col-md-8 col-lg-9">
                        <input name="name" type="text" class="form-control @error('name') is-invalid @enderror" id="name" value="">
                        @error('name')
                        <span class="invalid-feedback" role="alert">
                          <strong>{{ $message }}</strong>
                        </span>
									      @enderror
                      </div>
                    </div>              
                    <div class="row mb-3">
                        <label for="relationship" class="col-md-4 col-lg-3 col-form-label">Relationship<sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
                        <div class="col-md-8 col-lg-9">
                            <select class="form-control @error('relationship') is-invalid @enderror" id="relationship" name="relationship" required>
                                <option selected disabled value="">Choose...</option>                            
                                    <option value="Mother">Mother</option>
                                    <option value="Father">Father</option>
                                    <option value="Brother">Brother</option>
                                    <option value="Sister">Sister</option>
                                    <option value="Son">Son</option> 
                                    <option value="Daughter">Daughter</option>
                                    <option value="Daughter">Other</option>                             
                            </select>
                        </div>
                      </div>                         
                                    

                    <div class="row mb-3">
                      <label for="Phone" class="col-md-4 col-lg-3 col-form-label">Phone<sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
                      <div class="col-md-8 col-lg-9">
                        <input name="phone" type="text" class="form-control @error('phone') is-invalid @enderror" id="phone" value="">
                        @error('phone')
                        <span class="invalid-feedback" role="alert">
                          <strong>{{ $message }}</strong>
                        </span>
									      @enderror
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="percentage" class="col-md-4 col-lg-3 col-form-label">Percentage<sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
                      <div class="col-md-8 col-lg-9">
                        
                        <input name="percentage" type="text" class="form-control @error('percentage') is-invalid @enderror" id="percentage" value="">
                        @error('percentage')
                        <span class="invalid-feedback" role="alert">
                          <strong>{{ $message }}</strong>
                        </span>
									      @enderror
                      </div>
                    </div>         
                                                   

                    <div class="text-center">
                      <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                  </form><!-- End nominee Form -->

                </div>
                              

              </div><!-- End Bordered Tabs -->

            </div>
          </div>

        </div>
      </div>
    </section>

  </main>


  @endsection
@pushOnce('scripts')
<script>
  
  @if(session('success'))
      console.log('success');
      Swal.fire('Success', '{{ session('success') }}', 'success');
  @elseif(session('error'))
      console.log('error');
      Swal.fire('Error', '{{ session('error') }}', 'error');
  @endif
  
  @if ($errors->any())
        
        $(document).ready(function() {
            $('.nav-tabs a[href="#nominees"]').addClass('active'); // Add the "active" class to the "nominees" tab
            $('#nominees-list').removeClass('show active'); // Remove the "show" and "active" classes from all tab panes
            $('#nominees').addClass('show active'); // Add the "show" and "active" classes to the "nominees" tab pane
            Swal.fire('Error', 'Please fix the validation errors', 'error');
        });
    @endif
</script>


   

  @endpushOnce