@extends('admin.layouts.master')

@section('page-title') عرض صور السلايدر @endsection
@push('main-sliders-active') m-menu__item--active @endpush

@section('content')
<div class="row">
	<div class="col-md-12">
		<!--begin::Portlet-->
		<div class="m-portlet m-portlet--tab">
			<div class="m-portlet__head">
				<div class="m-portlet__head-caption">
					<div class="m-portlet__head-title">
						<span class="m-portlet__head-icon">
							<i class="fa fa-image"></i>
						</span>
						<h3 class="m-portlet__head-text">
							<span> ادارة صور السلايدر </span>
						</h3>
					</div>
				</div>
			</div>
			<div class="m-portlet__body">
				<form action="{{ route('admin.sliders.store') }}" method="POST" class="m-form m-form--label-align-left- m-form--state-" id="m_form" enctype="multipart/form-data">
					@csrf
					<div class="m-portlet__body m-portlet__body--no-padding">
						<div class="m-form__heading">
							<h3 class="m-form__heading-title">اضافة سلايدر جديد</h3>
						</div>

						@include('admin.includes.alerts')

						<div class="form-group m-form__group row">
							<div class="col-lg-6 m-form__group-sub">
								<label for="action_type" class="form-control-label"> عند الضغط على الاعلان يتم توجيه المستخدم لصفحة <strong> (اختياري) </strong></label>
								<div class="m-radio-inline">
									<label class="m-radio">
										<input type="radio" name="action_type" value="none" id="target_none" checked> عدم التوجيه (الاعلان ثابت)
										<span></span>
									</label>
									<label class="m-radio">
										<input type="radio" name="action_type" value="product" id="target_product"> واجهة منتج
										<span></span>
									</label>
									<label class="m-radio">
										<input type="radio" name="action_type" value="company" id="target_company"> واجهة شركة
										<span></span>
									</label>
								</div>
								@if ($errors->has('action_type'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('action_type') }}
									</strong>
								</span>
								@endif
							</div>
							<div class="col-lg-6 m-form__group-sub type_id-list">
								<label for="type_id" class="form-control-label">الصفحة المحوّل لها <strong> (اختياري) </strong></label>
								<select id="type_id" name="type_id" class="form-control m-input{{ $errors->has('type_id') ? ' is-invalid' : '' }}" disabled="disabled">
									<option value="0">عدم التحويل لأي صفحة</option>
								</select>
								@if ($errors->has('type_id'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('type_id') }}
									</strong>
								</span>
								@endif
							</div>
						</div>

						<div class="form-group m-form__group row">
							<div class="col-lg-6 m-form__group-sub">
								<label for="is_advertisment" class="form-control-label"> نوع الاعلان <strong> * </strong></label>
								<div class="m-radio-inline">
									<label class="m-radio">
										<input type="radio" name="is_advertisment" value="0" checked> اعلان ثابت - بانر
										<span></span>
									</label>
									<label class="m-radio">
										<input type="radio" name="is_advertisment" value="1"> اعلان عند تشغيل التطبيق
										<span></span>
									</label>
								</div>
								@if ($errors->has('is_advertisment'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('is_advertisment') }}
									</strong>
								</span>
								@endif
							</div>
							<div class="col-lg-6 m-form__group-sub">
								<label class="form-control-label">صورة<strong> * </strong> </label>
								<div class="input-group m-input-group">
									<div class="input-group-prepend">
										<span class="input-group-text">
											<i class="la la-image m--font-success"></i>
										</span>
									</div>
									<div class="custom-file">
										<input type="file" id="image" name="image" value="{{ old('image') }}" class="custom-file-input" accept="image/*">
										<label class="custom-file-label" for="image">اختيار الصورة</label>
									</div>
									<div class="input-group-append">
										<button type="submit" class="btn btn-primary">
											<span>
												اضافة
											</span>
										</button>
									</div>
								</div>
								@if ($errors->has('image'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('image') }}
									</strong>
								</span>
								@endif
							</div>
						</div>
					</div>
				</form>

				<div class="m-separator m-separator--dashed m-separator--lg"></div>
				<div class="m-form__heading">
					<h3 class="m-form__heading-title">عرض جميع صور السلايدر</h3>
				</div>

				<div id="table-container">
					@include('admin.sliders.table')
				</div>
			</div>
		</div>
	</div>
</div>
@stop

@push('page_level_style')
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
@endpush

@push('page_level_script')
	<script src="{{ URL::asset('/assets/admin/datatables.js') }}"></script>
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
	<script type="text/javascript">
		$(document).on('click', '.pagination a',function(event) {
			event.preventDefault();
			$('li').removeClass('active');
			$(this).parent('li').addClass('active');
			var url = $(this).attr('href');
			getData(url);
		});
		  
		function getData(url, name) {
			$('#load').show();
			$.ajax({
				url : url,
				data: {
					name: name
				}
			}).done(function (data) {
				$("#table-container").empty().html(data);
				$('#load').hide();
			});
		}

		$(document).on('click', '.advertise_slider', function (e) {
			e.preventDefault();
			$('#load').show();
			var id = $(this).data('id');
			var checked = $(this).is(":checked") ? 1 : 0;
			var dataString = "id=" + id + "&checked=" + checked;

			$.ajax({
				type: "GET",
				url: admin_url + "/sliders/advertise",
				data: dataString,
				success: function(data) {
					$('#load').hide();
					Swal.fire('', data.message, data.status? 'success' : 'error').then (function () {
						var url = $(this).attr('href');
						getData(url);
					});
				}
			});
			$('#load').hide();
		});
		/*********************************************************/
		$(document).on('click', '.activate_slider', function (e) {
			e.preventDefault();
			$('#load').show();
			var id = $(this).data('id');
			var checked = $(this).is(":checked") ? 1 : 0;
			var dataString = "id=" + id + "&checked=" + checked;

			$.ajax({
				type: "GET",
				url: admin_url + "/sliders/activate",
				data: dataString,
				success: function(data) {
					$('#load').hide();
					Swal.fire('', data.message, data.status? 'success' : 'error').then (function () {
						var url = $(this).attr('href');
						getData(url);
					});
				}
			});
			$('#load').hide();
		});
		/*********************************************************/
		$('#type_id').select2();
		$("#target_none").click (function () {
			$("#type_id").prop('disabled', 'disabled');
		});
		$("#target_product").click (function () {
			$("#type_id").prop('disabled', false);
			$('#type_id').select2({
				ajax: {
					url: admin_url + '/products/list_active_products',
				}
			});
		});
		$("#target_company").click (function () {
			$("#type_id").prop('disabled', false);
			$('#type_id').select2({
				ajax: {
					url: admin_url + '/companies/list_active_companies',
				}
			});
		});
	</script>
@endpush