@extends('backoffice.pharmacy.layout')

@section('content')
   <div class="iq-card px-4 py-2">
      <div class="iq-card-header d-flex justify-content-between p-0 bg-white">
         <div class="iq-header-title d-flex align-items-center">
            <a href="{{ route('pharmacy.settings') }}"><i class="fa fa-arrow-left mr-3" style="font-size: 20px"></i></a>
            <h4 class="card-title text-primary">Gestion des utilisateurs</h4>
         </div>
         <a href="{{ route('pharmacy.users.create') }}" class="iq-bg-primary btn">
            <i class="ri-add-line m-0 text-primary"></i> Ajouter
         </a>
      </div>
      <div class="iq-card-body p-0">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                    <th scope="col">N°</th>
                    <th scope="col">Nom</th>
                    <th scope="col">Prénom</th>
                    <th scope="col">Email</th>
                    <th scope="col">Téléphone</th>
                    <th scope="col" style="text-align: right">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                        <tr>
                        <th scope="row">{{ $loop->index + 1 }}</th>
                        <td>{{ $user->last_name ?? '' }}</td>
                        <td>{{ $user->first_name ?? '' }}</td>
                        <td>{{ $user->email ?? '' }}</td>
                        <td>{{ $user->getPhoneNumber() }}</td>
                        <td align="end">
                        <div class="btn-group" role="group">
                                <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Actions
                                </button>
                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
                                    <a class="dropdown-item" href="{{ route('pharmacy.users.edit', $user) }}">Modifier</a>
                                    <a class="dropdown-item delete-user" href="javascript:void(0)" data-toggle="modal" user="{{ $user->id ?? '' }}" data-target="#delete-modal">Supprimer</a>
                                </div>
                            </div>
                        </td>
                        </tr>
                    @empty
                        <tr>
                        <td colspan="7">Aucun utilisateurs</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            <div class="d-flex justify-content-center">
                {{ $users->links() }}
            </div>
        </div>
      </div>
   </div>

 @include('backoffice.includes.modals.delete-modal')
 @endsection

 @section('scripts')
    <script>
        $(function () {
            let urlDelete = "{{ route('pharmacy.users.delete', 'id') }}";

            $(document).on("click", ".delete-user", function (e) {
                e.preventDefault();
                const userId = JSON.parse(e.target.getAttribute("user"));
                $('#delete-form').attr('action', urlDelete.replace('id', userId));
            });
        });
    </script>
@endsection