@extends('admin.layout')
@section('content')

<style> 

#watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;

    display: block;
    width: 300%;
    height: 300%;

    transform: rotate(-45deg);
    content: attr(data-watermark);

    font-size: 30px;
    opacity: 0.15;
    line-height: 4em;
    letter-spacing: 2px;
    color: #ff0523;
    z-index:0;
    }
    .content-wrapper, .right-side{
        background: #FFF;
    }
    .box {
        background: transparent;
        z-index: 1; 
    }
    .bootstrap-select.btn-group .dropdown-menu li {
        border-bottom: 1px solid #6c6c6cde;
    }</style>
<div class="search-list">
    <div class="content-wrapper search-result-list">    
    <section class="content-header">
        <h1> {{ trans('Inventory List') }}</h1>
        <ol class="breadcrumb">
            <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
            <li class="active"> {{ trans('Inventory List') }}</li>
        </ol>
    </section>
    @include('admin.loader')
    @php
        $getUserRoleData = userRoleData();
        $inventorys     = explode(",",$getUserRoleData->inventory);
    @endphp 
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-info">
                    <div class="box-body">                      
                        <div class="col-xs-12">
                            <div class="row">
                                                                <form action="" method="get" id="inventroy_filter_form">
                                    <div class="row">
                                        <div class="col-sm-8 col-md-12"> 
                                            <strong>Filter by:Product Name/Status/Supplier</strong>
                                        </div>
                                        <div class="col-sm-3 col-md-3"> 
                                            <div class="form-group">
                                                <input type="text" name="products_name" id="products_name" value="{{ $products_name }}" placeholder="Please enter product name" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-sm-3 col-md-3"> 
                                            <div class="form-group">
                                                {!! Form::select('inventory_status[]', $result['inventory_status'], $inventory_status, array('class'=>'form-control', 'id'=>'inventory_status', 'multiple'=>'')) !!}
                                            </div>
                                        </div>
                                        <div class="col-sm-3 col-md-3"> 
                                            <div class="form-group">
                                                {!! Form::select('supplier[]', $result['suppliersData'], $supplier, array('class'=>'form-control', 'id'=>'supplier', 'multiple'=>'')) !!}
                                            </div>
                                        </div>
                                        <div class="col-sm-3 col-md-3">
                                            <div class="pull-right">
                                                <ul  class="list-inline"> 
                                                    @if(in_array("Add", $inventorys)) 
                                                        <li class="list-inline-item">
                                                            <a href="{{ route('inventorys.create') }}" type="button" class="btn btn-block btn-primary">{{ trans('Add inventory') }}</a></li>
                                                    @endif                                                            
                                                    <li class="list-inline-item"><a href="{{ URL('admin/inventorys') }}" class="btn-primary-apply">Clear Filter</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>  
                        <div class="col-xs-12">
                            <div class="row">
                                @if(session()->has('message'))
                                <div class="alert alert-success alert-dismissible">
                                   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                   <h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
                                    {{ session()->get('message') }}
                                </div>
                                @endif
                                @if(session()->has('error'))
                                    <div class="alert alert-warning alert-dismissible">
                                       <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                       <h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
                                        {{ session()->get('error') }}
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">                                     
                                @if(in_array("View", $inventorys))          
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>                      
                                            <th width="5%">{{ trans('#ID') }}</th>
                                            <th>{{ trans('Product Name') }}</th>
                                            <th>{{ trans('Available Stock') }}</th>
                                            <th width="5%">{{ trans('Rolls') }}</th>
                                            <th>{{ trans('Supplier') }}</th>
                                            <th width="15%">{{ trans('Date') }}</th>
                                            <th width="20%">{{ trans('Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="result-data">
                                        @include('admin.inventorys.inventorys_pagination_data')
                                    </tbody>
                                </table>                                
                                @else
                                    <p> <strong>Please contact with SuperAdmin</strong></p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                
                <div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
                </div>


            </div>
        </div>
    </section>  
</div>
</div>
@endsection 
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />

<script type="text/javascript">

// function fetchInventorysData(page = '', inventory_status = [], supplier = [], products_name = '') {
//     $.ajax({
//         url: '{{URL("admin/get-inventorys-by-data")}}',
//        type: "GET",
//        //async: false,
//          data:{'page':page, 'inventory_status':inventory_status, 'products_name':products_name, 'supplier':supplier},
//         success:function(data) {
//             $('tbody.result-data').html('');
//             $('tbody.result-data').html(data.data);
//             //$('.pagination-result').html(data.pagination_val);
//         }
//     });
// }

   
function submitSearchForm() {
    $('.fullLoader').show();
    $('#inventroy_filter_form').submit();
}

$('#products_name').donetyping(function(){
    submitSearchForm();
});

$(function () { 
    $("#inventory_status").select2({
        closeOnSelect: false,
        placeholder: 'Please status',
    }).on("select2:select", function (e) {
        var selected_inventory_status = $(e.currentTarget);
        var select_inventory_status = selected_inventory_status.val();
        var supplier = $('#supplier').val();
        var products_name = $('#products_name').val();

        //fetchInventorysData(page = '', inventory_status = select_inventory_status, supplier = supplier, products_name = products_name);
        submitSearchForm();
    }).on('select2:unselect', function (e) {
        var selected_inventory_status = $(e.currentTarget);
        var select_inventory_status = selected_inventory_status.val();     
        var supplier = $('#supplier').val();
        var products_name = $('#products_name').val(); 
       //fetchInventorysData(page = '', inventory_status = select_inventory_status, supplier = supplier, products_name = products_name);
        submitSearchForm();
    });
    $("#supplier").select2({
        closeOnSelect: false,
        placeholder: '--- Choose supplier ---',
    }).on("select2:select", function (e) {
        var selected_supplier = $(e.currentTarget);
        var select_supplier = selected_supplier.val();
        var inventory_status = $('#inventory_status').val();
        var products_name = $('#products_name').val();
        //fetchInventorysData(page = '', inventory_status = inventory_status, supplier = select_supplier, products_name = products_name);
        submitSearchForm();
    }).on('select2:unselect', function (e) {
        var selected_supplier = $(e.currentTarget);
        var select_supplier = selected_supplier.val();  
        var inventory_status = $('#inventory_status').val();
        var products_name = $('#products_name').val();
        //fetchInventorysData(page = '', inventory_status = inventory_status, supplier = select_supplier, products_name = products_name);
        submitSearchForm();
    }); 
});
</script>

<script>
    document.querySelectorAll('#watermarked').forEach(function(el) {
              el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
          });
  </script>
  
@endsection