@extends('backend.layouts.app')
@section('content')
<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h1 class="main-title float-left">{{ session('title') }}</h1>
		<ol class="breadcrumb float-right">
			<li class="breadcrumb-item">Home </li>
			<li class="breadcrumb-item active">
            <a href="{{ route('our-patners.index') }}">{{ session('title') }}</a>
                
            </li>
		</ol>
		<div class="clearfix"></div>
	</div>
</div>
<div class="container">
	<div class="col-md-12">
		<div class="card">
			<div class="card-body">
                @if($type == 'store')
				<form method="post" action="{{ route('our-patners.store') }}" enctype="multipart/form-data">
					@csrf
                @else
                <form method="post" action="{{ route('our-patners.update',$editData->id) }}" enctype="multipart/form-data">
					@csrf
                    @method('put')
                @endif
					<div class="form-row">
						<div class="form-group col-sm-3">
							<label class="control-label">Title</label>
                            <input value="@if(isset($editData)) {{ $editData->title }} @endif" type="text" name="title" id="title" class="form-control form-control-sm">
						</div>
						<div class="form-group col-sm-7">
							<label class="control-label">Upload Image <span style="color:red;">size(130*80)</span> </label>
							<input type="file" name="image_url" id="image_url" class="form-control form-control-sm">
						</div>
						<div class="form-group" style="margin-top: 28px;">
							<button class="btn btn-sm btn-success" style="width: 100px;"><i class="fa fa-upload"></i> 
                            @if($type == 'store')
                                Submit
                            @else
                                Update
                            @endif
                            </button>
						</div>
					</div>
				</form>
			</div>
		</div>

		<div class="card">
			<div class="card-body">
				{{-- <iframe style="width: 100%; height: 450px;" src="" id="pdfFrame"></iframe> --}}
				<div class="table-responsive">
					<table class="table table-sm table-bordered table-striped" width="100%" id="dataTable" style="text-align:center;">
						<thead>
							<tr>
								<th>Sl.</th>
								<th>Title</th>
								<th>Image</th>
								<th>Action</th>
							</tr>
						</thead>
						<tbody>
                        @if(sizeof($model) > 0)
							@foreach ($model as $m)
							<tr>
								<td>{{ ++$sl }}</td>
								<td>{{ $m->title }}</td>
                                <td><img src="{{ asset('/'.$m->image_url) }}" style="width: 50px;height:30px;" ></td>
								<td>
                                    <a href="{{ route('our-patners.edit',$m->id) }}" class="btn btn-sm btn-edit"><i class="fa fa-pencil" title="Edit"></i></a>
									<a class="btn btn-danger item-delete-btn btn-sm" href="{{ route('our-patners.destroy',$m->id) }}"><i class="fa fa-times"></i></a>
								</td>
							</tr>
							@endforeach
                        @endif
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@section('page_script')
<script type="text/javascript">
	$(document).ready(function(){
        $('#attachment').change(function (e) { //show Image before upload
        	var reader = new FileReader();
        	reader.onload = function (e) {
        		$('#pdfFrame').attr('src', e.target.result);
        	};
        	reader.readAsDataURL(e.target.files[0]);
        });
        var _URL = window.URL || window.webkitURL;
		$("#image_url").change(function(e) {
			var file, img;
			if ((file = this.files[0])) {
				img = new Image();
				img.onload = function() {
					if(this.width != 130 && this.height != 30){
						alert(this.width + " " + this.height);
						alert('This image is not valid');
						$('#image_url').val('');
					}
					
				};
				// img.onerror = function() {
				// 	alert( "not a valid file: " + file.type);
				// };
				img.src = _URL.createObjectURL(file);
			}
		});
    });
</script>
@endsection