@extends('front.template.master')
@section('content')

@php

  $uid = $utilitydetailData->id; 
  $uplan_name = $utilitydetailData->plan_name;
  $umajor_featues = $utilitydetailData->major_featues; 
  $uperiod = $utilitydetailData->period; 
  $udescription = $utilitydetailData->description;  
  $uattachment = $utilitydetailData->attachment; 
  $uamount = $utilitydetailData->amount; 
  $ubanner_image = $utilitydetailData->banner_image; 
  $uvideo = $utilitydetailData->video; 
  $uattach = $utilitydetailData->success_attach;

@endphp

<main id="content">
	<div class="container-fluid">
		<div class="row">
			<div style="background-image: url(../storage/app/public/utility-images/{{ trim($ubanner_image) }});" class="utility-banner">
				<h1 class="text-left my-5 pl-5 text-white">{{ trim($uplan_name) }}</h1>	
			</div>
		</div>
	</div>

    <div class="container">    		
		<div class="row">
			<div class="col-md-8 px-5"> 
	            <div class="row personal-section my-5">
	            	<div class="col-md-12">
		            	<h3>{{ trim($uplan_name) }}</h3>
		            	<h6 class="mt-4"></h6>
		            	<div class="relevant-sector">
		                    <p>Utility Charge (per user/month) :  <span><i class="fa fa-inr" aria-hidden="true"></i>  {{ trim($uamount) }} </span></p>
		                </div>	 
		                <div class="relevant-sector">
		                    <p>Free Trial : <span> {{ trim($uperiod) }} </span></p>
		                </div>	 
		                <!--<div class="relevant-sector">-->
		                <!--    <p>Major Features : <span> {{ trim($uperiod) }} </span></p>-->
		                <!--</div>	          		-->
	            	</div>

		    <!--		<div class="col-md-12">-->
		    <!--			<video width="100%" height="400px" class="mt-5" controls>-->
						<!--    <source src="../storage/app/public/utility-images/{{ trim($uvideo) }}" type="video/mp4">-->
						<!--</video>-->
		    <!--		</div>-->

		    		<div class="col-md-12 text-center mt-5">
		    			<a href="../storage/app/public/utility-attachment/{{ trim($uattach) }}" target="_blank" class="btn btn-primary btn-lg">Success Stories</a>
		    			<a href="../storage/app/public/utility-attachment/{{ trim($uattachment) }}" target="_blank" class="btn btn-primary btn-lg ml-4">Brochure</a>
		    			<a href="#" data-toggle="modal" data-target="#freeRegister" class="btn btn-primary btn-lg ml-4">Register for Free</a>
		    			<a href="#" class="btn btn-primary btn-lg ml-4">Go Premium</a>
		    		</div>
                </div>
	        </div>

	        <div class="col-md-4">
		        <div class="sidebar-area mt-5">
		            <h5> Other Softwares </h5>
		            @foreach($softwares as $u)
			            <a href="{{url('/utilitidetails/'.$u->id)}}">
		                    <div class="subscription-box" style="background: linear-gradient(rgb(255 255 255 / 82%), rgb(255 255 255 / 70%)),url(../storage/app/public/utility-images//{{ $u->logo }}); background-size: contain; background-repeat: no-repeat; background-position: center;">
		                        <p class="text-dark">{{ $u->plan_name }}</p>
		                        <!--<h5><i class="fa fa-inr" aria-hidden="true"></i><span>{{ $u->amount }}</span></h5>-->
		                        <h4>{{ str_limit(strip_tags(html_entity_decode($u->major_featues)), $limit = 150, $end = '...') }} </h4>
		                        <!--<h4>{{ $u->period }}</h4>-->
		                        <a href="{{url('/utilitidetails/'.$u->id)}}" class="btn btn-primary px-4 mt-3">View Details</a>
		                    </div>
		                </a>
			        @endforeach
		        </div>
	        </div>
	                
        </div>
    </div>
</main>



	<div class="modal" id="freeRegister">
	    <div class="modal-dialog">
	        <div class="modal-content">
	        	<button type="button" class="close text-right p-4" data-dismiss="modal">&times;</button>
		        
		        <div class="contact-enquiry">
		            <form action="" method="post" enctype="multipart/form-data">
		            @csrf()
		                <h3>Register for Free</h3>
		                <div class="row">
		                    <div class="col-md-12">
		                        <div class="form-group">
		                            <input type="text" name="name" class="form-control" placeholder="Your Name" value="" />
		                        </div>
		                        <div class="form-group">
		                            <input type="email" name="email" class="form-control" placeholder="Your Email *" value="" required="" />
		                        </div>
		                        <div class="form-group">
		                            <input type="number" name="contact" class="form-control" placeholder="Your Phone Number *" value="" required="" />
		                        </div>
		                        <div class="form-group">
		                            <input type="text" name="password" class="form-control" placeholder="Password *" value="" required="" />
		                        </div>
		                        <div class="form-group">
		                            <input type="text" name="" class="form-control" placeholder="Confirm Password *" value="" required="" />
		                        </div>
		                        <div class="form-group text-center mt-5">
		                            <input type="submit" name="btnSubmit" class="btnContact" value="Register Now" />
		                        </div>
		                    </div>
		                </div>
		            </form>
	            </div>
	        
	        </div>
	    </div>
	</div>

@endsection