@extends('admin.includes.app')
@push('page_external_css')
@section('content')

      <div class="row">
         <div class="col">
          <div class="card">
            <div class="card-body primary_background">
                  <div class="d-flex justify-content-center">
                   <h5 class="card-title">View Images</h5>
                  </div>
            </div>
          </div>
         </div>
      </div>
      
      <div class="row">
        <div class="col-md-12">
        <div class="col-md-12">
          <div class="card">
            <div class="card-body">
              @if (session('success'))
              <div class="alert alert-success">
              {{ session('success') }}
              </div>
              @endif
              @if ($errors->any())
                    @foreach ($errors->all() as $error)
                    <div class="alert alert-danger">{{$error}}</div>
                    @endforeach
            @endif
              <form action="{{ route('admin.view-record',[$job_record->id]) }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row">
                <input type="hidden" name="record_id" value="{{$job_record->id}}" />
                <div class="col-3">
                <div class="form-group">
                    <label for="select_file">Wall Number:{{$job_record->wall_number}}</label>
                   
                </div>
                </div>
                <div class="col-3">
                <div class="form-group">
                    <label for="select_file">Latitude:{{$job_record->lng}}</label>
                    
                </div>
                </div>
                <div class="col-3">
                <div class="form-group">
                    <label for="select_file">Longitude:{{$job_record->long}}</label>
                  
                </div>
                </div>
                
                              
                </div>


                <div class="row">
                    @foreach($job_record->image_list as $key => $image_data)
                        <div class="col-md-3">
                        <div class="img-thumbnail">
                        <center>
                            <div class="caption">
                                 <label class="checkbox-inline checkbox-left-label">Approve&nbsp;
                                    <input type="checkbox" name="image_id[]" 
                                    id="img_{{$image_data->id}}" 
                                    value="{{$image_data->id}}"
                                    class="image_approved" 
                                     {{(isset($image_data->approve_image) && $image_data->approve_image == "1")?'checked':''}}
                                    />
                                </label>
                                <a href="{{route('admin.download-image',[base64_encode($image_data->image_url)])}}" class="btn btn-sm btn-success">Download</button></a>
                                
                            </div>
                            <img width="350" height="350" alt="logo" class="center"   src="{{ $image_data->image_url }}" />
                        
                        </center>
                        </div>
                        </div>
                    @endforeach    
                </div>
                
                <br />
                 <div class="form-group">
                        <button type="submit" class="btn btn-lg btn-success">Approved</button>
                 </div>
                </form>
            </div>
          </div>
          </div>
        </div>
      </div>


@endsection

@push('page_external_script')
    

    <script>
      $( document ).ready(function() { 
          
            $('input[type=checkbox]').on('change', function (e) {
                if ($('input[type=checkbox]:checked').length > 2) {
                    $(this).prop('checked', false);
                    alert("allowed only 2");
                }
            });
                    
        });
      
    </script>
@endpush