@extends('layout.template')
@section('intitule')
    <h5 class="font-weight-medium text-uppercase mb-0">PROFIL PAGE </h5>
@endsection

@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Profil page</li>
@endsection

@section('styles')

@endsection

@section('main')
    <div class="row justify-content-center mt-4" style="min-height: calc(85vh - 60px)">
        <div class="col-lg-12">

            <div class="bg-white p-5" style="height: 100%">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#home" role="tab"
                            style="font-size: large">
                            <span>Activités</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#profile" role="tab" style="font-size: large">
                            <span>Profile</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#messages" role="tab" style="font-size: large">
                            <span>Settings</span>
                        </a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="home" role="tabpanel">
                        <div class="p-5">
                            <div class="row justify-content-center">
                                <div class="col-md-8">
                                    <div class="card"
                                        style="border: solid #cfcfcf 0.07em; box-shadow: -2px 2px 7px #cfcfcf">
                                        <div class="card-header bg-white d-flex align-items-center"
                                            style="border-bottom: solid #cfcfcf 0.02em">
                                            <h4 class="card-title text-dark">GestStudent</h4>
                                            <div class="card-actions ms-auto d-flex button-group">
                                                <a class="mb-0 link d-flex align-items-center pe-0" style="color: #cfcfcf;"
                                                    data-action="close">
                                                    <i data-feather="x" class="feather-sm"></i>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="card-body collapse show text-center">
                                            <p class="card-text text-danger">Aucune activité...</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane  p-3" id="profile" role="tabpanel">
                        <div class="row m-3" style="border-bottom: solid #cfcfcf 1px">
                            <div class="col-md-3 col-xs-6" style="border-right: solid #cfcfcf 1px">
                                <strong class="prof">Full Name</strong><br />
                                <p class="text-muted">{{ $data['nom_prenom'] }}</p>
                            </div>
                            <div class="col-md-3 col-xs-6" style="border-right: solid #cfcfcf 1px">
                                <strong class="prof">Mobile</strong><br />
                                <p class="text-muted">{{ $data['tel'] }}</p>
                            </div>
                            <div class="col-md-3 col-xs-6" style="border-right: solid #cfcfcf 1px">
                                <strong class="prof">Email</strong><br />
                                <p class="text-muted">{{ $data['email'] }}</p>
                            </div>
                            <div class="col-md-3 col-xs-6" style="border-right: solid #cfcfcf 1px">
                                <strong class="prof">Nationalité</strong><br />
                                <p class="text-muted">{{ $data['nationalite'] }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane p-3" id="messages" role="tabpanel">
                        <div class="card">
                            <div class="card-body">
                                <form class="form-material mt-4">
                                    <div class="mb-3">
                                        <label style="font-weight: bolder;" for="matricule_prof">Matricule</label>
                                        <input required type="text" class="form-control form-control-line"
                                            value="{{ $data['matricule'] }}" readonly id="matricule_prof"
                                            name="matricule_prof">
                                    </div>
                                    <div class="mb-3">
                                        <label style="font-weight: bolder;" for="name_prof">Full Name</label>
                                        <input required type="text" class="form-control form-control-line"
                                            value=" {{ $data['nom_prenom'] }}" readonly id="name_prof" name="name_prof">
                                    </div>
                                    <div class="mb-3">
                                        <label style="font-weight: bolder;" for="email_prof">Email</label>
                                        <input required type="email" id="email_prof" name="email_prof"
                                            class="form-control" placeholder="Email" value="{{ $data['email'] }}">
                                    </div>
                                    <div class="mb-3 ">
                                        <label style="font-weight: bolder;" for="password">Password</label>
                                        <div class="row" id="pwd">
                                            <div class="col-md-6">
                                                <input required type="password" class="form-control"
                                                    placeholder="Password" id="password_prof" name="password_prof">
                                                <span class="help-block text-muted">Minimum of 10 characters</span>
                                            </div>
                                            <div class="col-md-6">
                                                <input required type="password" class="form-control"
                                                    placeholder="Confirm Password" id="confirm_prof" name="confirm_prof">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label style="font-weight: bolder;" for="phone">Phone No</label>
                                        <input required type="text" class="form-control" placeholder="placeholder"
                                            id="phone" name="phone" value="{{ $data['tel'] }}">
                                    </div>
                                    <div class="mb-3">
                                        <label style="font-weight: bolder;" for="description">Description</label>
                                        <textarea class="form-control" rows="5" name="description" id="description">{{ $data['description'] }}</textarea>
                                    </div>
                                    <div class="col-sm-12">
                                        <button id="profileupdate" type="submit" class="btn btn-success">Update
                                            Profile</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('scripts')

@endsection