@extends('backend.layouts.emaillayout')
@section('content')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link media="all" type="text/css" rel="stylesheet" href="{{url('/vendor/core/core/base/css/core.css')}}">
<link media="all" type="text/css" rel="stylesheet" href="{url('/vendor/core/core/base/libraries/datatables/media/css/dataTables.bootstrap.min.css?v=5.27.1')}}">
<link media="all" type="text/css" rel="stylesheet" href="{{url('/vendor/core/core/table/css/table.css?v=5.27.1')}}">
<link media="all" type="text/css" rel="stylesheet" href="{{url('/vendor/core/core/base/libraries/datatables/media/css/dataTables.bootstrap.min.css?v=5.27.1')}}">
<script src="{{url('/vendor/core/core/base/libraries/fancybox/jquery.fancybox.min.js?v=5.27.1')}}"></script>
<script src="{{url('/vendor/core/core/base/libraries/datatables/media/js/jquery.dataTables.min.js?v=5.27.1')}}"></script>
<script src="{{url('/vendor/core/core/base/libraries/datatables/media/js/dataTables.bootstrap.min.js?v=5.27.1')}}"></script>
<script src="{{url('/vendor/core/core/base/libraries/datatables/extensions/Buttons/js/dataTables.buttons.min.js?v=5.27.1')}}"></script>
<script src="{{url('/vendor/core/core/base/libraries/datatables/extensions/Buttons/js/buttons.bootstrap.min.js?v=5.27.1')}}"></script>
<script src="{{url('/vendor/core/core/base/libraries/datatables/extensions/Responsive/js/dataTables.responsive.min.js?v=5.27.1')}}"></script>

  <style>
        .table-responsive {
            margin: 20px;
        }
    </style>

<main id="main" class="main">
  <!-- destination Section -->
  <section class="flights-section inner-page-section bg-backin">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="{{ url('/admin') }}">Dashboard</a></li>
              <li class="breadcrumb-item active" aria-current="page">Registrations</li>
            </ol>
          </nav>
        </div>
        <div class="col-12 ">
          <h1 class="heading mb-4">Registrations</h1>
        </div>
      </div>
      @if(session()->has('success'))
      <div class="alert alert-success">
        {{ session()->get('success') }}
      </div>
      @endif

      @if(session()->has('error'))
      <div class="alert alert-error">
        {{ session()->get('error') }}
      </div>
      @endif

      	<div class="shadow-box">
      <div class="flights-details career-details1 career-search">
        <div class="row align-items-center ">

          <form class="" action="{{ route('admin.response')}} " method="GET">
            <div class="row align-items-center">

              <div class="col-12 col-md-6 col-lg-3 ser-col2">
                <div class="text from-too">
                  <div class="form-group grouping">
                    <input type="text" class="form-control" placeholder="Enter Name" name="search" id="search" @isset($sort_search) value="{{ $sort_search }}" @endisset />
                  </div>
                </div>
              </div>
              
                <div class="col-12 col-md-6 col-lg-3 ser-col2">
                <div class="text from-too">
                  <div class="form-group grouping">
                    <select class="form-control" name="campaign" id="campaign" onchange="getInvitation()">
                        <option value="">Select Campaign</option>
                        @foreach($campaigns as $k => $camp)
                            <option value="{{ $camp->id }}" {{ request('campaign') == $camp->id ? 'selected' : '' }}>{{ $camp->campaign_name }}</option>
                        @endforeach
                    </select>
                  </div>
                </div>
              </div>
              
              <div class="col-12 col-md-6 col-lg-3 ser-col2">
                <div class="text from-too">
                  <div class="form-group grouping">
                    <select class="form-control" name="invitation" id="invitation">
                        <option value="">Select Invitation</option>
                        @foreach($invitations as $key => $invitation)
                            <option value="{{ $invitation->page_id }}" {{ request('invitation') == $invitation->page_id ? 'selected' : '' }}>
                                {{ $invitation->invitation_name }}
                            </option>
                        @endforeach
                    </select>
                  </div>
                </div>
              </div>

              <!--<div class="col-6 col-md-3 col-lg-6 ser-col2 d-flex flex-wrap justify-content1">-->
			        <div class="col-12 col-md-4 col-lg-1 ser-col2">
                <div class="package text-center">
                  <input type="submit" class="button" value="Search">  
                  <!-- <a href="{{ route('admin.response') }}" class="button">Reset</a> -->
                </div>
				</div>
				
				<div class="col-12 col-md-4 col-lg-2 ser-col2 export-btn-wrap">
                <div class="package text-center">
                  <button type="submit" class="button export-btn" name="export" value="Export"><img src="../assets/images/export-btn.svg"> Export</button>
                </div>
				</div>
              <!--</div>-->
              
            </div>
          </form>
        </div>
      </div>
      <div class="career-data-panel table-responsive">
        <table cellpadding="0" cellspacing="0" id="example"  class="table table-striped career-data-table table-bordered">
          <thead>
            <tr>
           <!-- <th  title="Sr.No" width="20px" class="jb column-key-id sorting_desc" tabindex="0" aria-controls="botble-page-tables-page-table
              " rowspan="1" colspan="1" style="width: 20px;" aria-sort="descending" aria-label="IDorderby asc" >SR NO.</th>-->
                
              <th  title="ID" width="20px" class="jb column-key-id sorting_desc" tabindex="0" aria-controls="botble-page-tables-page-table
              " rowspan="1" colspan="1" style="width: 20px;" aria-sort="descending" aria-label="IDorderby asc" >Sr.No</th>
              <th class="Campaign">Campaign</th>
              <th class="Invitation">Invitation</th>
              <th class="First">First Name</th>
              <th class="Last">Last Name</th>
              <th class="Mobile">Mobile</th>
              <th class="ac">Action</th>
              <th class="event_status">Status</th>
            </tr>
          </thead>
          <tbody>
                         @if (count($responses)> 0)
              @foreach($responses as $key => $response)
                <tr>
                  <td data-label="Sr.No">{{ $responses->firstItem() + $key  }}</td>
                  <td data-label="Campaign">{{$response->campaign_name}}</td>
                  <td data-label="Invitation">{{$response->invitation_name}}</td>
                  <td data-label="First Name">{!! $response->firstname !!}</td>
                  <td data-label="Last Name" >{{ $response->lastname }}</td>
                                    <td data-label="Mobile">{{$response->country_code}} {{$formatted}}</td>
                  <td data-label="Action">
                      <a class="ac-lft" href="{{route('admin.response.view',['id'=>$response->id])}}">
                          <img class="view" src="{{ url('themes/lara-mag/images/view.svg') }}">
                         <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                          <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                          <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                        </svg>-->
                      </a>
                  </td>
               <td data-label="Status">
                    <form action="{{route('admin.response.updateStatus',['id'=>$response->id])}}" method="POST">
                        @csrf
                        <select name="status" onchange="this.form.submit()">
                            <option value="">Select Status</option>
                            <option value="attending" {{ $response->status == 'attending' ? 'selected' : '' }}>Attending</option>
                            <option value="pending" {{ $response->status == 'pending' ? 'selected' : '' }}>Not Attending</option>
                            <!--<option value="attended" {{ $response->status == 'attended' ? 'selected' : '' }}>Attended</option>-->
                            <!--<option value="missed" {{ $response->status == 'missed' ? 'selected' : '' }}>Missed</option>-->
                        </select>
                    </form>
                 </td>
                </tr>
           @endforeach
           @else
            <tr>
                <td data-label="id" colspan="8">
                    Invitation Response Data Not Found !!
                 </td>
            </tr>
           @endif
          </tbody>
        </table>
      </div>
      <div class="aiz-pagination">
        {{ $responses->appends(request()->query())->links() }}
      </div>
	  </div>
  </section>
<script>
    $(document).ready(function() {
        $('#example').DataTable({
            responsive: true,
            paging: false,
            info: false
         /*   pageLength: 25,
            language: {
                paginate: {
                    previous: "<",
                    next: ">"
                }
            },
             drawCallback: function() {
                // Add custom class to pagination controls
                $('.dataTables_paginate').addClass('aiz-pagination');
            }*/
        });
    });
    function getInvitation(){
        var campaign = $('#campaign').val();
        $.ajax({
            url: "{{ route('ajax.getInvitation') }}", 
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                data: campaign
            },
            success: function(response) {
                if(response.success) {
                    let $select = $('#invitation');
                    $select.html($('<option></option>').val('').text('Select Invitation'));
                    $.each(response.data, function(index, value) {
                        $select.append($('<option></option>').val(index).text(value));
                    });
                }else{
                    alert("An error occurred");
                }
            },
            error: function(xhr) {
                console.log(xhr.responseText); // Log errors if any
            }
        });
    }
</script>
</main>
@endsection