@extends('backend.layouts.app')
@section('content')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
  <style type="text/css">
      .btn-light {
            color: #333;
            border-color: #adb5bd;
            background-color: #fff; 
        }
  </style>
    <div class="container-fluid">
        <div class="row align-items-start mt-3">
            
            <div class="col-sm-2">
                <div class="form-group">
                    <label class="control-label">Date Range</label>
                    <input type="text" class="form-control form-control-sm" id="daterange" placeholder="Date Range">
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label class="control-label">Location of Stores</label>
                    <select class="form-control form-control-sm selectpicker store_location" multiple placeholder="">
                        <option value="">--Select--</option>
                        @foreach($store_addresses as $store)
                            <option value="{{$store->complete_address}}">{{$store->complete_address}}</option>
                        @endforeach
                    </select>
                </div>
                
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label class="control-label">Name of Stores</label>
                    <select class="form-control form-control-sm selectpicker store_name" multiple>
                        <option value="">--Select--</option>
                        @foreach($store_names as $store_name)
                            <option value="{{$store_name->name}}">{{$store_name->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label class="control-label">POS Codes</label>
                    <input type="text" class="form-control pos_code form-control-sm" value="">

                    {{--
                    <select class="form-control form-control-sm selectpicker" multiple>
                        <option value="">--Select--</option>
                        @foreach($payment_methods as $payment_method)
                            <option value="{{$payment_method->id}}">{{$payment_method->name}}</option>
                        @endforeach
                    </select>
                    --}}
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label class="control-label">Item Category</label>
                    <select class="form-control form-control-sm selectpicker menu_category" multiple>
                        <option value="">--Select--</option>
                        @foreach($menu_categories as $menu_category)
                            <option value="{{$menu_category->id}}">{{$menu_category->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            
            <div class="col-sm-2">
                <div class="form-group">
                    <label class="control-label">Brand</label>
                    <select class="form-control form-control-sm brand_id" name="brand_id">
                        <option value="">--Select--</option>
                        @foreach($brands as $brand)
                            @if($user_brand)
                                <option value="{{$brand->id}}" @if($user_brand->brand_id == $brand->id) selected="" @endif>{{$brand->name}}</option>
                            @else
                                <option value="{{$brand->id}}">{{$brand->name}}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
            </div>

        </div>
        <div class="row" style="margin-top: 2%;">
            <div class="col">
                <div class="card shadow">
                    <div class="card-header border-0">
                        <div class="row align-items-between">
                            <div class="col-9">
                                <h3 class="mb-0">Sold Products</h3>
                            </div>
                            <div class="col-3 align-right" style="padding-left: 100px; ">
                                <div class="row ">
                                    <button type="button" class="btn btn-success btn-sm btn-submit">Submit</button>
                                    <button type="button" class="btn btn-primary btn-sm btn-export">Export</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="data-lists">
                            @include('backend.inventory.index-ajax')
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        
    </div>
@endsection
@section('after-scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
    <script src="{{ asset('js/inventory/index.js') }}" type="text/javascript"></script>
@endsection