@extends('layouts/contentLayoutMaster')

@section('title', 'Bank')

@section('content')
<section>
  <h2 class="page-title font-bolder text-primary mb-2" data-id="">{{ __('locale.your_bank_account') }}</h2>
</section>

<section>
  <div class="row">
    <div class="col-md-12">
      @if (!@empty($userBank))
        <div class="card">
          <div class="card-body">
            <div class="list-bank">
              <ul class="list-group list-group-flush">
                @foreach ($userBank as $item)
                  <li class="list-group-item py-2">
                    <div class="row">
                      <div class="col-3 col-md-3 align-self-center">
                        <div class="image-bank">
                          <img class="image" src="{{asset('images/icon/' . $item['bank_image'])}}" height="40">
                        </div>
                      </div>
                      <div class="col-3 col-md-3 align-self-center">
                        <p class="font-medium-2 font-weight-bolder text-primary title-bank mb-25">{{$item['bank_name']}}</p>
                        <p class="font-medium-2 text-primary title-bank m-0">{{$item['account_no']}}</p>
                        <p class="font-medium-2 text-primary title-bank m-0">{{$item['account_name']}}</p>
                      </div>
                      <div class="col-6 col-md-6 text-right align-self-center">
                        <button class="btn btn-danger btn-delete-bank" data-bank="{{$item['id']}}">{{ __('locale.delete') }}</button>
                      </div>
                    </div>
                  </li>
                @endforeach
              </ul>
            </div>
          </div>
        </div>
      @endif
      <button class="btn btn-success w-100 mt-1 btn-add-bank" data-toggle="modal" data-target="#modal-bank">{{ __('locale.add_bank') }}</button>
    </div>
  </div>
</section>

<div 
  class="modal fade text-left modal-bank" 
  id="modal-bank"
  tabindex="-1"
  role="dialog"
  aria-labelledby="modal-label"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-label">{{ __('locale.add_bank') }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body form-add">
          <div class="form-group">
            <label class="form-label" for="bank">Bank</label>
            <select name="bank" class="select2 form-control input-bank" data-minimum-results-for-search="Infinity" required>
                @foreach($banks as $key => $data)  
                    <option value="{{ $data['id'] }}">{{ $data['name'] }}</option>
                @endforeach
            </select>
          </div>
          <div class="form-group">
            <label class="form-label" for="bank-account">Account No</label>
            <input id="bank-account" type="number" class="form-control input-bank-account" name="bank_account" required> 
          </div>
          <div class="form-group">
            <label class="form-label" for="bank-account">Account Name</label>
            <input id="bank-account-name" type="text" class="form-control input-bank-account-name" name="bank_account" required> 
          </div>
          <button class="btn btn-primary my-2 btn-save" >Save</button>
      </div>
    </div>
  </div>
</div>

@endsection
@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(('js/scripts/member/wallet/bank.js')) }}"></script>
@endsection