@extends('main.main_back')

@section('title')
    Mon profil
@endsection

@section('content')
<div class="row page-titles">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('get.backend.dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item active"><a href="javascript:void(0)">Mon profil</a></li>
    </ol>
</div>
<!-- row -->
@php
    $value_id = $item->id;
    $user_id = $item->user_id;
    $role_id = roleId($user_id);
    $role = $item->user->role ?? null;
    ///dd(auth()->user()->phone);
    if($user_type == "admin"){
        $name = $item->ad_name;
        $firstname = $item->ad_first_name;
        $lastname = $item->ad_last_name;
        $gender = $item->ad_gender;
        $phone = $item->ad_phone;
        $agency = isset($item->user) && isset($item->user->agency) ? $item->user->agency->ag_name : "All";
        $address = $item->ad_address;
        $date_register = $item->created_at;
        $role_id = roleId($user_id);
        $role = $item->user->role ?? null;
    }else{
        $matricule = $item->em_matricule;
        $gender = $item->em_gender;
        $name = $item->em_name;
        $phone = $item->em_phone;
        $address = $item->em_address;
        $birth = $item->em_birth;
        $birth_place = $item->em_place_birth;
        $salary = $item->em_salary;
        $doc = $item->em_doc;
        $num_doc = $item->em_num_doc;
        $status = $item->em_status;
        $agency = isset($item->agency) ? $item->agency->ag_name : "";
        $admin = nameUser($item->user_id);
        $post = isset($item->post) ? $item->post->po_name : "" ;
        $date_reg = $item->created_at;
        $image_doc = $item->em_image_doc;
        $doc_date_exp = $item->em_doc_date_exp;
        $libelle = isset($item->folder) ? $item->folder->label : null;
        $file = isset($item->folder) ? $item->folder->file : null;
        $date_register = $item->created_at;
    }

    //dd($item);
@endphp
<div class="row">
    <div class="col-lg-12">
        <div class="profile card card-body px-3 pt-3 pb-0">
            <div class="profile-head">
                <div class="profile-info">
                    <div class="profile-photo">
                        <img src="{{ asset('user.png') }}" class="img-fluid rounded-circle" alt="">
                    </div>
                    <div class="profile-details">
                        <div class="profile-name px-3 pt-2">
                            <h4 class="text-white mb-0">{{ $name }}</h4>
                            <p>{{ $role->name ?? null }}</p>
                        </div>
                        <div class="profile-email px-2 pt-2">
                            <h4 class="mb-0">{{ $address }}</h4>
                            <p>{{ $agency }}</p>
                        </div>
                        <div class="pt-2 w-auto" style="margin-left: 2em;">
                            <button class="btn btn-primary" id="syncButton">
                                Synchronisation Online
                                <span id="syncSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- <div class="row">
    <div class="col-sm-12">
        <div class="card py-2">
            <p id="syncStatus" class="syncStatus text-center text-uppercase"></p>
        </div>
    </div>
</div> --}}
<div class="row">
    <div class="col-xl-12">
        <div class="card h-auto">
            <div class="card-body">
                <div class="profile-tab">
                    <div class="custom-tab-1">
                        <ul class="nav nav-tabs">

                            <li class="nav-item"><a href="#about-me" data-bs-toggle="tab" class="nav-link active show">Informations</a>
                            </li>
                            @if ($user_type == "admin")
                            <li class="nav-item"><a href="#edit_infos_tab" data-bs-toggle="tab" class="nav-link">Modifier vos informations</a>
                            @endif
                            </li>
                            <li class="nav-item"><a href="#edit_password_tab" data-bs-toggle="tab" class="nav-link">Modifier votre Mot de passe</a>
                            </li>
                            <li class="nav-item"><a href="#permissions_app" data-bs-toggle="tab" class="nav-link">Permissions App</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="about-me" class="tab-pane active show">

                                @if ($user_type == "admin")
                                <div class="profile-personal-info">
                                    <h4 class="text-primary mb-4 mt-4">Details des Informations</h4>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Nom Complet <span class="pull-end">:</span>
                                                    </h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $name }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">N° Téléphone <span class="pull-end">:</span>
                                                    </h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $phone }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Sexe <span class="pull-end">:</span></h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $gender }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Adresse <span class="pull-end">:</span></h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $address }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Agence <span class="pull-end">:</span>
                                                    </h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $agency }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Role <span class="pull-end">:</span>
                                                    </h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $role->name ?? null }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Enregistré le <span class="pull-end">:</span></h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $date_register }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @else
                                <div class="profile-personal-info">
                                    <h4 class="text-primary mb-4 mt-4">Details des Informations</h4>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Sexe <span class="pull-end">:</span></h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $gender }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Matricule <span class="pull-end">:</span></h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $matricule }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Nom Complet <span class="pull-end">:</span>
                                                    </h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $name }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">N° Téléphone <span class="pull-end">:</span>
                                                    </h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $phone }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Date de Naiss... <span class="pull-end">:</span></h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $birth }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Lieu de Naiss... <span class="pull-end">:</span></h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $birth_place }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Adresse <span class="pull-end">:</span>
                                                    </h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $address }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Poste <span class="pull-end">:</span>
                                                    </h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $post }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">

                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Agence <span class="pull-end">:</span>
                                                    </h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $agency }}</span>
                                                </div>
                                            </div>

                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Document <span class="pull-end">:</span>
                                                    </h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $doc }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">No Document <span class="pull-end">:</span>
                                                    </h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $num_doc }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Date d'expiration <span class="pull-end">:</span>
                                                    </h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $doc_date_exp }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Enregistré le <span class="pull-end">:</span></h5>
                                                </div>
                                                <div class="col-sm-9 col-7"><span>{{ $date_reg }}</span>
                                                </div>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="col-sm-3 col-5">
                                                    <h5 class="f-w-500">Aperçu Doc... <span class="pull-end">:</span></h5>
                                                </div>
                                                <div class="col-sm-9 col-7">
                                                    @if (!is_null($image_doc))
                                                        <img id="preview_img" src="{{ asset($image_doc) }}" alt="Image Preview" style="width: 300px; height: 150px;">
                                                    @else
                                                        Aucune Aperçu
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                            <div id="edit_infos_tab" class="tab-pane fade">
                                <div class="pt-3">
                                    @if ($user_type == "admin")
                                    <div class="settings-form">
                                        <h4 class="text-primary">Modification de vos Informations</h4>
                                        <form id="edit_profile" method="post" action="{{ route('post.backend.edit.profile', $value_id) }}" onsubmit="SendDataAnimation(event,'edit_profile')">
                                            <div class="row">
                                                <div class="mb-3 col-md-4">
                                                    <label class="form-label">Sexe</label>
                                                    <select class="form-control text-uppercase default-select wide" id="inputState" name="gender">
                                                        <option {{ $gender == "MASCULIN" ? "selected" : "" }}>MASCULIN</option>
                                                        <option {{ $gender == "FEMININ" ? "selected" : "" }}>FEMININ</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3 col-md-4">
                                                    <label class="form-label">Nom</label>
                                                    <input type="text" placeholder="Nom" name="last_name" value="{{ $lastname }}" class="form-control text-uppercase">
                                                </div>
                                                <div class="mb-3 col-md-4">
                                                    <label class="form-label">Prenom</label>
                                                    <input type="text" name="first_name" value="{{ $firstname }}" placeholder="Prenom" class="form-control text-uppercase">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="mb-3 col-md-4">
                                                    <label class="form-label">N° Téléphone</label>
                                                    <input type="text" name="phone" id="phone" value="{{ $phone }}" class="form-control text-uppercase">
                                                </div>
                                                <div class="mb-3 col-md-4">
                                                    <label class="form-label">Adresse</label>
                                                    <input type="text" name="address" value="{{ $address }}" placeholder="Ngousso" class="form-control text-uppercase">
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <div class="form-check custom-checkbox">
                                                    <input type="checkbox" class="form-check-input" name="accept" id="gridCheck" autocomplete="off">
                                                    <label class="form-check-label form-label" for="gridCheck"> Accepter Vous de modifier les informations ci-dessus</label>
                                                </div>
                                            </div>
                                            <button class="btn btn-primary btn-sm" type="submit">
                                                Valider
                                            </button>
                                        </form>
                                    </div>
                                    @endif
                                </div>
                            </div>
                            <div id="edit_password_tab" class="tab-pane fade">
                                <div class="pt-3">
                                    <div class="settings-form">
                                        <h4 class="text-primary">Modification de votre mot de passe</h4>
                                        <form id="edit_password_profile" method="post" action="{{ route('post.backend.edit.password', $user_id) }}" onsubmit="SendDataAnimation(event,'edit_password_profile')">
                                            @csrf
                                            <div class="row">
                                                <div class="mb-3 col-md-12">
                                                    <label class="form-label">Ancien Mot de passe</label>
                                                    <input type="password" placeholder="Ancien Mot de passe" name="password_old" id="password" class="form-control text-uppercase">
                                                    <span toggle="#password-field2" onclick="return togglePasswordVisibility('password')" class="fa fa-fw fa-eye field-icon password-toggle cursor-pointer"></span>
                                                </div>
                                                <div class="mb-3 col-md-6">
                                                    <label class="form-label">Nouveau mot de passe</label>
                                                    <input type="password" placeholder="Nouveau mot de passe" name="password" id="password2" class="form-control text-uppercase">
                                                </div>
                                                <div class="mb-3 col-md-6">
                                                    <label class="form-label">Confirmation du Mot de passe</label>
                                                    <input type="password" name="password_confirmation" placeholder="Confirmation du Mot de passe" id="password3" class="form-control text-uppercase">
                                                </div>
                                            </div>
                                            <button class="btn btn-primary btn-sm" type="submit">
                                                Valider
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div id="permissions_app" class="tab-pane fade">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title text-primary">Permissions: {{ $role->name }}</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="basic-form">
                                            <form id="add_permissions_form">
                                                <div class="row">
                                                    <div class="table-responsive">
                                                        <table class="table table-flush-spacing">
                                                            <tbody>
                                                                <tr>
                                                                    <td>
                                                                        <div class="d-flex flex-row flex-wrap">
                                                                            @isset($role->permissions)
                                                                            @foreach($role->permissions as $key => $value)
                                                                            @php
                                                                                $value_id = $value->id;
                                                                                $label = $value->name;
                                                                                $checked = $role->hasPermissionTo($label);
                                                                            @endphp
                                                                            <div class="form-check me-3 me-lg-5" style="width:180px;font-size:14px">
                                                                                <input disabled class="form-check-input form-check-input_per" type="checkbox" id="permission{{ $value_id }}" name="permission[]" value="{{ $label }}" autocomplete="off" {{ $checked ? "checked" : "" }}>
                                                                                <label class="form-check-label" for="permission{{ $value_id }}">
                                                                                    {{ $label }}
                                                                                </label>
                                                                            </div>
                                                                            @endforeach
                                                                            @endisset
                                                                        </div>
                                                                    </td>
                                                                </tr>

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section("script-down")
<script>
    function togglePasswordVisibility(inputId) {
        var input = $("#" + inputId);
        $(".password-toggle").toggleClass("fa-eye fa-eye-slash");
        if (input.attr("type") === "password") {
            input.attr("type", "text");
            $('#password2, #password3').attr("type", "text");
        } else {
            input.attr("type", "password");
            $('#password2, #password3').attr("type", "password");
        }
    }
    $(document).ready(function () {

        $('#syncButton').click(function() {
            var accessToken = '{{ env("TOKEN_API") }}';
            var $spinner = $("#syncSpinner");
            var isLocal = '{{ env("APP_ENV") }}';

            if (navigator.onLine) {
                $spinner.css('visibility', 'visible');
                $.ajax({
                    url: '{{ route("post.api.check.result_api") }}',
                    method: 'GET',
                    headers: {
                        'Authorization': 'Bearer ' + accessToken
                    },
                    success: function(data) {
                        $spinner.css('visibility', 'hidden');
                        if (data.code === 200) {
                            Swal.fire({
                                type: "success",
                                text: data.message,
                                icon: "success",
                                showConfirmButton: false,
                                timer: 4000
                            });
                            setTimeout(function(){
                                //window.location.reload(true);
                            }, 3000);
                        } else {
                            Swal.fire({
                                type: "error",
                                text: data.message,
                                icon: "error",
                                showConfirmButton: false,
                                timer: 4000
                            });
                        }
                        console.log(data);
                    },
                    error: function(xhr, status, error) {
                        $spinner.css('visibility', 'hidden');

                        if (xhr.status == 419) {
                            var errorMessage = JSON.parse(xhr.responseText).message;
                            Swal.fire({
                                type: "error",
                                text: errorMessage,
                                showConfirmButton: false,
                                timer: 4000
                            });
                        } else {
                            Swal.fire({
                                type: "error",
                                text: "Une erreur est survenue lors du traitement de la requête : " + error,
                                showConfirmButton: false,
                                timer: 4000
                            });
                        }
                    }
                });
            } else {
                Swal.fire({
                    type: "error",
                    text: "Vous n'êtes pas connecté à Internet ! Veuillez vérifier votre connexion.",
                    icon: "error",
                    showConfirmButton: false,
                    timer: 4000
                });
            }
        });
        if(isLocal == "production"){
            $("#syncButton").hide();
        }

    });
</script>
@endsection