@extends('layouts.app')

@section('content')
    <div class="fuild-container">
        <h1 class="h3-bold mb-40">{{ $user?->name }}</h1>
        {{-- <img class="card-img-top" src="{{ $user->photo }}" alt="Card image cap"> --}}

        <div class="row">
            @if(isset($cartes->num_carte))
                <div class="col-md-12">
                    <div class="ma-carte ma-carte-bgpos">
                        <div class="ma-carte-mask"></div>
                        <!-- <div class="logo-repub">
                            <img src="{{ asset('images/logo_rep.svg') }}">
                        </div> -->
                        <!-- <div class="pic-card-center">
                            <img src="/images/card-inside.svg" width="170">
                        </div> -->
                        <div class="card-identity-bottom align-items-baseline">
                            <div class="pic-profile">
                                <img src="{{ $user->photo }}" class="carte-avatar" width="80" height="80">
                            </div>
                            <div class="pic-identity">
                                <label class="mb-0" for="">{{ $user->nom }}
                                    {{ $user->prenom }}</label>
                                <label class="legend text-white" for="">{{ $cartes->num_carte }}</label>
                            </div>
                            <div class="pic-profile">
                                <img src="{{ asset($cartes->qr_code) }}" class="qr-base" width="55" height="55">
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <br/>
        <br/>
        
        <div class="row">

            <div class="col-5">
                <div class="d-flex flex-row align-items-center mb-15">
                    <div class="flex-column">
                        <h5 class="h4-semibold">Nom & Prénom</h5>
                        <label class="label ">{{ $user?->nom }} {{ $user?->prenom }}</label>
                    </div>
                </div>
                <div class="d-flex flex-row align-items-center mb-15">
                    <div class="flex-column">
                        <h5 class="h4-semibold">Date de naissance</h5>
                        <label class="label ">{{ $user->date_naissance }}</label>
                    </div>
                </div>
                <div class="d-flex flex-row align-items-center mb-15">
                    <div class="flex-column">
                        <h5 class="h4-semibold">Téléphone</h5>
                        <label class="label ">{{ $user->phone }}</label>
                    </div>
                </div>

                <div class="d-flex flex-row align-items-center mb-15">
                    <div class="flex-column">
                        <h5 class="h4-semibold">E-mail</h5>
                        <label class="label ">{{ $user?->email }}</label>
                    </div>
                </div>

                @isset($user?->adresse)
                    <div class="d-flex flex-row align-items-center mb-15">
                        <div class="flex-column ">
                            <h5 class="h4-semibold">Adresse</h5>
                            <label class="label">{{ $user?->adresse }}</label>
                        </div>
                    </div>
                @endisset

                @isset($user?->lieu_residence)
                    <div class="d-flex flex-row align-items-center mb-15">
                        <div class="flex-column">
                            <h5 class="h4-semibold">Ville</h5>
                            <label class="label">{{ $user?->ville }}</label>
                        </div>
                    </div>
                @endisset

                @isset($user?->profession)
                    <div class="d-flex flex-row align-items-center mb-15">
                        <div class="flex-column">
                            <h5 class="h4-semibold">Profession</h5>
                            <label class="label">{{ $user?->profession }}</label>
                        </div>
                    </div>
                @endisset
            </div>
            @if(isset($regular->prenom))
            <div class="col-6">
                <!-- <h5>Infos enrôlement</h5> -->
                <div class="user-card">
                    <div class="user-card-img">
                        <img src="{{ $regular?->image }}" alt="">
                    </div>
                    <div class="user-card-info">
                        <h2>{{ $regular->nom }} {{ $regular->prenom }}</h2>
                        <p><span>Date de naissance:</span> {{ $regular->date_naissance }}</p>
                        <p><span>Lieu de naissance:</span> {{ $regular->lieu_naissance }}</p>
                        <p><span>Documents ID:</span> {{ $regular->docID }}</p>
                        <p><span>Nom de document :</span> {{ $regular->docName }}</p>
                        <p><span>Numéro de document :</span> {{ $regular->docNum }}</p>
                    </div>
                </div><br><br>
            </div>
            @endif
        </div>
        <div class="row">
            <div class="col-6">
                @if ($user->actif == 0)
                    <a href="/enable/{{$user->id}}" class="btn btn-primary grren">Activer</a>
                @else
                    <a href="/disable/{{$user->id}}" class="btn btn-primary">Suspendre </a>
                @endif
                &nbsp;
                <button type="button" class="btn btn-secondary" data-toggle="modal"
                    data-target="#delete{{ $user->id }}">Supprimer</button>

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



    <div class="modal fade" id="delete{{ $user->id }}" tabindex="-1" role="dialog" aria-labelledby="deleteLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteLabel">Delete {{ $user->name }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <a href="/users/delete/{{ $user->id }}" type="submit" class="btn btn-primary">Delete</a>
                </div>
            </div>
        </div>
    </div>
@endsection

<style>
    .user-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: 10px;
        padding: 40px;
        position: relative;
        overflow: hidden;
        /* box-shadow: 0 2px 20px -5px rgba(0, 0, 0, 0.5); */
        border: 1px solid rgb(203, 203, 203);

    }

    /* .user-card:before {
        content: '';
        position: absolute;
        height: 300%;
        width: 173px;
        background: #262626;
        top: -60px;
        left: -125px;
        z-index: 0;
        transform: rotate(17deg);
    } */

    .user-card-img {
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 3;
    }

    .user-card-img img {
        width: 200px;
        height: 200px;
        object-fit: cover;
        border-radius: 50%;
    }

    .user-card-info {
        text-align: center;
    }

    .user-card-info h2 {
        font-size: 24px;
        margin: 0;
        margin-bottom: 10px;
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: 3px;
    }

    .user-card-info p {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .user-card-info p span {
        font-weight: 700;
        margin-right: 10px;
    }

    @media only screen and (min-width: 768px) {
        .user-card {
            flex-direction: row;
            align-items: flex-start;
        }

        .user-card-img {
            margin-right: 20px;
            margin-bottom: 0;
        }

        .user-card-info {
            text-align: left;
        }
    }

    @media (max-width: 767px) {
        .wrapper {
            padding-top: 3%;
        }

        /* .user-card:before {
            width: 300%;
            height: 200px;
            transform: rotate(0);
        } */

        .user-card-info h2 {
            margin-top: 25px;
            font-size: 35px;
        }

        .user-card-info p span {
            display: block;
            margin-bottom: 15px;
            font-size: 18px;
        }
    }
</style>