@extends('layout')

@section('title', 'Mon compte')

@section('content')

    <div class="pagetitle">
        <h1>@yield('title')</h1>
    </div>

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif


    <section class="section profile">
        <div class="row">
            {{-- ========================= --}}
            {{--        COLONNE PROFIL      --}}
            {{-- ========================= --}}
            <div class="col-xl-4">

                <div class="card">
                    <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">

                        <img src="/assets/img/profile-img.jpg" class="rounded-circle">

                        <h2>{{ Auth::user()->nom }} {{ Auth::user()->prenom }}</h2>

                        <h3>{{ strtoupper(Auth::user()->entreprise->nom) }}</h3>

                        @if (is_null(Auth::user()->email_verified_at))
                            <a href="{{ route('verification.notice') }}" class="p-2 mt-2 bg-danger text-white rounded">
                                Valider mon e-mail
                            </a>
                        @endif

                    </div>
                </div>

            </div>

            {{-- ========================= --}}
            {{--     COLONNE FORMULAIRE     --}}
            {{-- ========================= --}}
            <div class="col-xl-8">

                <div class="card">
                    <div class="card-body pt-3">

                        {{-- Onglets --}}
                        <ul class="nav nav-tabs nav-tabs-bordered">

                            <li class="nav-item">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-overview">
                                    Vue d'ensemble
                                </button>
                            </li>

                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">
                                    Modifier mon compte
                                </button>
                            </li>

                        </ul>

                        <div class="tab-content pt-2">

                            {{-- ========================= --}}
                            {{--     ONGLET OVERVIEW        --}}
                            {{-- ========================= --}}
                            <div class="tab-pane fade show active profile-overview" id="profile-overview">

                                <h5 class="card-title">Détails du compte</h5>

                                <div class="row mb-2">
                                    <div class="col-lg-3 col-md-4 label">Nom</div>
                                    <div class="col-lg-9 col-md-8">
                                        {{ Auth::user()->nom }} {{ Auth::user()->prenom }}
                                    </div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-lg-3 col-md-4 label">Entreprise</div>
                                    <div class="col-lg-9 col-md-8">
                                        {{ strtoupper(Auth::user()->entreprise->nom) }}
                                    </div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-lg-3 col-md-4 label">Adresse</div>
                                    <div class="col-lg-9 col-md-8">
                                        {{ strtoupper(Auth::user()->entreprise->adresse_1 . ' ' . Auth::user()->entreprise->adresse_2) }}<br>
                                        {{ strtoupper(Auth::user()->entreprise->code_postal . ' - ' . Auth::user()->entreprise->ville) }}
                                    </div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-lg-3 col-md-4 label">E-mail</div>
                                    <div class="col-lg-9 col-md-8">
                                        <a href="mailto:{{ Auth::user()->email }}">{{ Auth::user()->email }}</a>
                                    </div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-lg-3 col-md-4 label">Téléphone</div>
                                    <div class="col-lg-9 col-md-8">
                                        <a href="tel:{{ Auth::user()->tel }}">{{ Auth::user()->tel }}</a>
                                    </div>
                                </div>

                            </div>

                            {{-- ========================= --}}
                            {{--     ONGLET MODIFIER        --}}
                            {{-- ========================= --}}
                            <div class="tab-pane fade profile-edit pt-3" id="profile-edit">

                                <form action="{{ route('users.updateAccount') }}" method="POST">
                                    @csrf
                                    @method('PUT')

                                    <h5 class="fw-bold mb-3">Modifier mes informations</h5>

                                    {{-- INFORMATIONS PERSO --}}
                                    <div class="row mb-3">
                                        <label for="name" class="col-md-4 col-lg-3 col-form-label">Nom</label>
                                        <div class="col-md-8 col-lg-9">
                                            <input name="nom" type="text" class="form-control"
                                                value="{{ old('nom', Auth::user()->nom) }}">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="prenom" class="col-md-4 col-lg-3 col-form-label">Prénom</label>
                                        <div class="col-md-8 col-lg-9">
                                            <input name="prenom" type="text" class="form-control"
                                                value="{{ old('prenom', Auth::user()->prenom) }}">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="tel" class="col-md-4 col-lg-3 col-form-label">Téléphone</label>
                                        <div class="col-md-8 col-lg-9">
                                            <input name="tel" type="text" class="form-control"
                                                value="{{ old('tel', Auth::user()->tel) }}">
                                        </div>
                                    </div>

                                    {{-- INFORMATION PASSWORD --}}
                                    <div class="alert alert-info small">
                                        🔒 <strong>Note :</strong> laissez tous les champs de mot de passe <u>vides</u> si
                                        vous ne souhaitez pas changer votre mot de passe.
                                    </div>

                                    <div class="row mb-3">
                                        <label for="current_password" class="col-md-4 col-lg-3 col-form-label">
                                            Mot de passe actuel
                                        </label>
                                        <div class="col-md-8 col-lg-9">
                                            <input name="current_password" type="password" class="form-control"
                                                placeholder="Laissez vide pour ne pas changer">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="new_password" class="col-md-4 col-lg-3 col-form-label">
                                            Nouveau mot de passe
                                        </label>
                                        <div class="col-md-8 col-lg-9">
                                            <input name="new_password" type="password" class="form-control"
                                                placeholder="Laissez vide pour ne pas changer">
                                        </div>
                                    </div>

                                    <div class="row mb-4">
                                        <label for="new_password_confirmation" class="col-md-4 col-lg-3 col-form-label">
                                            Confirmer le mot de passe
                                        </label>
                                        <div class="col-md-8 col-lg-9">
                                            <input name="new_password_confirmation" type="password" class="form-control"
                                                placeholder="Laissez vide pour ne pas changer">
                                        </div>
                                    </div>

                                    <div class="text-center">
                                        <button type="submit" class="btn btn-primary">
                                            Enregistrer les modifications
                                        </button>
                                    </div>

                                </form>
                            </div>

                        </div> {{-- tab content --}}
                    </div>
                </div>

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

@endsection