@extends('marketing.main') 

@push('marketing_title') add service details | POLI - Marketing Panel @endpush

@push('page-custom-css')
    <link rel="stylesheet" href="{{ asset('assets/polipop-master/dist/css/polipop.core.min.css')}}"/>
    <link rel="stylesheet" href="{{asset('assets/polipop-master/dist/css/polipop.default.min.css')}}" />
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="{{asset('assets/css/select2.min.css')}}">
	<style type="text/css">
		body{
			overflow-y: scroll;
		}
		.remove-btn{
			right: 0;
			position: relative;
			float: right;
			margin-top: -15px;
			background: #fff;
			padding: 3px 10px;
			border-radius: 20px;
			color: #df7474;
			cursor: pointer;
			box-sizing: border-box;
			box-shadow: 0px 1px 1px 0px grey;
		}
		input::-webkit-inner-spin-button, ::-webkit-inner-spin-
		{
			display: none;
		}

	</style>
@endpush

@section('MarketingPanel')

    <div class="content">
    	<div class="container">
		    <div class="row">
		        <div class="col-md-6">
		            <h2 class="page-title"> Add Service</h2>
		            <div class="page-pretitle"> 
		             	<a href="{{ Request::url() }}"> Add Service Details </a>
		            </div>
		        </div>
		        <div class="col-md-3">
		        	<p class="page-title"> {{ Str::of(explode(' ',Auth::guard('marketing')->user()->name)[0])->limit(12,'..') }} </p>
		        	<p class="page-pretitle show_time"> {{ date('D,d M') }} <span></span> </p> 
		        </div>
		    </div>
		    <div class="row">
    			<div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                        	<!-- <label for="select_box">Select Services to edit</label>
                        	<select id="select_box" name="select_box" class="form-control">
                        		<option selected hidden value=""> Edit Service Details </option>
                        		@foreach($services as $i => $service )
                        		<option value="{{ $service->id }}"> {{ $service->service_code }} => {{ $service->service_name }}</option>
                        		@endforeach
                        	</select> -->
                    
                            <form class="needs-validation" id="categoryform" method="post" action="{{ route('marketing.save.service.details') }}" autocomplete="off" novalidate accept-charset="utf-8">
                            	@csrf
                                <div class="row g-2">
                                    <div class="mb-3 col-md-4">
                                        <label for="servicename" class="form-label">Service Name</label>
                                        <input type="text" class="form-control" name="servicename" placeholder="Service Name" required="">
                                        <!-- <div class="valid-feedback">Looks good!</div> -->
                                        <!-- <div class="invalid-feedback">Service Name Required*</div> -->
                                    </div>
                                    <div class="mb-3 col-md-3">
                                        <label for="servicecode" class="form-label">Service Code</label>
                                        <input type="text" class="form-control" name="servicecode" placeholder="Service Code" required="">
                                        <!-- <div class="valid-feedback">Looks good!</div> -->
                                        <!-- <div class="invalid-feedback">Service Code Required*</div> -->
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label for="serviceprice" class="form-label">Service Price</label>
                                        <input type="number" class="form-control" name="serviceprice" placeholder="Service Price" required="">
                                        <!-- <div class="valid-feedback">Looks good!</div> -->
                                        <!-- <div class="invalid-feedback">Service Price Required*</div> -->
                                    </div>
                                    <div class="mb-3 col-md-2">
                                        <label for="servicestatus" class="form-label">Is Active</label>
                                        <select class="form-control" name="servicestatus" id="servicestatus" required>
                                        	<option selected hidden value="">--Select--</option>
                                        	<option value="1">Active</option>
                                        	<option value="0">Inactive</option>
                                        </select>
                                        <!-- <div class="valid-feedback">Looks good!</div> -->
                                        <!-- <div class="invalid-feedback">Service Price Required*</div> -->
                                    </div>
                                </div>
                               <div class="row">
	                               	<div class="col-md-6">
	                               		<input type="number" class="form-control" max="5" id="addelement_count" placeholder="no. of rows, max 5">
	                               	</div>
	                               	<div class="col-md-2">
	                               		<span class="element_length_count form-control border-0"></span>
	                               	</div>
	                               	<div class="col-md-4">
	                               		<a role="button" href="javascript:void(0)" class="btn btn-primary sm rounded ml-2"  onclick="addElement()"> Add Plan <i class="fas fa-plus"></i></a>
	                               		<a role="button" href="javascript:void(0)" class="btn btn-outline-danger sm rounded ml-2"  onclick="RemoveElementAll()">Remove All <i class="fas fa-trash"></i></a>
	                               	</div>
	                               	 <div class="subcategory" id="subcategory">
	                                	<div class="content" id="content">                         		
	                                	</div>                              	
	                                </div>
                               </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                      <input class="form-check-input" type="checkbox" value="" id="check1" name="check1" required="">
                                      <label class="form-check-label" for="check1">
                                        all checked
                                      </label>
                                      <div class="invalid-feedback">You must check all before submitting.</div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save</button>
                            </form>
                        </div>
                    </div>
                </div>
		    </div>
		</div> 
    </div>
@endsection

@push('marketing-page-js')
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="{{asset('assets/js/select2.min.js')}}"></script>
<script type="text/javascript">

	// Starter JavaScript for disabling form submissions if there are invalid fields
	(()=> {
	  'use strict'
	  // Fetch all the forms we want to apply custom Bootstrap validation styles to
	  var forms = document.querySelectorAll('.needs-validation')
	  // Loop over them and prevent submission
	  Array.prototype.slice.call(forms)
	    .forEach( (form) => {
	      form.addEventListener('submit', (event) => {
	        if (!form.checkValidity()) 
	        {
	          event.preventDefault()
	          event.stopPropagation()
	        }
	        form.classList.add('was-validated')
	      }, false)
	    })
	})();

	var grandcount = 0 ;
	addElement = (e) => {

		let count = $("#addelement_count").val() ;

		if( count=='' && count < 1 || count > 5){
			count = 1;
		}

		for (var i = 0 ; i < count; i++) {
			grandcount++;
			let divid = Math.floor(Math.random() * 100) + 1;
			let inner_html = '';
			inner_html += '<div class="row g-2 p-3 m-2 removedivclass" style="background: #ddd;" id="RemoveDiv_'+divid+'"> ';
			inner_html += ' <div class="float-right">'; /* Sub Category Plan :'+grandcount; */
			inner_html += ' <span class="remove-btn" onclick="RemoveDiv('+ "'" + divid + "'" +')"> <i class="fas fa-times"></i></span> ';
			inner_html += ' </div> ';
			inner_html += ' <div class="mb-1 col-md-4"> ';
			inner_html += ' <label for="" class="form-label">Plan Name</label>'; 
			inner_html += '<input type="text" class="form-control" name="subcategoryname[]" placeholder="Name" required="">'; 
			inner_html += '</div>'; 
			inner_html += '<div class="mb-1 col-md-2">'; 
			inner_html += '<label for="" class="form-label">Plan price</label>'; 
			inner_html += '<input type="text" class="form-control" name="subcategoryprice[]" placeholder="Price" required="">'; 
			inner_html += '</div>';
			inner_html += '<div class="mb-1 col-md-6">';
			inner_html += '<label for="" class="form-label">Plan Details</label>';
			inner_html += '<textarea class="form-control" name="subcategorydetails[]" placeholder="Details" required="" rows="1"></textarea>';
			inner_html += '</div>';
			inner_html += '</div>';

			$("#subcategory #content").append( inner_html );
			$("#addelement_count").val('') ;
			count_element() ;
			if( count_element() < 1 ) { grandcount = 0 } 
		}
	}

    RemoveDiv=(e)=>{
    	window.confirm('This will be removed') ? $("#RemoveDiv_"+e).slideDown('slow',()=>{ $("#RemoveDiv_"+e).remove() }) : '';
    	count_element();
    }

	RemoveElementAll=(e)=>{
		window.confirm('All added elements will be removed') ? $('#subcategory #content').html('') : '';
		count_element();
		grandcount = 0;
	}

	count_element=(count)=>{
		let len = $(".removedivclass").length;
		( len > 0 ) ? $(".element_length_count").html(len) : $(".element_length_count").html('');
		return len;
	}

	(()=> {
	    $('#select_box').select2();
	})();
	
</script>
@endpush