@extends('adminlayout.mobile_sidebar')

@section('content')

<style>
.mainTop{
	ackground-color: rgb(239, 239, 239);
    background-size: cover;
    display: flex;
    justify-content: center;
}
.maxWidth {
    max-width: 450px;
}
.mainRoot{
	display: flex;
    flex-direction: column;
    background: #fff;
    width: 100%;
    min-width: 320px;
	min-height: 100%!important;
	padding-bottom: 15px;
}
.sticky-top {
    z-index: 1111 !important;
}
.headerNav {
	background: #fff;
    opacity: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
	padding: 0.8rem 0.6rem !important;
}
.boxShadow {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)!important;
}
.navLeftText {
    color: #111111;
}
.innerHeadText{
	font-size: 16px;
}
.backIcon {
    margin-right: 15px;
}
.backIcon img{
	width: 21px;
}
.m-t-10{
	margin-top: 10px;
}
.mobDtable .table th, .mobDtable .table td {
    padding: 0.5rem;
    vertical-align: middle;
    font-size: 14px;
    color: #111111;
}
</style>

<div class="nk-content-body">
	<div class="mainTop">
	<div class="mainRoot maxWidth">
		<div class="navTop sticky-top">
			<nav id="" class="navbar navbar-expand-lg headerNav boxShadow">
				<div class="navLeftText">
					<a class="backIcon" href="{{ url()->previous() }}"><span><img src="{{url('/assets/images/mob-dash/back-arrow.png')}}"></span></a> <span class="innerHeadText">Service Details</span>
				</div>
				
			</nav>
		</div>
		<div class="container">
            <div class="nk-block-head nk-block-head-sm m-t-10">
                <div class="nk-block-between g-3">
                    <div class="nk-block-head-content">
                       
                        @if(Session::has('message'))
                            <p class="text-info">
                                {{ Session::get('message') }}
                            </p>
                        @endif
                        @if($errors->any())
                        <p class="text-danger">
                            {{ implode('', $errors->all(':message')) }}
                        </p>
                        @endif
                    </div>
                    <div class="nk-block-head-content">
                        <a href="{{ url()->previous() }}" class="btn btn-outline-light bg-white d-none d-sm-inline-flex"><em class="icon ni ni-arrow-left"></em><span>Back</span></a>
                        <a href="{{ url()->previous() }}" class="btn btn-icon btn-outline-light bg-white d-inline-flex d-sm-none"><em class="icon ni ni-arrow-left"></em></a>
                    </div>
                </div>
            </div><!-- .nk-block-head -->
            <div class="nk-block">
                <div class="card card-bordered">
                    <div class="card-aside-wrap">
                        <div class="card-content">
                            <div class="card-inner">
                                <div class="nk-block">
                                    <div class="nk-block-head">
                                        <h5 class="title">{{ $data->service_details->name ?? '' }}</h5>
                                        <p class="text-danger">Commission is disbursed on professional fee and not at price.</p>
                                        {{-- <p>Basic info, like service name, documents and features.</p> --}}
                                    </div><!-- .nk-block-head -->
                                    <div class="profile-ud-list">
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Service Name</span>
                                                <span class="profile-ud-value">{{ $data->name }}</span>
                                            </div>
                                        </div>
                                        @if($data->return_file=='' || $data->return_file==null)
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Price</span>
                                                <span class="profile-ud-value">{{ $data->price }} Rs</span>
                                            </div>
                                        </div>
                                        @endif
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Government Fee</span>
                                                <span class="profile-ud-value">{{ $data->government_fee }} Rs</span>
                                            </div>
                                        </div>
                                        @if(Auth::user()->hasRole('suvidha_kendra'))
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Cashback</span>
                                                <span class="profile-ud-value">{{ $data->sk_commission . ' ' . $data->commission_type }}</span>
                                            </div>
                                        </div>
                                        @endif
                                        @if(Auth::user()->hasRole('user') && $data->u_commission > 0)
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Cashback</span>
                                                <span class="profile-ud-value">{{ $data->u_commission . ' ' . $data->commission_type }}</span>
                                            </div>
                                        </div>
                                        @endif
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Documents</span>
                                                <span class="profile-ud-value">{{ $data->documents }}</span>
                                            </div>
                                        </div>
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Training Video</span>
                                                <span class="profile-ud-value">
                                                    <a href="{{ $data->video_url }}" target="_blank">View</a>
                                                </span>
                                                                                                {{-- @foreach ($arr as $item)
                                                    @php $videourl = $item @endphp
                                                @endforeach
                                                <span class="profile-ud-value">
                                                    <iframe width="300" height="150"
                                                    src="https://www.youtube.com/embed/{{ $videourl }}">
                                                    </iframe>
                                                </span> --}}
                                            </div>
                                        </div>
                                    </div><!-- .profile-ud-list -->
                                </div><!-- .nk-block -->
                                <div class="nk-block">
                                    <div class="nk-block-head nk-block-head-line">
                                        <h5 class="title overline-title text-base">Features</h5>
                                    </div><!-- .nk-block-head -->
                                    <div class="bq-note">
                                        <div class="bq-note-item">
                                            <div class="bq-note-text">
                                                <p>{{ $data->features }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="nk-block">
                                    <div class="nk-block-head nk-block-head-line">
                                        @if($data->pdf1 || $data->pdf2 || $data->pdf3)
                                        <h6 class="title overline-title text-base">PDF Information</h6>
                                        @endif
                                    </div><!-- .nk-block-head -->
                                    <div class="profile-ud-list">
                                        @if($data->pdf1)
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">PDF1</span>
                                                <span class="profile-ud-value">
                                                    <embed src="{{ url($data->pdf1) }}" type="application/pdf" style="width: 300px; height: 200px; max-width: 100%;">
                                                    <div class="text-center">
                                                        <a href="{{ url($data->pdf1) }}" target="_blank" class="btn btn-primary"> View </a>
                                                    </div>
                                                </span>
                                            </div>
                                        </div>
                                        @endif
                                        @if($data->pdf2)
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">PDF2</span>
                                                <span class="profile-ud-value">
                                                    <embed src="{{ url($data->pdf2) }}" type="application/pdf" style="width: 300px; height: 200px; max-width: 100%;">
                                                    <div class="text-center">
                                                        <a href="{{ url($data->pdf2) }}" target="_blank" class="btn btn-primary"> View </a>
                                                    </div>
                                                </span>
                                            </div>
                                        </div>
                                        @endif
                                        @if($data->pdf3)
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">PDF3</span>
                                                <span class="profile-ud-value">
                                                    <embed src="{{ url($data->pdf3) }}" type="application/pdf" style="width: 300px; height: 200px; max-width: 100%;">
                                                    <div class="text-center">
                                                        <a href="{{ url($data->pdf3) }}" target="_blank" class="btn btn-primary"> View </a>
                                                    </div>
                                                </span>
                                            </div>
                                        </div>
                                        @endif
                                    </div><!-- .profile-ud-list -->
                                    <div class="text-center">
                                        <button data-toggle="modal" data-target="#apply-service" class="btn btn-primary">Apply</button>
                                    </div>
                                </div><!-- .nk-block -->
                                <div class="nk-divider divider md"></div>
                            </div><!-- .card-inner -->
                        </div><!-- .card-content -->
                    </div><!-- .card-aside-wrap -->
                </div><!-- .card -->
            </div><!-- .nk-block -->
        </div>
    </div>
</div>
</div>




<div class="modal fade" role="dialog" id="apply-service">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
            <div class="modal-body modal-body-lg">
                <h5 class="title">Apply</h5>
                <ul class="nk-nav nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#personal-document">Document Details</a>
                    </li>
                    <!-- <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#address">Address</a>
                    </li> -->
                </ul><!-- .nav-tabs -->
                <div class="tab-content">
                    <div class="tab-pane active" id="personal-document">
                        <form action="{{ route('apply_service') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="id" value="{{ $data->id }}">
                            <input type="hidden" name="service_id" value="{{ $data->service_id }}">
                            <div class="row gy-4">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="form-label" for="customer_name">Customer Name</label>
                                        <div class="form-control-wrap">
                                            <input type="text" name="customer_name" class="form-control @error('customer_name') error @enderror" value="{{ old('customer_name') }}">
                                            @error('customer_name')
                                            <p class="text-danger">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="form-label" for="customer_mobile">Customer Mobile</label>
                                        <div class="form-control-wrap">
                                            <input type="text" name="customer_mobile" class="form-control @error('customer_mobile') error @enderror" value="{{ old('customer_mobile') }}">
                                            @error('customer_mobile')
                                            <p class="text-danger">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="form-label" for="customer_email">Customer Email</label>
                                        <div class="form-control-wrap">
                                            <input type="text" name="customer_email" class="form-control @error('customer_email') error @enderror" value="{{ old('customer_email') }}">
                                            @error('customer_email')
                                            <p class="text-danger">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                

                                @if($data->return_file == 'itr')
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="form-label" for="assessment_year">Assessment Year</label>
                                            <div class="form-control-wrap">
                                                <select name="assessment_year" id="assessment_year" class="form-control" required onchange="itrchange(this.value)">
                                                    <option value=""> Select Assessment Year</option>
                                                    @foreach ($cats as $cat)
                                                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                                    @endforeach
                                                </select>
                                                @error('assessment_year')
                                                    <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="form-label" for="itr">ITR</label>
                                            <div class="form-control-wrap">
                                                <select name="itr" id="itr" class="form-control" required onchange="itrchangeHandler(this.value)">
                                                    
                                                </select>
                                                @error('itr')
                                                    <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
									 <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="form-label" for="finalprice">Final Price</label>
                                            <div class="form-control-wrap" id="finalprice" style="color:red;">0</div>
										</div>
									</div>	
									 <div class="col-sm-12 add-ons-container" style="display:none;">
                                        <div class="form-group">
										 <label class="form-label" >Add Ons</label>
										  <div class="form-control-wrap">
										  @foreach($addons as $addon)
										  <div class="form-check">
											  <input class="form-check-input add-ons" value="{{$addon->id}}" price="{{$addon->price}}"  type="checkbox"  id="addons{{$addon->id}}" name="addons[]" onclick="addonschangeHandler()">
											  <label class="form-check-label" for="addons{{$addon->id}}">
											  {{$addon->title}} ( + Rs. {{$addon->price}})
											  </label>
											</div>
										   @endforeach	
										
										  </div>
										</div>
									 </div>	
									
                                @elseif($data->return_file == 'gst')
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="form-label" for="gst_return_filing">GST Return Filing</label>
                                            <div class="form-control-wrap">
                                                <select name="gst_return_filing" id="gst_return_filing" class="form-control" required onchange="gstchange(this.value)">
                                                    <option value=""> Select GST Return Filing</option>
                                                    @foreach ($cats as $cat)
                                                        <option value="{{ $cat->id }}">{{ $cat->name }} [ {{ $cat->price }} &#8377; ]</option>
                                                    @endforeach
                                                </select>
                                                @error('gst_return_filing')
                                                    <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="form-label" for="return_month">Return Month</label>
                                            <div class="form-control-wrap">
                                                <select name="return_month" id="return_month" class="form-control" required>
                                                    
                                                </select>
                                                @error('return_month')
                                                    <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                @elseif($data->return_file == 'tds')
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="form-label" for="tds_quarter">TDS Quarter</label>
                                            <div class="form-control-wrap">
                                                <select name="tds_quarter" id="tds_quarter" class="form-control" required onchange="tdschange(this.value)">
                                                    <option value=""> Select TDS Quarter</option>
                                                    @foreach ($cats as $cat)
                                                        <option value="{{ $cat->id }}">{{ $cat->name }} [ {{ $cat->price }} &#8377; ]</option>
                                                    @endforeach
                                                </select>
                                                @error('tds_quarter')
                                                    <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="form-label" for="tds_financial_year">TDS Financial Year</label>
                                            <div class="form-control-wrap">
                                                <select name="tds_financial_year" id="tds_financial_year" class="form-control" required>
                                                    
                                                </select>
                                                @error('tds_financial_year')
                                                    <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <div class="col-12 col-sm-12">
                                    <div class="form-group">
                                        <label>Documents ({{ $data->documents }}) <b class="text-danger">*</b></label>
                                        <div class="row after-add-more">
                                            <div class="col-7 col-sm-7">
                                                <br>
                                                <input type="file" name="documents[]" class="form-control upload-zone small bg-lighter dropzone dz-clickable" />
                                            </div>
                                            <div class="col-5 col-sm-5 change">
                                                <br><br>
                                                <a class="btn btn-success add-more">+ Add More</a>
                                            </div>
                                        </div>
                                        @error('documents')
                                            <p class="text-danger">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-sm-7">
                                    <div class="form-group">
                                        <label class="form-label" for="review">Review</label>
                                        <div class="form-control-wrap">
                                            <textarea class="form-control @error('review') error @enderror" name="review" id="review" rows="2" style="min-height: auto;">{{ old('review') }}</textarea>
                                            @error('review')
                                            <p class="text-danger">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-5"></div>
                                
                                <div class="col-12">
                                    <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                                        <li>
                                            <button type="submit" class="btn btn-lg btn-primary">Apply</button>
                                        </li>
                                        <li>
                                            <a href="#" data-dismiss="modal" class="link link-light">Cancel</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </form>
                    </div><!-- .tab-pane -->
                    
                </div><!-- .tab-content -->
            </div><!-- .modal-body -->
        </div><!-- .modal-content -->
    </div><!-- .modal-dialog -->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var itrlist=[];
var finalAmount = 0;
    $(document).ready(function() {
        $("body").on("click", ".add-more", function() {
            var html = $(".after-add-more").first().clone();

            //  $(html).find(".change").prepend("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");

            $(html).find(".change").html("<br><br> <a class='btn btn-danger remove'>- Remove</a>");


            $(".after-add-more").last().after(html);



        });

        $("body").on("click", ".remove", function() {
            $(this).parents(".after-add-more").remove();
        });
    });

   function itrchangeHandler(id)
   {	  
	   $('#finalprice').html(itrlist[id]);
	   finalAmount = itrlist[id];
	   addonschangeHandler();
   }
   function addonschangeHandler()
   {
	   var addonsamount=0;
	   $('.add-ons').each(function( index ){
		   
		   if($(this).is(':checked'))
		   {			   
			   addonsamount += parseInt($(this).attr('price'));
		   }
		   
	   });
	   var totalmount = finalAmount+addonsamount;
	   $('#finalprice').html(totalmount);
   }
    function itrchange(id) {
        let type = 'itr';
		itrlist = [];
		//$('.add-ons-container').hide();
		$('#finalprice').html('0');
		$('.add-ons').prop('checked', false);
        $.ajax({
            url: "get_returnfile_subcategory/"+id+"/"+type,
            dataType: 'json',
            success: function(response) {
                console.log(response);
                let html='<option value="">Select ITR</option>';
                $.each(response, function(key, value) {
                    html += '<option value="'+value.id+'">'+value.name+' [ '+value.price+' &#8377; ]</option>'; 
					itrlist[value.id] = value.price;
                });
                $('#itr').html(html);
				$('.add-ons-container').show();
            }
        });
    }
    
    function gstchange(id) {
        let type = 'gst';
        $.ajax({
            url: "get_returnfile_subcategory/"+id+"/"+type,
            dataType: 'json',
            success: function(response) {
            	console.log(response);
                let html='<option value="">Select Return Month</option>';
                $.each(response, function(key, value) {
                    html += '<option value="'+value.id+'">'+value.name+'</option>'; 
                });
                $('#return_month').html(html);
            }
        });
    }
    
    function tdschange(id) {
        let type = 'tds';
        $.ajax({
            url: "get_returnfile_subcategory/"+id+"/"+type,
            dataType: 'json',
            success: function(response) {
            	console.log(response);
                let html='<option value="">Select TDS Financial Year</option>';
                $.each(response, function(key, value) {
                    html += '<option value="'+value.id+'">'+value.name+'</option>'; 
                });
                $('#tds_financial_year').html(html);
            }
        });
    }
</script>

@endsection