@extends('layouts.superadmin')
@section('title', __('adminWords.users'))
@section('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">
@endsection
@section('content')
    <!-- Main Body -->
    <!-- Page Title Start -->
    <div class="card-header rounded-top-5">
        <div class="row align-items-center">
            <div class="col-12">
                <h4>Tous les collaborateurs</h4>
            </div>
            <div class="col-6">
                <div class="btn-right">
                </div>
            </div>
        </div>
    </div>

    <!-- Table Start -->
    <div class="row">
        <!-- Styled Table Card-->
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="card rounded-bottom-5 border-0 table-card">

                <div class="card-body">
                    <div class="chart-holder">

                        <table id="usersTable" class="table table-bordered table-striped align-middle  w-100">

                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Image</th>
                                    <th>Nom</th>
                                    <th>Email</th>
                                    <th>Mobile</th>
                                    <th>Radio</th>
                                    
                                    <th>Créé le</th>
                                    <th>Valider</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                    
                                    <tr>
                                        <td>
                                            {{ $loop->iteration }}
                                        </td>
                                        <td>
                                            @php
                                                $radio = getFirstRadioForUser($user->id);
                                                $src =
                                                    $user->image &&
                                                    file_exists(public_path('media/user/' . $user->image))
                                                        ? asset('media/user/' . $user->image)
                                                        : asset('assets/images/users/user1-1651222429.webp');
                                            @endphp
                                            <img src="{{ $src }}" alt="Image" class="rounded-circle"
                                                width="40" height="40">
                                        </td>
                                        <td>{{ $user->name }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->mobile  }}</td>
                                        <td>{{ $radio->name }}</td>
                                       

                                        <td>{{ $user->created_at->format('d-m-Y') }}</td>
                                        <td>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input updateStatus" type="checkbox"
                                                    {{ $user->status ? 'checked' : '' }}
                                                    data-url="{{ url('user/updateStatus/' . $user->id) }}">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-sm btn-outline-primary dropdown-toggle"
                                                    type="button" id="dropdownMenuButton{{ $user->id }}"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    Actions
                                                </button>
                                                <ul class="dropdown-menu"
                                                    aria-labelledby="dropdownMenuButton{{ $user->id }}">
                                                    <li><a class="dropdown-item" href="{{ url('edit/' . $user->id) }}"><i
                                                                class="far fa-edit me-2"></i>Modifier</a></li>
                                                    <li>
                                                    <a href="#" 
                                                        class="dropdown-item text-danger"
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#modalAction"
                                                        data-user-id="{{ $user->id }}" 
                                                        data-action="supprimer">
                                                            <i class="far fa-trash-alt me-2"></i>Supprimer
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>


                    </div>


                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalAction" tabindex="-1"
                                                aria-labelledby="modalLabel " aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalActionTitle">
                        Supprimer l'utilisateur</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <p>Voulez-vous vraiment supprimer cet utilisateur ?</p>
                    <div class="d-flex justify-content-end gap-2">
                        <a href="#"  id="modalActionLink"
                            class="btn btn-primary">Supprimer</a>
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">Annuler</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#usersTable').DataTable({
                responsive: true,
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json',
                    paginate: {
                        previous: '<i class="bi bi-chevron-left"></i>',
                        next: '<i class="bi bi-chevron-right"></i>'
                    }
                },
                initComplete: function () {
                    $('.dataTables_filter input[type="search"]').css({
                    'width': '180px',
                    'display': 'inline-block'
                    });
                },

                /* buttons: [
                    'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'
                ], */
                lengthMenu: [
                    [5, 10, 25, 50, 100, -1],
                    [5, 10, 25, 50, 100, "Tous"]
                ],
                pageLength: 5,
                lengthChange: true,
            });
        });
    </script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.updateStatus').forEach(el => {
      el.addEventListener('change', function() {
        const url = this.dataset.url;
        const status = this.checked ? 1 : 0;

        fetch(url, {
          method: 'PATCH',
          headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ status })
        })
        .then(res => res.ok ? res.json() : Promise.reject(res))
        .then(data => {
          toastr.success(data.message || 'Statut mis à jour avec succès');
        })
        .catch(err => {
          console.error(err);
          toastr.error('Erreur lors de la mise à jour');
        });
      });
    });
  });
</script>

<script>
        const modal = document.getElementById('modalAction');
        modal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const userId = button.getAttribute('data-user-id');
        
            const action = button.getAttribute('data-action');

            const actionLink = modal.querySelector('#modalActionLink');
            const actionTitle = modal.querySelector('#modalActionTitle');
          
                actionLink.href = `destroyCollabo/${userId}`;
                actionLink.className = 'btn btn-success me-2';
                actionLink.textContent = 'Supprimer';
                actionTitle.textContent = "Supprimer l'utilisateur";            
        });
    </script>

@endsection