@extends('admin.media.layout')
@section('content')
<style type="text/css">
	
	.modal-wrapper{position: fixed;width: 100%;height: 100%;top: 0;background: #000000b8;z-index: 99999999999;left: 0;display: none; }
	.image-modal{padding: 1.5vw 20vw;}
	.my-modal-content {position: relative;display: flex;color: #ffff;background: #ffffff;flex-direction: column;}
	.my-head {width: 100%;display: flex;flex-direction: row;justify-content: space-between;background: #e3e3e3;
		align-items: center;color: #000;}
		.my-head h2 {font-size: 1.25vw;margin: 0;}
		.my-head a {padding: 1vw;}
		.my-image-loader {border: 0.8vw solid #9e9e9e;border-radius: 50%;border-top: 0.8vw solid #2196f3;width: 7.125vw;height: 7.125vw;-webkit-animation: spin 0.5s linear infinite; / Safari /animation: spin 0.5s linear infinite;display: none; position: absolute;top: 40%;left: 42.5%;z-index: 1;}
		/ Safari /
		@-webkit-keyframes spin {
			0% { -webkit-transform: rotate(0deg); }
			100% { -webkit-transform: rotate(360deg); }
		}
		@keyframes    spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
		#take_images {flex-wrap: wrap;justify-content:flex-start;gap: 0.3vw;height: 37.5vw;overflow-y: scroll;padding: 0 1vw;}
		.select-box img {height: 9.375vw;width: 8.375vw;object-fit: contain;}
		.select-box {padding: 1vw;border: 1px solid grey;}
		.tabs-nav {display: flex;align-items: center;gap: 1vw;}
		.tabs-nav h2,a{ color: #000;  }
		.tabs-nav a{ padding: 1vw;  }
		.modal-dialog {width: 100%;}
		.tabs-nav a.active{ background: #fff;  }
		.tab-content .tab{display: none;}
		.tab-content .active{display: flex;}
		.tab-content{padding: 0.625vw;}
		.select-box{position: relative;}
		.select-box.selected::before {content: '+';position: absolute;height: 1.25vw;width: 1.25vw;background: dodgerblue;top: 3px;right: 3px;font-size: 35px;color: #fff;text-align: center;line-height: 0.5;}
		.select-box.selected:after {content: '';position: absolute;border: 3px solid dodgerblue;top: 0;left: 0;width: 100%;height: 100%;}
		.my-foot {padding: 1vw;background: #e3e3e3;display: flex;justify-content: space-between;}
		.my-foot .btn {background: dodgerblue;text-transform: uppercase;font-weight: 600;color: #fff;transition: 500ms;}
		.input-image{width: 100%;object-fit: contain;max-height: 400px;}
		.myVideo{max-height: 250px;}
		.upload-section {width: 100%;height: 37.5vw;z-index: 1;opacity: 0;}
		.upload-info {display: flex;position: absolute;flex-direction: column;align-items: center;width: 100%;height: 80%;justify-content: center;}
		.upload-info span {color: #000;font-size: 20px;font-weight: 500;}
		.upload-info a {background: dodgerblue;text-transform: uppercase;font-weight: 600;color: #fff;transition: 500ms;}
		.upload-info h4 {margin: 0;color: #000;}
		.upload-info h4 {color: #000;}
		.dropzone .dz-message {position: absolute;left: 43%;top: 43%;}
		.modal-body {height: 37.5vw;}
		.dropzone{height: 100%}
	</style>
	<div class="modal-wrapper">
		<div class="image-modal" id="img-cs-mdl">
			<div class="my-modal-content">
				<div class="my-head">
					<div class="tabs-nav">
						<a href="javascript:;" data-pane=".tab-1" class="tab1btn"><h2>Upload Image</h2></a>
						<a href="javascript:;" data-pane=".tab-2" class="tab2btn active"><h2>Select Image</h2></a>
					</div>
					<a href="javascript:;" id="close"><i class="ion ion-close-round"></i></a>
				</div>
				<div class="tab-content">
					<div class="tab-1 tab tab1body" id="tab-1">
						<div class="modal-dialog">
							<!-- Modal content-->
							<div class="modal-content">
								<div class="modal-body">
									<form action="{{ url('admin/media/uploadimage') }}" enctype="multipart/form-data"
									class="dropzone " id="my-dropzone">
									{{ csrf_field() }}
									<p>Click or Drop Images in the Box for Upload.</p>
								</form>
							</div>
						</div>
					</div>
				</div>
				<div class="active tab-2 tab tab2body" id="take_images">
					<div class="my-image-loader"></div>

				</div>
			</div>
			<div class="my-foot">
				<a href="javascript:;" class="btn" id="reframage">Refresh</a>
				<a href="javascript:;" class="btn load_btn" page_no="1">Load More</a>
				<a href="javascript:;" disabled="" class="btn insert" data-insert="">Insert Image</a>
			</div>
		</div>
	</div>
</div>
<a class="btn btn-primary" style="margin-left: 15px;" id="image-modal">Upload Image</a>
@endsection