@extends(backpack_view('layouts.top_left'))

@php
  $defaultBreadcrumbs = [
    trans('backpack::crud.admin') => backpack_url('dashboard'),
    $crud->entity_name_plural => url($crud->route),
    trans('backpack::crud.edit') => false,
  ];

  // if breadcrumbs aren't defined in the CrudController, use the default breadcrumbs
  $breadcrumbs = $breadcrumbs ?? $defaultBreadcrumbs;
@endphp

@section('content')
<div class="row row-xs">
    <div class="col-md-4">
      <ul class="list-group list-group-settings">
        <li class="list-group-item list-group-item-action">
          <a href="#paneProfile" data-toggle="tab" class="media active">
            <i data-feather="user"></i>
            <div class="media-body">
              <h6>{{ __('admin.auth.user.fields.tabs.1.title') }}</h6>
              <span>{{ __('admin.auth.user.fields.tabs.1.subtitle') }}</span>
            </div>
          </a>
        </li>
        <li class="list-group-item list-group-item-action">
          <a href="#paneSecurity" data-toggle="tab" class="media">
            <i data-feather="shield"></i>
            <div class="media-body">
                <h6>{{ __('admin.auth.user.fields.tabs.3.title') }}</h6>
                <span>{{ __('admin.auth.user.fields.tabs.3.subtitle') }}</span>
            </div>
          </a>
        </li>
        <li class="list-group-item list-group-item-action">
          <a href="#paneBilling" data-toggle="tab" class="media">
            <i data-feather="credit-card"></i>
            <div class="media-body">
                <h6>{{ __('admin.auth.user.fields.tabs.5.title') }}</h6>
                <span>{{ __('admin.auth.user.fields.tabs.5.subtitle') }}</span>
            </div>
          </a>
        </li>
      </ul>
    </div><!-- col -->
    <div class="col-md-8">
      <div class="card card-body pd-sm-40 pd-md-30 pd-xl-y-35 pd-xl-x-40">
        <div class="tab-content">
          <div id="paneProfile" class="tab-pane active show">
            <h6 class="tx-uppercase tx-semibold tx-color-01 mg-b-0">{{ __('admin.auth.user.fields.tabs.1.title') }}</h6>
            <hr>
            <div class="form-settings">
              <div class="form-group">
                <label class="form-label">{{ __('admin.auth.user.fields.name') }}</label>
                <input type="text" class="form-control" placeholder="Enter your fullname" value="Dwayne Johnson">
              </div><!-- form-group -->

              <div class="form-group">
                <label class="form-label">Your Bio</label>
                <textarea class="form-control" rows="3" placeholder="Write something about you">A front-end developer that focus more on user interface design, a web interface wizard, a connector of awesomeness and a long lost twin of Vin Diesel.</textarea>
              </div><!-- form-group -->

              <div class="form-group">
                <label class="form-label">Location</label>
                <input type="text" class="form-control" placeholder="Enter your location" value="San Francisco, CA">
              </div><!-- form-group -->
            </div>
          </div><!-- tab-pane -->
          <div id="paneSecurity" class="tab-pane">
            <h6 class="tx-uppercase tx-semibold tx-color-01 mg-b-0">Security Settings</h6>
            <hr>
            <div class="form-settings">
              <div class="form-group">
                <label class="form-label">Change Old Password</label>
                <input type="text" class="form-control" placeholder="Enter your old password">
                <input type="text" class="form-control mg-t-5" placeholder="New password">
                <input type="text" class="form-control mg-t-5" placeholder="Confirm new password">
              </div><!-- form-group -->
            </div><!-- form-settings -->
          </div><!-- tab-pane -->
          <div id="paneBilling" class="tab-pane">
            <h6 class="tx-uppercase tx-semibold tx-color-01 mg-b-0">Billing Settings</h6>
            <hr>
            <div class="form-settings mx-wd-100p">
            <div class="form-group">
                <label class="form-label">Full Name</label>
                <input type="text" class="form-control" placeholder="Enter your fullname" value="Dwayne Johnson">
                <div class="tx-11 tx-sans tx-color-04 mg-t-5">Your name may appear around here where you are mentioned. You can change or remove it at any time.</div>
            </div><!-- form-group -->

              <div class="form-group">
                <label class="form-label">Payment History</label>
                <div class="bd bg-gray-100 pd-20 tx-center">
                  <p class="tx-13 mg-b-0">You have not made any payment.</p>
                </div>
              </div><!-- form-group -->
            </div><!-- form-settings -->
          </div><!-- tab-pane -->
        </div><!-- tab-content -->
      </div><!-- card -->
    </div><!-- col -->
  </div><!-- row -->
@endsection