@extends('layouts.contentLayoutMaster')
{{-- page title --}}
@section('title','Opções de pagamento')
{{-- vendor style --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/datatables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/extensions/dataTables.checkboxes.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/responsive.bootstrap.min.css')}}">
@endsection
{{-- page style --}}
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/app-invoice.css')}}">
@endsection

@section('content')
<!-- invoice list -->
<section class="invoice-list-wrapper">
  <!-- create invoice button-->
  <div class="invoice-create-btn mb-1">
    <a href="{{route('payment-option.create')}}" class="btn btn-primary glow invoice-create" role="button" aria-pressed="true"
      >Criar Opção de Pagamento</a
    >
  </div>
  <!-- Options and filter dropdown button-->
  <div class="action-dropdown-btn d-none">
    <div class="dropdown invoice-filter-action">
      <button
        class="btn border dropdown-toggle mr-1"
        type="button"
        id="invoice-filter-btn"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        Filter Formas de Pagamento
      </button>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="invoice-filter-btn">
        <a class="dropdown-item" href="#">ID</a>
        <a class="dropdown-item" href="#">Nome</a>
      </div>
    </div>
    <div class="dropdown invoice-options">
      <button
        class="btn border dropdown-toggle mr-2"
        type="button"
        id="invoice-options-btn"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        Options
      </button>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="invoice-options-btn">
        <a class="dropdown-item" href="#">Delete</a>
        <a class="dropdown-item" href="#">Editar</a>
        <a class="dropdown-item" href="#">Enviar</a>
      </div>
    </div>
  </div>
  <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 class="table invoice-data-table dt-responsive nowrap" style="width:100%">
      <thead>
        <tr>
          <th>
            <span class="align-middle">ID</span>
          </th>
          <th>Nome</th>
          <th>Credito | Debito</th>
          <th>Editar</th>
          <th>Excluir</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($payments as $pay)
        <tr>
          <td>
            <a href="">{{ $pay->id }}</a>
          </td>
          <td>{{ $pay->name }}</td>
          <td>{{ $pay->status }}</td>
          <td>
            <div class="invoice-action">
              <a href="{{ route('payment-option.edit', $pay->id) }}" class="invoice-action-edit cursor-pointer">
                <i class="bx bx-edit"></i>
              </a>
            </div>
          </td>
          <td>
            <div class="invoice-action">
              <form action="{{ route('payment-option.destroy', $pay->id) }}" method="post">
                @csrf
                @method('DELETE')
                <button type="submit" class="invoice-action-view mr-1" style="outline: thin; border: hidden; background-color: #f2f4f4; margin-left: -5px">
                  <i class="bx bx-trash-alt danger"></i>
                </button>
              </form>
            </div>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</section>
@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/tables/datatable/datatables.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/datatables.checkboxes.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/responsive.bootstrap.min.js')}}"></script>
@endsection
{{-- page scripts --}}
@section('page-scripts')
<script src="{{asset('js/scripts/pages/app-invoice.js')}}"></script>
@endsection