@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content">
                    <div class="top_status_bar">
                        <div id="top_progress_bar" class="progress_bar">
                        </div>
                    </div>
                    <div class="breadcrumbs">
                        <ul>
                            <li><a href="{{route('admin.dashboard')}}">Home</a></li>
                            <li><a href="{{route('admin.stocks.index')}}">Ingredient List</a></li>
                        </ul>
                        <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
                    </div>
                </div>
                <div class="page-content">
                    <div class="portlet">
                        <!-- BEGIN PAGE HEADER-->
                        <div class="portlet-title page_heading">
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="caption">
                                        <h2 style="font-weight: 600; margin-top: 0;">Ingredient Listing</h2>

                                    </div>
                                </div>
                                <div class="col-md-3 text-right">
                              
                              @php ($get_permission = permission('ingredient','full-permission'))
                               @if($get_permission)
                              <a href="{{route('admin.stocks.create')}}" class="btn theme_btn_round">Add New</a>
                               @endif
                              
                                </div>

                            </div>
                        </div>

                     

                        <!-- BEGIN PAGE BAR -->
                        <div class="row">

                        <div class="col-md-12" style=" margin-bottom: 0px;">


                        <div class="row">
                            <div class="col-md-2">
                           

                            <select name="column_drop" id="column_drop" class="form-control select2 column_drop">
                                                        <option></option>
                                                        <option value="stock_name">Stock Name</option>
                                                        <option value="category">Category</option>
                                                    </select>
                                
                            </div>
                            <div class="col-md-2">
                            <select name="value_drop" id="value_drop" class="form-control select2 value_drop">
                                                        <option></option>
                                                      
                                                    </select>
                            </div>
                                
                
                            <div class="col-md-2">

                           

                               <div class="caption">
                                                    <button class="theme_btn_round btn" type="button" id="filter" name="load" value="load" style="">
                                                        Filter
                                                    </button>
                                                </div>
                                
                            </div>

                            <div class="column_filters" style="display: block;">

                            

                            </div>


                        </div>
                    </div>
                            <div class="col-md-12">
                                <!--THIS IS CONTENT DIV START-->
                                <div class="portlet-body flip-scroll">
                                    <div class="row">





                                        <div class="col-sm-12 t-5">
                                            <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
                                                <div class="table-container">
                                                    <table class="table table-striped table-bordered table-hover datatable_stocks stock_table">
                                                        <thead class="flip-content thead">
                                                            <tr>
                                                               
                                                                <th>Item Code</th>
                                                                <th>Item Name</th>
                                                                <th>Category </th>
                                                                <th>Status</th>
                                                                <th>Current Cost</th>
                                                                <th>Supplier Cost</th>
                                                                <th>Current Stock</th>
                                                                <th>Stock Value</th>
                                                                <th>Action</th>


                                                            </tr>
                                                        </thead>
                                                        <tbody>

                                                        <!--=====================-->

                                                        <!--=====================-->


                                                        </tbody>

                                                    </table>


                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--THIS IS CONTENT DIV END-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!-- //SWEET_ALERT START// -->
<div id="sweetalert_wrap" class="sweet_alert_wrap">
    <!-- Sweet alert -->
    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true" data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true" data-animation="pop" data-timer="null" >
        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
            <span class="sa-body pulseWarningIns"></span>
            <span class="sa-dot pulseWarningIns"></span>
        </div>
        <h2>Do you want to delete?</h2>
        <div class="sa-button-container">
            <button class="cancel" tabindex="2">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1">Confirm</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/croppie.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('css/sweetalert.css')}}" rel="stylesheet" type="text/css"/>

<style>
    .table-container {
        padding: 50px 0 0;
    }
    .modal .right_side_task {
        border-left: 2px solid #f1f1f1 !important;
    }


    span.select2-selection__clear{
      display: none;
     }

     .select2 option {
    text-transform: uppercase !important;
}

.display_pic:hover .overlay-img {
    display: block;
}

.display_pic .overlay-img {
    position: absolute;
    background: #eee;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    opacity: 0.7;
    text-align: center;
    padding: 58px 0;
    display: none;
}

.display_pic .overlay-img {
    color: #999;
    font-size: 30px;
}


</style>
@stop


@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/datatables/datatables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js')}}"></script>
<script src="{{asset('js/general.js')}}"></script>
<script src="{{asset('js/croppie.js')}}"></script>
<script src="{{asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>


@include('admin.js.stock');
@stop