@extends('admin.layout.app')
@section('content')

    <div class="content-inner container-fluid pb-0" id="page_layout">
        <div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between">
                            <div class="header-title">
                                <h4 class="card-title">User List</h4>
                            </div>
                        </div>
                        <div class="card-body px-0">
                            <div class="table-responsive ">
                                <table id="user-list-table" class="table table-striped" role="grid"
                                       data-toggle="data-table">
                                    <thead>
                                    <tr class="ligth">
                                        <th>Profile</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Status</th>
                                        <th>Join Date</th>
                                        <th style="min-width: 100px">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($artistRequest as $request)
                                        <tr>
                                            <td class="text-center"><img
                                                    class="bg-soft-primary rounded img-fluid avatar-40 me-3"
                                                    src="{{$request->getFirstMediaUrl('profile_images') ? $request->getFirstMediaUrl('profile_images') : asset('assets/default.jpg')}}"

                                                    alt="profile" loading="lazy">
                                            </td>
                                            <td>{{$request->name ?? ''}}</td>
                                            <td>{{$request->email ?? ''}}</td>
                                            <td><span class="badge bg-primary">{{$request->status ?? ''}}</span></td>
                                            <td>{{ $request->created_at ? $request->created_at->format('j/n/Y') : '' }}
                                            </td>
                                            <td>
                                                <div class="flex align-items-center list-user-action">
                                                    <a class="btn btn-sm btn-icon btn-warning rounded view-user"
                                                       href="javascript:void(0)"
                                                       data-name="{{$request->name}}"
                                                       data-email="{{$request->email}}"
                                                       data-status="{{$request->status}}"
                                                       data-description="{{$request->description}}"
                                                       data-date="{{ $request->created_at ? $request->created_at->format('j/n/Y') : '' }}"
                                                       data-bs-toggle="modal"
                                                       data-bs-target="#userViewModal">
                                    <span class="btn-inner">
                                      <svg class="icon-32" width="32" viewBox="0 0 24 24" fill="none"
                                           xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd"
                                      d="M17.7366 6.04606C19.4439 7.36388 20.8976 9.29455 21.9415 11.7091C22.0195 11.8924 22.0195 12.1067 21.9415 12.2812C19.8537 17.1103 16.1366 20 12 20H11.9902C7.86341 20 4.14634 17.1103 2.05854 12.2812C1.98049 12.1067 1.98049 11.8924 2.05854 11.7091C4.14634 6.87903 7.86341 4 11.9902 4H12C14.0683 4 16.0293 4.71758 17.7366 6.04606ZM8.09756 12C8.09756 14.1333 9.8439 15.8691 12 15.8691C14.1463 15.8691 15.8927 14.1333 15.8927 12C15.8927 9.85697 14.1463 8.12121 12 8.12121C9.8439 8.12121 8.09756 9.85697 8.09756 12Z"
                                      fill="currentColor"></path>
                                <path
                                    d="M14.4308 11.997C14.4308 13.3255 13.3381 14.4115 12.0015 14.4115C10.6552 14.4115 9.5625 13.3255 9.5625 11.997C9.5625 11.8321 9.58201 11.678 9.61128 11.5228H9.66006C10.743 11.5228 11.621 10.6695 11.6601 9.60184C11.7674 9.58342 11.8845 9.57275 12.0015 9.57275C13.3381 9.57275 14.4308 10.6588 14.4308 11.997Z"
                                    fill="currentColor"></path>
                                </svg>
                                    </span>
                                                    </a>
                                                    <a class="btn btn-sm btn-icon btn-success rounded"
                                                       data-bs-toggle="tooltip" data-placement="top" title=""
                                                       data-bs-original-title="Verify"
                                                       onclick="confirmStatusChange(event, '{{ route('admin.change.status',['artist'=>$request->id, 'status'=>'verified']) }}', 'Verify this artist?')">
                                    <span class="btn-inner">
                                        <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                             viewBox="0 0 24 24">
    <path fill-rule="evenodd" clip-rule="evenodd"
          d="M11.7281 21.9137C11.8388 21.9715 11.9627 22.0009 12.0865 22C12.2103 21.999 12.3331 21.9686 12.4449 21.9097L16.0128 20.0025C17.0245 19.4631 17.8168 18.8601 18.435 18.1579C19.779 16.6282 20.5129 14.6758 20.4998 12.6626L20.4575 6.02198C20.4535 5.25711 19.9511 4.57461 19.2082 4.32652L12.5707 2.09956C12.1711 1.96424 11.7331 1.96718 11.3405 2.10643L4.72824 4.41281C3.9893 4.67071 3.496 5.35811 3.50002 6.12397L3.54231 12.7597C3.5554 14.7758 4.31448 16.7194 5.68062 18.2335C6.3048 18.9258 7.10415 19.52 8.12699 20.0505L11.7281 21.9137ZM10.7836 14.1089C10.9326 14.2521 11.1259 14.3227 11.3192 14.3207C11.5125 14.3198 11.7047 14.2472 11.8517 14.1021L15.7508 10.2581C16.0438 9.96882 16.0408 9.50401 15.7448 9.21866C15.4478 8.9333 14.9696 8.93526 14.6766 9.22454L11.3081 12.5449L9.92885 11.2191C9.63186 10.9337 9.15467 10.9367 8.8607 11.226C8.56774 11.5152 8.57076 11.98 8.86775 12.2654L10.7836 14.1089Z"
          fill="currentColor"/>
  </svg>
                                    </span>
                                                    </a>

                                                    <a class="btn btn-sm btn-icon btn-danger rounded"
                                                       data-bs-toggle="tooltip" data-placement="top" title=""
                                                       data-bs-original-title="Reject"
                                                       onclick="confirmStatusChange(event, '{{ route('admin.change.status',['artist'=>$request->id, 'status'=>'rejected']) }}', 'Reject this artist?')">
                                    <span class="btn-inner">
                                      <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                           viewBox="0 0 24 24">
    <path fill-rule="evenodd" clip-rule="evenodd"
          d="M7.67 1.99927H16.34C19.73 1.99927 22 4.37927 22 7.91927V16.0903C22 19.6203 19.73 21.9993 16.34 21.9993H7.67C4.28 21.9993 2 19.6203 2 16.0903V7.91927C2 4.37927 4.28 1.99927 7.67 1.99927ZM15.01 14.9993C15.35 14.6603 15.35 14.1103 15.01 13.7703L13.23 11.9903L15.01 10.2093C15.35 9.87027 15.35 9.31027 15.01 8.97027C14.67 8.62927 14.12 8.62927 13.77 8.97027L12 10.7493L10.22 8.97027C9.87 8.62927 9.32 8.62927 8.98 8.97027C8.64 9.31027 8.64 9.87027 8.98 10.2093L10.76 11.9903L8.98 13.7603C8.64 14.1103 8.64 14.6603 8.98 14.9993C9.15 15.1693 9.38 15.2603 9.6 15.2603C9.83 15.2603 10.05 15.1693 10.22 14.9993L12 13.2303L13.78 14.9993C13.95 15.1803 14.17 15.2603 14.39 15.2603C14.62 15.2603 14.84 15.1693 15.01 14.9993Z"
          fill="currentColor"/>
  </svg>
                                    </span>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="userViewModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">User Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label>Name</label>
                            <p id="modal_name" class="fw-bold"></p>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Email</label>
                            <p id="modal_email" class="fw-bold"></p>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Status</label>
                            <p id="modal_status"></p>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Join Date</label>
                            <p id="modal_date"></p>
                        </div>

                        <div class="col-md-12">
                            <label>Description</label>
                            <p id="modal_description"></p>
                        </div>
                    </div>

                </div>

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


@endsection
@push('script')
    <script>
        document.querySelectorAll('.view-user').forEach(button => {
            button.addEventListener('click', function () {
                document.getElementById('modal_name').innerText = this.dataset.name;
                document.getElementById('modal_email').innerText = this.dataset.email;
                document.getElementById('modal_status').innerText = this.dataset.status;
                document.getElementById('modal_date').innerText = this.dataset.date;
                document.getElementById('modal_description').innerText = this.dataset.description;
            });

        });

    </script>
@endpush