@extends('layouts.layoutAdmin')
@section('title', __('message.users_list'))
@section('vendor-script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.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.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.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/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

@endsection




@section('vendor-style')
<link rel="stylesheet" href="{{asset('build/assets/apex-charts-BWmKPyo3.css')}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css">
<style>
.input-group1 {
    position: relative;

    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
</style>
@endsection


@section('page-script')
<script>
    $(function () {
        
    if (!$.fn.DataTable.isDataTable('#users-table')) {
        $('#users-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('users.index') }}",
            columns: [
            { data: 'id', name: 'id' },
            { data: 'avatar', name: 'avatar' },
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            { data: 'role', name: 'role' },
            { data: 'status', name: 'status' },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ],
            dom: '<"card-header d-flex flex-md-row justify-content-between align-items-center pb-0"' +
                 '<"head-label"><"dt-action-buttons text-end">>' +
                 '<"row mt-3"' +
                 '<"col-sm-12 col-md-6"l>' + // Length selector
                 '<"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>' + // Filter
                 'rt' + // Tableau
                 '<"row"' +
                 '<"col-sm-12 col-md-6"i>' + // DataTables info
                 '<"col-sm-12 col-md-6"p>>', // Pagination
            pagingType: "simple_numbers",
            renderer: 'bootstrap',
            language: {
                paginate: {
                    previous: '<i class="bx bx-chevron-left bx-18px"></i>',
                    next: '<i class="bx bx-chevron-right bx-18px"></i>'
                }
            },
            buttons: [
                { extend: 'csvHtml5', text: 'CSV', className: 'd-none' },
                { extend: 'excelHtml5', text: 'Excel', className: 'd-none' },
                { extend: 'pdfHtml5', text: 'PDF', className: 'd-none' },
                { extend: 'print', text: 'Print', className: 'd-none' },
            ],
            initComplete: function () {
                $('#users-table_filter input[type="search"]').addClass('form-control');
                $('#users-table_length select[name="users-table_length"]').addClass('form-select');
            },
        });
    }
});


$(document).on('click', '.deleteUserBtn', function () {

    Swal.fire({
        title: "{{ __('message.confirm_delete') }}",
        text: "{{ __('message.cannot_undo') }}",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: "{{ __('message.yes_delete') }}",
        cancelButtonText: "{{ __('message.cancel') }}"
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: "{{ url('users/delete') }}/" + id,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    Swal.fire({
                        title: "{{ __('message.deleted') }}",
                        text: response.success,
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                    $('#stores-table').DataTable().ajax.reload();
                },
                error: function (xhr) {
                    Swal.fire({
                        title: "{{ __('message.error') }}",
                        text: "{{ __('message.error_occurred') }}",
                        icon: 'error',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        }
    });
});
$(document).ready(function () {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    // Ouvrir la modale pour ajouter un utilisateur
    $('#addUserBtn').click(function() {
        $('#userForm')[0].reset();
        $('#userId').val('');
        $('#modalTitle').text('Ajouter un utilisateur');
        $('#userModal').modal('show');
    });

    let input = document.querySelector("#phone_country_code");
    let iti = window.intlTelInput(input, {
        initialCountry: "auto",
        geoIpLookup: function (callback) {
            fetch("https://ipapi.co/json")
                .then((res) => res.json())
                .then((data) => callback(data.country_code))
                .catch(() => callback("US"));
        },
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
    });
    // Ouvrir la modale pour éditer un utilisateur
    $(document).on('click', '.editUserBtn', function () {
        let userId = $(this).data('id');

        $.ajax({
            url: "/users/edit/" + userId,  // ✅ Correction de l'URL
            type: "GET",
            success: function(response) {
                $('#userId').val(response.user.id);
                $('#first_name').val(response.user.first_name);
                $('#last_name').val(response.user.last_name);
                $('#email').val(response.user.email);
                $('#status').val(response.user.status);
                $('#phone_country_code').val(response.user.phone_country_code);
                $('#country_code').val(response.user.country_code).change();

                // Sélectionner le rôle global
                $('#role').val(response.role).change();

                // Sélectionner les rôles en entreprise
                $('#company_roles').val(response.roles).change();

                $('#userModal').modal('show');
            },
            error: function(xhr, status, error) {
                console.error("Erreur lors de la récupération de l'utilisateur:", error);
                alert("Impossible de récupérer les informations de l'utilisateur.");
            }
        });
    });


    // Soumission du formulaire
    $('#userForm').submit(function (e) {
        e.preventDefault(); // Empêche le rechargement de la page

        let fullPhoneNumber = iti.getNumber(); // Numéro formaté avec code pays
        let countryCode = iti.getSelectedCountryData().dialCode; // Code pays seul

        var id = $('#userId').val();
        var url = id ? "/users/update/" + id : "/users/store"; // ✅ Correction de l'URL
        var type = id ? 'PUT' : 'POST';

        var formData = $('#userForm').serialize();

        // Ajouter le téléphone et le code pays à FormData
        formData += "&phone_country_code=" + encodeURIComponent(fullPhoneNumber);
        formData += "&country_code=" + encodeURIComponent(countryCode);

        $.ajax({
            url: url,
            type: type,
            data: formData, // ✅ Garder ce format
            success: function (response) {
                $('#userModal').modal('hide');
                $('#users-table').DataTable().ajax.reload();
                Swal.fire({
                    title: "Succès",
                    text: response.message,
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                });
            },
            error: function (xhr) {
                Swal.fire({
                    title: "Erreur",
                    text: "Une erreur est survenue lors de l'enregistrement.",
                    icon: 'error',
                    timer: 2000,
                    showConfirmButton: false
                });
                $('#userModal').modal('hide'); // Fermer l'offcanvas
                console.error("Erreur lors de l'enregistrement:", xhr.responseText);
            }
        });
    });
});



</script>
@endsection



@section('content')
@include('layouts.sections.error')

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row g-6 mb-6">
        <!-- Total Users -->
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Total Users</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">{{ $totalUsers }}</h4>
                                <p class="text-success mb-0">( +{{ rand(10, 30) }}% )</p>
                            </div>
                            <small class="mb-0">Total Registered Users</small>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-primary">
                                <i class="bx bx-group bx-lg"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Paid Users -->
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Paid Users</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">{{ $paidUsers }}</h4>
                                <p class="text-success mb-0">( +{{ rand(10, 30) }}% )</p>
                            </div>
                            <small class="mb-0">Subscribers</small>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-danger">
                                <i class="bx bx-user-plus bx-lg"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Users -->
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Total company</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">{{ $totalCompany }}</h4>
                                <p class="text-success mb-0">( +{{ rand(10, 30) }}% )</p>
                            </div>
                            <small class="mb-0">Total entreprise</small>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-success">
                                <i class="bx bx-user-check bx-lg"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pending Users -->
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Utilisateurs connectés</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">{{ $connectedUsers }}</h4>
                                <p class="text-success mb-0">( +{{ rand(10, 30) }}% )</p>
                            </div>
                            <small class="mb-0">Utilisateurs connectés</small>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-warning">
                                <i class="bx bx-user-voice bx-lg"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Users List Table -->
    <div class="card">

    <!-- DataTables Wrapper -->
    <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
        <div class="card-header flex-column flex-md-row pb-0">
            <div class="head-label">
            <h5 class="card-title mb-0">{{ __('message.user_list') }}</h5>
            </div>
            <div class="dt-action-buttons text-end">
                <div class="dt-buttons btn-group flex-wrap">
                    <button class="btn buttons-collection dropdown-toggle btn-label-primary me-4" type="button" data-bs-toggle="dropdown">
                        <span>
                            <i class="bx bx-export bx-sm me-sm-2"></i>
                            <span class="d-none d-sm-inline-block">{{ __('message.export') }}</span>
                        </span>
                    </button>
                    <ul class="dropdown-menu dt-button-collection">
                        <li><button class="dropdown-item" id="export-csv">{{ __('message.csv') }}</button></li>
                        <li><button class="dropdown-item" id="export-excel">{{ __('message.excel') }}</button></li>
                        <li><button class="dropdown-item" id="export-pdf">{{ __('message.pdf') }}</button></li>
                        <li><button class="dropdown-item" id="export-print">{{ __('message.print') }}</button></li>
                    </ul>
                </div>

                <a id="addUserBtn" class="btn btn-secondary create-new btn-primary">
                    <span>
                        <i class="bx bx-plus bx-sm me-sm-2"></i>
                        <span class="d-none d-sm-inline-block">{{ __('message.add') }}</span>
                    </span>
                </a>

            </div>
        </div>
        @include('layouts.sections.error')

    <div class="card-datatable table-responsive">
        <table id="users-table" class="table table-bordered">
                <thead>
                    <tr>
                    <th>{{ __('message.id') }}</th>
                    <th>{{ __('message.image') }}</th>
                    <th>{{ __('message.name') }}</th>
                    <th>{{ __('message.email') }}</th>
                    <th>{{ __('message.role') }}</th>

                    <th>{{ __('message.status') }}</th>
                    <th>{{ __('message.action') }}</th>
                    </tr>
                </thead>
        </table>
    </div>
</div>

</div>



<div class="modal fade" id="userModal" tabindex="-1" aria-modal="true" >
  <div class="modal-dialog modal-lg modal-simple modal-dialog-centered modal-add-new-role">
    <div class="modal-content">
      <div class="modal-body">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="text-center ">
          <h4 class="role-title mb-2">{{ __('message.add') }}</h4>
        </div>
        <!-- Add role form -->
        <form id="userForm" enctype="multipart/form-data">
        @csrf
                  <input type="hidden" id="userId">

                  <div class="row g-6 mt-5">
                  <div class="col-12 col-md-6">
                  <div class="form-group">
                        <label>{{ __('message.first_name') }}</label>
                        <input type="text" class="form-control" id="first_name" name="first_name" required>
                        </div>
                  </div>

                  <div class="col-12 col-md-6">
                  <div class="form-group">
                        <label>{{ __('message.last_name') }}</label>
                        <input type="text" class="form-control" id="last_name" name="last_name" required>
                        </div>
                  </div>


                  <div class="col-12 col-md-6">
                  <div class="form-group">
                        <label>{{ __('message.email') }}</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                    </div>

                    <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label>{{ __('message.role') }}</label>
                        <select class="form-control" id="role" name="role">
                        @foreach($roles as $role)
                                <option value="{{ $role->name }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    </div>

                    <div class="col-12 col-md-6">
                                <label class="form-label" for="phone_country_code">{{ __('message.phone') }}</label>
                                <div class="input-group1">
                                <input type="tel" id="phone_country_code" name="phone_country_code" class="form-control" placeholder="{{ __('message.phone_placeholder') }}">
                                </div>
                            </div>

                    <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label>{{ __('message.save') }}</label>
                        <select class="form-control" id="status" name="status">
                        <option value="1">{{ __('message.active') }}</option>
                            <option value="0">{{ __('message.inactive') }}</option>
                        </select>
                    </div>
                  </div>

                <div class="col">
                    <div class="form-group">
                        <label>{{ __('message.image') }}</label>
                        <input type="file" class="form-control" id="avatar" name="avatar">
                        </div>
                </div>
                    </div>

          </div>
          <div class="col-12 text-center">
            <button type="submit" class="btn btn-primary me-3">{{ __('message.save') }}</button>
            <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">{{ __('message.cancel') }}</button>
          </div>
       </form>
      </div>
    </div>
  </div>

</div>
</div>

</div>

@endsection