@extends('admin.layouts.master')
@section('content')

    <div class="pagetitle">
      <h1>User Profiles</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item">Users</li>
          <li class="breadcrumb-item active">Profiles</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section">
      <div class="row">
        <div class="col-lg-12">

          <div class="card">
            <div class="card-body">
                <h5 class="card-title">User Profiles</h5>
                {{-- <p>List of user profiles</p> --}}


                {{-- <form method="GET" action="{{ route('admin.profiles.players') }}">
                    <input type="text" name="search" placeholder="Search by name or email" value="{{ request('search') }}">
                    <button type="submit">Search</button>
                </form> --}}


                <div class="alert alert-primary">
                    <h4 class="alert-heading">Advance Search</h4>
                    {{-- <p>Et suscipit deserunt earum itaque dignissimos recusandae dolorem qui. Molestiae rerum perferendis laborum. Occaecati illo at laboriosam rem molestiae sint.</p> --}}
                    <hr>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <select id="roleFilter" class="form-control form-select">
                                <option value="">All Roles</option> <!-- For no filter -->
                                <option value="player">Player</option>
                                <option value="coach">Coach</option>
                            </select>
                        </div>
                    </div>
                </div>



                <table id="usersTable" class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Playing Foot</th>
                            <th>Preferred Position</th>
                            <th>Created At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
          </div>

        </div>
      </div>
    </section>
<script>
    $(document).ready(function() {
        var table = $('#usersTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.profiles.index') }}",
                data: function (d) {
                    // Include the selected role in the request
                    d.role = $('#roleFilter').val();
                }
            },
            columns: [
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'email', name: 'email' },
                { data: 'role', name: 'role' },
                { data: 'playing_foot', name: 'playing_foot' },
                { data: 'preferred_position', name: 'preferred_position' },  // Display preferred position
                { data: 'created_at', name: 'created_at' },
                { data: 'actions', name: 'actions', orderable: false, searchable: false }
            ]
        });

        // Listen for changes in the role dropdown and reload the DataTable
        $('#roleFilter').change(function() {
            table.ajax.reload(); // Reload the table data based on the selected role
        });
    });

</script>

@endsection