@extends('layouts.app')

@section('content')
    <div class="container-fluid contents">
        <h1 class="h3-bold mb-40"> <img src="{{ asset('images/Profile-Circle.svg') }}" width="50"> Mon profil</h1>

        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between">
                    <div>

                        <h2 class="h5-bold">Mes informations personnelles</h2>
                    </div>


                    <div class="">
                        <a href="{{ route('users.edit', Auth::user()) }}" class="label-line24 primary-text">
                            <img src="{{ asset('images/edit.svg') }}" class="pe-10" alt=""> Modifier
                        </a>
                    </div>

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

                <div class="row">

                    <div class="col-lg-8 col-md-8 col-12">
                        <div class="row">
                            @if (Auth::user()->role === 1)
                            <div class="col-lg-6 col-md-6 col-12">
                                    <div class="d-flex flex-row align-items-center mb-15">
                                        <div class="">
                                            <img src="{{ asset('images/credit-card.svg') }}" alt="">
                                        </div>
                                        <div class="flex-column">
                                            <h5 class="h4-semibold">ID carte</h5>
                                            <label class="label ">{{ $cartes?->num_carte }}</label>
                                        </div>
                                    </div>
                                </div>
                                @endif
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="d-flex flex-row align-items-center mb-15">
                                    <div class="">
                                        <img src="{{ asset('images/profile-single.svg') }}" alt="">
                                    </div>
                                    <div class="flex-column">
                                        <h5 class="h4-semibold">Nom</h5>
                                        <label class="label ">  {{ ucfirst(strtolower(Auth::user()->nom)) }}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="d-flex flex-row align-items-center mb-15">
                                    <div class="">
                                        <img src="{{ asset('images/profile-single.svg') }}" alt="">
                                    </div>
                                    <div class="flex-column">
                                        <h5 class="h4-semibold">Prénom</h5>
                                        <label class="label ">{{ ucfirst(strtolower(Auth::user()->prenom)) }} </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="d-flex flex-row align-items-center mb-15">
                                    <div class="">
                                        <img src="{{ asset('images/calendar-single.svg') }}" alt="">
                                    </div>
                                    <div class="flex-column">
                                        <h5 class="h4-semibold">Date de naissance</h5>
                                        <label class="label ">

                                            @php
                                                $var = $user->date_naissance;
                                                $date = str_replace('/', '-', $var);
                                                $newDate = date('d/m/Y', strtotime($date));
                                            @endphp
                                            {{$newDate}}
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="d-flex flex-row align-items-center mb-15">
                                    <div class="">
                                        <img src="{{ asset('images/phone.svg') }}" alt="">
                                    </div>
                                    <div class="flex-column">
                                        <h5 class="h4-semibold">Téléphone</h5>
                                        <label class="label ">{{ $user->phone }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="d-flex flex-row align-items-center mb-15">
                                    <div class="">
                                        <img src="{{ asset('images/envelop.svg') }}" alt="">
                                    </div>
                                    <div class="flex-column">
                                        <h5 class="h4-semibold">E-mail</h5>
                                        <label class="label ">{{ $user->email }}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12">

                                <div class="d-flex flex-row align-items-center mb-15">
                                    <div class="">
                                        <img src="{{ asset('images/pin.svg') }}" alt="">
                                    </div>
                                    <div class="flex-column ">
                                        <h5 class="h4-semibold">Adresse</h5>
                                        <label class="label">{{ $user?->adresse }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="d-flex flex-row align-items-center mb-15">
                                    <div class="">
                                        <img src="{{ asset('images/pin.svg') }}" alt="">
                                    </div>
                                    <div class="flex-column">
                                        <h5 class="h4-semibold">Ville</h5>
                                        <label class="label">{{ $user?->ville }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header border border-0">
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body text-center p-4">
                                        <h5 class="label-semibold mb-22">Supprimer votre compte</h5>
                                        <p class="label mb-30">
                                            Vous souhaitez supprimer votre compte ? Attention cette action est irréversible.
                                        </p>
                                        <button type="button" class="cta-outline-primary ms-10"
                                            data-bs-dismiss="modal">Annuler</button>
                                        <button type="button" class="cta-primary">Confirmer</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if (Auth::user()->role === 1)
                        <div class="col-lg-4 col-md-4 col-12">
                            <div class="ma-carte-bgpos">
                                <div class="logo-repub">
                                    {{-- <img src="{{ asset('images/civlogo.png') }}"> --}}
                                </div>
                                <div class="card-identity-bottom align-items-baseline">
                                    <div class="pic-profile">
                                    <img src="{{ Auth::user()->photo }}" class="carte-avatar" width="93" height="113">
                                    </div>

                                    <div class="pic-identity" style="max-width: 180px; display: flex; flex-direction: column;margin-right: 10%; ">
                                        <label class="mt-3"></label>


                                        <label class="mb-0 carteText mt-10" for="" style="overflow: hidden;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 1;
                                        -webkit-box-orient: vertical;
                                        position: relative;">{{ ucfirst(strtolower(Auth::user()->nom)) }} {{ ucfirst(strtolower(Auth::user()->prenom)) }}</label>
                                        <label class="legend text-white  for="" style="position: relative;">{{ $cartes?->num_carte }}</label>
                                    </div>
                                    <div class="pic-profile">
                                        <img src="{{ asset($cartes?->qr_code) }}" class="qr-base" width="53" height="53" >
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

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

        @if (Auth::user()->role === 1)
            <div class="account">
                <a class="label primary-text text-decoration-underline" data-bs-toggle="modal"
                    data-bs-target="#exampleModal">Supprimer mon compte</a>
            </div>
        @endif

    </div>
@endsection