@extends('layout.mainlayout')


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Stylesheet de Cropper.js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet">
<!-- Script de Cropper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>


<style>
    .profile-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        /* background-color: #0084FFFF; */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        font-weight: bold;
        color: #000000;
        text-transform: uppercase;
    }

    .btn-close {
        color: #000;
        opacity: 1;
    }


    .btn-icon {
        background-color: white;
        color: black;
        border: 1px solid #ddd;
        padding: 5px 10px;
        border-radius: 50%;
        transition: all 0.3s ease;
        position: relative;
    }

    .btn-icon:hover {
        background-color: #f0f0f0;
        color: black;
        cursor: pointer;
    }

    .profile-avatar-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .profile-avatar img {
        width: 180px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid #f1bb07;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .profile-contentname h3,
    .profile-contentname h4 {
        text-align: center;
        margin: 5px 0;
    }



    /* Ajouter un effet d'agrandissement */
    .profile-avatar img.enlarge {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        height: auto;
        z-index: 1050;
        border: 5px solid #f1bb07;
        background-color: rgba(0, 0, 0, 0.8);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    button.btn:hover {
        background-color: white;
        /* Change le fond en blanc */
    }

    button.btn:hover i {
        color: green;
        /* Change la couleur de l'icône en vert */
    }


</style>

@section('content')
    <div class="page-wrapper">
        <div class="content">
            @component('components.pageheader')
                @slot('title')
                    Profil
                @endslot
                @slot('title_1')
                    Profil Utilisateur
                @endslot
            @endcomponent

            <div class="profi">
                <div class="card" style="background-color:white;">
                    <div class="card-body">
                        <div class="pr"></div>
                        <div class="p">
                            <div class="profile-cont">
                                <div class="profile-conte">
                                    <!-- Conteneur centré pour l'image -->
                                    <div class="profileupload mt-2"
                                        style="display: flex; justify-content: center; align-items: center; margin-bottom: 20px; background-color: white; width: 100%; height: 130px; position: relative;">
                                        <img id="profilePreview"
                                            src="{{ $user->photo ? asset('uploads/profiles/' . $user->photo) : '' }}"
                                            alt="Photo de profil"
                                            style="width: 16%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #579e2e; 
                                        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); position: relative;">
                                    </div>
                                    <!-- Nom et informations -->
                                    <div class="profile-contentname">
                                        <h3>{{ $user->name }}</h3>
                                        <h4>Informations personnelles</h4>
                                        <a href="javascript:void(0);" class="btn btn-submit me-2 mt-3"
                                            style=" margin-left: 44%" data-bs-toggle="modal"
                                            data-bs-target="#editProfileModal">
                                            <i class="fa fa-edit " style="color:#198754; font-size: 16px;"></i>
                                             <span> Modifier Profil</span>  
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <div class="row">

                        <div class="col-lg-4 col-sm-12">
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" id="name" name="name" class="form-control"
                                    value="{{ old('name', $user->name) }}" disabled>
                            </div>
                        </div>

                        <div class="col-lg-4 col-sm-12">
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" id="email" name="email" class="form-control"
                                    value="{{ old('email', $user->email) }}" disabled>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <label for="edit-user-type" class="form-label">Type d'utilisateur</label>
                            <select class="form-control" id="user_type" name="user_type" disabled required>
                                <option value="standard" {{ $user->user_type == '1' ? 'selected' : '' }}>
                                    STANDARD</option>
                                <option value="admin" {{ $user->user_type == '0' ? 'selected' : '' }}>
                                    ADMIN</option>
                            </select>
                        </div>


                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-home">
                    <div class="ms-auto">


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

    </div>

    <!-- Modale de modification du profil -->
    <div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editProfileModalLabel">Modifier le Profil</h5>
                    <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close" title="Fermez la Modale"
                        style="cursor: pointer; font-size: 24px; background-color: rgba(32, 32, 32, 0.5); border-radius: 50%; color: white">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="editProfileForm" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="user_id" id="edit-user-id" value="{{ $user->id }}">

                        <div class="profileupload mt-2"
                            style="display: flex; justify-content: center; align-items: center; margin-bottom: 10px; width: 100%; height: 140px; position: relative;">
                            <label for="imgInp"
                                style=" position: relative; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%;">
                                <img id="profilePreview"
                                    src="{{ $user->photo ? asset('uploads/profiles/' . $user->photo) : '' }}"
                                    alt="Photo de profil"
                                    style="width: 23%; height: 105%; border-radius: 50%; object-fit: cover; border: 3px solid #579e2e; 
                                    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); position: relative;">
                                <i class="fa-solid fa-camera" title="Changer la photo"
                                    style="cursor: pointer; font-size: 24px; color: orange; background-color: rgba(32, 32, 32, 0.5); padding: 8px; border-radius: 50%; position: absolute; bottom: 14px; right: 317px;"></i>
                            </label>
                            <input type="file" id="imgInp" name="profile_photo" accept="image/*" hidden>
                        </div>




                        <div class="mb-3">
                            <label for="edit-name" class="form-label">Nom</label>
                            <input type="text" class="form-control" id="edit-name" name="name"
                                value="{{ $user->name }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="edit-email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="edit-email" name="email"
                                value="{{ $user->email }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="edit-user-type" class="form-label">Type d'utilisateur</label>
                            <select class="form-control" id="edit-user-type" name="user_type" required>
                                <option value="1" {{ $user->user_type == 1 ? 'selected' : '' }}>STANDARD</option>
                                <option value="0" {{ $user->user_type == 0 ? 'selected' : '' }}>ADMIN</option>
                            </select>
                        </div>

                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                    </form>
                </div>
            </div>
        </div>
    </div>



    </div>
@endsection

<script>
    $(document).ready(function() {
        $('#imgInp').on('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#profilePreview').attr('src', e.target.result);
                };
                reader.readAsDataURL(file);
            }
        });


        $('#editProfileForm').on('submit', function(e) {
            e.preventDefault();

            const userId = $('#edit-user-id').val();
            const formData = new FormData(this);

            $.ajax({
                url: '/users/' + userId,
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        $('#name').val(response.user.name);
                        $('#email').val(response.user.email);
                        $('#user_type').val(response.user.user_type);

                        // Générer un paramètre unique pour contourner le cache
                        const timestamp = new Date().getTime();
                        const newPhotoPath =
                            `/uploads/profiles/${response.user.photo}?t=${timestamp}`;

                        // Mettre à jour la photo de profil dans la modale et l'interface principale
                        $('#profilePreview').attr('src', newPhotoPath);
                        $('.profile-avatar img').attr('src', response.photo_url);

                        alert('Profil mis à jour avec succès.');
                        const modal = bootstrap.Modal.getInstance($('#editProfileModal')[
                            0]);
                        modal.hide();
                    } else {
                        alert('Erreur lors de la mise à jour du profil.');
                    }
                },
                error: function(xhr) {
                    alert('Erreur lors de la mise à jour du profil.');
                }
            });
        });



    });

    document.getElementById('imgInp').addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                // Mise à jour de l'aperçu de la photo
                document.getElementById('profilePreview').src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
</script>