@extends('portal._layouts.default')

@section('MainContent')
<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-12">
      <div class="header">
        <div class="header-body">
          <div class="row align-items-center">
            <div class="col">
              <h6 class="header-pretitle">Transactions</h6>
              <h1 class="header-title">Withdraw Detail</h1>
            </div>

            <div class="col-auto">
              <a href="{{ route('withdraws.index') }}" class="btn btn-light">Back to list</a>
            </div>
          </div>
        </div>
      </div>

      <div>
        <div class="row">
          <div class="col-lg-6 col-xl-6">
            <div class="card">
              <div class="card-header">
                <div class="row align-items-center">
                  <div class="col">
                    <h4 class="card-header-title">Withdraw Information</h4>
                  </div>
                </div>
              </div>

              <div class="card-body">
                <div class="list-group list-group-flush my-n3">
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><span>Currency</span></div>
                      <div class="col-auto">
                        <span class="text-body-secondary">{{ $withdraw->currency_type }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><span>Amount</span></div>
                      <div class="col-auto">
                        <span class="text-body-secondary">{{ $withdraw->amount }} {{ $withdraw->currency_type }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><span>Account Name</span></div>
                      <div class="col-auto">
                        <span class="text-body-secondary">{{ $withdraw->account_name }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><span>Account Network</span></div>
                      <div class="col-auto">
                        <span class="text-body-secondary">{{ $withdraw->account_network }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><span>Account Address</span></div>
                      <div class="col-auto">
                        <span class="text-body-secondary">{{ $withdraw->account_address }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><span>Status</span></div>
                      <div class="col-auto">
                        <span class="badge text-bg-{{ $withdraw->status_color }}">{{ $withdraw->status_text }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><span>Remark</span></div>
                      <div class="col-auto">
                        <span class="text-body-secondary">{{ $withdraw->remark }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-6 col-xl-6">
            <div class="card">
              <div class="card-header">
                <h4 class="card-header-title">Processing History</h4>
              </div>
              <div class="card-body">
                @if (! $withdraw->actionLogs->count())
                  <p class="text-muted">There is currently no records</p>
                @endif

                <div class="list-group list-group-flush list-group-activity my-n3">
                  @foreach ($withdraw->actionLogs()->latest()->get() as $record)
                    <div class="list-group-item">
                      <div class="row">
                        <div class="col-auto">
                          <div class="avatar avatar-sm">
                            <div class="avatar-title fs-lg bg-primary-subtle rounded-circle text-primary">
                              <i class="fe fe-mail"></i>
                            </div>
                          </div>
                        </div>

                        <div class="col ms-n2">
                          <div class="row mb-1">
                            <div class="col">
                              <span class="text-uppercase">{{ $record->status_text }}</span>
                            </div>
                          </div>

                          @if ($record->message)
                            <p class="small text-muted mb-2">
                              {{ $record->message }}
                            </p>
                          @endif

                          <div class="row">
                            <div class="col">
                              <small class="text-body-secondary">{{ $record->created_at->diffForHumans() }}</small>
                            </div>
                            <div class="col-auto">
                              <small class="text-body-secondary">{{ $record->created_at }}</small>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  @endforeach
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection