@extends('layouts.base')

@section('titre','Profil')

@section('css')
    <style>
        .profil-content {
            width: 12.5rem;
            height: 12.5rem;
            /* object-fit: cover; */
            border-radius: 50% !important;
            border: transparent;
            box-shadow: 1px 1px 5px rgb(0 0 0 / 25%);
            background-position: center center;
            background-size: cover;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>

<script type="text/javascript">
    function ImgOnError(e) {
        console.log("error loading image");
        $('div.custom-svg').removeClass('d-none');
        $(e).parent('div').remove();
    }

    function ImgOnLoad(e) {
        console.log("image loaded correctly");
        $('div.custom-svg').remove();
    }
</script>

@endsection

@section('content')
    @if (count($profil) != 0)
        <div class="mr-4 ml-4" style="margin-top:4em;">
            <div class="row">
                    <div class="col-md-3 col-lg-3 col-sm-12  mb-2 d-flex align-items-center">
                        <!-- Profile Image -->
                        <div class="card card-body p-2">
                            {{-- <div class="text-center">
                                @if( checkdefaultAvatar()['exist'])
                                    <img class="profile-user-img img-fluid img-circle" src="{{ checkdefaultAvatar()['tof'] }}" alt="User profile picture">
                                @else
                                    <img class="profile-user-img img-fluid img-circle" src="{{ asset(checkdefaultAvatar()['tof']) }}" alt="User profile picture">
                                @endif
                            </div> --}}
                            @if ($profil['profil']['pp_url'])
                                <div class="icon" id="profile">
                                    <img src="{{$profil['profil']['pp_url']}}" alt="" class="profil-content" onerror="ImgOnError(this);" onload="ImgOnLoad(this);">
                                </div>
                                <div class="custom-svg d-none" style="height: 250px;">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="457bf273-24a3-4fd8-a857-e9b918267d6a" data-name="Layer 1" width="100%" height="100%" viewBox="0 0 698 698">
                                        <circle cx="349.68" cy="346.77" r="341.64" fill="#f5f5f5"></circle>
                                        <path class="custom-color" d="M601,790.76a340,340,0,0,0,187.79-56.2c-12.59-68.8-60.5-72.72-60.5-72.72H464.09s-45.21,3.71-59.33,67A340.07,340.07,0,0,0,601,790.76Z" transform="translate(-251 -101)" fill="#6c63ff"></path>
                                        <circle cx="346.37" cy="339.57" r="164.9" fill="#333"></circle>
                                        <path d="M293.15,476.92H398.81a0,0,0,0,1,0,0v84.53A52.83,52.83,0,0,1,346,614.28h0a52.83,52.83,0,0,1-52.83-52.83V476.92a0,0,0,0,1,0,0Z" opacity="0.1"></path>
                                        <path d="M296.5,473h99a3.35,3.35,0,0,1,3.35,3.35v81.18A52.83,52.83,0,0,1,346,610.37h0a52.83,52.83,0,0,1-52.83-52.83V476.35A3.35,3.35,0,0,1,296.5,473Z" fill="#a0616a" ></path>
                                        <path d="M544.34,617.82a152.07,152.07,0,0,0,105.66.29v-13H544.34Z" transform="translate(-251 -101)" opacity="0.1"></path>
                                        <circle cx="346.37" cy="372.44" r="151.45" fill="#a0616a" ></circle>
                                        <path d="M489.49,335.68S553.32,465.24,733.37,390l-41.92-65.73-74.31-26.67Z" transform="translate(-251 -101)" opacity="0.1"></path>
                                        <path d="M489.49,333.78s63.83,129.56,243.88,54.3l-41.92-65.73-74.31-26.67Z" transform="translate(-251 -101)" fill="#333"></path>
                                        @if ($profil['profil']['sexe'] == "F")
                                            <path d="M488.93,325a87.49,87.49,0,0,1,21.69-35.27c29.79-29.45,78.63-35.66,103.68-69.24,6,9.32,1.36,23.65-9,27.65,24-.16,51.81-2.26,65.38-22a44.89,44.89,0,0,1-7.57,47.4c21.27,1,44,15.4,45.34,36.65.92,14.16-8,27.56-19.59,35.68s-25.71,11.85-39.56,14.9C608.86,369.7,462.54,407.07,488.93,325Z" transform="translate(-251 -101)" fill="#333"></path>
                                        @endif
                                        <ellipse cx="194.86" cy="372.3" rx="14.09" ry="26.42" fill="#a0616a" ></ellipse>
                                        <ellipse cx="497.8" cy="372.3" rx="14.09" ry="26.42" fill="#a0616a" ></ellipse>
                                    </svg>
                                </div>
                            @else
                                <div style="height: 250px;">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="457bf273-24a3-4fd8-a857-e9b918267d6a" data-name="Layer 1" width="100%" height="100%" viewBox="0 0 698 698">
                                        <circle cx="349.68" cy="346.77" r="341.64" fill="#f5f5f5"></circle>
                                        <path class="custom-color" d="M601,790.76a340,340,0,0,0,187.79-56.2c-12.59-68.8-60.5-72.72-60.5-72.72H464.09s-45.21,3.71-59.33,67A340.07,340.07,0,0,0,601,790.76Z" transform="translate(-251 -101)" fill="#6c63ff"></path>
                                        <circle cx="346.37" cy="339.57" r="164.9" fill="#333"></circle>
                                        <path d="M293.15,476.92H398.81a0,0,0,0,1,0,0v84.53A52.83,52.83,0,0,1,346,614.28h0a52.83,52.83,0,0,1-52.83-52.83V476.92a0,0,0,0,1,0,0Z" opacity="0.1"></path>
                                        <path d="M296.5,473h99a3.35,3.35,0,0,1,3.35,3.35v81.18A52.83,52.83,0,0,1,346,610.37h0a52.83,52.83,0,0,1-52.83-52.83V476.35A3.35,3.35,0,0,1,296.5,473Z" fill="#a0616a" ></path>
                                        <path d="M544.34,617.82a152.07,152.07,0,0,0,105.66.29v-13H544.34Z" transform="translate(-251 -101)" opacity="0.1"></path>
                                        <circle cx="346.37" cy="372.44" r="151.45" fill="#a0616a" ></circle>
                                        <path d="M489.49,335.68S553.32,465.24,733.37,390l-41.92-65.73-74.31-26.67Z" transform="translate(-251 -101)" opacity="0.1"></path>
                                        <path d="M489.49,333.78s63.83,129.56,243.88,54.3l-41.92-65.73-74.31-26.67Z" transform="translate(-251 -101)" fill="#333"></path>
                                        @if ($profil['profil']['sexe'] == "F")
                                            <path d="M488.93,325a87.49,87.49,0,0,1,21.69-35.27c29.79-29.45,78.63-35.66,103.68-69.24,6,9.32,1.36,23.65-9,27.65,24-.16,51.81-2.26,65.38-22a44.89,44.89,0,0,1-7.57,47.4c21.27,1,44,15.4,45.34,36.65.92,14.16-8,27.56-19.59,35.68s-25.71,11.85-39.56,14.9C608.86,369.7,462.54,407.07,488.93,325Z" transform="translate(-251 -101)" fill="#333"></path>
                                        @endif
                                        <ellipse cx="194.86" cy="372.3" rx="14.09" ry="26.42" fill="#a0616a" ></ellipse>
                                        <ellipse cx="497.8" cy="372.3" rx="14.09" ry="26.42" fill="#a0616a" ></ellipse>
                                    </svg>
                                </div>
                            @endif
                            <h6 class="profile-username text-center text-dark font-weight-bold">{{strtoupper($profil['profil']['nom'])." ".$profil['profil']['prenom']}}</h6>
                            @switch($profil['role'])
                                @case("student")
                                    <p class="text-muted text-center">Etudiant</p>
                                    @break
                                @case("prof")
                                    <p class="text-muted text-center">Enseignant</p>
                                    @break
                                @default
                                    <p class="text-muted text-center">Administrateur</p>
                            @endswitch
                        </div>
                    </div>
                    <div class="col-md-9 col-lg-9 col-sm-12" style="min-height: 200px;">
                        <div class="card h-100">
                            <div class="card-header" style="background-color: var(--bg-color); color: var(--text-color);">
                                <h6 class="card-text font-weight-bold mb-0">Détails du Profil</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-5 col-sm-12">
                                        <span class="d-block" style="font-size: 0.85em;">Nom &nbsp;<i class="fa fa-check-circle"></i></span>
                                        <span class="d-block font-weight-bold text-dark" style="position: relative; top: -0.5em;">{{$profil['profil']['nom']}}</span>
                                    </div>
                                    <div class="col-md-7 col-sm-12">
                                        <span class="d-block" style="font-size: 0.85em;">Prénoms  &nbsp;<i class="fa fa-check-circle"></i></span>
                                        <span class="d-block font-weight-bold text-dark" style="position: relative; top: -0.5em;">{{$profil['profil']['prenom']}}</span>
                                    </div>
                                    <div class="col-sm-2 col-md-5">
                                        <span class="d-block" style="font-size: 0.85em;">Sexe &nbsp; <i class="fa fa-venus-mars"></i></span>
                                        <span class="d-block font-weight-bold text-dark" style="position: relative; top: -0.5em;">{{$profil['profil']['sexe']}}</span>
                                    </div>
                                    <div class="col-sm-10 col-md-7">
                                        <span class="d-block" style="font-size: 0.85em;">Situation Matrimoniale &nbsp; <i class="fa fa-male"></i><i class="fa fa-male" style="font-size: 0.8em;"></i><i class="fa fa-female"></i> </span>
                                        <span class="d-block font-weight-bold text-dark" style="position: relative; top: -0.5em;">{{isset($profil['profil']['matrimoniale'])?$profil['profil']['matrimoniale']:'-'}}</span>
                                    </div>
                                    <div class="col-sm-12 col-md-5">
                                        <span class="d-block" style="font-size: 0.85em;">Contact &nbsp;<i class="fa fa-phone"></i></span>
                                        <span class="d-block font-weight-bold text-dark" style="position: relative; top: -0.5em;">{{$profil['profil']['adresse'] ? $profil['profil']['code_pays'].' '.$profil['profil']['adresse'] :'-'}}</span>
                                    </div>
                                    <div class="col-sm-12 col-md-7">
                                        <span class="d-block" style="font-size: 0.85em;">Email &nbsp;<i class="fa fa-envelope"></i></span>
                                        <span class="d-block font-weight-bold text-dark" style="position: relative; top: -0.5em;">{{$profil['profil']['email']?$profil['profil']['email']:'-'}}</span>
                                    </div>
                                    <div class="col-sm-12 col-md-5">
                                        <span class="d-block" style="font-size: 0.85em;">Matricule &nbsp;<i class="mdi mdi-account-card-details"></i></span>
                                        <span class="d-block font-weight-bold text-dark" style="position: relative; top: -0.5em;">{{$profil['profil']['matricule']}}</span>
                                    </div>
                                    @switch($profil['role'])
                                        @case("student")
                                            <div class="col-sm-12 col-md-7">
                                                <span class="d-block" style="font-size: 0.85em;">Statut universitaire &nbsp;<i class="fa fa-graduation-cap"></i></span>
                                                <span class="d-block font-weight-bold text-dark" style="position: relative; top: -0.5em;">Etudiant</span>
                                            </div>
                                            <div class="col-sm-12 col-md-6">
                                                <span class="d-block" style="font-size: 0.85em;">Filière &nbsp;<i class="fa fa-book"></i></span>
                                                <span class="d-block font-weight-bold text-dark" style="position: relative; top: -0.5em;">{{$profil['moreInfo'] ? $profil['moreInfo']['intituleFilieres'] : '-'}}</span>
                                            </div>
                                            <div class="col-sm-12 col-md-6">
                                                <span class="d-block" style="font-size: 0.85em;">Niveau &nbsp;<i class="fa fa-bookmark"></i></span>
                                                <span class="d-block font-weight-bold text-dark" style="position: relative; top: -0.5em;">{{$profil['moreInfo'] ? findNiveau($profil['moreInfo']['niveauFormation']).' '.$profil['moreInfo']['annee'] : '-'}}</span>
                                            </div>
                                            @break
                                        @case("prof")
                                            <div class="col-sm-12 col-md-7">
                                                <span class="d-block" style="font-size: 0.85em;">Statut universitaire &nbsp;<i class="fa fa-graduation-cap"></i></span>
                                                <span class="d-block font-weight-bold text-dark" style="position: relative; top: -0.5em;">Enseignant</span>
                                            </div>
                                            <div class="col-12">
                                                <span class="d-block" style="font-size: 0.85em;">Matieres enseignées &nbsp;<i class="fa fa-bookmark"></i></span>
                                                @if (count($profil['moreInfo']))
                                                    @foreach ($profil['moreInfo'] as $ecu)
                                                        <div class="text-dark" style="position: relative; top: -0.25em;">
                                                            <span class="font-weight-bold ">&nbsp;&CircleDot; {{$ecu['intituleEcu']}} </span> &nbsp;
                                                            <span class="font-italic" style="font-size: 0.85em;">({{strtolower(findNiveau($ecu['niveauFormation'])).' '.$ecu['annee'].' | '.$ecu['sigleFilieres']}})</span>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    <div class="text-dark" style="position: relative; top: -0.25em;">
                                                        <span class="font-weight-bold font-italic"> aucune matière trouvée </span> &nbsp;
                                                    </div>
                                                @endif
                                            </div>
                                            @break
                                        @default
                                            {{-- Nothing as moreInfo --}}
                                            @break
                                    @endswitch
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="container" style="margin-top:2em; margin-bottom:2em;">
            <div class="row d-flex justify-content-center">
                <!-- No Profile Found -->
                <div class="col-12">
                    <div class="card card-body" style="height: 400px;">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="457bf273-24a3-4fd8-a857-e9b918267d6a" data-name="Layer 1" width="100%" height="80%" viewBox="0 0 698 698">
                            <circle cx="349.68" cy="346.77" r="341.64" fill="#f5f5f5"></circle>
                            <path class="custom-color" d="M601,790.76a340,340,0,0,0,187.79-56.2c-12.59-68.8-60.5-72.72-60.5-72.72H464.09s-45.21,3.71-59.33,67A340.07,340.07,0,0,0,601,790.76Z" transform="translate(-251 -101)" fill="#6c63ff"></path>
                            <circle cx="346.37" cy="339.57" r="164.9" fill="#333"></circle>
                            <path d="M293.15,476.92H398.81a0,0,0,0,1,0,0v84.53A52.83,52.83,0,0,1,346,614.28h0a52.83,52.83,0,0,1-52.83-52.83V476.92a0,0,0,0,1,0,0Z" opacity="0.1"></path>
                            <path d="M296.5,473h99a3.35,3.35,0,0,1,3.35,3.35v81.18A52.83,52.83,0,0,1,346,610.37h0a52.83,52.83,0,0,1-52.83-52.83V476.35A3.35,3.35,0,0,1,296.5,473Z" fill="#a0616a" ></path>
                            <path d="M544.34,617.82a152.07,152.07,0,0,0,105.66.29v-13H544.34Z" transform="translate(-251 -101)" opacity="0.1"></path>
                            <circle cx="346.37" cy="372.44" r="151.45" fill="#a0616a" ></circle>
                            <path class="question-mark" d="M496.97168,484.53906H493.147a12.93742,12.93742,0,0,1-12.92285-12.92285v-3.21094c0-7.95312,1.50684-14.6123,4.479-19.79248a104.11414,104.11414,0,0,1,12.542-16.85156,74.26915,74.26915,0,0,0,8.52783-10.27881,17.29,17.29,0,0,0,2.69336-9.5625c0-7.978-5.19776-11.85644-15.89063-11.85644a64.52587,64.52587,0,0,0-17.51513,2.6289,14.7451,14.7451,0,0,1-18.79248-14.17822v-6.5a14.46343,14.46343,0,0,1,8.53222-13.25635A78.08334,78.08334,0,0,1,496.61035,362.5c11.44434,0,21.77539,1.92236,30.707,5.71289,8.94776,3.79932,16.01709,9.15674,21.01123,15.92383a38.35194,38.35194,0,0,1,7.53614,23.24414c0,8.98-2.45166,16.80127-7.28663,23.24658-4.78222,6.37988-11.63769,13.36426-20.376,20.76026a145.20407,145.20407,0,0,0-13.06348,12.30664,22.71817,22.71817,0,0,0-5.43115,10.11132A12.888,12.888,0,0,1,496.97168,484.53906Z" transform="translate(100 -282)" fill="#2b2b2b"></path>
                            <path class="question-mark" d="M494.84521,545.31055h-.50439a23.95118,23.95118,0,0,1,0-47.90235h.50439a23.95118,23.95118,0,1,1,0,47.90235Z" transform="translate(100 -282)" fill="#2b2b2b"></path>
                            <path d="M489.49,335.68S553.32,465.24,733.37,390l-41.92-65.73-74.31-26.67Z" transform="translate(-251 -101)" opacity="0.1"></path>
                            <path d="M489.49,333.78s63.83,129.56,243.88,54.3l-41.92-65.73-74.31-26.67Z" transform="translate(-251 -101)" fill="#333"></path>
                            <path d="M488.93,325a87.49,87.49,0,0,1,21.69-35.27c29.79-29.45,78.63-35.66,103.68-69.24,6,9.32,1.36,23.65-9,27.65,24-.16,51.81-2.26,65.38-22a44.89,44.89,0,0,1-7.57,47.4c21.27,1,44,15.4,45.34,36.65.92,14.16-8,27.56-19.59,35.68s-25.71,11.85-39.56,14.9C608.86,369.7,462.54,407.07,488.93,325Z" transform="translate(-251 -101)" fill="#333"></path>
                            <ellipse cx="194.86" cy="372.3" rx="14.09" ry="26.42" fill="#a0616a" ></ellipse>
                            <ellipse cx="497.8" cy="372.3" rx="14.09" ry="26.42" fill="#a0616a" ></ellipse>
                        </svg>
                        <div class="card-text text-center text-dark font-weight-bold mt-3">
                            @if(session()->has('success') && !session('success'))
                                <div class="text-danger">
                                    {{session('msg')}}
                                </div>
                                @php
                                    session()->pull('success','default'); session()->pull('msg','default');
                                @endphp
                            @else
                                Ce Profil n'existe pas sur notre platforme !
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('script')
@endsection