@extends('layouts.master')

@section('title', 'Profil')

@section('content')
    <div class="main-content">
        <section class="section">
            <h1 class="section-header">
                <div>@yield('title')</div>
            </h1>

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Récaputilatifs</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Modifier un profil</li>
                </ol>
            </nav>
        </section>

        <div class="row">
            <div class="col-md-12">
                <h3>Salut, <span class="text-primary">{{ auth()->user()->name }}</span></h3>
                <p class="font-italic">Modifiez vos informations de profil et votre mot de passe à partir d'ici...</p>
            </div>

            <div class="col-md-5">
                <div class="card">
                    <div class="card-body">
                        @if (Session::get('success'))
                            <div class="alert alert-success mb-1">
                                {{ Session::get('success') }}
                            </div>
                        @endif
    
                        <form action="{{ route('profil.update', ['id' => Auth()->user()->id]) }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <label for="image">Profil Image <span class="text-danger">*</span></label>
                                @if (Auth()->user()->photo != null)
                                    <img style="width: 100px; height: 100px;" class="d-block mx-auto img-thumbnail img-fluid rounded-circle mb-2" src="{{ auth()->user()->photo }}" alt="Profile Image">
                                @else
                                    <img style="width: 100px; height: 100px;" class="d-block mx-auto img-thumbnail img-fluid rounded-circle mb-2" src="{{ asset('assets/img/avatar/person.jpg') }}" alt="Profile Image">
                                @endif
                                <!--<input id="image" type="file" name="photo" class="form-control">-->
                            </div>
    
                            <div class="form-group">
                                <label for="name">Nom <span class="text-danger">*</span></label>
                                <input class="form-control" type="text" name="name" value="{{ auth()->user()->name }}">
                                @error('name')
                                    <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="email">Email <span class="text-danger">*</span></label>
                                <input class="form-control" type="email" name="email" value="{{ auth()->user()->email }}">
                                @error('email')
                                    <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary">Modifier le profil <i class="bi bi-check"></i></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-7">
                <div class="card">
                    <div class="card-body">
                        @if (Session::get('successPassword'))
                            <div class="alert alert-success mb-1">
                                {{ Session::get('successPassword') }}
                            </div>
                        @endif
    
                        <form action="{{ route('profile.update.password') }}" method="POST">
                            @csrf
                            <!-- Mot de passe recent -->
                            <div class="col-md-12 col-sm-12">
                                <div class="form-group">
                                    <label for="current_password">Mot de passe actuel <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input 
                                            id="password"
                                            class="form-control @error('current_password') is-invalid @enderror"
                                            type="password"
                                            name="current_password"
                                            value="{{ old('current_password') }}"
                                        >

                                        <span class="input-group-text" style="cursor: pointer;" onclick="togglePassword()">
                                            <i class="ri-eye-line" id="toggleIcon"></i>
                                        </span>
                                    </div>

                                    @error('current_password')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Nouveau mot de passe -->
                            <div class="col-md-12 col-sm-12">
                                <div class="form-group">
                                    <label for="password">Nouveau mot de passe <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input 
                                            id="passwordNew"
                                            class="form-control @error('password') is-invalid @enderror"
                                            type="password"
                                            name="password"
                                            value="{{ old('password') }}"
                                        >

                                        <span class="input-group-text" style="cursor: pointer;" onclick="togglePasswordNew()">
                                            <i class="ri-eye-line" id="toggleIconNew"></i>
                                        </span>
                                    </div>

                                    @error('password')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Confirmez le mot de passe -->
                            <div class="col-md-12 col-sm-12">
                                <div class="form-group">
                                    <label for="password_confirmation">Confirmez le mot de passe <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input 
                                            id="passwordConfirm"
                                            class="form-control @error('password_confirmation') is-invalid @enderror"
                                            type="password"
                                            name="password_confirmation"
                                            value="{{ old('password_confirmation') }}"
                                        >

                                        <span class="input-group-text" style="cursor: pointer;" onclick="togglePasswordConfirm()">
                                            <i class="ri-eye-line" id="toggleIconConfirm"></i>
                                        </span>
                                    </div>

                                    @error('password_confirmation')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-primary">Modifier <i class="bi bi-check"></i></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<script>
    function togglePassword() {
        let input = document.getElementById("password");
        let icon = document.getElementById("toggleIcon");

        if (input.type === "password") {
            input.type = "text";
            icon.classList.remove("ri-eye-line");
            icon.classList.add("ri-eye-off-line");
        } else {
            input.type = "password";
            icon.classList.remove("ri-eye-off-line");
            icon.classList.add("ri-eye-line");
        }
    }
</script>

{{-- New --}}
<script>
    function togglePasswordNew() {
        let input = document.getElementById("passwordNew");
        let icon = document.getElementById("toggleIconNew");

        if (input.type === "password") {
            input.type = "text";
            icon.classList.remove("ri-eye-line");
            icon.classList.add("ri-eye-off-line");
        } else {
            input.type = "password";
            icon.classList.remove("ri-eye-off-line");
            icon.classList.add("ri-eye-line");
        }
    }
</script>

{{-- Confirm --}}
<script>
    function togglePasswordConfirm() {
        let input = document.getElementById("passwordConfirm");
        let icon = document.getElementById("toggleIconConfirm");

        if (input.type === "password") {
            input.type = "text";
            icon.classList.remove("ri-eye-line");
            icon.classList.add("ri-eye-off-line");
        } else {
            input.type = "password";
            icon.classList.remove("ri-eye-off-line");
            icon.classList.add("ri-eye-line");
        }
    }
</script>