@extends('backoffice.template.app')
@section('content')
  <h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">Admin /</span> Merchant
  </h4>
  <div class="card mb-4">
    {{-- <h5 class="card-header">Olifia Zambrud</h5> --}}
    <!-- Account -->
    <div class="card-body">
      <div class="row">
        <div class="col-lg-4">
          <img src="{{ asset('storage/' . $merchant->foto) }}" alt="user-avatar" class="d-block rounded" height="100"
            width="100" id="uploadedAvatar">
          <p class="mb-0 mt-3">Nama</p>
          <h5>{{ $merchant->nama }}</h5>
          <p class="mb-0 mt-3">No Telepon</p>
          <h5>{{ $merchant->no_hp }}</h5>
          <p class="mb-0 mt-3">Alamat</p>
          <h5>{{ $merchant->alamat }}</h5>
          <p class="mb-0 mt-3">Owner</p>
          <h5>{{ $merchant->user->nama }}</h5>
          <p class="mb-0 mt-3">Nomor KTP Owner</p>
          <h5>{{ $merchant->user_no_ktp }}</h5>
        </div>
        <div class="col-lg-4">
          <p class="mb-0 mt-3">Deskripsi</p>
          <h5>{!! $merchant->deskripsi !!}</h5>
        </div>
        <div class="col-lg-4 d-flex justify-content-end pe-3">
          <div class="mt-4 me-3">
            <div>
              <h5 class="text-muted mb-2">Saldo Anda</h5>
              <h2 class="mb-0">Rp. 20.000.000</h2>
            </div>
            <button class="btn btn-primary mt-5 w-100" style="height: 30; width: 30">
              Tambah Saldo
            </button>
          </div>
        </div>
      </div>
      {{-- <div class="d-flex align-items-start align-items-sm-center justify-content-between">
        <div class="d-flex gap-3">
          <div>
            <h5 class="text-muted mb-2">Saldo Anda</h5>
            <h3 class="mb-0">Rp. 20.000.000</h3>
          </div>
          <button class="btn btn-primary" style="height: 30; width: 30"><svg xmlns="http://www.w3.org/2000/svg"
              width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
              <path fill-rule="evenodd"
                d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z" />
            </svg></button>
        </div>
      </div> --}}
    </div>
    <hr class="my-0">
    {{-- <div class="card-body">
      <h5>Riwayat Top Up</h5>
      <table class="table">
        <thead>
          <tr>
            <th>No</th>
            <th>Deskripsi</th>
            <th>Nominal</th>
            <th>Tanggal</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Untuk Beli Kucing</td>
            <td>Rp. 1.000.000</td>
            <td>19 Agustus 2022</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Untuk Beli Kucing</td>
            <td>Rp. 1.000.000</td>
            <td>19 Agustus 2022</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Untuk Beli Kucing</td>
            <td>Rp. 1.000.000</td>
            <td>19 Agustus 2022</td>
          </tr>
        </tbody>
      </table>
    </div> --}}
    <!-- /Account -->
  </div>
@endsection
@section('script')
  <script>
    $(document).ready(function() {
      $('#table-user').DataTable();
    });
  </script>
@endsection