@extends('layouts.app')

@section('content')
<style>
</style>
<section class="content" style="background:blue">
    <div class="box box-solid">
        <div class="box-header">
        	<h2>UNIT</h2>
            @can('unit.create')
            <div class="box-tools">
                <button type="button" class="btn btn-lg btn-primary btn-modal" 
                    data-href="{{action('UnitController@create')}}" 
                    data-container=".unit_modal">
                    <i class="fa fa-plus"></i>NEW</button>
            </div>
            @endcan
        </div>
        <div class="box-body"  style="margin-left:20px;margin-right:20px;">
            <div class="table-responsive">
                <table width="100%"  class="table table-bordered table-striped" id="units_table">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Parent Unit</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    {!! Form::close() !!}   
    </div>
    <div class="modal fade unit_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>
</section>
@endsection
@section('javascript')
    <script>
    $(document).ready(function () {
        var units_table = $('#units_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '/units',
            columnDefs: [{
                "targets": 3,
                "orderable": false,
                "searchable": false
            }]
        });

        $(document).on('submit', 'form#units_add_form', function (e) {
            e.preventDefault();
            var data = $(this).serialize();

            $.ajax({
                method: "POST",
                url: $(this).attr("action"),
                dataType: "json",
                data: data,
                success: function (result) {
                    if (result.success == true) {
                        $('div.unit_modal').modal('hide');
                        toastr.success(result.msg);
                        units_table.ajax.reload();
                        location.reload();
                    } else {
                        toastr.error(result.msg);
                    }
                }
            });
	    });

        $(document).on('click', 'button.edit_unit_button', function () {

            $("div.unit_modal").load($(this).data('href'), function () {

                $(this).modal('show');

                $('form#units_edit_form').submit(function (e) {
                    e.preventDefault();
                    var data = $(this).serialize();
                    $.ajax({
                        method: "POST",
                        url: $(this).attr("action"),
                        dataType: "json",
                        data: data,
                        success: function (result) {
                            if (result.success == true) {
                                $('div.unit_modal').modal('hide');
                                toastr.success(result.msg);
                                units_table.ajax.reload();
                            } else {
                                toastr.error(result.msg);
                            }
                        }
                    });
                });
            });
        });
    });         
    </script>
@endsection