@extends('back.layouts.pages-layout')
@section('pageTitle', isset($pageTitle) ? $pageTitle: 'Events Applicants')
@section('content')

<div class="page-header d-print-none">
  <div class="container-xl">
      <div class="row g-2 align-items-center">
          <div class="col">
              <h2 class="page-title">
                  Event Applicants
              </h2>
          </div>
          <!-- Page title actions -->
          <div class="col-auto ms-auto d-print-none">
              <div class="btn-list">
                  <a href="{{route('author.events.add-event')}}" class="btn btn-success d-none d-sm-inline-block">
                    Add Event
                  </a>
                  {{-- <span class="d-none d-sm-inline">
                      <a href="{{route('author.posts.all_posts')}}" class="btn">
                          Add Event
                      </a>
                  </span> --}}
                  <a href="{{route('author.events.all-events')}}" class="btn btn-primary d-none d-sm-inline-block">
                      View All Events
                  </a>
              </div>
          </div>
      </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
      <div class="page-wrapper">
          <!-- Page body -->
          <div class="row row-deck row-cards">

              <div class="col-md-12 col-lg-12">
                  <div class="card">
                      <div class="card-header">
                          <h3 class="card-title">Applications</h3>
                      </div>
                      <div class="table-responsive">
                          <table class="table card-table table-vcenter text-nowrap datatable">
                              <thead>
                                  <tr>
                                      <th>Name</th>
                                      <th>Email</th>
                                      <th>Phone</th>
                                      <th>Location</th>
                                      <th>Event</th>
                                      <th>Date</th>
                                  </tr>
                              </thead>
                              <tbody>
                                @forelse ($applicants as $items)
                                <tr>
                                  <td><a wire:click.prevent='readApplication({{$items->id}})' href=""
                                          class="text-reset" tabindex="-1" data-bs-toggle="modal"
                                          data-bs-target="#applications_modal">{{$items->name}}</a></td>
                                  <td>
                                      {{$items->email}}
                                  </td>
                                  <td>
                                      {{$items->phone}}
                                  </td>
                                  <td>
                                      {{$items->location}}
                                  </td>
                                  <td>
                                      {{$items->events->title}}
                                  </td>
                                  
                                  <td>
                                      {{$items->created_at->diffForHumans()}}
                                  </td>
                              </tr>
                                @empty
                                <td>
                                  <div>This is no applicant for this event</div>
                                </td>
                                    
                                @endforelse
                              </tbody>
                          </table>
                      </div>
                      <div class="card-footer d-flex align-items-center">
                          <ul class="pagination m-0 ms-auto">

                              {{$applicants->links('livewire::simple-bootstrap')}}

                          </ul>
                      </div>
                  </div>
              </div>

          </div>

      </div>


      {{-- modal --}}
      <div wire:ignore.self class="modal modal-blur fade" id="messages_modal" tabindex="-1" role="dialog"
          aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <h5 class="modal-title">Messages</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                      <div class="row">
                          <div class="col-6 mb-3">
                              <label for="" class="label">Name:</label>
                              <input type="text" disabled class="form-control" wire:model='name'>
                          </div>
                          <div class="col-6 mb-3">
                              <label for="" class="label">Email:</label>
                              <input type="text" disabled class="form-control" wire:model='email'>
                          </div>
                      </div>

                      <div class="row">
                          <div class="col-6 mb-3">
                              <label for="" class="label">Phone number:</label>
                              <input type="text" disabled class="form-control" wire:model='phone'>
                          </div>
                          <div class="col-6 mb-3">
                              <label for="" class="label">Subject:</label>
                              <input type="text" disabled class="form-control" wire:model='subject'>
                          </div>
                      </div>
                      <div class="mb-3">
                          <label for="" class="label">Message:</label>
                          <textarea rows="20" disabled class="form-control" wire:model='message'></textarea>
                      </div>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
                  </div>
              </div>
          </div>
      </div>

      {{-- quote modal --}}
      <div wire:ignore.self class="modal modal-blur fade" id="applications_modal" tabindex="-1" role="dialog"
          aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <h5 class="modal-title">Application</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                      <div class="row">
                          <div class="col-6 mb-3">
                              <label for="" class="label">First Name:</label>
                              <input type="text" disabled class="form-control" wire:model='firstname'>
                          </div>
                          <div class="col-6 mb-3">
                              <label for="" class="label">Last Name:</label>
                              <input type="text" disabled class="form-control" wire:model='lastname'>
                          </div>
                      </div>

                      <div class="row">
                          <div class="col-6 mb-3">
                              <label for="" class="label">Email:</label>
                              <input type="text" disabled class="form-control" wire:model='email'>
                          </div>
                          <div class="col-6 mb-3">
                              <label for="" class="label">Phone number:</label>
                              <input type="text" disabled class="form-control" wire:model='phone'>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-6 mb-3">
                              <label for="" class="label">Travel destination:</label>
                              <input type="text" disabled class="form-control" wire:model='destination'>
                          </div>
                          <div class="col-6 mb-3">
                              <label for="" class="label">Travel year:</label>
                              <input type="text" disabled class="form-control" wire:model='studyyear'>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-6 mb-3">
                              <label for="" class="label">Current Location:</label>
                              <input type="text" disabled class="form-control" wire:model='region'>
                          </div>
                          <div class="col-6 mb-3">
                              <label for="" class="label">Mode of counselling:</label>
                              <input type="text" disabled class="form-control" wire:model='counselling'>
                          </div>
                      </div>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
                  </div>
              </div>
          </div>
      </div>

  </div>
</div>

@endsection

@push('scripts')
<script>
    window.addEventListener('showMessageModal',function(e){
      $('#messages_modal').modal('show');
    });

    window.addEventListener('showApplicationModal',function(e){
      $('#applications_modal').modal('show');
    });
</script>


@endpush