@extends('layout.app')
@section('title')
    Stock Report Details
@endsection
@push('css')
  <link rel="stylesheet" href="{{asset('plugins/ekko-lightbox/ekko-lightbox.css')}}">
    
@endpush
@section('content')

<section class="content-header">
    <div class="container-fluid">
      <div class="card col-6 bg-light d-flex flex-fill">
        <div class="card-header border-bottom-0">
          <h1>{{$report->store->name}}</h1>
        </div>
        <div class="card-body pt-0">
          <div class="row">
            <div class="col-8">
              <ul class="ml-4 mb-0 fa-ul text-muted">
                <li class=""><p class="fa-li"><i class="fas fa-lg fa-building"></i></p> Address: {{$report->store->address}}</li>
                <li class=""><p class="fa-li"><i class="fas fa-lg fa-phone"></i></p> Phone : {{$report->store->contact}}</li>
                <li class=""><p class="fa-li"><i class="fas fa-lg fa-user"></i></p> Reporter: {{$report->reporter->name}}</li>
                <li class=""><p class="fa-li"><i class="fas fa-lg fa-clock"></i></p> Reported At: {{$report->created_at}}</li>

              </ul>
              <p>{{$report->note}}</p>
            </div>
            <div class="col-4 text-center">
              <img width="100%" src="{{asset($report->store->image)}}" alt="user-avatar" class="img-fluid">
            </div>
          </div>
        </div>
      </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header d-flex align-items-center">
              <h3>Report details</h3>
               <form class="d-flex align-items-center ml-auto" action="{{route('stock.report.show',$report->id)}}" method="GET">
                    <div class="form-group">
                      <input placeholder="Enter your keyword" class="form-control" value="{{request()->query('keyword')}}" name="keyword">
                    </div>
                    <div class="form-group">
                      <button class="btn btn-primary">Search</button>
                    </div>
                </form>
            </div>
            <!-- /.card-header -->
            <div class="card-body p-0">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Product Image</th>
                    <th>Product Name</th>
                    <th>Stock</th>
                    <th>Reported Images</th>
                     @if(Auth::user()->is_admin)
                    <th>Actions</th>
                    @endif
                  </tr>
                </thead>
                <tbody>

                    @if ($report_details->count() > 0)
                        @foreach ($report_details as $key=>$details)
                            <tr>
                                <td>{{$key+1}}</td>
                                <td>
                                  <img style="width: 100px" src="{{asset($details->product->image ?? '')}}" alt="">
                                </td>
                                <td>{{$details->product->title ?? ''}}</td>
                                <td>{{$details->stock}}</td>
                                <td>
                                  <div class="d-flex align-items-center">
                                    @php
                                        $shown = false;
                                    @endphp
                                    @for($i=1;$i<=5;$i++)
                                      @if ($details->{'image_'.$i})
                                          <div class="mx-1">
                                            <a target="_blank" href="{{asset($details->{'image_'.$i})}}" >
                                              @if (!$shown && isset($details->{'image_'.$i}))
                                                  @php
                                                      $shown = true;
                                                  @endphp
                                                  <!--<button class="btn btn-sm btn-success">-->
                                                  <!--  <i class="fa fa-image"></i>-->
                                                  <!--  View Images-->
                                                  <!--</button>-->
                                                  <img style="height:100px" src="{{asset($details->{'image_'.$i})}}">
                                              @endif
                                            </a>
                                          </div>
                                      @endif
                                    @endfor
                                  </div>
                                </td>
                                
                               @if(Auth::user()->is_admin)
                                <td>
                                    <a href="{{route('stock.detail.edit',$details->id)}}" class="btn btn-sm btn-success">
                                        <i class="fa fa-edit"></i>
                                        Edit
                                    </a>
                                    <a onclick="if(confirm('Are you sure you want to delete this record?')){
                                        document.getElementById('deleteForm-{{$details->id}}').submit();
                                    }" class="btn btn-sm btn-danger">
                                        <i class="fa fa-trash"></i>
                                        Delete
                                    </a>
                                    <form id="deleteForm-{{$details->id}}" action="{{route('stock.detail.delete',$details->id)}}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </td>
                                @endif
                                {{-- <td>{{$report->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',$details->id)}}" type="button" class="btn btn-sm btn-success">
                                      <i class="fa fa-edit"></i>
                                      view details
                                  </a>
                                </td> --}}
                            </tr>
                        @endforeach
                    @else
                        <p class="text-center">No data yet!</p>
                    @endif
                </tbody>
              </table>
            </div>
            {{$report_details->links()}}
            <!-- /.card-body -->
          </div>
    </div>
  </section>

@endsection
@push('scripts')
  <script src="{{asset('plugins/ekko-lightbox/ekko-lightbox.min.js')}}"></script>
  <script src="{{asset('plugins/filterizr/jquery.filterizr.min.js')}}"></script>
  <script>
    $(function () {
        $(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