@extends('layouts.main')
@section('title', 'Insert Attendance & Contribution')

@section('breadcrumb')
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  <li class="breadcrumb-item"><a href="javascript:void(0);">Contribution</a></li>
  <li class="breadcrumb-item active">Insert Attendance & Contribution</li>
@endsection

@section('content')

  <script src="{{ env('APP_PREFIX') }}/js/contribution.js"></script>

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body mt-2">

          <div class="col-lg-10 offset-1">

            <div class="form-row">

              <div class="form-group col-md-6">
                <label for="attendance_date">Attendance Date</label>
                <input type="text" class="form-control" id="attendance_date" data-provide="datepicker" data-date-autoclose="true" value="{{ date('m/d/Y') }}">
              </div>

              <div class="form-group col-md-6">
                <label for="amount">Contribution Amount</label>
                <input type="text" class="form-control" id="amount" value="0">
              </div>

            </div>

            <div class="form-group">
              <div class="button-list">
                <button type="button" class="btn btn-block btn-lg btn-blue waves-effect waves-light" id="insert_attendance_contribution_button">
                  Insert Attendance & Contribution Amount
                </button>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-12">
      <div class="card-box">
        <h4 class="header-title">Member List</h4>
        <div class="table-responsive" style="overflow-x: hidden">
          <table class="table table-bordered mb-0 mt-3" id="contribution_table" >
            <thead>
            <tr>
              <th>
                <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="user_all">
                  <label class="custom-control-label" for="user_all"></label>
                </div>
              </th>
              <th>Name</th>
              <th>Role</th>
              <th>Email</th>
              <th>Phone</th>
              <th>Joined</th>
            </tr>
            </thead>
            <tbody>

            @foreach($users as $user)

              <tr>
                <th>
                  <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input user_selection" id="user_{{ $user->id }}" value="{{ $user->id }}">
                    <label class="custom-control-label" for="user_{{ $user->id }}"></label>
                  </div>
                </th>
                <td>{{ $user->name }}</td>
                <td>{{ ucfirst($user->role) }}</td>
                <td>{{ $user->email }}</td>
                <td>{{ $user->phone }}</td>
                <td>{{ formatDate($user->created_at) }}</td>
              </tr>
            @endforeach

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

@endsection