@extends('account::layouts.account')

@section('title','Profile Settings')
@section('subtitle','Configure your profile')

@section('content')

    <div class="row">
        <div class="col-xs-12 col-lg-8 mx-auto">
            <!-- Name -->
            <div class="card mb-2">
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <h6 class="text-dark font-weight-bold">Full Name</h6>
                            <span class="d-block text-secondary">Current used: <b>{{ auth()->user()->fname . ' ' .  auth()->user()->lname}}</b></span>
                        </div>
                        <div class="col-6 text-right">
                            <button type="button" data-toggle="collapse" data-target="#collapse-full-name"
                                    class="btn btn-sm btn-outline-dark px-4">
                                <i class="fas fa-edit mr-2"></i>Edit
                            </button>
                        </div>
                    </div>
                </div>

                <div class="collapse" id="collapse-full-name">
                    <div class="card-body pt-0">
                        <div class="display-mobile" style="width: 400px">
                            <livewire:frontend.account.setting.edit-name/>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Email -->
            <div class="card mb-2">
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <h6 class="text-dark font-weight-bold">Email</h6>
                            <span class="d-block text-secondary">Email used: <b>{{ auth()->user()->email }}</b></span>
                        </div>
                        <div class="col-6 text-right">
                            <button type="button" data-toggle="collapse" data-target="#collapse-email"
                                    class="btn btn-sm btn-outline-dark px-4">
                                <i class="fas fa-edit mr-2"></i>Edit
                            </button>
                        </div>
                    </div>
                </div>

                <div class="collapse" id="collapse-email">
                    <div class="card-body pt-0">
                        <div class="display-mobile" style="width: 400px">
                            <livewire:frontend.account.setting.edit-email/>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Phone -->
            <div class="card mb-2">
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <h6 class="text-dark font-weight-bold">Phone</h6>
                            <span class="d-block text-secondary">Phone used: