@extends('admin.master')
@section('main_content')

<div class="col-4 col-xl-4 page-title">
  <h4 class="f-w-700">Page Content</h4>
  <nav>
    <ol class="breadcrumb justify-content-sm-start align-items-center mb-0">
      <li class="breadcrumb-item"><a href="/dashboard"> <i data-feather="home"> </i></a></li>
      <li class="breadcrumb-item f-w-400">Dashboard</li>
      <li class="breadcrumb-item f-w-400 active">Content</li>
    </ol>
  </nav>
</div>
@include('admin._nav_top')

 <!-- Page Sidebar Ends-->
 <div class="page-body">
  <!-- Container-fluid starts-->
  <div class="container-fluid default-dashboard"> 
    <div class="row widget-grid">
      
      
      <div class="col-xl-12 proorder-xl-5 box-col-12 proorder-md-5"> 
        <div class="card">
          <div class="card-header card-no-border pb-0">
            <div class="header-top">
              <h4>Participations</h4>

    @if (session('user.user_type') == 'Admin')
        <form method="GET" action="{{ url('participations') }}" class="mb-3">
                <div class="row">
                    <!-- Category Filter -->
                    <div class="col-md-3">
                        <label for="category_id">Category</label>
                        <select name="category_id" id="category_id" class="form-control">
                            <option value="">All Categories</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" {{ $selectedCategory == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
            
                    <!-- Age Group Filter -->
                    <div class="col-md-3">
                        <label for="age_group">Age Group</label>
                        <select name="age_group" id="age_group" class="form-control">
                            <option value="">All Ages</option>
                            <option value="4-7" {{ $selectedAgeGroup == '4-7' ? 'selected' : '' }}>4-7 Years</option>
                            <option value="8-10" {{ $selectedAgeGroup == '8-10' ? 'selected' : '' }}>8-10 Years</option>
                            <option value="11-14" {{ $selectedAgeGroup == '11-14' ? 'selected' : '' }}>11-14 Years</option>
                        </select>
                    </div>
            
                    <!-- Name Filter -->
                    <div class="col-md-3 d-none">
                        <label for="name">Guardian Name</label>
                        <input type="text" name="name" id="name" class="form-control" value="{{ $selectedName }}" placeholder="Search by name">
                    </div>
            
                    <!-- Submit Button -->
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">Filter</button>
                    </div> 

                     <!-- Download Button -->
                    {{-- <div class="col-md-3 d-flex align-items-end">
                        <a href="{{ route('participations.download', ['category_id' => $selectedCategory, 'age_group' => $selectedAgeGroup, 'name' => $selectedName]) }}" class="btn btn-success w-100">
                            Download
                        </a>
                    </div> --}}

                </div>
            </form>

    @endif    
            
              <div class="dropdown icon-dropdown">
                <button class="btn dropdown-toggle" id="userdropdown0" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-more-alt"></i></button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="userdropdown0"><a class="dropdown-item" href="#">Weekly</a><a class="dropdown-item" href="#">Monthly</a><a class="dropdown-item" href="#">Yearly</a></div>
              </div>
            </div>
          </div>
          <div class="card-body pt-0 projects px-0">
            <div class="table-responsive theme-scrollbar">
              <table class="table display" id="basic-10" style="width:100%">
                <thead>
                  <tr> 
                    <th> 
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="">
                        <label class="form-check-label"></label>
                      </div>
                    </th>
                   
                    <th>Guardian Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>City</th>
                    <th>State</th>
                    <th>Country</th>
                    <th style="width: 15%!important">Child Name</th>
                    <th>Age</th>
                    <th>Gender</th>
                    <th>Category</th>
                    <th>Donation/Fees</th>
                    {{-- <th>Submision Date</th> --}}
                    <th style="width: 30%!important">File Path</th>
                    <th>Status  </th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($data as $item)      
                  <tr>
                    <td>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="">
                        <label class="form-check-label"></label>
                      </div>
                    </td>               
                  

                    <td>{{$item->user_name}}</td>
                    <td>{{$item->email}}</td>
                    <td>{{$item->phone}}</td>
                    <td>{{$item->city}}</td>
                    <td>{{$item->state}}</td>
                    <td>{{$item->country}}</td>
                    <td>{{$item->child_name}}</td>
                    <td>{{$item->age}}</td>
                    <td>{{$item->gender}}</td>
                    <td>{{$item->category_name}}</td>                   
                    <td>{{$item->donation_amount}}</td>
                    {{-- <td>{{$item->created_at}}</td> --}}

                    <td>
                      @if($item->uploaded_file)
                        <div>
                          <a href="{{ $item->uploaded_file }}" target="_blank">
                            Uploaded File
                          </a>
                        </div>
                      @endif

                      @if($item->recorded_file)
                        <div>
                          <a href="{{ $item->recorded_file }}" target="_blank">
                            Recorded File
                          </a>
                        </div>
                      @endif

                     
                      @if($item->images)
                        <div>
                          <a href="/participations/family-images/{{$item->id}}" target="_blank">
                            Family Images
                          </a> 
                        </div>
                      @endif
                  </td>
                  <td>{{$item->status}}</td>

                    {{-- <td class="center">
                        @if($item->active == 'on') 
                        <span class="label label-success">Accepted</span>
                        @elseif ($item->active != 'on') 
                        <span class="label label-warning">Cancel</span>
                        @endif
                    </td> --}}


                   
                    <td class="text-center"> 
                      <div class="dropdown icon-dropdown">
                        <button class="btn dropdown-toggle" id="userdropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-more-alt"></i></button>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="userdropdown">
                          <a class="dropdown-item" href="/edit-participation/{{$item->id}}" target="_blank">edit</a>
                          <a class="dropdown-item" href="javascript:void(0);" onclick="confirmDelete({{ $item->id }})">delete</a>

                          <script>
                              function confirmDelete(id) {
                                  if (confirm("Are you sure you want to delete this participation?")) {
                                      window.location.href = "/delete-participation/" + id;
                                  }
                              }
                          </script>

                      </div>
                    </td>
                  </tr>
                  @endforeach
             
                  
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
     
      
      
    </div>
  </div>
  <!-- Container-fluid Ends-->
</div>

 
@endsection