@extends('layouts.contentLayoutMaster')
{{-- page title --}}
@section('title', 'Lista de Contas')

{{-- page style --}}
@section('page-styles')
  <link rel="stylesheet" type="text/css"
    href="{{ asset('https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css') }}">
@endsection

@section('content')
  <!-- invoice list -->
  <section class="invoice-list-wrapper">
    <!-- create invoice button-->
    <div class="invoice-create-btn mb-1">
      <a href="{{ route('financials.create') }}" class="btn btn-primary glow invoice-create" role="button"
        aria-pressed="true">Criar Financeira</a>
    </div>
    <!-- Options and filter dropdown button-->
    <div class="table-responsive">
      @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
          <button type="button" class="close" data-dismiss="alert">×</button>
          <strong>{{ $message }}</strong>
        </div>
      @endif

      @if (count($errors) > 0)
        <div class="alert alert-danger">
          <strong>Ops!</strong> Ouve algum problema.
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      <table id="table" class="display">
        <thead>
          <tr>
            <th>#</th>
            <th>Nome</th>
            <th>Ativo</th>
            <th>Saldo</th>
            <th>Ações</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($financials as $item)
            <tr>
              <th>{{ $item->id }}</th>
              <th>{{ $item->name }}</th>
              <th>
                @if ($item->status == 1)
                  <div class="badge badge-light-success text-bold-500 py-50">Ativo</div>
                @else
                  <div class="badge badge-light-danger text-bold-500 py-50">Desativado</div>
                @endif
              </th>
              <th>R$ {{ number_format($item->balance, 2, ',', '.') }}</th>
              <th style="width: 100px">
                <div class="row">
                  <div class="col-4">
                    <a href="{{ route('bank.show', $item->id) }}" class="btn btn-primary">
                      <i class="bx bx-show-alt"></i>
                    </a>
                  </div>
                </div>
              </th>
            </tr>
          @endforeach
        </tbody>
      </table>

    </div>
  </section>
@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
  <script src="{{ asset('vendors/js/tables/datatable/datatables.min.js') }}"></script>
@endsection
{{-- page scripts --}}
@section('page-scripts')
  <script>
    $(document).ready(function() {
      $('#table').DataTable();
    });
  </script>
@endsection