@extends('backend.layouts.app')
@section('title', "Edit $user->first_name $user->last_name Details")
@section('content')

<x-back-button :route="route('admin.users.index')">Back to users</x-back-button>

<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-tabs nav-justified nav-bordered mb-3">
                    <li class="nav-item">
                        <a href="#personal-details" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                            <i class="ri-user-3-line me-1"></i>
                            Personal details
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#security-details" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
                            <i class="ri-lock-line me-1"></i>
                            Security
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#settings-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                            <i class="ri-settings-2-line me-1"></i>
                            Settings
                        </a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane" id="personal-details">
                        @include('backend.users.partials.edit-personal-details')
                    </div>
                    <div class="tab-pane show active" id="security-details">
                        @include('backend.users.partials.edit-security-details')
                    </div>
                    <div class="tab-pane" id="settings-b2">
                        @include('backend.users.partials.edit-account-balances')
                    </div>
                </div>
            </div> <!-- end card-body -->
        </div> <!-- end card-->
    </div>
</div>

@endsection