@extends('adminlte::page')
@section('content')
@include('administrator.inventory.inventory-stock.form-view-inventory')
<?php Fun::lang() ?>
<div class="modal fade bs-modal-lg" id="form-create" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dm modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h3 style="color:grey">Create Inventory Stock</h3>
            </div>
            <br />
            <form class="form-horizontal" role="form" action="{{ route('inventory_stock.store') }}" method="post">
                @csrf
                <div class="row col-sm-12">
                    <div class="col-sm-5">
                        <div class="form-group">
                            <label class="col-sm-5 required control-label">Date </label>
                            <div class="col-sm-7">
                                <input type="text" name="date" class="form-control condition date_picker" value="{{date("d-m-Y")}}" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <label class="col-sm-5 required control-label">Name</label>
                            <div class="col-sm-7">
                                <input type="text" name="name" class="form-control" value="" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2" style="text-align: right;"><label class=" control-label">Description</label></div>
                    <div class=" col-sm-9" style="margin-left: 2.7%;width: 58.5%;">
                        <div class="form-group">
                            <textarea name="des" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
                <br />
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> No</button>
                    <button type="submit" class="button_success" data-toggle="modal"><i class="fa fa-save"></i> Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


<div class="modal fade bs-modal-lg" id="edit-inventory" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dm modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h3 style="color:grey">Edit Inventory Stock</h3>
            </div>
            <br />
            <form class="form-horizontal" role="form" action="{{ route('inventory_stock_update') }}" method="post">
                @csrf
                <div class="row col-sm-12">
                    <div class="col-sm-5">
                        <div class="form-group">
                            <input type="hidden" id="inventory-id" name="id">
                            <label class="col-sm-5 required control-label">Date </label>
                            <div class="col-sm-7">
                                <input type="text" id="date" name="date" class="form-control condition date_picker" value="{{date("d-m-Y")}}" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <label class="col-sm-5 required control-label">Name</label>
                            <div class="col-sm-7">
                                <input type="text" id="name" name="name" class="form-control" value="" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2" style="text-align: right;"><label class=" control-label">Description</label></div>
                    <div class=" col-sm-9" style="margin-left: 2.7%;width: 58.5%;">
                        <div class="form-group">
                            <textarea name="des" id="des" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
                <br />
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> No</button>
                    <button type="submit" class="button_success" data-toggle="modal"><i class="fa fa-save"></i> Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade bs-modal-lg" id="delete-inventory" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dm modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h3 style="color:grey">Delete Inventory Stock</h3>
            </div>
            <br />
            <form class="form-horizontal" role="form" action="{{ route('inventory_stock_delete') }}" method="post">
                @csrf
                <div class="row col-sm-12">
                    <div class="col-sm-12" style="text-align: center;">
                        <div class="form-group">
                            <input type="hidden" id="inventory-delete-id" name="id">
                            <h3 style="color:grey">Are you sure?</h3>
                        </div>
                    </div>
                </div>
                <br /><br><br />
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> No</button>
                    <button type="submit" class="button_success" data-toggle="modal"><i class="fa fa-save"></i> submit</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div class="title-add">
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li> <a class="ng-binding" href="#"><i class="fa fa-dashboard"></i> Dashboard</a> </li>
            <li><a href="#">Inventory</a></li>
            <li><a href="#">Inventory stock</a></li>
            <li><a href="#">List</a></li>
        </ul>
    </div>
</div>
<div class="page">
    <div class="top-content">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="title-add">
                    <div class="pull-left">
                        <h3>Inventory Stock</h3>
                    </div>
                </div>
                @can('Inventory-Create')
                <div class="pull-right">
                    <a class="button_sm button_primary" href="#form-create" data-toggle="modal"><span class="fa fa-plus"></span> Create New</a>
                </div>
                @endcan
            </div>
        </div>
    </div>
    <div class="box-body table-responsive">
        <table id="datatable_report_inventory_stock" class="table table-striped table-bordered table-hover nowrap">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Date</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@section('js')

<script type="text/javascript">
    function edit_performance(obj) {
        var id = $(obj).attr("id");
        $('.main-spinner').show();
        $.ajax({
            type: 'get',
            url: 'inventory_stock_edit/' + id,
            dataType: 'json',
            success: function(d) {
                $("#inventory-id").val(d.id);
                $("#date").val(d.inv_date);
                $("#name").val(d.inv_name);
                $("#des").text(d.inv_description);
                $('.main-spinner').hide();
            }
        });
    }

    function delete_performance(obj) {
        var id = $(obj).attr("id");
        $('.main-spinner').show();
        $.ajax({
            type: 'get',
            url: 'inventory_stock_edit/' + id,
            dataType: 'json',
            success: function(d) {
                $("#inventory-delete-id").val(d.id);
            }
        });
    }
    $(document).ready(function() {
        $('.main-spinner').show();
        $('#datatable_report_inventory_stock').DataTable({
            ordering: false,
            serverSide: true,
            "lengthMenu": [
                [20, 50, 100, 500, 1000, 2000],
                [20, 50, 100, 500, 1000, 2000]
            ],
            ajax: "{{ route('inventory_stock.get_data') }}",
            columns: [

                {
                    data: 'DT_RowIndex'
                },
                {
                    data: "inv_date"
                },
                {
                    data: "inv_name"
                },
                {
                    data: "inv_description"
                },
                {
                    data: "action"
                },

            ],
            "initComplete": function(settings, json) {
                $('.main-spinner').hide();
            }
        });

        $.fn.dataTable.ext.errMode = 'throw';
    });

    function view_inv(id) {
        var route = "{{route('get-inventory-stock-item',':id')}}";
        route = route.replace(':id', id);
        var div = '';
        $.ajax({
            type: "GET",
            url: route,
            data: {
                id: id
            },
            dataType: "JSON",
            success: function(data) {
                $.each(data, function(index, value) {
                    div += `<tr><td>${value.project}</td>
                                <td>${value.category}</td>
                                <td>${value.group}</td>
                                <td>${value.zone}</td>
                                <td>${value.item_house}</td>
                                <td>${value.item_size_land} m<sup>2</sup></td>
                                <td>$ ${parseFloat(value.item_price).toFixed(2)}</td></tr>`;
                });
                $('#append_here').empty().append(div);
                $('#view_inventory').modal('show');
            }
        });
    }
</script>

@endsection