@extends('layout.app')
@section('title')
    Stock Reports
@endsection
@push('css')
  <link rel="stylesheet" href="{{asset('plugins/select2/css/select2.min.css')}}">
  <link rel="stylesheet" href="{{asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}">
  <link rel="stylesheet" href="{{asset('plugins/daterangepicker/daterangepicker.css')}}">
  <style>
      .select2-selection__rendered {
        color: #fff !important;
    }

    .select2-selection__choice{
        color: #000 !important;
    }

    /*.select2-container .select2-selection--single{*/
    /*    height: 38px !important;*/
    /*    background-color: #343a40 !important;*/
    /*    color: #fff !important;*/
    /*}*/

    /*.select2-container .select2-selection--multiple {*/
    /*    color: white;*/
    /*    background-color: #343a40 !important;*/

    /*}*/
  </style>
@endpush
@section('content')
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Stock Reports</h1>
          </div>
        </div>
      </div>
    </div>
    <section class="container-fluid">
        <form method="GET" class="row align-items-center ml-auto">
            
            <div class="col-md-4">
                <label>Store</label>
                <select name="store[]" multiple style="width:400px" class="form-control select2">
                    @foreach(App\Store::all() as $store)
                        <option 
                        @if(isset($_GET['store']) && in_array($store->id,$_GET['store']))
                            selected
                        @endif
                        value="{{$store->id}}">{{$store->name}}</option>
                    @endforeach
                </select>
            </div>
            
            <div class="col-md-4">
                <label>Store Group</label>
                <select name="store_category[]" multiple style="width:400px" class="form-control select2">
                    @foreach(App\StoreCategory::all() as $store)
                        <option 
                            @if(isset($_GET['store_category']) && in_array($store->id,$_GET['store_category']))
                                selected
                            @endif
                        value="{{$store->id}}">{{$store->name}}</option>
                    @endforeach
                </select>
            </div>
            
            <div  class="col-md-4">
                <label>Category</label>
                <select name="category[]" multiple class="form-control select2"> 
                    <option value="">Choose category</option>
                    @foreach(App\Category::all() as $category)
                    <option
                     @if(isset($_GET['category']) && in_array($category->id,$_GET['category']))
                        selected
                    @endif
                    value="{{$category->id}}">{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            
            <div  class="col-md-4">
                <label>Product</label>
                <select name="product[]" multiple class="form-control select2"> 
                    <option value="">Choose product</option>
                    @foreach(App\Product::all() as $product)
                    <option
                     @if(isset($_GET['product']) && in_array($product->id,$_GET['product']))
                        selected
                    @endif
                    value="{{$product->id}}">{{ $product->title }}</option>
                    @endforeach
                </select>
            </div>
            
            <div class="col-md-2">
                <label>Date</label>
                <input type="text form-control py-2" required name="date" id="date" style="width:100%">
            </div>
                   
            <div class="col-auto ml-auto mt-2">
                <button type="submit" formaction="{{route('stock.report.index')}}" class="btn btn-primary mx-2">
                    <i class="fas fa-search"></i>
                    Search
                </button>
                <button type="submit" formaction="{{route('stock.report.preview')}}" class="btn btn-primary mx-2">
                    <i class="fas fa-eye"></i>
                    Preview
                </button>
                <button type="submit" formaction="{{route('stock.report.export')}}" class="btn btn-success">Export</button>
            </div>
        </form>
    </section>


    @if(isset($type) && $type == 'preview')
    <section class="content">
        <div class="container-fluid pt-3">
            <div class="card" style="overflow:auto">
                
                <div class="card-body">
                    <table class="table table-bordered">
                    <thead>
                    <tr>
                      <th>Product</th>
                      @foreach($stores as $store)
                        <th>{{$store->name}}</th>
                      @endforeach
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($products as $product)
                        <tr>
                            <td>{{$product->description}}</td>
                            @foreach($stores as $store)
                                @php($stock = $store->lastReportedStock($product->id,$date))
                                 <td @if($stock <= 12) class="bg-warning" @endif>{{$stock}}</td>
                            @endforeach
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </section>
    @else
    <section class="content">
    <div class="container-fluid pt-3">
        <div class="card">
            <!-- /.card-header -->
            <div class="card-body p-0">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Reporter</th>
                    <th>Store</th>
                    <th>Number of reported products</th>
                    <th>Note</th>
                    <th>Reported At</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>

                    @if ($reports->count() > 0)
                        @foreach ($reports as $key=>$report)
                            <tr>
                                <td>{{$key+1}}</td>
                                <td>{{$report->reporter->name ?? ''}}</td>
                                <td>{{$report->store->name ?? ''}}</td>
                                <td>{{$report->details->count()}}</td>
                                <td>{{$report->note ?? ''}}</td>
                                <td>{{$report->created_at}}</td>
                                <td>
                                  <a title="edit" href="{{route('stock.report.show',$report->id)}}" type="button" class="btn btn-sm btn-success">
                                      <i class="fa fa-edit"></i>
                                      view details
                                  </a>
                                  
                                  @if(Auth::user()->is_admin)
                                  <a 
                                    onclick="if(confirm('Are you sure you want to delete this?')){
                                        event.preventDefault();
                                        document.getElementById('stockReportDelete-{{$report->id}}').submit();
                                      }"
                                  type="button" class="btn-sm btn btn-danger">
                                    <i class="fas fa-trash"></i>
                                    Delete
                                  </a>

                                  <form id="stockReportDelete-{{$report->id}}" action="{{route('stock.report.delete',$report->id)}}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                </form>
                                @endif
                                </td>

                            </tr>
                        @endforeach
                    @else
                        <p class="text-center">No data yet!</p>
                    @endif
                </tbody>
              </table>
            </div>
            <!-- /.card-body -->
            <div class="card-footer">
                {{$reports->appends(request()->all())->links()}}
            </div>
          </div>
    </div>
  </section>
  @endif

@endsection
@push('scripts')
  <script src="{{asset('plugins/moment/moment.min.js')}}"></script>
  <script src="{{asset('plugins/daterangepicker/daterangepicker.js')}}"></script>
  <script src="{{asset('plugins/ekko-lightbox/ekko-lightbox.min.js')}}"></script>
  <script src="{{asset('plugins/filterizr/jquery.filterizr.min.js')}}"></script>
  <script src="{{asset('plugins/select2/js/select2.full.min.js')}}"></script>
  <script>
    $(function () {
        $('.select2').select2({ width: '100%' })
        var dates = {!!json_encode($_GET['date'] ?? '')!!};

        $('#date').daterangepicker({
          autoUpdateInput: false,
          minYear: 2022,
          locale: {
              cancelLabel: 'Clear'
          },
          format:'YYYY-MM-DD'
        });

        if(dates){
          $('#date').val(dates);
        }

        $('#date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD')+' - '+picker.endDate.format('YYYY-MM-DD'));
        });




        $(document).on('click', '[data-toggle="lightbox"]', function(event) {
          event.preventDefault();
          $(this).ekkoLightbox({
            alwaysShowClose: true
          });
        });

        $('.filter-container').filterizr({gutterPixels: 3});

        $('.btn[data-filter]').on('click', function() {
          $('.btn[data-filter]').removeClass('active');
          $(this).addClass('active');
        });
      })
  </script>
@endpush