@extends('Templates/templateAdmin')

@section('Main-content')

<section class="content">

    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <!-- Card box User Profile -->
                <br><br>
                <section class="section profile">
                    <div class="row">
                        <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="{{ asset('/img/avatar5.png') }}" class="img-circle elevation-2 imgProfile"
                                        alt="User Image">
                                    <h2>{{ $user->user_name }}</h2>
                                    <h3>{{ $user->userType->type_user_id }}</h3>

                                </div>
                            </div>

                        </div>

                        <div class="col-xl-8">

                            <div class="card">
                                <div class="card-body pt-3">
                                    <!-- Bordered Tabs -->
                                    <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">Perfil</button>
                                        </li>

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

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

                                        <div class="tab-pane fade show active profile-overview" id="profile-overview">
                                            <div class="row">
                                                <div class="col-lg-3 col-md-4 label ">Nome e Apelido </div>
                                                <div class="col-lg-9 col-md-8">{{$user->user_name}}</div>
                                            </div>

                                            <div class="row">
                                                <div class="col-lg-3 col-md-4 label">Nif </div>
                                                <div class="col-lg-9 col-md-8">{{$user->user_nif}}</div>
                                            </div>

                                            <div class="row">
                                                <div class="col-lg-3 col-md-4 label">Email </div>
                                                <div class="col-lg-9 col-md-8">{{$user->email}}</div>
                                            </div>

                                            <div class="row">
                                                <div class="col-lg-3 col-md-4 label">Tipo de utilizador </div>
                                                <div class="col-lg-9 col-md-8">{{$user->type_users}}</div>
                                            </div>

                                            <div class="row">
                                                <div class="col-lg-3 col-md-4 label">Telemóvel </div>
                                                <div class="col-lg-9 col-md-8">{{$user->user_phone}}</div>
                                            </div>

                                            <div class="row">
                                                <div class="col-lg-3 col-md-4 label">Conta Criada em </div>
                                                <div class="col-lg-9 col-md-8">{{$user->created_at}}</div>
                                            </div>
                                        </div>

                                        <div class="tab-pane fade profile-edit pt-3" id="profile-edit">

                                            <!-- Profile Edit Form -->
                                            <form action="{{ route('editProfile',$user->user_id)}}">
                                                @csrf

                                                {{-- Quando for implementar a imagem ao Utilizador --}}
                                                {{-- <div class="row mb-3">
                                                    <label for="profileImage"
                                                        class="col-md-4 col-lg-3 col-form-label">Profile Image</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <img src="assets/img/profile-img.jpg" alt="Profile">
                                                        <div class="pt-2">
                                                            <a href="#" class="btn btn-primary btn-sm"
                                                                title="Upload new profile image"><i
                                                                    class="bi bi-upload"></i></a>
                                                            <a href="#" class="btn btn-danger btn-sm"
                                                                title="Remove my profile image"><i
                                                                    class="bi bi-trash"></i></a>
                                                        </div>
                                                    </div>
                                                </div> --}}

                                                <div class="row mb-3">
                                                    <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Nome e Apelido</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <input type="text" class="form-control" id="fullName" name="fullName" value="{{ $user->user_name }}" required>
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <label for="about"
                                                        class="col-md-4 col-lg-3 col-form-label">Nif</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <input type="text" class="form-control" id="nif" name="nif" value="{{ $user->user_nif }}" required>
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <label for="company"
                                                        class="col-md-4 col-lg-3 col-form-label">Email</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <input type="text" class="form-control" id="email" name="email" value="{{ $user->email }}" required>
                                                    </div>
                                                </div>


                                                <div class="row mb-3">
                                                    <label for="Country"
                                                        class="col-md-4 col-lg-3 col-form-label">Telemóvel</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <input type="text" class="form-control" id="phone" name="phone" value="{{ $user->user_phone }}" >
                                                    </div>
                                                </div>


                                                <div class="text-center">
                                                    <button type="submit" class="btn btn-primary">Guardar</button>
                                                       
                                                </div>
                                            </form><!-- End Profile Edit Form -->

                                        </div>

                                    </div><!-- End Bordered Tabs -->

                                </div>
                            </div>
                        </div>
                        {{-- col-xl-8 --}}
                    </div>
                </section>

            </div>
            {{-- ./col-md-12 --}}
        </div>
        {{-- ./row justify-content-center --}}

    </div>
    {{-- ./container-fluid" --}}
</section>
@endsection