@extends('admin.layout.app')
@section('title','JobCard Image Preview')
@push('headerscript')
    <style>
        .gallery-img {
            height: 150px;
            width: 300px;
        }

        .gallery-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
@endpush
@section('content')
    <div class="content" style="color: black">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="page-title-box">
                        <h4 class="page-title">JobCard Image Preview</h4>
                        <div class="pull-right m-r-15" id="pdf_button">
                            <a href="{{route('job-card-image-upload.index')}}"
                               class="btn btn-info btn-rounded waves-effect waves-light m-b-2"><i
                                    class=" mdi mdi-keyboard-backspace"></i> Back</a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row ">
                                <div class="col-md-12">
                                    <h3>Attached Images JobCard No.: {{$jobCard->job_card_number}}</h3>
                                </div>
                            </div>
                            <div class="row m-t-30">
                                @foreach($images as $image)
                                    <div class="col-md-4 text-center m-b-30">
                                        <div class="gallery-img text-center">
                                            <a href="{{$image->job_card_image}}" target="_blank">
                                                <img src="{{$image->job_card_image}}" alt="logo">
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('footerscript')

@endpush