@extends('adminlte::page') @section('content')
    <?php Fun::lang()?>
    <div class="modal fade bs-modal-lg" id="show-form-transfer-to-origin-stock" 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>Transfer to origin stock</h3>
                </div>
                <br />
                <form class="form-horizontal" role="form" action="{{ route('construction.transfer_to_origin_stock') }}" method="post">
                    @csrf
                    <div class="row col-sm-12">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <input type="hidden" name="ajustment_stock_id" id="ajustment-stock-id">
                                <label class="col-sm-2 required control-label">Date</label>
                                <div class="col-sm-9">
                                    <input type="text" name="date" value="{{ date('d-m-Y') }}" class="form-control date_picker" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row col-sm-12">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="col-sm-2 required control-label">Project</label>
                                <div class="col-sm-9">
                                    {!! Form::select('project_id',$projects, null, array('class' => 'form-control select2','id'=>'project-id','required')) !!}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row col-sm-12">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="col-sm-2 required control-label">Warehouse</label>
                                <div class="col-sm-9">
                                    <select name = "warehouse_id" class="form-control select2" id="warehouse-id" required>

                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <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="title-page">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                <li><a href="#">Construction</a></li>
                <li><a href="#">Manage Construction Stock</a></li>
                <li><a href="#">Product Stock List</a></li>
                <li><a href="#">Ajust Stock</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-page">
                        <div class="pull-left">
                            <h3>Ajust Product Stock</h3>
                        </div>
                    </div>
                    <div class="pull-right">
                        @can('Construction-Ajust-Stock-Out-Create')
                        <a class="button_sm button_success" href="{{ route('construction.ajustment_stock_out') }}" target="_blank"><span class="fa fa-plus"></span> Ajust Stock Out</a>
                        @endcan
                    </div>
                </div>
            </div>
        </div>
        <form action="{{route('construction.ajust_stock_list')}}" method="POST">
            @csrf
            <div class="form-search">
              <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 ">
                  <div class="form-group">
                    <strong>Project</strong>
                    {!! Form::select('projects', $projects, null, ['class' => 'form-control select2 projects','onchange'=>'get_warehouse(this)']) !!}
                  </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 ">
                   <div class="form-group">
                     <strong>Warehouse</strong>
                     {!! Form::select('warehouses', [], null, ['class' => 'form-control select2 warehouses']) !!}
                   </div>
                 </div>
                <div class="col-xs-12 col-sm-6 col-md-6 ">
                  <div class="form-group">
                    <strong>Category</strong>
                    {!! Form::select('categories',$categories, null, ['class' => 'form-control select2 categories']) !!}
                  </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 ">
                  <div class="form-group">
                    <strong>Products</strong>
                    {!! Form::select('products',  $products, null, ['class' => 'form-control select2 products']) !!}
                  </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 text-right">
                  <button type="button" class="button_primary btn-sm search" onclick="searching()"><span class="fa fa-search"> Search</span></button>&nbsp
                  <button type="submit" class="button_primary btn-sm search"><span class="fa fa-print"> Print</span></button>
                </div>
              </div>
            </div>
            {!! Form::close() !!}
        <div class="box-body table-responsive">

            <table id="datatable_stock" class="table table-striped table-bordered table-hover nowrap">
                <thead>
                <tr>
                    <th>NO</th>
                    <th>Project</th>
                    <th>Warehouse</th>
                    <th>Product</th>
                    <th>Subcategory</th>
                    <th>Category</th>
                    <th>Qty</th>
                    <th>Unit</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

        </div>
    </div>

@endsection
@section('js')
    <script type="text/javascript">
        function get_warehouse(obj){
            $("#main-spinner").show();
            var route = "{{ route('get_warehouse_by_project',':id') }}";
            route = route.replace(":id",$(obj).val());
            $.ajax({
                url:route,
                type:"GET",
                dataType:"JSON",
                success:function(data)
                {
                    var opt = `<option value="">Please Select Option</option>`;
                    $.each(data,function(index,value)
                    {
                        opt += `<option value = "${value.id}">${value.name}</option>`;
                    });
                    $(".warehouses").html(opt);
                },
                complete:function()
                {
                    $("#main-spinner").hide();
                }
            });
        }
        $(document).on('change',"#project-id",function(){
            var project_id = $(this).val();
            var route = "{{ route('construction.get_warehouse',':id') }}";
            route = route.replace(":id",project_id);
            $.ajax({
                url:route,
                type:"GET",
                dataType:"JSON",
                success:function(data)
                {
                    var option = `<option value=''>Please Select</option>`;
                    $.each(data,function(index,value){
                        option += `<option value='${value.id}'>${value.name}</option>`;
                    });
                    $("#warehouse-id").html(option);
                }
            });
        });
        function display_transfer(ajustment_stock_id)
        {
            $("#show-form-transfer-to-origin-stock").modal('show');
            $("#ajustment-stock-id").val(ajustment_stock_id);
        }
        $(document).ready(function()
        {
            $('#datatable_stock').DataTable({
                ordering: false,
                "serverSide": true,
                "scrollY":"600px",
                "scrollCollapse": true,
                "lengthMenu": [
                    [20, 25, 50, 100, 500],
                    [20, 25, 50, 100, 500]
                ],
                ajax: {
                    url:"{{route('construction.ajust_stock_list')}}",
                    type:"GET",
                    data:function(d){
                        d.warehouses = $(".warehouses").val();
                        d.projects = $(".projects").val();
                        d.categories = $(".categories").val();
                        d.products = $(".products").val();
                    }
                },
                columns: [
                    {data: 'DT_RowIndex'},
                    {data:'project_name'},
                    {data: 'warehouse_name'},
                    {data: 'product_name'},
                    {data: 'brand_name'},
                    {data: 'product_category_name'},
                    {data: 'qty'},
                    {data: 'unit_name'},
                    {data: 'action'}
                ],
                "initComplete": function (settings, json) {
                    $('#main-spinner').hide();
                }
            });

            $.fn.dataTable.ext.errMode = 'throw';
        });
        function searching(){
            $('#datatable_stock').DataTable().draw(true);
        }
    </script>
@endsection