@include("alliedService.include.header") 
        <!-- Start of Main -->
        <main class="main wishlist-page">
            <!-- Start of Page Header -->
            <div class="page-header">
                <div class="container">
                    <h1 class="page-title mb-0">Budget & duration</h1>
                </div>
            </div>
            <!-- End of Page Header -->
  
        <!-- Start of PageContent -->
        <div class="page-content mb-8">
            <div class="container">
            <!-- Promote -->  
            <form action="{{URL('/ad-promotion')}}" method="POST" autocomplete="off" class="box-shadow pd-5">
            <div class="row pd-10-100">
                <div class="col-md-6 vendor-map border-0">  <!-- broder-right -->
                    <div class="row">
                       <div class="col-md-3">
                            <div class="mt-1">
                                <img src="{{asset('public/allied_theme/images/uploads/')}}/{{$alliedPostGall->image}}" alt="product" width="70" height="78"> 
                            </div>
                        </div>
                        <div class="col-md-5"> 
                            <b>Sub Category:</b> {{$subCat}}
                        </div>
                        <div class="col-md-4"> 
                           <b>Title:</b> {{$alliedPostTitle}}
                        </div>
                    </div> 
                    <hr> 
                   <h3 class="text-center mt-4"><i class="fas fa-rupee-sign"></i> <span id="f">{{($adPromotion)?$adProBdgt/$adProDays:50}}</span> X <span id="duration">{{$adProDays}}</span> day(s) = <i class="fas fa-rupee-sign"></i> <span class="dayDuration">{{$adProBdgt}}</span></h3>
                    {{@csrf_field()}}   
                    <input type="hidden" name="id" value="{{($adPromotion)?$adPromotion->id:''}}">
                    <input type="hidden" name="allied_post_id" value="{{$id}}">
                    <div class="form-group">
                        <label>Budget*</label>
                        <input type="range" min="50" step="10" max="200" value="{{($adPromotion)?$adProBdgt/$adProDays:50}}" class="slider-square" id="id1">
                    </div>
                    <div class="mt-6 ads-heading">Schedule</div> 
                    <div class="row mt-1"> 
                        <div class="col-md-1 width-unset">
                            <input type="radio" @if($adPromotion) @if($adPromotion->schedule_by=='duration') checked @endif @endif name="schedule" class="mt-0 radio-checkbox wd-100 duration_bar" value="duration"> 
                        </div> 
                        <div class="col-md-11 width-unset">
                            Run my ad set continuously starting today
                        </div>
                    </div>
                    <div class="form-group" @if($adPromotion) @if($adPromotion->schedule_by=='duration') style="display: block;" @endif @endif id="duration_bar">
                        <label><span id="dayHtml">{{($adProDays)?$adProDays:"1"}}</span> day(s)</label>
                        <input type="range" min="1" max="30" value="{{$adProDays}}" class="slider-square" id="id2">
                    </div> 
                    <div class="row mt-2"> 
                        <div class="col-md-1 width-unset"> 
                            <input type="radio" @if($adPromotion) @if($adPromotion->schedule_by=='calendar') checked @endif @endif name="schedule" class="mt-0 radio-checkbox wd-100 calendar_bar" value="calendar">
                        </div> 
                        <div class="col-md-11 width-unset"> 
                            Set a start & end date 
                        </div>
                    </div> 
                    <div class="form-group" @if($adPromotion) @if($adPromotion->schedule_by=='calendar') style="display: block;" @endif @endif id="calendar_bar"> 
                        <div class="row"> 
                            <div class="col-md-6">
                                Start Date
                                <input type="text" readonly class="calendar start_date" value="{{($adPromotion)?$adPromotion->start_date:''}}" name="start_date">
                            </div> 
                            <div class="col-md-6">
                                End Date
                                <input type="text" readonly class="calendar end_date" value="{{($adPromotion)?$adPromotion->end_date:''}}" name="end_date">
                            </div>
                        </div>
                    </div> 
                    <!-- <div class="mt-6 ads-heading">Targeted keywords</div>  -->
                    <div class="form-group mt-6">
                        <label>Targeted keywords *</label>
                        <i class="fas fa-pencil-alt edit-disabled"></i>
                        <input type="text" class="form-control disabled" disabled name="keyword" value="{{($adPromotion)?$adPromotion->keywords:''}}" required>
                    </div>    
                </div>
                <input type="hidden" name="budget" class="budget" value="{{$adProBdgt}}">
                <input type="hidden" name="days" class="days" value="{{$adProDays}}">
                <div class="col-md-6 vendor-map border-0"> 
                    <div class="ads-heading">Service Area</div>
                    <p>Let customers know where your business provides services</p>
                    <div class="form-group">
                        <label>Locations *</label>
                        <!-- <i class="fas fa-pencil-alt edit-disabled"></i>  -->
                        <select class="js-example-basic-multiple form-control disabled" name="locations[]" multiple="multiple" ><!--  disabled -->
                        @php 
                        $citiesArr=($adPromotion)?explode(',', $adPromotion->locations):[]; @endphp
                            @foreach($cities as $i => $val)
                            <option @if(in_array($val->id, $citiesArr)) selected @endif value="{{$val->id}}">{{$val->city_name}}, {{$val->name}}</option>
                            @endforeach
                        </select>
                                            </div>
                    <div class="row">
                       <div class="col-md-6">
                        <div class="form-group">
                            <label>Age * <span id="ageHtml">{{($adPromotion)?$adPromotion->age:18}}</span> - 65+</label>
                            <i class="fas fa-pencil-alt edit-disabled"></i>
                            <input type="range" min="18" max="65" class="disabled" disabled name="age" id="age" required value="{{($adPromotion)?$adPromotion->age:18}}">
                        </div> 
                       </div>
                      <div class="col-md-6">
                        <div class="form-group">
                            <label>Audience *</label> 
                            <div class="checkbox-in-one-line">
                                <lebel>All</lebel>
                                <input type="radio" class="radio-checkbox" @if($adPromotion) @if($adPromotion->audience=='all') checked @endif @endif value="all" name="audience" required>
                                <lebel>Men</lebel>
                                <input type="radio" class="radio-checkbox" @if($adPromotion) @if($adPromotion->audience=='men') checked @endif @endif value="men" name="audience" required>
                                <lebel>Women</lebel>
                                <input type="radio" class="radio-checkbox" @if($adPromotion) @if($adPromotion->audience=='women') checked @endif @endif value="women" name="audience" required>
                            </div>
                        </div>
                       </div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-outline btn-ellipse float-rt">Apply</button> 
                </div>
               </div>
               </form>
             <!-- /Promote -->
            </div>
        </div>
        <!-- End of PageContent -->
    </main>
    <!-- End of Main -->
@include("alliedService.include.footer") 
<script type="text/javascript">
var id1 = document.getElementById("id1"); 
var id2 = document.getElementById("id2"); 
var y = document.getElementById("f"); 
var duration = document.getElementById("duration"); 
var dayHtml = document.getElementById("dayHtml"); 
id1.oninput = function() {
    y.innerHTML = this.value;
    //console.log(duration.innerHTML*y.innerHTML);
    $('.dayDuration').html(duration.innerHTML*y.innerHTML);
    $('.budget').val(duration.innerHTML*y.innerHTML);
} 
id2.oninput = function() {
    duration.innerHTML = this.value;
    $('.dayDuration').html(duration.innerHTML*y.innerHTML);
    $('.budget').val(duration.innerHTML*y.innerHTML);
    $('.days').val(this.value);
    dayHtml.innerHTML = this.value;
} 

var age = document.getElementById("age"); 
var ageHtml = document.getElementById("ageHtml"); 
age.oninput = function() { 
    ageHtml.innerHTML = this.value; 
}  
/*/Promote*/  
function daysdifference(firstDate, secondDate){  
    var startDay = new Date(firstDate);  
    var endDay = new Date(secondDate);  
  
// Determine the time difference between two dates     
    var millisBetween = startDay.getTime() - endDay.getTime();  
  
// Determine the number of days between two dates  
    var days = millisBetween / (1000 * 3600 * 24);  
  
// Show the final number of days between dates     
    return Math.round(Math.abs(days));  
}  

$(document).ready(function(){
  $(".duration_bar").click(function(){
    $("#duration_bar").slideDown("slow");
    $("#calendar_bar").slideUp("slow");
  });

  $(".calendar_bar").click(function(){
    $("#calendar_bar").slideDown("slow");
    $("#duration_bar").slideUp("slow");
  });
  
  $(".edit-disabled").click(function(){   
    $(this).next().removeAttr("disabled"); 
  }); 
 
   $('.calendar').datepicker({
      format: "dd/mm/yyyy",
      minDate: 0
    }).on('change', function(){ 
        console.log($('.start_date').val()+$('.end_date').val());
        var startDate = new Date($('.start_date').val());
        var endDate = new Date($('.end_date').val());
        var numOfDates = daysdifference(startDate,endDate);
        var cost = $('#id1').val(); 
        console.log('numOfDates='+numOfDates);
        $('#duration').html(numOfDates);  
        $('.dayDuration').html(numOfDates*cost);
        $('.budget').val(numOfDates*cost);
        $('.days').val(numOfDates);
        $('.datepicker').hide();
    });
});
</script>