@extends('layouts.backapp')

@section('content')

<style type="text/css">
    #nama{
        text-transform: uppercase;
    }
</style>

<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
    <div class="kt-portlet__head kt-portlet__head--lg">
        <div class="kt-portlet__head-label">
            <span class="kt-portlet__head-icon">
                <i class="kt-font-brand flaticon2-line-chart"></i>
            </span>
            <h3 class="kt-portlet__head-title">
                Kategori Pekerjaan
            </h3>
        </div>
        @can('create', $menus['category.index'])
        <div class="kt-portlet__head-toolbar">
            <div class="kt-portlet__head-wrapper">
                <div class="kt-portlet__head-actions">
                    <button type="button" class="btn btn-bold btn-label-brand btn-sm" id="addCategory"> Tambah </button>
                </div>
            </div>
        </div>
        @endcan
    </div>

    <div class="kt-portlet__body">
        <div class="table-responsive">
        <!--begin: Datatable -->
        <table class="table table-striped table-bordered table-hover table-checkable" id="kt_table">
            <thead>
                <tr>
                    <th style="width: 70%;">Kategori</th>
                    <th style="width: 15%;">Form</th>
                    <th style="width: 15%;">Aksi</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <!--end: Datatable -->
        </div>
    </div>
</div>
<!--begin::Modal-->
<div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="categoryForm" data-form="store" action="{{ route('category.store') }}" class="kt-form">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalHeading"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    @csrf
                    <div class="form-group">
                        <label>Nama Kategori</label>
                        <input type="text" class="form-control inputUppercase" id="name" name="name" placeholder="Masukan Nama kategori" value="" required="" autocomplete="off" />
                    </div>
                    <div class="form-group">
                        <label>Form</label>
                        <select name="form" class="form-control">
                            <option value="work">Kerja</option>
                            <option value="wash">Cuci</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="saveBtn" value="create">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!--end::Modal-->


<input type="hidden" name="ajax_url" value="{{ route('category.index') }}">
<input type="hidden" name="store_url" value="{{ route('category.store') }}">
@endsection

@section('javascripts')
<script src="{{ url('js/pages/back/master/category.js') }}" type="text/javascript"></script>
@endsection