@extends('layouts.admin')

@section('css')
<link href="/assets/plugins/footable/css/footable.core.css" rel="stylesheet">
<link href="/assets/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/plugins/dropify/dist/css/dropify.min.css">
<link href="/assets/plugins/sweetalert/sweetalert.css" rel="stylesheet" type="text/css">
@endsection

@section('js')
<!-- Footable -->
<script src="/assets/plugins/footable/js/footable.all.min.js"></script>
<script src="/assets/plugins/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
<script src="/assets/plugins/sweetalert/sweetalert.min.js" type="text/javascript"></script>
<!--FooTable init-->
<script src="/assets/js/footable-init.js"></script>
<script src="/assets/plugins/dropify/dist/js/dropify.min.js"></script>
<script src="/assets/js/custom-file-input.js"></script>
<script src="/assets/js/products.js?v={{ env('GLOBALVER') }}"></script>
@endsection

@section('content')
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">List of Hole Types</h4>
  <div class="table-responsive">
  <table id="demo-foo-addrow" class="table m-t-30 table-hover no-wrap contact-list" data-page-size="10">
      <thead>
          <tr>
              <th>ID</th>
              <th>Hole Type</th>
              <th>Price</th>
              <th>Created</th>
              <th>Action</th>
          </tr>
      </thead>
      <tbody>
        @foreach ($holetype as $type)
          <tr>
              <td>{{$type->id}}</td>
              <td>{{$type->name}}</td>
              <td>{{$type->price}}</td>
              <td>{{$type->date_added}}</td>
              <td><button type="button" class="btn btn-sm btn-icon btn-pure btn-outline btn-edit-holetype" data-id="{{ $type->id }}" ><i class="ti-pencil-alt" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-sm btn-icon btn-pure btn-outline btn-del-holetype" data-id="{{ $type->id }}" ><i class="ti-close" aria-hidden="true"></i></button>
              </td>
          </tr>
          @endforeach
      </tbody>
  <tfoot>
    <tr>
      <td colspan="2">
        <button type="button" class="btn btn-info btn-rounded" data-toggle="modal" data-target="#add-ht">Add New Hole Type</button>
      </td>
      <td colspan="6">
      <div class="text-right">
      <ul class="pagination"> </ul>
      </div>
      </td>
    </tr>
  </tfoot>
  </table>
  <div id="add-ht" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-wide">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Add New Hole Type</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>
      <div class="modal-body">
        <form id="new-ht" method="post" enctype="multipart/form-data" class="form-inline form-material">
        {{ csrf_field() }}
        <input id="api_token" type="hidden" name="api_token" value="{{ $user->api_token }}">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label for="staticEmail" class="col-sm-4 col-form-label">Hole Type</label>
              <div class="col-md-8 m-b-20">
                <input type="text" class="form-control" name="name" placeholder="Counter Sunk Holes.."> </div>
              </div>
            </div>
                <div class="col-md-12">
                  <div class="form-group">
                <label for="staticEmail" class="col-sm-4 col-form-label">Hole Price e.g £0.99</label>
                <div class="col-md-8 m-b-20">
                  <input type="text" class="form-control" name="price" placeholder="Price eg: 1.06"> </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button id="insert-ht" class="btn btn-info waves-effect" >Insert New Hole Type</button>
        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
      </div>
    </div>
    <!-- /.modal-content -->
    </div>
  <!-- /.modal-dialog -->
  </div>

  <div id="edit-ht" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-wide">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Edit Hole Type</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>
      <div class="modal-body">
        <form id="modifyht" method="post" enctype="multipart/form-data" class="form-inline form-material">
        <input type="hidden" name="_method" value="PUT">
        {{ csrf_field() }}
        <input id="api_token" type="hidden" name="api_token" value="{{ $user->api_token }}">
        <input type="hidden" name="id" value="">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label for="name" class="col-sm-4 col-form-label">Hole Type</label>
              <div class="col-md-8 m-b-20">
                <input type="text" class="form-control" name="name" value="" placeholder="Counter Sunk Holes.." style="width:100%"> </div>
              </div>
            </div>
                <div class="col-md-12">
                  <div class="form-group">
                <label for="price" class="col-sm-4 col-form-label">Hole Price e.g £0.99</label>
                <div class="col-md-8 m-b-20">
                  <input type="text" class="form-control" name="price" value="" placeholder="Price eg: 1.06" style="width:100%"> </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button id="update-ht" class="btn btn-info waves-effect" >Update Hole Type</button>
        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
      </div>
    </div>
    <!-- /.modal-content -->
    </div>
  <!-- /.modal-dialog -->
  </div>
  </div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
@endsection