@extends('dashboard.layouts.main')

@section('title', getSiteName() . ' - Dashboard - Add New Banner')

@section('content')
    <form action="{{ route('ads-banners-add-save') }}" method="post" class="pc-content" enctype="multipart/form-data">
        @csrf
        <!-- [ Main Content ] start -->
        <div class="row pt-0">
            @if(session('success'))
                <div class="col-12">
                    <div class="alert alert-success" role="alert">
                        <div class="alert-text">
                            {{ session('success') }}
                        </div>
                    </div>
                </div>
            @endif
            <div class="page-header-title">
                <h2 class="mb-3">{{ __('Add New Banner') }}</h2>
                <div class="permalink mb-3">
                    <div class="permalink d-flex justify-content-end">
						@can('add banners')
                        <button type="submit" class="btn btn-primary me-2 w-auto">{{ __('Add') }}</button>
						@endcan
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- [ sample-page ] start -->
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h5>{{ __('Banner Information') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label class="form-label" for="title">{{ __('Name') }}</label>
                            <input type="text" class="form-control" id="title" name="title" value="{{ old('title') }}">
                            @error('title')
                                <div class="alert-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label">{{ __('Banner Image') }}</label>
                            <div class="form-file mb-3">
                                <div class="imageUploadBox">
									<img src="{{ old('image') ? asset('storage/uploads/tmp/' . old('image')) : asset('assets/images/application/image.svg') }}" alt="Preview Image" class="fileImage" data-default="{{ asset('assets/images/application/image.svg') }}">
									<button class="btn btn-primary selectFile" type="button">
											<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
									</button>
								</div>
								<input type="text" readonly value="{{ old('image') }}" name="image" class="form-control boxUpload d-none" />
								<input type="file" class="file-uploader d-none" accept="image/jpeg,image/jpg,image/png,image/webp">
								@error('image')
								<div class="alert-danger mt-2">{{ $message }}</div>
								@enderror
                            </div>
                        </div>
						<div class="form-group">
                            <label class="form-label" for="step">{{ __('Categories') }}</label>
                            <div class="card">
								<div class="card-body">								
									<div class="form-check">
										<input @if(old('home')) checked @endif class="form-check-input" name="home" type="checkbox" id="cathome" data-gtm-form-interact-field-id="0">
										<label class="form-check-label" for="cathome">Home</label>
									</div>
									@foreach($categories as $category)
									<div class="form-check">
										<input @if(old('categories.' . $category->id)) checked @endif class="form-check-input" name="categories[{{$category->id}}]" type="checkbox" id="cat{{$category->id}}" data-gtm-form-interact-field-id="0">
										<label class="form-check-label" for="cat{{$category->id}}">{{$category->getInfo()->title}}</label>
									</div>
									@endforeach
								</div>
							</div>
                            @error('categories')
                                <div class="alert-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="step">{{ __('Step Between News') }}</label>
                            <input type="number" class="form-control" id="step" name="step" value="{{ old('step') }}" min="0">
                            @error('step')
                                <div class="alert-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>
						<div class="form-group">
                            <label class="form-label" for="shows">{{ __('Impressions limit') }}</label>
                            <input type="number" class="form-control" id="shows" name="shows" value="{{ old('shows') }}" min="0">
                            @error('shows')
                            <div class="alert-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>
						<div class="form-group">
                            <label class="form-label" for="shown">{{ __('Already shown') }}</label>
                            <input type="number" class="form-control" id="shown" name="shown" value="{{ old('shown') }}" min="0">
                            @error('shown')
                            <div class="alert-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="url">{{ __('Resource URL') }}</label>
                            <input type="text" class="form-control" id="url" name="url" value="{{ old('url') }}">
                            @error('url')
                                <div class="alert-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ sample-page ] end -->
        </div>
        <!-- [ Main Content ] end -->
    </form>
@endsection

@section('footer-scripts')
<script>
         $(document).on('change', '.file-uploader', function(event) {
            $(event.target).parent().find('alert-danger').remove();

			if($(event.target).hasClass('videoMarker')){
				var url = '{{ route('video-upload') }}';
			}else{
				var url = '{{ route('image-upload') }}';
			}

			var formData = new FormData;

			var file = event.target.files[0];
			var blob = new Blob([file], { type: file.type });

			formData.append('file', blob, file.name);

			$('.bg-loader').addClass('active');

			$.ajax({
				url: url,
				type: 'post',
				dataType: 'json',
				data: formData,
				cache: false,
				contentType: false,
				processData: false,
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				beforeSend: function() {

				},
				complete: function() {

				},
				success: function(json) {
					$('.bg-loader').removeClass('active');
					if(json.error){
						$(event.target).after('<div class="alert-danger mt-2">'+json.error+'</div>');
					}
					if(json.location && $(event.target).closest('.form-group').find('img').length > 0){
						$(event.target).closest('.form-group').find('img').attr('src', json.location).addClass('fileImage');
					}
					if(json.location && $(event.target).closest('.form-group').find('.dataLink a').length > 0){
						$(event.target).closest('.form-group').find('.dataLink a').attr('href', json.location).addClass('btn').addClass('btn-primary').html('<i class="fa fa-eye"></i>');
						//add video preview
						var vBox = $(event.target).closest('.form-group').find('.dataVideo');
						vBox.html('<div><video data-controls="false" src="'+json.location+'" muted="" playsinline="" loop="" autoplay=""></video></div>');
						getVideoSize(vBox);
					}
					if(json.file){
						$(event.target).closest('.form-group').find('.boxUpload').val(json.file);
					}
				}
			});
        });
    </script>
@endsection